CODEWITHSUNDEEP
javascripthtmlcss
Rachel
Rachel

Reputation: 105

Javascript for multiple choice quiz

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:

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>

Upvotes: -1

Views: 3812

Answers (2)

indubitablee
indubitablee

Reputation: 8206

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>

Upvotes: 1

DavidB
DavidB

Reputation: 2596

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.

Upvotes: 1

Related Questions