Javascript for multiple choice quiz

Question

There's a dropdown of question numbers, and a radio set for answer choices. Questions are 1-30, answers are AE. Hit submit (which will send the information via the post method to an outside database), and a set of if-else statements will determine whether the answer was correct or not.

At that point, text will appear (from a hidden div), with a statement of whether the answer was correct/incorrect, and an explanation. I'll have 60 hidden divs (30 saying "correct, here's the explanation" and 30 saying "incorrect, here's the explanation"), and one will be triggered each time the submit button is hit. Also, there should be a "Try again" button, which resets everything.

TL;DR:

• Show hidden divs based on the question/answer combination when the submit button is hit
• Reset everything with a button, so they can try again.

Here's my jsfiddle: https://jsfiddle.net/astonishedowl/wjrngf5n/

 $('#submit').onclick(function() { if ($("#question").val() == "1") { if ($("#answer").val() == "A") { $('#q1correct').show(); } else $("#q1incorrect").show(); } else if ($("#question").val() == "2") { if ($("#answer").val() == "B") { $('#q1correct').show(); } else $("#q1incorrect").show(); } else $("#whoops").show(); }); 

 <form method="post"> <select name="question" id="question"> <option value="select">Select</option> <option value="1">1</option> <option value="2">2</option> </select> <br /> <input type="radio" name="answer" value="A">A</input> <br /> <input type="radio" name="answer" value="B">B</input> <br /> <input type="radio" name="answer" value="C">C</input> <br /> <input type="radio" name="answer" value="D">D</input> <br /> <input type="radio" name="answer" value="E">E</input> <br /> <input type="submit" value="Submit" id="submit" /> </form> <div id="q1correct" style="display:none">question 1 correct</div> <div id="q1incorrect" style="display:none">question 1 incorrect</div> <div id="whoops" style="display:none">something went wrong</div> 

Answer 1

in Jquery it isn't onclick, but just click. Also you need to register the click event when the document is ready

$( document ).ready(function() {
        $('#submit').click(function() {
      if ($("#question").val() == "1") {
        if ($("#answer").val() == "A") {
          $('#q1correct').show();
        } else $("#q1incorrect").show();
      } else if ($("#question").val() == "2") {
        if ($("#answer").val() == "B") {
          $('#q1correct').show();
        } else $("#q1incorrect").show();
      } else $("#whoops").show();
    });
});

https://jsfiddle.net/cnamu5o8/

You should also remove the form tags to prevent the page reloading.

Answer 2

i switched up your structure a little bit, i hope you dont mind

 $('#submit').click(function() { $('.results').show(); $('.selectedQ').html($('#question').val()); // set value $('.selectedA').html($('.answer:checked').val()); // set value $('.feedback').html(''); // clear text $('#submit').hide(); if ($("#question").val() == "1") { if ($(".answer:checked").val() == "A") { $('.feedback').html('This answer is correct.'); } else $('.feedback').html('This answer is NOT correct.'); } else if ($("#question").val() == "2") { if ($(".answer:checked").val() == "B") { $('.feedback').html('This answer is correct.'); } else $('.feedback').html('This answer is NOT correct.'); } else $('.feedback').html('Whoops, please make sure you select a question and an answer'); }); $('#reset').click(function() { $('#question').val(''); $('.answer').prop('checked', false); $('.results').hide(); $('#submit').show(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="question" id="question"> <option value="select">Select</option> <option value="1">1</option> <option value="2">2</option> </select> <br /> <input type="radio" name="answer" class="answer" value="A">A</input> <br /> <input type="radio" name="answer" class="answer" value="B">B</input> <br /> <input type="radio" name="answer" class="answer" value="C">C</input> <br /> <input type="radio" name="answer" class="answer" value="D">D</input> <br /> <input type="radio" name="answer" class="answer" value="E">E</input> <br /> <input type="submit" value="Submit" id="submit" /> <br/><br/> <div class="results" style="display:none;"> Selected Question: <span class="selectedQ"></span><br/> Selected Answer: <span class="selectedA"></span><br/> Result: <span class="feedback"></span><br/><br/> <input type="button" value="Reset" id="reset" /> </div>