Introducing The SVG Update!
Last updated: Tuesday June 23rd, 2020
Update (June 23rd) - We have now added zooming capability on clickable map quizzes too!
Maps have been on JetPunk for many years now, and the whole system surrounding then hasn't had a major update since 2016 when we began allowing users to upload their own SVGs. Well today we bring you The SVG Update! This has taken many weeks of hard work, primarily by myself, with the help of a few others that provided feedback along the way.
The SVG Update isn't just for technical users as its name may suggest, it's not even just for quizmakers. It's a major update, and the first named major update from JetPunk! Here's a summary of the biggest additions and improvements we've made, with a full changelog beneath that for those interested.
Summary
- Clickable Map Quizzes - These have been completely reworked to allow answers to be selected from a scrollable selector, this also allowed them to function much better on Mobile too. Quizmakers can also create them from scratch directly from "Create / Edit Quiz", the editor itself for them has also been cleaned up and drastically improved, especially the Design step. You can also enjoy many new features, including the option to randomize the output of these quizzes.
- JetPunk Standard SVGs - We now have a set of standardized maps on JetPunk for all the community to use. We have both country and capital versions for the World and each continent, as well as the map of the U.S. too. This goes hand-in-hand with the next point.
- SVG Selector - Quizmakers can rejoice to find that the whole process of adding SVGs to their quizzes has been completely overhauled. You can now choose to upload your own, or just select a JetPunk Standard SVG, adding it directly to your quiz without having to copy a quiz or download the SVG. Furthermore, we've added a tool to automatically added the necessary IDs to make the SVG responsive and turn green when answers are guessed!
- SVG Guide - Anybody and everybody who wishes to get started creating their own SVGs can do so easily now, with the help of the fully comprehensive SVG Guide. This guide starts at the very basics, and goes into great depths to teach everybody how to make their own maps. It also has sections for common questions and issues surrounding SVGs on JetPunk, and how to solve them. (Link to it can be found in the quiz editor, under "Create / Edit Quiz" and also at the bottom of every page)
- Dot Placer 2.0 - Those who may not be aware of the tool we have here on JetPunk to Place Dots on a Map, well we've drastically improved this too. You can now select from many JetPunk Standard SVGs, including all the continents individually. As well as being able to add styling to the circles added, allowing you to mimic the default JetPunk style for cities more easily. (Permanent link can be found in the SVG Guide)
- Switching Between Desktop / Mobile Site - All users will enjoy the option to easily switch between the mobile and desktop site at the click of a button from the bottom of any page across the entire site!
They are the main additions and improvements implemented. However, we're sure there's many of you that are interested in seeing a list of all the changes that occurred during this update, and so we're here to provide that changelog! If you want to skip past to the comments, you can click the button:
Full Change Log
Click Map Quizzes
Perhaps the biggest change in this update is the complete overhaul of the clickable quiz format usually called "Map Quizzes". These involve choosing an option from a list of answers to match the currently highlighted path of a map / SVG. Here are all the changes to the format, which you can now access directly by clicking the purple button inside of "Create / Edit Quiz" above.
- Answers during the quiz are now in a scrollable selector instead of scattered over the page. This not only makes the quizzes more compact, but also makes it easier to find a specific answer when there are lots of answers.
- Map Quizzes now support randomized answers. This can be configured through the "More Options" button in Step 1. It will select a randomized subset of answers from Step 2 to the user.
- The selector can have its header text, fill and text color all customized in Step 3 of the quiz editor. The height and width of it are also adjustable.
- You can now Import and Export answers to and from Step 2. The formatting of this is as you may expect, it must be tab-delimited data, with an optional ID column on the far left, then a PATH or HINT column, then finally an ANSWER column. For more help on importing / exporting, see the link provided when importing / exporting in Step 2.
- Playing Map Quizzes on mobile will now show the selector beneath the map, instead of as an on-device scroll selector. This means the option for more customizable answers, such as images, to be included and work seamlessly across devices.
- You can now switch the sorting type from Alphabetical to Numerical, meaning that numerical data is now supported as answers.
- Added shuffle and sort buttons to Step 2.
- Map Quizzes containing circles or ellipses will now automatically add the "city selector" to the quiz, this is the blue ring that highlights the circles to make them more obvious when selected. This means you don't need to do anything to get it to work, as long as you have circles or ellipses.
- You can navigate the answers using the arrow keys and the enter key to submit the answer.
SVG Selector and JetPunk Standard SVGs
As highlighted above, another major change we made was to include JetPunk Standard SVGs which are identical across the site. This brings uniformity to the site, as well as making future updates to quizzes much better and providing users who aren't so savvy with SVGs the option to create SVG quizzes.
- We now have a brand new SVG Options screen within text quizzes and Map Quizzes. This new selector allows you to Select a JetPunk SVG, upload your own, download and remove SVGs. You can also see a preview of your SVG, as well as configure options related to SVGs in the quiz itself.
- For text quizzes, you can configure the placement of the map, the "Show Missing Dots" feature as well as the option to enable "Hidden Paths" which will automatically hide paths within a quiz until they are guessed.
- There is now a button to grab all the classes and IDs from a selected SVG so you can easily copy them into Step 2 later on.
- You can select a JetPunk Standard SVG, choosing from the World map, World capitals, U.S. States map as well as the country and capital maps of each continent. These all have a regulated format, including the path ids all being the 2 letter ISO code for that country / region. A description of each SVG is provided, as well as a preview of it.
- A new feature called "Auto Paths" has been implemented, this will apply the 2 letter ISO codes of any country, capital or state you have as answers in Step 2. The primary use of this is if you've used a JetPunk Standard SVG, then you can easily type the answers you want into Step 2 and click the "Add Path IDs" button to automatically add all recognised answers. Most alternate names and names from featured languages are accepted as well.
- The upload limit is now "true" 600kb, rather than the 600,000 bytes it was previously.
- Added more useful error messages when an SVG fails to upload, hopefully to make it easier to debug why an SVG won't upload.
SVG Guide
The major new addition in this update is a fully comprehensive SVG Guide aimed at new users to SVGs as well as regulars looking to refine their knowledge. This guide aims to provide a clearly laid out, step-by-step guide to making your very own SVG quizzes on JetPunk, including answers to common questions and problems. The SVG Guide is accessible from the footer on any page, or by visiting "Create / Edit Quiz" in the navigation bar.
- Getting Started - This beginner's section gives a background to what SVGs are, ways you can edit them and how to download and install Inkscape, the best known tool for editing SVGs freely. We also detail how to add classes and IDs to a custom SVG so that we can make it interact with JetPunk.
- JetPunk SVGs - This next section gives a complete tutorial on how to add an SVG to your quiz, making it light-up answers as well as using the SVG Selector itself. It also provides some background knowledge on JetPunk Standard SVGs and how they're formatted. Finally, we give detailed information on how Click Map Quizzes work, and how to create them yourself, including adding arrows as guides to answers.
- Advanced SVGs - Once you feel you've mastered the basics, there's an advanced guide looking into the use of CSS and other functions in Inkscape to make more complicated SVGs and quizzes. You'll also find a complete reference to all the standard colors and classes used on JetPunk Standard SVGs and on JetPunk quizzes.
- Common Questions - Everybody will have questions while making SVGs, it is inevitable. This section aims to solve those queries, including often asked questions as to how to do certain things with SVGs, and what the standard colors are.
- Troubleshooting - If you're having a problem with an SVG, which for new users is quite likely, then you can head to the Troubleshooting page for help. This will assume knowledge of the rest of the guide, so if you've skipped over the basics, don't expect to find answers to them here. However, if you're having trouble uploading an SVG then we have every error message stated here for you to try and fix your SVG.
- Other - For all SVG-related topics that didn't fit elsewhere. In particular, we talk about the Dot Placer and how to use it, and the "Show Missing Dots" feature of text quizzes.
Finally, remember that you can always ask questions to me here if you need help with anything SVG related whatsoever!
Other SVG Changes
We have greatly improved the dot placer, as mentioned before, as well as improved the zooming feature of maps.
- The JetPunk "Dot Placer" will now have the option to draw dots on any continent, as well as the world and U.S. Map.
- You can now fully customize the styling of your dots being drawn onto the map, although note this styling applies to all dots at once.
- Dot Placer now works with Alaska and Hawaii on the U.S. Map.
- The map on the Dot Placer is now zoomable.
- The class "zoomable-circle" will now work with ellipses as well as with circles, and also adds the "small-stroke" class the same as the "border" class normally would, meaning circles no longer need the "border" class.
- Fixed multiple bugs that caused poorly-formatted SVGs to zoom in and out incorrectly.
Other Changes
Finally, we come to all the other little changes around the site that wasn't related to SVGs.
- Even Split will now only show the top score of a user on the leaderboard, this prevents a particular user from flooding the leaderboards with their name.
- Added the ability to switch between mobile and desktop sites.
- Fixed issues on tablets with the page width being incorrect due to differing device sizes.
- When using "fill in the blank" on text quizzes using braces {like} {this}, the contents will now show in Step 4 as they'd appear on the live quiz.
- Made "fill in the blank" work with Random Group quizzes too.
- Added the option to format "Groups of Things" quizzes with re-ordering of groups allowed. This makes the balancing algorithm much more efficient, resulting in a more even distribution.
- Randomized quizzes that are too wide to be shown on single rows will now work on mobile when scroll mode is off.
- Added a timeout when saving blogs in case your internet cuts out part way through.
- Deleting a quiz will now tell you in the confirmation box which is being deleted.
That's it! That's all the notable changes we have for you this update. Hopefully this summer I'll try to get more frequent updates out, although that depends whether they're as huge as this or not!
We really hope you enjoy all the new features SVGs now have to offer, and if you have any questions whatsoever, including needing help with anything, please don't hesitate to ask me in the comments section below. :)
Example: The miniatures are made from Pixabay photos, or Wikimedia Commons. The same can be done with SVG maps, taking a map from Wikipedia.
But better to go back to the original subject and not intrude KKKKKKKK.
How does SVG work? What is the easiest way to put SVG maps in Jetpunk?
The easiest way to put custom SVG maps onto JetPunk is to upload them directly from your computer. I suggest following the steps on the SVG Guide to getting started with SVGs and downloading Inkscape, since I think is the only way to do what you want.
Alternatively, if you have an SVG map from Wikimedia, there will be no harm downloading it to your device and then uploading it to JetPunk. There is currently no way planned to allow maps to be imported like that from Wikimedia.
For tutorial on how to use Inkscape, there is the whole SVG Guide just released today to help with that!
https://pt.wikipedia.org/wiki/Lista_de_mesorregi%C3%B5es_e_microrregi%C3%B5es_de_Minas_Gerais#/media/Ficheiro:MinasGerais_Microrregions.svg
Let me know if that is what you wanted to do, and then I'll walk you through the steps you need to turn that into a quiz!
https://www.jetpunk.com/user-quizzes/309965/municipios-da-bahia-em-um-mapa
However, Quizmaster restricted the number of responses to 500. Now that this number has increased, the chance of creating a questionnaire with SVG has become even greater, and after I saw this post, I was thinking about this possibility.
I'll see your link, and I'll reply.
https://pt.wikipedia.org/wiki/Ficheiro:Brazil_Minas_Gerais_location_map.svg
Sidenote: I didn't spend several weeks writing a full SVG Guide just for people to say "it's too big, I can't be bothered". If you never read it and never at least try, you will get nowhere. There's no magical software I can give you to create the SVG instantly and easily, it'll take work and effort.
I will read the Guide properly and try to solve this. Does SVG decrease serve both for Inkscape and Wikimedia Commons?
Changing the subject a little, there's one thing I noticed in Jetpunk's user profiles: everyone has a place of residence and I don't. Do I need to reach any level for this?
Another thing, I asked the Quizmaster a while ago to put a quiz that I created (so far the only one in English) on the homepage. But he never gave me a return. My quizzes are not very successful. You can also put quizzes on the home page, or is it just QM?
Also, while I technically have the power, I don't often use it and never do for English. Getting quizzes featured (i.e. on the front page) isn't a very common thing among quizmakers, and requires Quizmaster to think your quiz is amazing and will bring lots of users to the site. This is how featuring works on the site, when Quizmaster feels your quiz is suitable for featuring he will feature it on his own accord. Contacting him asking for it to be featured or on the front page won't change that, and could actually make things worse.
Here is a blog written by Quizmaster on the topic: How to make your quiz eligble for points
But going back to the initial subject, I will try to do what you explained to me. If it works, it works, if it doesn't work, it doesn't work. Very much originated by the tips, and I asked two questions that you have not yet answered. I will show them again below my comment.
I was wrong. You answered one of them.
To do so I don't believe you need a certain level, no. You just need to go to "Your Account" by clicking on your name in the top right corner of the page. Then you can edit your "real name" and "location" from there.
I used SVG Minify and uploaded the photo. I tried to copy the SVG, but it didn't work, and I think the problem comes next:
I took the photo, and put the link in Word. I saved the document. I went to the SVG quiz and uploaded it, but it gives a bit of "XML" and I don't know what that is. Can you help me with this?
Footnote: In Inkscape I don't know where I draw, and how to look perfectly like the SVG map...
In Inkscape, you literally draw on the page. That is all described in the "Getting Started" page on the SVG Guide...
I will not talk about SVG in that question. But I realized in many Jetpunk quizzes, that in a single question, I can add two or more lines of answer.
Example: Tip: Which countries are neighbors to the USA?
Answers: Canada and Mexico.
However, there is a way to format on two lines for the same question, instead of putting "Canada" and "Mexico" on the same line.
Is this function restricted to some users? Or can I configure it in Manual mode in the Design Grid?
If I have a guide for that, I'll look...
Do you know about the SVG Map that I wanted to reduce?
I used SVG Minify because I found it an easier option. I entered the URL of the file, then copied the code, and pasted it into Notepad. I saved it as: SVG Jetpunk.txt and went to the Quiz in SVG Options. I sent it to Upload, and chose the file name mentioned above. But he said it exceeds 600 kilobytes. And I had already reduced!
I read in the SVG Guide on the Troubleshooting tab, but it doesn't talk about problems after the reduction. Is that why you prefer to use Inkspace? Did I do any wrong steps? Where in the SVG Guide do you advise me to read to solve this problem?
If your file is still too big even after using Minify, then it is impossible to get around this. There will simply be no way to shrink that original file small enough. (That is the correct method to use using Minify though!)
The only way to get around this would be to draw it yourself in Inkscape, that way you can make it much less detailed and under 600kb. To do this, you can "trace". This means taking an image of what you want, then paste that image into Inkscape. Then use the "Pen" tool described in the guide to draw over it.
Can only Inkscape do this?
I am not aware of any other tool powerful enough and as good as Inkscape to do this, unfortunately.
I understand, but I'm afraid. My machine is slow, and it is no longer made from it. I don't know for sure, but I think it's Windows 8. Any download can damage the computer, and for that reason, I don't know if these shortcuts, ID's, codes, can cause harm in the operation.
Speaking of these ID's, can you tell me which one to put in the examples of municipalities below?
1 - Belo Horizonte
2 - Uberlândia
3 - Juiz de Fora
4 - Montes Claros
5 - Ouro Preto
6 - Governador Valadares
7 - Poços de Caldas
8 - Barbacena
9 - Diamantina
If this is mentioned in the SVG Guide, I did not understand the rules well.
I didn't have anything to say to the other stuff which is why I didn't respond above. It's unfortunate your machine can't handle Inkscape, but I guess that's the way it is :(
As the saying goes: Prevention is better than cure.
The problem is getting in touch with Raphael Lorenzeto (creator of several SVG maps of Brazil).
DodomaAstatine, thank you very much! I will test this!
I accessed the link, clicked enter, but he asked for the following:
Free identifier
Choose a free identifier for this application:
Use ASCII characters from A to Z, a to z or 0 to 9
And I don't know what that is. Can you help me?
Create new documents online
LibreOffice online with file manager
Create a new PPT presentation online
FileManager for OpenOffice and GIMP online
Create new XLS spreadsheet online
OpenOffice Writer online for Word documents
Which one should I choose?
Always gives:
Error. Username must have more than 4 chars.
And I already met all the requirements! What do I do?!
https://www.offidocs.com/osessionx02/#/client/REVGQVVMVABjAGRlZmF1bHQ=?username=guest03&password=server0103
Stewart, how to pin comments on a quiz? At my quiz named "Presidents of Brazil", I have some important comments that I need to pin, because they are important. How I can do it?
In this quiz here: www.jetpunk.com/quizzes/us-state-flags, some flags reveal the name of the state, so these "answers" were taken. I particularly find this very interesting, as I did a similar quiz, however with the capitals of Brazil: www.jetpunk.com/user-quizzes/1264853/bandeiras-das-capitais-brasileiras. But some flags reveal answers, and I don't know how to put them out. Is there any way to do that? Or is this restricted to QM and you?
There is unfortunately barely any way to promote your quizzes. A good way to do this is to create a blog promoting your quizzes (but don't make more than 2 blogs per week, or else the Recent User Blogs section will get conjested). Another thing you can do is to tell your friends/family to take your quizzes.
I don't know if they (my friends and family) will show up with neighbors, as they don't even know Jetpunk practically. But if I can, I will try to do that.
Stewart, when are you going to make new updates. I started to hate Sporcle, in fact, Orcspel, for plagiarizing our quizzes (look, plagiarism is CRIME in Brazil). We could make a Jetpunk mini court! But it will be difficult to have a jury and a judge, because there can be no one from both sites...
Also I wouldn't be so hateful to Sporcle. Yes they may have design flaws and yes they may have specific users who wish to rip JetPunk off, but they have been very helpful and cooperative overall in removing those duplicates. Although they are technically competition, it's not very nice to deface them purely because of a couple bad users.
Obviously, but that should take up a lot of time on your "agenda", right? But your life is not Jetpunk, hahahahaha.
I didn't say anything about bad users! But what they did is wrong. I don't know if it's in other countries, but here in Brazil, plagiarism is C.R.I.M.E. CRIME! I know that if I were from another country, I would be angry, but not as much as I am now.
Look:
Crime of Violation of Copyright in Art. 184 - Penal Code, which says: Art. 184. Violating copyright and related rights: Penalty - detention, from 3 (three) months to 1 (one) year, or traffic ticket.
But I don't want this for anyone! I know I speak of Brazil, but who knows there in these other countries (better not to specify) the penalty will be the same, or even greater, because in Brazil, Minister of the Supreme Federal Court, Gilmar Mendes if he could let everyone go ...
But we're not here to say that right? Finally, THAT JUSTICE IS DONE!!!!
By the way, most of the time Sporcle cooperates with us. They've deleted most of the plaigiarised quizzes. While some of the users on the Sporcle website plaigiarise quizzes, we can't call the entire site itself inheritenly bad. So it would not be worth our time to have a JetPunk court. The sheer amount of money for a court could be used to implement more features to JetPunk. Suing Sporcle won't do anything.
Crime of copyright infringement in art. 184 - Penal Code, which says: art. 184. Infringement of copyrights and related rights: Penalty - imprisonment, from 3 (three) months to 1 (one) year, or traffic ticket.
Imagine! 1 year for copying something without giving due copyright? I really don't want this for anyone, but you're right.
Note that tracing should be a last resort, and shouldn't be used when a good enough map already exists, since by tracing manually you will lose accuracy.
The scrollable lists make the quizzes so much slower to answer than before (and to me, also less fun). For example, when doing the Africa map quiz, you start with Morocco, then scroll all the way up to Algeria, all the way down to Tunisia, back to the middle for Libya and all the way up again for Egypt.
My work around right now is to select the countries on the map in alphabetical order and just go down the list. But if it is a city quiz, it is hard to select the exact spot and I end up with a lot of accidental zooming instead of selecting ...
Overall, I really preferred the previous version.
when I choose optimize svg option in inkscape to reduce size of file it shows
"Failed to import python module ' scour'. Plz make sure it is installed (example using 'pip intall scour') and try again"
what do i do??
Note, this works because there is no space between "#us" and ".svg-correct". In CSS, no space between these two indicates an "AND" logic, so it will only do the colour change on the object with that id AND that class, i.e. when that path lights up.
Hope this helps :)
Second to check, are you ids or classes legal xml? This means they need to start with a letter, be only letters, numbers, underscores and hyphens. They cannot contain spaces.
There could be other issues, but I can't tell without seeing the SVG? If you collab the quiz with me I'll be able to help :)
I have been having trouble over the last couple of days uploading an SVG for the Sydney Suburbs Quiz. Despite having no trouble with file size earlier this year, I am unable to upload anything in the 500-600KB range with a 'timeout' error message appearing.
The uploads for a 450KB file seem to take suspiciously long (around 10 seconds) despite a decent internet speed and no issues on other websites.
Unfortunately, the reduced file size means a large reduction in the accuracy of points on the SVG and is very undesirable to see holes in the map!
Would it be possible to extend the timeout by, say, another 20 seconds? This should hopefully fix the problem.
I can try upping the timeout but if there's other issues at play we should try to resolve them :)
I have noticed the timeout is only ~10-13 seconds. Could this please be increased to, say, 30 seconds?
I wonder if whatever software you're using to create the SVG is adding massive amount of information which are taking longer to "clean" when uploaded.
Regardless, I have upped the timeout from 15 seconds to 25 seconds.
In any case, the timeout has worked beautifully, thank you!
Anyway, this shouldn't happen, have you got an example or is it perhaps just confusing you because you forget whether you're berry or fruit on a particular day?
(I have no problem with that by the way, as mentioned above we don't encourage it, but as long as there's no abuse, it's fine)
Or you forgot you were only subscribed on one account and not both :)
I suppose, if I understand you correct, you could add every other path's id as a class of the new path, then have the post-game css white it if it gets svg-incorrect.
I believe this would then mean the path would disappear whenever you have an answer guessed correctly (or by default at the start) and then at the end, if it gains an svg-incorrect class, then at least one answer is correct so it can override it and show it instead. The thing I'm unsure of is whether a path can have both classes, but your comment implies they can.
A simpler alternative I thought up just now:
Since you have a single kill switch to be able to get 100%, in the #1 case that is Slovenia, then what you can do is simply make the text have the same class as Slovenia's path. Then, the CSS becomes super simple as it's just:
#textID.svg-correct { hide } (default anyway)
#textID.svg-incorrect { show }
Since to have at least one answer incorrect you must have slovenia incorrect, then we can use this and piggyback off of it. I hope that makes sense!
These factors were meticulously fine tuned for the existing maps, so I can guarantee 100% that nobody knows those properties of any map to be able to draw dots in the correct location.
I also had another question- So I'm on Inkscape, and whenever I try to break apart the paths on the image, it gives me 3-5 extra paths for a single part of the image.
Is there a way to remove those extra paths so I can combine them into one?
After uploading it, there was no error message and in "SVG Options" and step 4 actually the right SVG map I just uploaded was displayed. Therefore, there was no indication that something went wrong until the map went missing in the quiz preview. There's simply a white blank space in its place.
My SVG doesn't exceed the file or pxl size and is inside the "page border" in Inkscape.
Can someone help me?
In your SVG's main <svg> tag, there is a "stroke-width" attribute. This has no effect on the SVG, however when we retrieved the height and width of the SVG it grabbed this for the width instead of the actual width, meaning the SVG is thought to be only 2px wide!
I will fix this on JetPunk's side. In the meantime, simply open your SVG in a text editor, remove the "stroke-width="2"" from the first line and then re-upload and it should be fixed.
Sorry for the issue!
It's funny that this issue occurred at all.
lol 2px wide SVG hahaha
I am in process of making a SVG quiz. I want it to include both L1 and L2 administrative subdivisions. How do I make L1 (e. g. Arizona) light all the L2 (e. g. counties) in it, without making guessing L2 invisible on map after that? I am attributing L2 to L1 class in Inkscape, but what do I do next...?
Unfortunately, once the svg-correct class is applied to a path, you can't apply it more than once. So the only way to do this is to use two layers (maybe with transparency so both are visible). An example of this is here: Two layer world map. So you would have L1 shape on top of / underneath all L2 shapes, then do something CSS wise that you want (e.g. make invisible as in the quiz above, or colour something specific).
J'aimerais savoir comment créer deux réponses différentes dans un même quiz (2 colonnes s'affichant en vert, on l'on peut mettre des réponses dans les deux colonnes.) J'ai essayé mais je ne peux que mettre des réponses dans une seule et unique colonne.
Merci
C'est l'une des limites de l'éditeur de quiz : toutes les réponses doivent figurer dans une seule colonne à l'étape 2.
Note there is no class for light mode. So light mode should be default behaviour, then add specific behaviours for dark mode.