jewlofthelotus / slickquiz

A jQuery plugin for creating pretty, dynamic quizzes.

A jQuery plugin for creating pretty, dynamic quizzes.

Demo And Usage

See index.html for demo and suggested HTML structure (the element class names are the important part).

See js/slickQuiz-config.js to set up your quiz copy and questions.

To initialize your quiz:

$(function () {
    $('#slickQuiz').slickQuiz({
        // options
    });
});

Available Options

json (JSON Object) - your quiz JSON, pass this instead of setting quizJSON outside of the plugin (see js/slickQuiz-config.js)

Text Options

checkAnswerText (String) Default: 'Check My Answer!'; - the text to use on the check answer button

nextQuestionText (String) Default: 'Next »'; - the text to use on the next question button

completeQuizText (String) Default: ''; - the text to use for the last button the user will click before getting results; if left null / blank (default) - nextQuestionText will be used. Example: "Get Your Results!"

backButtonText (String) Default: ''; - the text to use on the back button; if left null / blank (default) - no back button will be displayed

tryAgainText (String) Default: ''; - the text to use on the try again button; if left null / blank - no try again button will be displayed

preventUnansweredText (String) Defaut: 'You must select at least one answer.'; - the text to display if a user submits a blank answer while preventUnanswered is enabled

questionCountText (String) Defaut: 'Question %current of %total'; - if displayQuestionCount is enabled, this will format that text using the string provided. %current and %total are placeholders that will output the appropriate values. Note: displayQuestionCount may eventually be deprecated in favor of this option

questionTemplateText (String) Defaut: '%count. %text'; - if displayQuestionNumber is enabled, this will format that question number and question using the string provided. %count and %text are placeholders that will output the appropriate values. Note: displayQuestionNumber may eventually be deprecated in favor of this option

scoreTemplateText (String) Defaut: '%score / %total'; - the format of the final score text. %score and %total are placeholders that will output the appropriate values

nameTemplateText (String) Defaut: '<span>Quiz: </span>%name'; - the format of the quiz name; %name is a placeholder that will output the quiz name. Note: the "Quiz" span in the default value is used to enhance accessibility, it will not display on the screen.

Functionality Options

skipStartButton (Boolean) Default: false; - whether or not to skip the quiz "start" button

numberOfQuestions (Integer) Default: null; - the number of questions to load from the question set in the JSON object, defaults to null (all questions); Note: If you set this to an integer, you'll probably also want to set randomSortQuestions to true to ensure that you get a mixed set of questions each page load.

randomSortQuestions (Boolean) Default: false; - whether or not to randomly sort questions ONLY

randomSortAnswers (Boolean) Default: false; - whether or not to randomly sort answers ONLY

preventUnanswered (Boolean) Default: false; - prevents submitting a question with zero answers

perQuestionResponseMessaging (Boolean) Default: true; - Displays correct / incorrect response messages after each question is submitted.

perQuestionResponseAnswers (Boolean) Default: false; - Keeps the answer options in display after the question is submitted. Note: this should be used in tandem with perQuestionResponseMessaging

completionResponseMessaging (Boolean) Default: false; - Displays all questions and answers with correct or incorrect response messages when the quiz is completed.

displayQuestionCount (Boolean) Default: true; - whether or not to display the number of questions and which question the user is on, for example "Question 3 of 10". Note: this may eventually be deprecated in favor of questionCountText

displayQuestionNumber (Boolean) Default: true; - whether or not to display the number of the question along side the question itself, for example, the "1." in "1. What is the first letter of the alphabet?" Note: this may eventually be deprecated in favor of questionTemplateText

disableScore (Boolean) Default: false; - Removes the score from the final results display. Eliminates the need for an element with class quizScore in the markup.

disableRanking (Boolean) Default: false; - Removes the ranking leve from the final results display. Eliminates the need for an element with class quizLevel in the markup, as well as the need for JSON values for level1 through level5.

scoreAsPercentage (Boolean) Default: false; - Returns the score as a percentage rather than the number of correct responses. If enabled, you'll also want to adjust scoreTemplateText to something like '%score'

Question Options

See "Base Config Options" below for examples

select_any (Boolean) Optional - Use if there is more than one true answer and when submitting any single true answer should be considered correct. (Select ANY that apply vs. Select ALL that apply)

