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 A-E. 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>

Basically: how do I get these divs to show up when the user hits "submit" and I determine if the question was correct or incorrect? — Rachel
– Rachel, Commented Sep 24, 2015 at 15:15
It wasn't, but now it is. Still not working, giving me this kind of error: {"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': <mooshell.forms.ShellForm object at 0x21f6b10>, 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': <django.forms.models.ModelChoiceField object at 0x1f9b510>, 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': <mooshell.forms.ShellForm object at 0x21f6b10>, 'html_name': 'js_wrap', 'h .... — Rachel
– Rachel, Commented Sep 24, 2015 at 15:25

indubitablee · Accepted Answer · 2015-09-24 15:44:13Z

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>

This works very well!!! Would I be able to still have this in a form tag? I need a form tag to post the results to the right place.
Then you should research ajax, as if you post to another page your dom manipulation is pointless. Ajax will let you post the answers without reloading the page
@Rachel, as DavidB said, ajax will help you post your information to where you want it go without the rigidness of the form submits. take a look here: api.jquery.com/jquery.ajax

DavidB · Accepted Answer · 2015-09-24 15:41:31Z

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.

edited Sep 24, 2015 at 15:41

answered Sep 24, 2015 at 15:24

DavidB

2,5973 gold badges35 silver badges66 bronze badges

4 Comments

Rachel Over a year ago

It's starting to work!! Thank you! Still a few more problems, if you can help: when I try this out on the actual page, it shows for a second and then disappears. Is there any way for this to stick around until the user hits a "reset" button?

DavidB Over a year ago

remove the form tags, by having the input within a form a post is made.

Rachel Over a year ago

Is there any work around to include the form tag? I need it in order to have the answers post to the right place.

DavidB Over a year ago

Yes look at ajax. If you were doing that then you would be able to send the answers to the server, and receive a result showing you what was right or wrong. Then the answers could not be checked by just viewing the source

Collectives™ on Stack Overflow

Javascript for multiple choice quiz

2 Answers 2

3 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Related