12 ms·
Show HN: A simple world flags game, my first web dev project as a beginner
- taldo 4y agoNice little game for curious people. Hard mode: picking the alternatives among geographically-close countries, or countries with similar-looking flags.
- gdsdfe 4y agothere might be a bug in there, I'm clicking a country and it says you clicked another country my mistake
- pantulis 4y agoWell 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!
- soyin 4y agoAgreed, 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.
- mysterydip 4y agoAgreed. 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 4y agoIt'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.
- dylan604 4y agoSecond 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.
- JLCarveth 4y agoI was expecting the button highlight to be red on an incorrect guess.
- hdaz0017 4y agodoes not resize so depending on resolution I had to read here to understand there was informaiton below the questions - resolution 1600x900 Hope this helps :)
- perlgeek 4y agoFor 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?
- moffkalast 4y agoMight 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 4y agoMany seem to agree that the correct/incorrect answers could be clearer. Will look into this. Thanks for the feedback and kind words!
- pschuegr 4y agoYup, 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 4y agoIf you could also show the flag in the message, so that I can associate them again, that would really improve retention!
- Timpy 4y agoI'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.
- kyberias 4y agoWhen I answer incorrectly, it tells me I selected some totally other country incorrectly.
- SamBam 4y agoNeat! 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 4y agoThese are both great ideas. Thanks for the feedback.
- mkoryak 4y agothis 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 4y agoThank you! That is a neat idea.
- bumpkinjunkie 4y agoPretty 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".
- jll29 4y agoFun 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.
- andnand 4y agoVery 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/world-110m.json https://github.com/billywojcicki/vexillologist/blob/master/w...
- hailkuato 4y agoNot sure but it may be TopoJSON: - https://github.com/topojson/topojson https://github.com/topojson/topojson - https://github.com/topojson/topojson-specification https://github.com/topojson/topojson-specification My guess is that Github just recognizes and supports previewing this particular spec.
- nickybuzz 4y agoThis is correct
- abejfehr 4y agoIt's geojson, Github renders that: https://github.blog/2013-06-13-there-s-a-map-for-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
- readney 4y agoWrong flag for Afghanistan, recently famously updated
- pure_vida 4y agoDisagree. terrorist regime notwithstanding, the flag he chose was the historically correct and currently accepted one amongst afghans and governments.
- Freak_NL 4y agoAgreeing 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.
- nickybuzz 4y agoEh, I suppose. I'll update it when a high-res emoji image becomes available.
- intelVISA 4y agoNice! Quite fun, hope you keep building things :)
- nickybuzz 4y agoThank you :)
- belinder 4y agoBottom two options don't show on my screen. I am on 1920x1080 with 150% scaling
- nickybuzz 4y agoLooking into making the design more flexible. Thanks for the feedback.
- smcl 4y agoNicely 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 4y agoNice score! For me, it's always the Central American flags that trip me up.
- dtagames 4y agoThis 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!
- franciscop 4y agoIt 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 4y agoThanks for the feedback. I'll look into this, responsive design was definitely the biggest challenge for me.
- franciscop 4y agoI 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 :)
- chadlavi 4y agoThis 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 4y agoI 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.
- moffkalast 4y agoTurns out so, so, many random tiny islands that nobody's ever heard of have quite interesting unique flags.
- daveslash 4y agoRe >> 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.
- BaudouinVH 4y agoon 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 https://i.imgur.com/Jx1qyNF.png - I'm running MX Linux
- forgotpwd16 4y agoYeah, 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 4y agoThanks for the feedback and screenshot. Responsive design was the biggest challenge for me, will look into this.
- greenpeas 4y agoThe image for the flag of Micronesia (./flags/fm.png) is missing.
- nickybuzz 4y agoGood catch. Fixed!
- kome 4y agocool, 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 4y agoThank you! And yes, you're right, I will look into this. Responsive design is definitely the biggest challenge for me.
- _justinfunk 4y agoSo many comments in your Javascript. You are clearly a beginner. /s Nice work, the code was very readable and reasonable.
- nickybuzz 4y agoThank you!
- goolz 4y agoInstant 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 4y agoThank you :)
- bbx 4y agoVery 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 4y agoThank 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.
- gooooooore 4y ago[flagged]
- defenestration 4y agoThat’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 4y agoThanks for the kind words! That's some helpful feedback, I'll look into adding a warning there.
- agentwiggles 4y agoDespite 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 4y agoThanks for the kind words :)
- nothrowaways 4y agoFun with flags. https://youtu.be/_e8PGPrPlwA https://youtu.be/_e8PGPrPlwA
- stefncb 4y agoThis is what I see: https://0x0.st/oFPu.png 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 4y agoThanks for the feedback, screenshot, and kind words! Looking into making the design more responsive.
- HanClinto 4y agoThis is really really well done! Awesome work!
- nickybuzz 4y agoThank you!
- MattyMc 4y agoFabulous job! Love the scrolling background and the cute buttons!
- FatActor 4y agoIt says "Learn the flags..." But doesn't give me the correct answer when I'm wrong, so I can't learn.
- Hitton 4y agoNot 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.
- Benjammer 4y agoDoes 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.
- nickybuzz 4y agoThe order of flags is randomized on page load, but incorrectly-answered flags are sent to the back of the question set. Those remain in the order they were answered.
- swyx 4y agonice touch i liked - you can click the background and rotate the earth for apparently no reason. thats fun!
- nickybuzz 4y agoYup, no reason at all. Glad you liked it!
- insane_dreamer 4y agoNice. 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
- nickybuzz 4y agoNeat ideas. Definitely considering them for future updates!
- rement 4y agoAwesome 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 https://en.wikipedia.org/wiki/Flag_of_Mississippi
- thealch3m1st 4y agoSheldon Cooper would be excited about this one
- mayormcmatt 4y agoThanks, I need/want to learn more flags! Great project.
- flyinglizard 4y agoThis needs a leaderboard!
- simlevesque 4y agoIdea: I'd like to be able to select only countries who speak spanish to practice my knowledge of latinoamerica.
- nickybuzz 4y agoLove the idea of a native language filter. Will keep this in mind!
- anonair 4y agoThere should be a reverse version also, with a nation in top and choose a flag below
- snozolli 4y agoI 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 https://imgur.com/a/zwzyCx6
- nickybuzz 4y agoDamn, the S20's viewport is 15px shorter than the minimum width I had in mind. Responsive design is not fun. Will look into making the site more flexible - thanks for your feedback!
- jacamera 4y agoReally beautiful UI but unfortunately I can't use it on my phone either. iPhone SE (1st gen.) 320px wide viewport. I know it's a small phone, but I don't think I've ever come across a web page that blocked me from interacting with it due to the screen size. Regardless of whether you decide it's worth it to support smaller screen sizes I would absolutely recommend removing the page-mask/sorry-prompt. You never know what kind of device/browser your web page will be rendered on and overflowing the viewport is the expected behavior when the viewport is very small.
- heresjohnny 4y agoThis 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?
- artificial 4y agoGreat job! What did you enjoy most about this project? Were there any aspects that were satisfying once the concepts clicked?
- nickybuzz 4y agoI was just happy to finally put something together. I've taken scattered programming lessons here and there but never sat down and created something on my own. Very happy to see people using it and learning with it! Outside of coding - I'm getting lots of interesting feedback on UI/UX.
- Symbiote 4y agoI had a whole series in alphabetical order by ISO 3166 code, which made that section easier.
- eterm 4y agoWow, 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
- deleted 4y ago[deleted]
- Georgelemental 4y agoBe wary of https://xkcd.com/787/ https://xkcd.com/787/ … People can get worked up over what is a "real" country, and what the "real" flags are
- sedatk 4y agoVery nice. The text goes out of the page on Zoom levels above 100% though.
- r00fus 4y agoMy 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).
- albert_e 4y agoYes 4 -5 would be most common i think
- themoonisachees 4y agoLove it, absolutely love the scrollable earth behind as well!
- nickybuzz 4y agoThat's the part I'm most proud of - thank you!
- rdlw 4y agoIs the order randomized at the start? I keep getting runs of almost-alphabetical countries starting with A, B, or C when I restart.
- deleted 4y ago[deleted]
- cryptoboy2283 4y agoSmall suggestion to obfuscate image names, because: Right-click on the flag -> Open image in a new tab -> ISO-2 code image file Makes it easier to narrow it down to correct answer.
- theonething 4y agoAfter a few minutes of playing, I finally noticed that after you answer, the country of the flag is highlighted on the spinning globe. It's a nice touch. But it only happens if the country is within view range. I think a nice stretch goal would be to make the globe quickly rotate to the country as well. Overall, great job!
- marchie_uk 4y agoGreat fun - bravo! One observation from me, using Firefox on a 2019 MacBook Pro: my computer got very warm while playing, and the cooling fans were running much higher than normal. It looks like the page is using a lot of CPU.
- xupybd 4y agoWhat a stunning project, it's beyond a beginner result. It's polished and fun to play. Excellent work!
- dieselgate 4y agoOh my gosh - the touch movement of the globe on mobile is one of the coolest things I’ve seen in a while. I hate smart phones and apps and this is a really good website implementation on mobile. Well done even though the game is super difficult!
- albert_e 4y agoI didnt realize this till I saw your comment. Very cool indeed! EDIT: Just noticed that right and wrong answers are also plotted on the globe with a green/red circle on the rotating globe as soon as you pick an answer. (Wow!)
- x-complexity 4y agoOh boy, this takes me back to Playfish's Geo Challenge. Man, that game was fun...
- ggop 4y agoGreat game. One suggestion is to present fake flags as another toggle. Helps spot real vs fake flags
- quickthrower2 4y agoNice, reminds me of kahoot
- albert_e 4y agoExcellent! If this is really a "beginner" project -- you have a very bright future. Kudos! If you care to, it would be great to see your learning approach / experience / git repo / tutorial for building the same or something similar. Idea: Add a "HINT" button that will gradually reveal more info -- - turn the globe background towards the said country - highlight the "continent" the country belongs to - highlight the country itself Or: - or strike-off a few of the incorrect choices Also: - Correct answers and wrong answers could be highlighted on he globe with green and red colors for countries EDIT: I just noticed that you are already doing the last part (albeit with a temporary red/green circle that vanishes -- instead of a permanent coloring of the country). Wow and great work!
- albert_e 4y agoSlightly Off-topic: Is there any "clustering" of flags into visually similar designs? Telling similar flags apart and correctly naming the country when the other option is presented as choice ... must be harder work and should ideally have more points :)
- spookybones 4y agoCongrats! This is great. What resources are you using to learn web dev? I ask because I'm also a beginner.
- nickybuzz 4y agoThank you! My process was: try to write it myself -> google it until it works -> ask ChatGPT how it can be better. I did this one component at a time, starting with the questions array, then answer buttons, timer logic, game over prompt, settings menu, etc. I learned a hell of a lot more and a hell of a lot faster doing this project than I ever had in online courses/lessons/etc.