force_checkbox (Boolean) Optional - Set this to true if you want to render checkboxes instead of radios even if the question only has one true answer.

Event Options

events.onStartQuiz (function) Default: empty; - a function to be executed once the quiz has started.

events.onCompleteQuiz (function) Default: empty; - a function to be executed the quiz has completed; the function will be passed two arguments in an object: options.questionCount, options.score

Animation Callback Options

animationCallbacks.setupQuiz (function) Default: empty; - a function to be executed once all jQuery animations have completed in the setupQuiz method

animationCallbacks.startQuiz (function) Default: empty; - a function to be executed once all jQuery animations have completed in the startQuiz method; note that events.onStartQuiz() would execute before this callback method due to durations of jQuery animations

animationCallbacks.resetQuiz (function) Default: empty; - a function to be executed once all jQuery animations have completed in the resetQuiz method

animationCallbacks.checkAnswer (function) Default: empty; - a function to be executed once all jQuery animations have completed in the checkAnswer method

animationCallbacks.nextQuestion (function) Default: empty; - a function to be executed once all jQuery animations have completed in the nextQuestion method

animationCallbacks.backToQuestion (function) Default: empty; - a function to be executed once all jQuery animations have completed in the backToQuestion method

animationCallbacks.completeQuiz (function) Default: empty; - a function to be executed once all jQuery animations have completed in the completeQuiz method; note that events.onCompleteQuiz() would execute before this callback method due to durations of jQuery animations

Deprecated Options

disableNext - Prevents submitting a question with zero answers. You should now use preventUnanswered instead.

disableResponseMessaging - Hides all correct / incorrect response messages. You should now use perQuestionResponseMessaging and completionResponseMessaging instead.

randomSort - Randomly sort all questions AND their answers. You should now use randomSortQuestions and randomSortAnswers instead.

Advanced Usage

Want to manage your quizzes in a content management system?

Simply translate your CMS quiz data into a JSON object formatted like quizJSON in js/slickQuiz-config.js. Then assign it as the quizJSON variable instead of loading js/slickQuiz-config.js.

Alternatively, you can pass the JSON right into the plugin using the json option (useful if you are placing multiple quizzes on a page):

$(function () {
    $('#slickQuiz').slickQuiz({json: {YOUR_JSON_HERE}});
});

Base HTML Structure

The slickQuiz ID and class names are what are important here:

<body id="slickQuiz">
    <h1 class="quizName"></h1>
    <div class="quizArea">
        <div class="quizHeader">
            <a class="startQuiz" href="">Get Started!</a>
        </div>
    </div>
    <div class="quizResults">
        <h3 class="quizScore">You Scored: <span></span></h3>
        <h3 class="quizLevel"><strong>Ranking:</strong> <span></span></h3>
        <div class="quizResultsCopy"></div>
    </div>
</body>

Base Config Options

See js/slickQuiz-config.js

var quizJSON = {
    "info": {
        "name":    "The Quiz Header",
        "main":    "The Quiz Description Text",
        "results": "The Quiz Results Copy",
        "level1":  "The highest ranking",
        "level2":  "The almost highest ranking",
        "level3":  "The middle ranking",
        "level4":  "The almost lowest ranking",
        "level5":  "The lowest ranking"
    },
    "questions": [
        {
            "q": "The Question?",
            "a": [
                {"option": "an incorrect answer",       "correct": false},
                {"option": "a correct answer",          "correct": true},
                {"option": "another correct answer",    "correct": true}
            ],
            "correct": "The Correct Response Message",
            "incorrect": "The Incorrect Response Message",
            "select_any": false, // optional, see "Question Options" above
            "force_checkbox": false // optional, see "Question Options" above
        }
    ]
}

Adding HTML to Questions and Answers

Standard HTML elements like images, videos embeds, headers, paragraphs, etc., can be used within text values like q and a options.

"q": "The Question? <img src='path/to/image.png' />",
"a": [
    {"option": "an <b>incorrect</b> answer", "correct": false},
    {"option": "a <b>correct</b> answer",    "correct": true},
]

Created by Julie Cameron while previously employed at Quicken Loans, Detroit, MI

slickquiz's Issues

JavaScript Unit Tests!

Test all the things.

Make Ranking Levels Optional

Accessibility fixes/enhancements

