[HN Gopher] Show HN: A simple world flags game, my first web dev...
___________________________________________________________________
Show HN: A simple world flags game, my first web dev project as a
beginner
Author : nickybuzz
Score : 185 points
Date : 2023-01-25 13:37 UTC (9 hours ago)
(HTM) web link (billywojcicki.github.io)
(TXT) w3m dump (billywojcicki.github.io)
| dtagames wrote:
| This is fantastic and highly addictive! My only suggestion (as
| others have said) would be to indicate the CORRECT flag's name
| clearly and give the user a chance to absorb it before going onto
| the next one. Maybe a box around the right choice or the country
| name near the flag? Something like that.
|
| The design does make me want to "get 'em all" and learn them
| correctly and that little change would help.
|
| Kudos on a fantastic first app which is very professional and
| usable!
| nickybuzz wrote:
| I'm really happy you're enjoying it. Thanks for the kind words.
| Will be looking into your suggestion.
| swyx wrote:
| add a leaderboard and a party game mode (live small group
| competitive sessions) and you'll really have a stew going
| Symbiote wrote:
| I had a whole series in alphabetical order by ISO 3166 code,
| which made that section easier.
| snozolli wrote:
| I can't use the page on my Samsung S20:
|
| _Your current dimensions are not supported_
|
| It sure looks like it's rendering just fine:
|
| https://imgur.com/a/zwzyCx6
| andnand wrote:
| Very neat! Can someone explain the json is being rendered? I had
| no idea json could be rendered as an image?
| https://github.com/billywojcicki/vexillologist/blob/master/w...
| hailkuato wrote:
| Not sure but it may be TopoJSON: -
| https://github.com/topojson/topojson -
| https://github.com/topojson/topojson-specification
|
| My guess is that Github just recognizes and supports previewing
| this particular spec.
| nickybuzz wrote:
| This is correct
| abejfehr wrote:
| It's geojson, Github renders that:
| https://github.blog/2013-06-13-there-s-a-map-for-that/
|
| Edit: I was wrong, it's topojson as per the other reply, based
| on the data-type attribute that's set on the div outside the
| map
| taldo wrote:
| Nice little game for curious people. Hard mode: picking the
| alternatives among geographically-close countries, or countries
| with similar-looking flags.
| readney wrote:
| Wrong flag for Afghanistan, recently famously updated
| nickybuzz wrote:
| Eh, I suppose. I'll update it when a high-res emoji image
| becomes available.
| pure_vida wrote:
| Disagree. terrorist regime notwithstanding, the flag he chose
| was the historically correct and currently accepted one amongst
| afghans and governments.
| Freak_NL wrote:
| Agreeing with the current regime is not a requirement for a
| sovereign nation to update their flag is it? There is no
| government in exile, and the current regime is really the
| only entity in charge of that nation's flag.
|
| Flags change.
| gooooooore wrote:
| [flagged]
| sedatk wrote:
| Very nice. The text goes out of the page on Zoom levels above
| 100% though.
| stefncb wrote:
| This is what I see: https://0x0.st/oFPu.png
|
| The bottom row gets cropped. Resolution is 1366x768. Let me know
| if you need additional info.
|
| The UI looks great though!
| nickybuzz wrote:
| Thanks for the feedback, screenshot, and kind words! Looking
| into making the design more responsive.
| anonair wrote:
| There should be a reverse version also, with a nation in top and
| choose a flag below
| anonair wrote:
| and the more tricky version to choose from countries/flags with
| similar design
| thealch3m1st wrote:
| Sheldon Cooper would be excited about this one
| defenestration wrote:
| That's lovely and frustrating. 1) The right answer could be
| visualized higher on the screen, to reduce eye movement. 2) My 15
| minute progress was erased after checking the settings and trying
| out the options. Argh! But overall well done on this project!
| nickybuzz wrote:
| Thanks for the kind words! That's some helpful feedback, I'll
| look into adding a warning there.
| rement wrote:
| Awesome little project! I went through the US state flags and
| found that you are using the old Mississippi flag.
|
| https://en.wikipedia.org/wiki/Flag_of_Mississippi
| darekkay wrote:
| The official Afghanistan flag did also change.
|
| https://en.m.wikipedia.org/wiki/Flag_of_Afghanistan
| gdsdfe wrote:
| there might be a bug in there, I'm clicking a country and it says
| you clicked another country my mistake
| MattyMc wrote:
| Fabulous job! Love the scrolling background and the cute buttons!
| intelVISA wrote:
| Nice! Quite fun, hope you keep building things :)
| nickybuzz wrote:
| Thank you :)
| jll29 wrote:
| Fun demo!
|
| When you get it wrong, show the correct country name under the
| flag. Optionally, show the flag of the country you got wrong and
| your wrong guess underneth.
| smcl wrote:
| Nicely done! 11 mins 4 seconds with 97% accuracy (my apologies to
| some smaller caribbean and pacific islands for forgetting your
| flag, and for mixing up whether Indo or Singapore had the
| crescent moon + stars)
| nickybuzz wrote:
| Nice score! For me, it's always the Central American flags that
| trip me up.
| Benjammer wrote:
| Does this show a random flag each time? You could use a spaced-
| repitition algorithm to pick which flag to show based on
| correct/incorrect previous answers.
| pantulis wrote:
| Well executed! Just as a suggestion, incorrect answers could be
| displayed more prominently so one has more visual feedback about
| what to learn.
|
| Does not look like a beginner's project to me, congrats again!
| moffkalast wrote:
| Might make sense to show incorrect answers, flag and country
| name persistently somewhere on the side of the screen. Then you
| can also lose if you get too many to show on screen.
| nickybuzz wrote:
| Many seem to agree that the correct/incorrect answers could be
| clearer. Will look into this. Thanks for the feedback and kind
| words!
| soyin wrote:
| Agreed, this looks really great! I second that being able to
| see the flag and the correct answer more prominently after an
| incorrect guess would help! Super well done.
| pschuegr wrote:
| Yup, to add to the other comments here:
|
| "You answered [right answer] incorrectly!" is confusing, it
| should be "Sorry! The right answer was [right answer]!"
|
| Looks great though, nice work!
| pbiggar wrote:
| If you could also show the flag in the message, so that I can
| associate them again, that would really improve retention!
| Timpy wrote:
| I'm on a Macbook/Firefox with my resolution scaled up a bit and
| I didn't realize the answers were being displayed at all until
| I zoomed the page to 80%. Scrolling does not work. I did about
| 20 of them wondering when a results page would appear. Very fun
| and addicting project.
| mysterydip wrote:
| Agreed. When I first did it I didn't realize the answer was
| given after I pressed a choice. I thought it would give me a
| summary after so many guesses, like a quiz.
|
| Also agreed that it looks much better than a beginner's
| project!
| RajT88 wrote:
| It's a wording problem, quick fix. Instead of:
|
| You answered (nation) flag incorrectly!
|
| Have it be like:
|
| You guessed (nation), but the correct answer was (nation)!
|
| Absolutely it looks great.
| JLCarveth wrote:
| I was expecting the button highlight to be red on an
| incorrect guess.
| hdaz0017 wrote:
| does not resize so depending on resolution I had to read
| here to understand there was informaiton below the
| questions - resolution 1600x900
|
| Hope this helps :)
| dylan604 wrote:
| Second this. When I first noticed this text at the bottom,
| I assumed a bug knowing that the button I just pressed was
| not what text was displayed. It took a second to realize
| that it was telling me the correct flag, not the button
| pressed.
| perlgeek wrote:
| For learning, it would also help to show the flag + correct
| nation name next to each other; maybe a list of past flags
| and their correct answers at the side or bottom?
| eterm wrote:
| Wow, that was a real grind to finish, including a lot of test of
| memory filtering out countries I'd guessed correctly previously.
|
| It still took me an incredibly long time, with dozens of wrong
| guesses for the same flags over and over.
|
| I finally finished with Khazakstan, I wish the stats showed how
| many guesses total, even if I can work it out from the accuracy I
| suppose.
|
| 193 world flags multiple choice finished in 43:07 42% accuracy
| belinder wrote:
| Bottom two options don't show on my screen. I am on 1920x1080
| with 150% scaling
| nickybuzz wrote:
| Looking into making the design more flexible. Thanks for the
| feedback.
| franciscop wrote:
| It crops up for me (and doesn't allow me to scroll down) so I
| couldn't see the feedback of whether it was correct or not.
| nickybuzz wrote:
| Thanks for the feedback. I'll look into this, responsive design
| was definitely the biggest challenge for me.
| franciscop wrote:
| I am on a laptop, just I'm zoomed in by default and couldn't
| see the whole thing. In fact the fix would be to either NOT
| css-fix things, or allow scroll :)
| HanClinto wrote:
| This is really really well done! Awesome work!
| nickybuzz wrote:
| Thank you!
| heresjohnny wrote:
| This is really cool! Nice touch with the moving globe behind the
| question. Maybe create a page showing the flags and their
| countries the user got wrong, for reviewing purposes?
| r00fus wrote:
| My daughter is a huge fan of flags so we'll be doing a lot of
| trying this out!
|
| Any way you can configure the number of possible answers? I think
| 10 options is a bit much (as a clueless American).
| agentwiggles wrote:
| Despite any mild clunkiness in the actual game (which has been
| thoroughly covered in other comments, so I won't repeat it), I
| just wanted to say this is a really nice looking project.
|
| I have a complex about my inability to do nice design, I really
| need to just start doing it on the side I think, as I'm sure I'd
| get better with practice. But I'm always impressed when stuff
| looks good as a result of my own inability. So nice work! Keep
| learning!
| nickybuzz wrote:
| Thanks for the kind words :)
| goolz wrote:
| Instant bookmark, well done.
|
| A nice little exercise when I need to get me head out of the IDE.
| You should be really proud of this, god, my first site. . .
|
| Well, anyway, have a nice day and keep it up!
| nickybuzz wrote:
| Thank you :)
| mayormcmatt wrote:
| Thanks, I need/want to learn more flags! Great project.
| Georgelemental wrote:
| Be wary of https://xkcd.com/787/ ... People can get worked up
| over what is a "real" country, and what the "real" flags are
| kyberias wrote:
| When I answer incorrectly, it tells me I selected some totally
| other country incorrectly.
| SamBam wrote:
| It's showing you that you're incorrect, and telling you the
| correct answer. Though I think it could be clearer too.
| nickybuzz wrote:
| Agreed it could be clearer. Thanks for the feedback!
| bbx wrote:
| Very nice! I like how the last guessed country is displayed in
| the map in the back. It's a shame it doesn't pan to that
| location, because it's often located outside the viewport. It
| would be useful to have a way to zoom out and view the whole map,
| because it would teach the user about the country's location as
| well.
|
| It's a fun and well executed project, congrats!
| nickybuzz wrote:
| Thank you for the kind words! I originally had the globe pan to
| the country in question, but found out it creates quite a
| visual mess for users that answer rapidly.
| SamBam wrote:
| Neat!
|
| It would be nice to have the option to focus on a single content.
| It's much easier to learn things if you can go back and repeat,
| but repetition is prohibitive if you have to do the whole world
| again.
|
| As a small comment, I went to click on a flag on mobile to see if
| I could see it bigger, and the name of the file came up, with the
| country's two-letter code, giving away the answer. I'd make it so
| the flag doesn't respond to touch/mouse events.
| nickybuzz wrote:
| These are both great ideas. Thanks for the feedback.
| mkoryak wrote:
| this is pretty cool. I think you have a big opportunity here to
| have an easter egg if you detect someone holding down a number
| key for over 10 seconds as I did.
| nickybuzz wrote:
| Thank you! That is a neat idea.
| chadlavi wrote:
| This game was fun and made me wonder: have I ever seen a damn
| flag in my life? Seems like a simple thing, then you get in there
| and don't know most of them.
| RajT88 wrote:
| I was surprised at how much my random guesses were correct,
| based on the style of the flags. (Mostly getting it wrong, but
| maybe 20% success rate)
|
| There is definitely a clustering of design styles. British
| territories for example tend to have elements of the Union Jack
| incorporated. Germany, Luxembourg, Italy, that area tend to
| have more the simple 3 stripe designs.
|
| I found myself occasionally guessing a right answer for flags
| in regions I knew very little about. I guess that sort of
| knowledge about design trends seeped in somehow.
| nickybuzz wrote:
| Love that you're having fun with it!
| ryandrake wrote:
| Giving so many choices makes it hard to guess your way
| through it. Very challenging and fun.
| moffkalast wrote:
| Turns out so, so, many random tiny islands that nobody's ever
| heard of have quite interesting unique flags.
| daveslash wrote:
| Re >> _that nobody 's ever heard_ I think you just hurt their
| feelings. It's okay Sao Tome and Principe, I've heard of you.
|
| But jokes aside: yes, you are quite correct. There are a
| surprising amount of small island nations, republics, and
| dependencies that many of us have never heard of.
| moffkalast wrote:
| Ha I actually do live in a tiny country that nobody's ever
| heard of myself, it's fine we're used to it :P
|
| In fact in lots of cases it's can even be quite nice since
| there's practically no international drama. Security
| through obscurity as they say.
| darekkay wrote:
| I recommend Anki. I've been learning flags (and capitals etc)
| ~1 year ago. After a few months break I have finished this game
| with a 97% accuracy (missed 5 countries). I would not get as
| good without multiple-choice, but it's still nice to see how
| many flags I did still recall.
| artificial wrote:
| Great job! What did you enjoy most about this project? Were there
| any aspects that were satisfying once the concepts clicked?
| nothrowaways wrote:
| Fun with flags.
|
| https://youtu.be/_e8PGPrPlwA
| FatActor wrote:
| It says "Learn the flags..."
|
| But doesn't give me the correct answer when I'm wrong, so I can't
| learn.
| awb wrote:
| It does in tiny text at the bottom middle
| FatActor wrote:
| But you've moved on to a new flag, so I cannot let the
| association sink in as I have forgotten the flag already.
| BaudouinVH wrote:
| on my 1366 x 768 screen I cannot see the bottow row, only the
| first - hope it helps
|
| here is a screenshot : https://i.imgur.com/Jx1qyNF.png - I'm
| running MX Linux
| forgotpwd16 wrote:
| Yeah, seems site isn't adapting to dimensions. If you zoom out
| it also shows whether you answer correctly/wrong, time, and
| percentage of correct answers.
| nickybuzz wrote:
| Thanks for the feedback and screenshot. Responsive design was
| the biggest challenge for me, will look into this.
| swyx wrote:
| nice touch i liked - you can click the background and rotate the
| earth for apparently no reason. thats fun!
| flyinglizard wrote:
| This needs a leaderboard!
| insane_dreamer wrote:
| Nice. I thought I was pretty good at country flags, but it turns
| out I'm not :)
|
| For practice, it might be nice to have some filter options where
| it only shows you flags from a subset of countries, i.e.,
|
| - continents - largest 50 / 100 / 150 / 200 countries by
| population
|
| the latter would be nice because it's hard to remember all the
| small island nations
| simlevesque wrote:
| Idea: I'd like to be able to select only countries who speak
| spanish to practice my knowledge of latinoamerica.
| kome wrote:
| cool, well done!
|
| but it doesn't fit my screen size. Perhaps you need to fix this,
| i'm not the only one here with this problem.
| nickybuzz wrote:
| Thank you! And yes, you're right, I will look into this.
| Responsive design is definitely the biggest challenge for me.
| _justinfunk wrote:
| So many comments in your Javascript. You are clearly a beginner.
| /s
|
| Nice work, the code was very readable and reasonable.
| nickybuzz wrote:
| Thank you!
| greenpeas wrote:
| The image for the flag of Micronesia (./flags/fm.png) is missing.
| nickybuzz wrote:
| Good catch. Fixed!
| Hitton wrote:
| Not bad. I think it could be nice if there was possibility of
| mode with just more or lesser known flag. Like only countries
| with > 1 million population or 20 or more percentile of countries
| by population.
| bumpkinjunkie wrote:
| Pretty cool, love that it keeps track of your score at the
| bottom. One comment is that the user feedback when answering
| incorrectly displays the name of the correct country, not the
| incorrectly guessed country.
|
| Example: Flag is Brazil. Finland is guessed by user. Message to
| user: "You guessed Brazil incorrectly".
| nickybuzz wrote:
| Thanks for the kind words. Definitely looking into making this
| clearer, as you and others have suggested.
| smcl wrote:
| Ah good thinking, maybe a message showing both the correct
| answer and the user's guess ("Incorrect, the answer was Brazil
| (you guessed Finland)")
___________________________________________________________________
(page generated 2023-01-25 23:01 UTC)