So you want to make a quiz?

Step 1:

Download this .zip archive. It will include a quiz template where you'll put all your questions, a javascript file with the actual quiz mechanics, and a .txt file with all the possible answers and a couple things needed for the code to work.

Step 2:

Unzip the archive. In the js file, on line 8 change the path from YOURTEXTPATHHERE to wherever your .txt file is.

Step 3:

On line 6 of the html file, change the YOURJSPATHHERE to wherever your .js file is. Edit the html file however you'd like, just make sure to maintain the styling that is already there, and don't change any of the id's or classes of the divs. To add more questions, just copy paste the previous question, just make sure to change the name of the radio inputs (q1, q2, q3, etc.) to the number of your question, as well as the id of the surrounding div.

Step 4:

In the .txt file, line 1 is the number of questions in the quiz. Change the number to however many questions you have.
The next lines of code are the links to the result images. By default, there are three possible results if the user chooses mostly As, mostly Bs, etc. The first three images are results for mostly As, the next 3 for mostly Bs and so on. If you want to add more than 3 variations of possible results, just type in more lines of text, just remember to change the 'variations' variable on line 5 of quiz.js to the number of variations you want. The number of possible results for each letter must be the same.

Your quiz is built! :-D

How the code works:

Once the user answers all the questions and hits submit, the code first gets all the possible answers from answers.txt and turns them into an array. Then, it gets the answers (A, B, C, or D) from each checked radio button's value. It creates a string of these answers, which then gets processed through the dissectString() function. There, the string is turned into an array of counts of each letter (index 0 is the count of A, index 1 is the count of B, etc). This makes it easier to find which value was the most selected. The next function, display() splits up the array with all the variations for each answer. From there, we have the index of our answer (ans), so all we have to do is choose a random answer from our array of possible answers for that index, and we have a working quiz!