There's a new version of this quiz with more frames: click here to see it! How many countries can y... wait, the map is spinning! Can you still name every country before the time runs out? As you answer, the map will be filled in.
For Firefox users: the animation may not work properly when looking at the quiz, but it should work fine when you start the quiz. If it still doesn't show the animation properly, consider using a different browser like Chrome.
Use the common, English name. Has to be a sovereign nation, so Scotland and England don't count, etc...
You can click the map to zoom
Animated using CSS. Maps created using Python. Map data from NaturalEarth. More info in the comments.
Update Sep21: I made the map bigger and added Andorra on the map. I've also tidied up the CSS a bit (there should be no visible changes). There is now a warning for Firefox users, since that browser doesn't seem to like this animation (thanks GeoPhilia for the heads up!)
Update Sep30: I modified the CSS and now mousing over a country on the results page should always show the correct name. Problems with Firefox should also be fixed.
Hey there! Thanks for taking (I hope!) my latest quiz, "Countries of the World in a Spinning Globe". This took a relatively long time to make, as I had to re-do the SVG a couple times to fine-tune the quiz the way I wanted it. The final result is a six-frame animation with an orthographic map projection (originally I wanted to make it 36 frames, but I couldn't figure out how to reduce the file size enough to upload it to JetPunk).
As this is more of a proof-of-concept quiz, there are some errors: for example, some countries do not appear when near the edge of the projection, and mousing over a country on the results page will, most of the times, not give the correct answer. These are known problems that came up during the testing phase, but I can't do much to fix them. The "Show missing countries" feature is also incompatible with this quiz, unfortunately.
As I said in the caveats, this quiz was animated using CSS, while the projections were made using Python and the Cartopy package. If you would like to know more, post a comment: if I see there's some interest, I can make a tutorial-style blog on how I made this quiz!
As usual, any feedback is appreciated, be it "it's spinning too fast!" or "it's spinning too slow!" or "I don't like the type of projection". Cheers!
Yep, I considered asking Stewart since with admin privileges he could also modify the Javascript to make the "Show missing countries" feature work, but since I don't use Discord I put off contacting him. I'll try to get the 36-frames SVG ready (it lags my computer a bit) and then ask him on the subreddit (or see if he posts a comment here)
One of the best quiz I found this three last months, I think. Excellent! I don't know what to write, it's just awesome! Congratulations! Nominated, sure!
I just checked and you're right, it doesn't seem to be working correctly on Firefox, some frames don't appear. I will try and look into what's causing this issue. It works fine Chrome (both desktop and mobile)
I spent an hour or so debugging the CSS before noticing that when you're actually taking the quiz (so after having clicked the "Start Quiz" button) the animation works, though it's a bit choppier than on Chrome. I suppose you saw the animation not working and didn't start the quiz, right?
In any case, the animation not working properly before the start is, I think, due to Firefox not displaying CSS transitions when they take up less than half the page. I found very little literature on this on the internet, but if you keep moving the mouse you can see the animation working fine.
So, to reiterate: the animation works (at least for me) on Firefox, but you have to actually start the quiz (or keep moving the mouse, haha!)
Maybe it's because I don't ask for them, and I haven't promoted this quiz anywhere. In any case, I'm still working on the SVG for the 36-frames version of this quiz
A 36-frame version SVG is being made right now! Although it will require Stewart's help to be uploaded. As for all the other quizzes you mentioned, I thought about making them too we'll see
Wow!!! This is amazing. However, you can bypass the 600kb filesize limit, you have to ask Stewart to do it for you. The easiest way is to join the JetPunk Discord and send him the svg file and add him as a collaborator and ask him to do upload it to the quiz, or (I think?) you might be able to DM him on Reddit, though I'm not sure about that option. This is how I was able to upload a 604 kb map onto one of my quizzes.
Thanks! I've already got in touch with Stewart, since he's asked me to help out with the Italian translation of JetPunk, so when the SVG is ready I don't think there's going to be any problem reaching him. I still have to finish the SVG though! The island nations and polynesia in particular are a little problematic, especially adding the light-water (which I have to do by hand basically). Glad you liked the quiz!
Update Sep30: I modified the CSS and now mousing over a country on the results page should always show the correct name. Problems with Firefox should also be fixed.
As this is more of a proof-of-concept quiz, there are some errors: for example, some countries do not appear when near the edge of the projection, and mousing over a country on the results page will, most of the times, not give the correct answer. These are known problems that came up during the testing phase, but I can't do much to fix them. The "Show missing countries" feature is also incompatible with this quiz, unfortunately.
As usual, any feedback is appreciated, be it "it's spinning too fast!" or "it's spinning too slow!" or "I don't like the type of projection". Cheers!
In any case, the animation not working properly before the start is, I think, due to Firefox not displaying CSS transitions when they take up less than half the page. I found very little literature on this on the internet, but if you keep moving the mouse you can see the animation working fine.
So, to reiterate: the animation works (at least for me) on Firefox, but you have to actually start the quiz (or keep moving the mouse, haha!)
Ideas - Make a superfast version with more frames.
Random Countries highlighted/merged/missing on the spinning globe.