Dot Placement: Explained With Pictures!

Hey guys, Potato here. I've realized that dot placement and SVG's actually make your quizzes a lot better, and people generally prefer SVG quizzes over text quizzes. So, I am going to show you guys how to use the dot placing tool.

(Apologies in advance, images do not work after the updates I added, you will have to manually click on the links labeled 'image' to view them)

To start off, decide what you want your dot to represent. A city, statue, or basically anything that people have been to. I am going to use Chicago as my example.

Go to a coordinate finder(you can find them just by searching 'coordinate finder' into your preferred search engine, or by using my personal favorite one here.

Then, type in the city/place/etc. into the coordinate finder. I will type 'Chicago' into the finder, but of course, you could type whatever you want.

Image

The coordinate finder has told me that Chicago has a:

Latitude of: 41.8755616

Longitude of: -87.6244212

Now that we have our longitude and latitude, it's time to go to the dot placer.

Once you are there, scroll down until you see a text box. If it is the first time you opened it, it should say something like this:

Cairo 30.033 31.233

Detroit 42.331 -83.046

London 51.509 -0.126

Los Angeles 34.052 -118.244

Melbourne -37.814 144.963

Sao Paulo -23.548 -46.636

Shanghai 31.229 121.475

*If you don't need any of these cities, you can delete them.*

All you have to do now is type this into the text box:
[Name/City/Place/ect] [TAB][Latitude] [TAB][Longitude] [TAB][OPTIONAL: Size of circle, default is 4] [TAB][Name/City/Place/ect]
It looks complicated, but it's pretty simple. Here's what my example with Chicago would look like.

Image

***Make sure that you TAB, not space***

Then, all you have to do is hit the 'Draw Dots' button (It's above the map if you can't see it scroll down'

And if you have done everything right, the dot should appear on the map!

Image

Extra Details: You can also change the color and border width of your dots. These changes can be found underneath the 'Styling' section below the text box and above the map. To change the color of your dots, click on the default 'FF9900'(orange) and select your preferred color. 'Fill opacity' changes how see-through your dots are: 0% is transparent and 100% is completely solid.  To change the color of the border of your dots, click on the default '000000'(black) and choose your preferred color. The stroke width is the width of the border of your dots. 4px is the thickest, 0px is no border.

Below this is the default backgrounds. You can choose North America, South America, Asia, Europe, Africa, and Oceania. There is also the United States and two advanced world-scale maps.

When you have finished placing all your dots, you need to hit the 'Download SVG' button. 

Then go to your quiz and scroll down until you get to '4.Design Grid.'
Then click 'Add an SVG Map' and press the bright yellow highlighted 'SVG Options'. 

Image

Then click on the green 'upload SVG' and click on your dotted SVG file.


Now it's time to add the path Id's.
Click on the grey 'Get SVG Id's under the green 'upload' SVG. 
Scroll down until you get to something that says 'zoomable circle'.

Image

These are your path ids for the dots you placed. So if you did Los Angeles it would say 'los-angeles' and if you did Chicago it would say 'chicago'. You can either put these into a google doc, open a new tab with the same web address, or manually input your path id's.

Go to step 2. "Answers'' and add a column on the very left-hand side of your answers and hints. (Don't worry, it won't show up on your quiz).

Image

Now you can start inputting your path ids. If you have an answer as Los Angeles, you need to put los-angeles into the path ID on the right-hand side. For my quiz, Countries by Overseas Territories, it looks something like this.

Image