Introducing The SVG Update!

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:

Jump to Comments

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. :)