Hi Stewart, I'm looking for a bit of help on randomized maps. I can't figure out how to make random groups of things light up/ do stuff. I want to make a randomized version of this quiz.
Okay, so to do this requires some light CSS work. I'll briefly explain and then any points your stuck on feel free to ask for more help :)
First off, everything you want to be hidden by default needs a common class so we can use CSS to reference them all at once. For what you're doing, it seems "country" might be suitable since it's already there.
Second, use the CSS ".country{opacity:0}" to hide all countries by default. Just add this inside <style> tags to implement it.
Thirdly, use "random-svg-highlight" to show the countries again. The CSS for this is ".svg-holder .random-svg-highlight{fill:#ffff80;opacity:1}". This will override the first one and make any selected groups show up.
I think the countries after that should light up on their own, provided you've placed an appropriate id or class associated with each path in Step 2.
So, every path in an SVG can have a unique ID, but can also have classes under the attribute "class". You will notice this in the JetPunk world map, as every country will have the class "country border", indicating it has both the class "country" and the class "border" (classes are space-separated). Now, classes are great because they're not unique to a specific path like IDs, this means many paths can have the same class.
For you, you want all the countries to be hidden, and only the countries that are randomly selected to show up, right? So to do this, we need every path (in this case country) to have a class which is the same, so that we can use CSS to hide them all at the start. It would normally be easier to just select everything in Inkscape and set to opacity 0, however JetPunk's minifier for SVGs automatically removes any paths with opacity 0, so that won't help us.
My suggestion of using the "country" class was if you were using the JetPunk map.
To the first point, a country / path can have multiple classes, these are space separated. So it's likely you removed a class (probably "border") that was colouring the borders themselves. If they don't already have "country" in the classes, then you just need to add " country" to the end to give them the country class.
To your second point, unfortunately no not easily. You can do it with some PHP and a script, but I sense you're not a programmer so manually changing them will be easiest. :)
Feel free to keep firing away any more questions :)
By my logic, (which isn't necessarily right) if I have every country under the same class, then when I make Jetpunk light up random countries under that class, won't they just be random countries on an empty world map? (Not random groups of countries.)
Oh okay, so it seems your issue is not the SVG part but the Random Group part. So what you need to do is go to "More Options" in Step 1, and change your quiz from Random to "Random Group", then set the group size and total number of answers you want to be shown.
Then, you need to organise your groups in Step 2. The editor will show you the boundaries of each group, and you just need to put in groups of countries. It might be easiest to do this in a spreadsheet to maximise your number of groups (to give a large enough pool). Essentially you need to hard-code the groups themselves into Step 2, there's no way to tell the randomizer to pick "groups of countries" other than to group them manually and use "random group".
Oh no, if you do that in Step 2 then any answer would light up every single country. What you want in Step 2 is the unique ID of each country in the SVG, the class "country" is simply a common class among them all so you can easily hide them when they're not part of the answers of a particular selection.
Okay I see the issues. Firstly, the whole style tag is being ignored because you have a <style> inside another one. All CSS should be inside a single <style and enclosing </style>. Furthermore, you don't have an enclosing brace on the second selector, meaning that part is not going to work either. Doing those two things should fix your problem!
Not without copying a quiz with 4 caveats already. You could always add the extra one at the end of the description or combine two of your other caveats, that would be my suggestion! :)
That's an issue with the current world map, it happens with Nepal, Bhutan and North Macedonia too. If you wait a couple days (at most, it may even by tonight), I have a site update coming out that will fix this. Should solve your problem easily (it'll be obvious what to do when the update is live). I'll have a blogpost out when the update is live, so you'll know when!
Thanks! I used the class "border" instead of country to hide the lakes as well. I also used the class "light-water" to hide the light water around islands.
Wait how do non-featured quizzes work? If you do them and then they get featured, do you get the points or do you have to take them again for the points?
Yes, you get the points. But over 99% of quizzes on JetPunk are unfeatured, so it's unlikely a non featured quiz will become featured. However, 99% of takes come from featured quizzes... Because most users either ignore them or don't realise unfeatured quizzes exist.
Morocco and Western Sahara are merged but it won't accept it in the answers . . . Same with Somalia and Somaliland and Puntland . . . (I'm being facetious, before anyone takes the time to write a self-righteous multi-paragraph response . . .)
I got a weird visual glitch. Don't even know how to properly describe it. I had a two-set and a three-set of country pairs that shared one or more countries. One was Mali/Senegal + Algeria/Mauritania + Mali/Mauritania.
It meant that the Algeria/Mali border was visible, but not Algeria/Mauritania, and the same with Senegal Mauritania, but not Senegal/Mali. It looked very weird, with borders just ending somewhere.
Same with Botswana/South Africa + Botswana/Namibia. That made Namibia/Botswana disappear, but not Namibia/South Africa...
This is all intentional and mentioned in the second caveat of the quiz (which is underlined). If you didn't allow multiple pairings for a country then the results would be severely limited in what could be an answer. And also the selection of borders that are removed is completely random, so there is no choice or control anyway.
- First off, everything you want to be hidden by default needs a common class so we can use CSS to reference them all at once. For what you're doing, it seems "country" might be suitable since it's already there.
- Second, use the CSS ".country{opacity:0}" to hide all countries by default. Just add this inside <style> tags to implement it.
- Thirdly, use "random-svg-highlight" to show the countries again. The CSS for this is ".svg-holder .random-svg-highlight{fill:#ffff80;opacity:1}". This will override the first one and make any selected groups show up.
I think the countries after that should light up on their own, provided you've placed an appropriate id or class associated with each path in Step 2.Let me know if you need elaboration anywhere :)
For you, you want all the countries to be hidden, and only the countries that are randomly selected to show up, right? So to do this, we need every path (in this case country) to have a class which is the same, so that we can use CSS to hide them all at the start. It would normally be easier to just select everything in Inkscape and set to opacity 0, however JetPunk's minifier for SVGs automatically removes any paths with opacity 0, so that won't help us.
My suggestion of using the "country" class was if you were using the JetPunk map.
To your second point, unfortunately no not easily. You can do it with some PHP and a script, but I sense you're not a programmer so manually changing them will be easiest. :)
Feel free to keep firing away any more questions :)
Then, you need to organise your groups in Step 2. The editor will show you the boundaries of each group, and you just need to put in groups of countries. It might be easiest to do this in a spreadsheet to maximise your number of groups (to give a large enough pool). Essentially you need to hard-code the groups themselves into Step 2, there's no way to tell the randomizer to pick "groups of countries" other than to group them manually and use "random group".
It meant that the Algeria/Mali border was visible, but not Algeria/Mauritania, and the same with Senegal Mauritania, but not Senegal/Mali. It looked very weird, with borders just ending somewhere.
Same with Botswana/South Africa + Botswana/Namibia. That made Namibia/Botswana disappear, but not Namibia/South Africa...
lol