Back

Show HN: A simple world flags game, my first web dev project as a beginner

163 points8 hoursbillywojcicki.github.io
pantulis7 hours ago

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!

mysterydip6 hours ago

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!

RajT886 hours ago

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.

dylan6045 hours ago

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.

JLCarveth5 hours ago

I was expecting the button highlight to be red on an incorrect guess.

pschuegr5 hours ago

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!

pbiggar4 hours ago

If you could also show the flag in the message, so that I can associate them again, that would really improve retention!

Timpy2 hours ago

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.

soyin7 hours ago

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.

moffkalast5 hours ago

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.

nickybuzz5 hours ago

Many seem to agree that the correct/incorrect answers could be clearer. Will look into this. Thanks for the feedback and kind words!

heresjohnny15 minutes ago

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?

agentwiggles5 hours ago

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!

nickybuzz5 hours ago

Thanks for the kind words :)

snozolli45 minutes ago

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

chadlavi6 hours ago

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.

darekkay30 minutes ago

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.

RajT886 hours ago

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.

nickybuzz5 hours ago

Love that you're having fun with it!

ryandrake5 hours ago

Giving so many choices makes it hard to guess your way through it. Very challenging and fun.

moffkalast5 hours ago

Turns out so, so, many random tiny islands that nobody's ever heard of have quite interesting unique flags.

daveslash4 hours ago

Re >> that nobody's ever heard I think you just hurt their feelings. It's okay São Tomé and Príncipe, 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.

moffkalast1 hour ago

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.

franciscop6 hours ago

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.

nickybuzz6 hours ago

Thanks for the feedback. I'll look into this, responsive design was definitely the biggest challenge for me.

franciscop5 hours ago

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 :)

rement2 hours ago

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

darekkay28 minutes ago

The official Afghanistan flag did also change.

https://en.m.wikipedia.org/wiki/Flag_of_Afghanistan

taldo6 hours ago

Nice little game for curious people. Hard mode: picking the alternatives among geographically-close countries, or countries with similar-looking flags.

goolz6 hours ago

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!

nickybuzz5 hours ago

Thank you :)

anonair1 hour ago

There should be a reverse version also, with a nation in top and choose a flag below

anonair1 hour ago

and the more tricky version to choose from countries/flags with similar design

insane_dreamer3 hours ago

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

simlevesque2 hours ago

Idea: I'd like to be able to select only countries who speak spanish to practice my knowledge of latinoamerica.

swyx3 hours ago

nice touch i liked - you can click the background and rotate the earth for apparently no reason. thats fun!

stefncb5 hours ago

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!

nickybuzz5 hours ago

Thanks for the feedback, screenshot, and kind words! Looking into making the design more responsive.

bumpkinjunkie7 hours ago

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".

smcl6 hours ago

Ah good thinking, maybe a message showing both the correct answer and the user's guess ("Incorrect, the answer was Brazil (you guessed Finland)")

nickybuzz5 hours ago

Thanks for the kind words. Definitely looking into making this clearer, as you and others have suggested.

BaudouinVH6 hours ago

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

forgotpwd166 hours ago

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.

nickybuzz5 hours ago

Thanks for the feedback and screenshot. Responsive design was the biggest challenge for me, will look into this.

belinder6 hours ago

Bottom two options don't show on my screen. I am on 1920x1080 with 150% scaling

nickybuzz5 hours ago

Looking into making the design more flexible. Thanks for the feedback.

kyberias7 hours ago

When I answer incorrectly, it tells me I selected some totally other country incorrectly.

SamBam7 hours ago

It's showing you that you're incorrect, and telling you the correct answer. Though I think it could be clearer too.

nickybuzz5 hours ago

Agreed it could be clearer. Thanks for the feedback!

mayormcmatt2 hours ago

Thanks, I need/want to learn more flags! Great project.

bbx6 hours ago

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!

nickybuzz5 hours ago

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.

Benjammer3 hours ago

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.

SamBam7 hours ago

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.

nickybuzz5 hours ago

These are both great ideas. Thanks for the feedback.

Hitton4 hours ago

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.

_justinfunk6 hours ago

So many comments in your Javascript. You are clearly a beginner. /s

Nice work, the code was very readable and reasonable.

nickybuzz5 hours ago

Thank you!

andnand6 hours ago

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...

hailkuato6 hours ago

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.

nickybuzz5 hours ago

This is correct

abejfehr6 hours ago

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

defenestration5 hours ago

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!

nickybuzz5 hours ago

Thanks for the kind words! That's some helpful feedback, I'll look into adding a warning there.

thealch3m1st2 hours ago

Sheldon Cooper would be excited about this one

smcl6 hours ago

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)

nickybuzz5 hours ago

Nice score! For me, it's always the Central American flags that trip me up.

FatActor5 hours ago

It says "Learn the flags..."

But doesn't give me the correct answer when I'm wrong, so I can't learn.

awb5 hours ago

It does in tiny text at the bottom middle

FatActor4 hours ago

But you've moved on to a new flag, so I cannot let the association sink in as I have forgotten the flag already.

nothrowaways5 hours ago
readney6 hours ago

Wrong flag for Afghanistan, recently famously updated

pure_vida6 hours ago

Disagree. terrorist regime notwithstanding, the flag he chose was the historically correct and currently accepted one amongst afghans and governments.

Freak_NL6 hours ago

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.

nickybuzz5 hours ago

Eh, I suppose. I'll update it when a high-res emoji image becomes available.

jll297 hours ago

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.

MattyMc5 hours ago

Fabulous job! Love the scrolling background and the cute buttons!

flyinglizard2 hours ago

This needs a leaderboard!

greenpeas6 hours ago

The image for the flag of Micronesia (./flags/fm.png) is missing.

nickybuzz6 hours ago

Good catch. Fixed!

HanClinto5 hours ago

This is really really well done! Awesome work!

nickybuzz5 hours ago

Thank you!

mkoryak7 hours ago

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.

nickybuzz6 hours ago

Thank you! That is a neat idea.

intelVISA6 hours ago

Nice! Quite fun, hope you keep building things :)

nickybuzz6 hours ago

Thank you :)

dtagames6 hours ago

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!

nickybuzz5 hours ago

I'm really happy you're enjoying it. Thanks for the kind words. Will be looking into your suggestion.

swyx3 hours ago

add a leaderboard and a party game mode (live small group competitive sessions) and you'll really have a stew going

gdsdfe2 hours ago

there might be a bug in there, I'm clicking a country and it says you clicked another country my mistake

kome6 hours ago

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.

nickybuzz6 hours ago

Thank you! And yes, you're right, I will look into this. Responsive design is definitely the biggest challenge for me.

gooooooore5 hours ago

[flagged]