The basic form accessibility -- linking fields with <label> elements is covered. I suggest that there are these outstanding issues:

• WAI-ARIA role="button" for the <a href=""> links;
• WAI-ARIA live region so that screen readers are notified of changes to the Quiz user-interface;
• role="form" and aria-labelledby on the parent element;

** (ARIA) Accessible Rich Internet Applications

Links:

• http://juicystudio.com/article/wai-aria_live-regions_updated.php
• http://w3.org/TR/wai-aria

Allow for Custom Result Copy per Knowledge Level

Based on final score / level - show custom result copies.

Add option to force users to answer correctly before moving forward

Not yet sure how to handle correct / incorrect error messaging yet... If they submit and their attempt is wrong - do we have a custom try again message? do they get the incorrect message with a "try again" (back) button? do they get an alert popup? (ew)

http://wordpress.org/support/topic/force-correct-answer?replies=1

Maybe the incorrect message appears below the answers, instead of the current switch out that happens when an answer is false. Then they just have to change their answer and click the button again.

Custom Ranking Ranges

http://wordpress.org/support/topic/display-all-questions-not-working?replies=6#post-5462595

As for the ranking one of the quizzes I'm working on has really has 2 rankings. 95%+ you are wonderful and below that you are a failure. So I guess the feature should be the ability to create X ranking levels and have the ability to set the % for each level.

Enable internationalization/ translation of SlickQuiz user-interface (patch to follow)

Hi Julie,

Thanks for incorporating my patch for the WordPress quickly last week.

