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!
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.
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?
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.
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.
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.
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!
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.
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.
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.
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.
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 :)
After 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.
Nice little game for curious people. Hard mode: picking the alternatives among geographically-close countries, or countries with similar-looking flags.
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!
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".
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!
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.
Damn, 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!
Really 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.
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.
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.
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.
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!
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 :)
Oh 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!
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!)
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.
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)
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.
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?
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.
The 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.
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.
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.
I 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.
Thank 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.
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.
Does not look like a beginner's project to me, congrats again!