For the JuxtaLearn project (http://juxtalearn.net), I'm interesting in enabling translation of the SlickQuiz user-interface. You can see how I propose enabling internationalization/ localization here - I hope it makes sense. I think its lightweight and doesn't introduce any dependencies,

• https://gist.github.com/nfreear/9979561

A few notes:

1. You'll need to link to a local copy of the modified slickQuiz.js, as I haven't got a copy on a server yet,

2. Translation doesn't actually occur within slickQuiz.js. See the "_t()" function in slickquiz.js.html above. (You will be able to claim internationalization as a feature, and include an example HTML...;)),

3. The proposal introduces 4 new option strings,

   questionCountText:     'Question %current of %total',
   preventUnansweredText: 'You must select at least one answer.',
   questionTemplateText:  '%count. %text',
   scoreTemplateText:     '%score / %total',
   

4. Through the introduction of the questionTemplateText string option, I think that you may be able to remove the displayQuestionNumber boolean option in due course. What do you think?

Obviously, let me know if you have any questions or concerns.

Thank you. Best wishes,

Nick

Evaluating an answer without clicking 'Check Answer'

Hello! Thanks for putting this plugin out there. I was just wondering if there is an easy way to change the 'Check Answer' action to fire as soon as an option is selected, or if you have any suggestions for immediately evaluating whether the answer is correct/incorrect upon selection.

How to Call Methods

Thanks for the great plugin. I'm confused how to call the plugin methods. How would I go about calling the resetQuiz method?

Thanks

Visual point out answer status in quizResults

In quizResults we need CSS classes to point out the correct and incorrect answers to the user so he can practice this questions and start the quiz again. The class correctResponse is not enough.

<div class="quizResults">
  <ol class="questions">
    <li id="question0" class="question correctResponse">
      <h3>1. Question</h3>
      <ul class="answers">
        <li class="correct">
          <input>
          <label>
        </li>
        <li class="correct">
          <input>
          <label>
        </li>
        <li class="incorrect">
          <input>
          <label>
        </li>
      </ul>
    </li>
    <li id="question1" class="question incorrectResponse">
      <h3>2. Question</h3>
      <ul class="answers">
        <li class="correct">
          <input>
          <label>
        </li>
        <li class="incorrect">
          <input>
          <label>
        </li>
        <li class="incorrect">
          <input>
          <label>
        </li>
      </ul>
    </li>
  </ol>
</div>

Every list point of ul.answers needs a class correct|incorrect.

btw It would be nice if additionaly to li.response.correctResponse we will have li.response.incorrectResponse. I know it's not necessary but can be handled way more logical while coding your css or additional javascript.

Prevent answer highlighting before check

https://wordpress.org/support/topic/easy-cheat?replies=2#post-6203721

Feature Request: Insert and Extract JSON directly to and from Questions

This feature addresses two problems:

1. Reusing questions in different quizzes
2. Allowing content experts to create/review quiz questions outside of the WP back-end.

After reviewing the existing code, this feature seems reasonably straightforward after some minor refactoring of admin.js.

Here is how it could work: In the top right hand corner of each question box add a cute JSON icon. When the icon is clicked all the normal fields get hidden and, in their place, is just one text box containing the JSON representing the question. Above the text box are two new icons: [save] and [abandon]. The user can copy the JSON and place it in an external file or paste in revised JSON from another quiz.

Background: Writing quizzes takes a significant amount of time. For example, it takes me about 6 hours to write a 12 question quiz. A significant portion of that time is spent just navigating between frontend and backend during the process. I would have a significant time savings if I could review and share a JSON document. And the fact that I could pull questions from earlier quizzes for later review would be a bonus time saver.

Force checkboxes

Sometimes you have 1 answer out of 3 set to true, but you do not want to give a hint that only one answer is true. But with radios you immediately see that only one answer is true and user can only select one input. For this situation we need an option 'force_checkbox'.

Short:

1. answer = true
2. answer = false
3. answer = false

results always in radios.
We need an option to force checkboxes here.

add option toggle final score to a percentage

Question Chaining

http://www.jewlofthelotus.com/2011/12/23/slickquiz-jquery-plugin-now-on-github/comment-page-5/#comment-2211

Is there a possibility of chaining?
I want to give the user different questions, depending on the first question.
So, if the answer on Q1 is a show Qa1, Qa2, Qa3..
if the answer on Q1 is b show Qb1, Qb2, Qb3….

Timer

Hi Julie, plugin works awesome as far and I require to add a timer and after exceeding that time quiz should completed and shows the result of it? Is it possible now. If I can close the test and show results by any api call, Then I can add the timer and if time completes i will show result page.. Thank you.

several quizes combined at one

Thanks again for this pretty quiz plugin! and i wanna ask, is it possible to do like this:
ex:

1. we have several .json files where stored quiz questions like php.json, html.json, css.json, jquery.json.... (tests about php, html, css ....)
2. we have a page where user checks quizes which he wants to take from all available quizes (in our example chose from to quizzes - php and css) and hits the let's say start button.
   The question is - is it possible to make this two choices combined together and start the quiz (user takes two quizes parallelly)?
   i mean user may switch beetween them if he wants and quiz should work. when goes php quiz on the top right corner we have button "swithc to css quiz" or something like that.
   if its possible, can you give me some example or explain how to implement it.
   thanks in advance!!!

about quiz answers

If we open in chrome "resources ->script->slickquiz_config" we can find all questions with right answers and user can cheat . How can we solve this problem?

Display BOTH answers/results as you go AND at the end.

Display BOTH answers/results as you go AND at the end.

Tweak functionality of: completionResponseMessaging

Adjust selectors for markup flexibility

A suggestion from a user who slightly altered the default markup.

http://www.jewlofthelotus.com/2011/12/23/slickquiz-jquery-plugin-now-on-github/comment-page-5/#comment-2323

[...]I want to use custom radio buttons. I’ve tried a few solutions that wrap the input and hide the radio button (like this – http://www.egstudio.biz/custom-radio-buttons-with-jquery/) but whenever i do, the radio buttons no longer register with the quiz (i.e. always a blank answer)

The SPAN wrapper was causing the next() function useless. Might consider using this in the next version so silly people like me can easily use custom images for inputs =)

Suggested change:

var inputValue = $(this).next('label').text();
// to
var inputValue = $(this).siblings('label').text();

Use JSON instead of slickQuiz-config.js

Hi Jewl,

How can I use JSON for configuration file instead of using slickQuiz-config.js (with variable)?
I create JSON file and give the name slickQuiz.config.js but it didn't work.

Do others quiz without refresh page

Hi jewlofthelotus,
I'm prepare graduates, your plugin is so cool, so i use it for my project. And my problem is:
Ex: I have 5 question library, i try $('.selector').slickQuiz({json: {Library1}}) and finish that quiz. I want to try Library2, so i try all stuff again but it not working. I must refresh page and put Library2, so it work, and it so stupid. So do you have any solution for this?
Sorry for my english skill. My deadline is so close, help me please! Thanks.

Have an "onCompletion" option (or do you I can't find it?)

I want an option in the jquery plugin for "oncompletion" so I can send the score to the PHP file I have set up, I am not using this in WordPress but as a stand alone.

So when I initialize the jQuery plugin I would want to have
$("#div..."). function ("slickquiz"{
...
onFinish: function(final_score){
//my $.post call to php function with the score

}

..
});

refactor quiz options to, in part, rely on the presence of DOM elements

if element present in DOM - pull it into the quiz and use it:

checkAnswerText
nextQuestionText
backButtonText
tryAgainText

if element missing from DOM - feature disabled:

skipStartButton
disableResponseMessaging

throw console.log warnings if any of these deprecated options are present

somehow document these changes and tell users how to get what they want

Prevent flash of correct answers when "checking"

http://wordpress.org/support/topic/correct-answer-bug-in-latest-update

jQuery mobile styling

Hi,

I'm using your quiz for a mobile app, and the dynamic content comes up unstyled. I was trying to add the default jQuery mobile styling via:

$(".quizArea").appendTo( ".ui-page" ).trigger( "create" );

but the quiz fails to load afterwards. I managed to get the quiz to load (styled correctly) when I added the line to the slickQuiz.js file in the start() function (line 256), but then the quiz stopped acknowledging correct answers.

Any help would be appreciated! This is for a school project and it's my first foray into jQuery mobile so I'm a little overwhelmed.

Disable answer inputs when displayed with response messaging

Add option to hide / disable scores

Skip Question button option

Thanks for this plugin. I just wanna ask is it possible to make modification like "adding extra button called skip question" and by pressing it user can move to next question without giving an answer and at any time or after last question script gives info that user have some questions with no answer, and want to come back and answer them. Is it possible?
thanks in advance!

Social Sharing Buttons on quiz completion

Facebook
Twitter
Email

Pull in what the WP plugin is already doing.

How can i have dropdowns

Is there a setting for having select answers instead of radio ?

Quiz Timer (Countdown) Option

How to add timer for quizz? like at the beginning you have 5 minutes to give answers to 15 questions and after pressing start button timer will start countdown

From @crazycoder82

ID on last checkAnswer button

Hi!

I'd like to track when a user click the last "checkAnswer" to see if the user have successfully answered all questions.

An ID on the last checkAnswer would be awesome.

Is that something you would consider?

per answer response messages

Option to show all questions at once

Correct answers are registering as incorrect

Hi, I am trying to implement slickquiz into my android app via phonegap. I have all the js and css placed and called correctly. If I open it in a browser like chome or firefox on my pc it works fine. However, when I open it in the app, it loads fine and goes through each question, but no matter which answer you select it always counts it as the wrong answer. Do you know why this might be?

Drop random sort Q&A option in favor of separate options

Feature request : display all questions in one page

Hi,
It would be great to have an option to display all available questions in one page.
Thanks for you plugin !
Arnaud.

Reset correct answer states when going "Back"

position left quiz accessibility label

https://wordpress.org/support/topic/unexpected-problem?replies=4#post-6135607

Allow customized feedback based on incorrect option chosen

From @ramnathv https://github.com/QuickenLoans/SlickQuiz/issues/6

Another idea I had was to extend the feedback option from a mere correct and incorrect to one option for each option. You can easily implement it in the JSON data by adding feedback to every option in addition to option and correct. A little bit of javascript can then display the feedback corresponding to the option chosen.

You will want to retain the current way of doing this.

Option to move to next question on answer selection

http://wordpress.org/support/topic/delete-result-on-final-page?replies=3#post-5876357

Documentation Updates

• Phonegap compatibility
• jQuery Mobile compatibility
• Not YET Intended for Academic Use
• Features in the Pipeline
  • Per Answer Responses
  • Optional Ranking Levels
• FAQ on Fill in the blanks
• FAQ on HTML usage

No options are working in demo

I have tried this code in demo page but no option works good. Sorry if I made a mistake, hope something went wrong. The options like tryAgain, prevent unanswered, randomSortAnswers, randomSortQuestions, disableResponseMessaging, completionResponseMessaging everything dint worked as expected. Below is the code I emplyed,

var quizJSON = {
"info": {
"name": "Test Your Knowledge!!",
"main": "

Think you're smart enough to be on Jeopardy? Find out with this super crazy knowledge quiz!

",
"results": "

Learn More

Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus.

",
"level1": "Jeopardy Ready",
"level2": "Jeopardy Contender",
"level3": "Jeopardy Amateur",
"level4": "Jeopardy Newb",
"level5": "Stay in school, kid..." // no comma here
},
"numberOfQuestions": true,
"randomSortQuestions": true,
"randomSortAnswers": true,
"preventUnanswered": true,
"completionResponseMessaging": true,
"tryAgainText": true,
"disableResponseMessaging": true,
"questions": [
{ // Question 1 - Multiple Choice, Single True Answer
"q": "What number is the letter A in the English alphabet?",
"a": [
{"option": "8", "correct": false},
{"option": "14", "correct": false},
{"option": "1", "correct": true},
{"option": "23", "correct": false} // no comma here
],
"correct": "

That's right! The letter A is the first letter in the alphabet!

",
"incorrect": "

Uhh no. It's the first letter of the alphabet. Did you actually go to kindergarden?

" // no comma here
},
{ // Question 2 - Multiple Choice, Multiple True Answers, Select Any
"q": "Which of the following best represents your preferred breakfast?",
"a": [
{"option": "Bacon and eggs", "correct": false},
{"option": "Fruit, oatmeal, and yogurt", "correct": true},
{"option": "Leftover pizza", "correct": false},
{"option": "Eggs, fruit, toast, and milk", "correct": true} // no comma here
],
"select_any": true,
"correct": "

Nice! Your cholestoral level is probably doing alright.

",
"incorrect": "

Hmmm. You might want to reconsider your options.

" // no comma here
},
{ // Question 3 - Multiple Choice, Multiple True Answers, Select All
"q": "Where are you right now? Select ALL that apply.",
"a": [
{"option": "Planet Earth", "correct": true},
{"option": "Pluto", "correct": false},
{"option": "At a computing device", "correct": true},
{"option": "The Milky Way", "correct": true} // no comma here
],
"correct": "

Brilliant! You're seriously a genius, (wo)man.

",
"incorrect": "

Not Quite. You're actually on Planet Earth, in The Milky Way, At a computer. But nice try.

" // no comma here
},
{ // Question 4
"q": "How many inches of rain does Michigan get on average per year?",
"a": [
{"option": "149", "correct": false},
{"option": "32", "correct": true},
{"option": "3", "correct": false},
{"option": "1291", "correct": false} // no comma here
],
"correct": "

Holy bananas! I didn't actually expect you to know that! Correct!

",
"incorrect": "

Fail. Sorry. You lose. It actually rains approximately 32 inches a year in Michigan.

" // no comma here
},
{ // Question 5
"q": "Is Earth bigger than a basketball?",
"a": [
{"option": "Yes", "correct": true},
{"option": "No", "correct": false} // no comma here
],
"correct": "

Good Job! You must be very observant!

",
"incorrect": "

ERRRR! What planet Earth are you living on?!?

" // no comma here
} // no comma here
]
};

Namespace answer inputs with the quiz ID

Currently, if you have 2+ quizzes on a page and, for example, question 1 of each quiz has radio button answers - selecting an answer in any of the quizzes will clear the selection from the other quiz.

Adding images to quiz

Hi

Is there a way to add images to a quiz eg. picture of someone and the question would be something like "Who is this person ?"

I am just starting with php , html etc. so if you could at least point me in the right direction I would appreciate it
Regards
Alvin

Add option to customize copy for final "next" button

Timer Option in SlickQuiz

Please Can i have the code for Timer Option. It can be send to my email [email protected]. Thanks

Events / Public API

From @hellopablo @abensrhir @Jaace https://github.com/QuickenLoans/SlickQuiz/issues/46

Would be nice to have a public API for events so that we can hook into the plugin easily/cleanly. e.g:

onCompleteQuiz = function() {
//    AJAX save the results of the quiz, or something
}

Multiple Quizes, same page

Am I the only one who is having trouble getting multiple quizes to work on the same page? I think there might be some name conflicts when there are multiple quizes on the same page. Quiz 1, Question 1 has the same id as Quiz 2, Question 1 when they are both on the same page, and it's causing some really strange behavior.