title: Javascript for multiple choice quiz
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>TL;DR:</p>
  
  <ul>
  <li>Show hidden divs based on the question/answer combination when the
  submit button is hit</li>
  <li>Reset everything with a button, so they can try again.</li>
  </ul>
  
  <p>Here's my jsfiddle: <a href="https://jsfiddle.net/astonishedowl/wjrngf5n/" rel="nofollow">https://jsfiddle.net/astonishedowl/wjrngf5n/</a>
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#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();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form method="post"&gt;
    &lt;select name="question" id="question"&gt;
      &lt;option value="select"&gt;Select&lt;/option&gt;
      &lt;option value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
    &lt;/select&gt;
    &lt;br /&gt;
    &lt;input type="radio" name="answer" value="A"&gt;A&lt;/input&gt;
    &lt;br /&gt;
    &lt;input type="radio" name="answer" value="B"&gt;B&lt;/input&gt;
    &lt;br /&gt;
    &lt;input type="radio" name="answer" value="C"&gt;C&lt;/input&gt;
    &lt;br /&gt;
    &lt;input type="radio" name="answer" value="D"&gt;D&lt;/input&gt;
    &lt;br /&gt;
    &lt;input type="radio" name="answer" value="E"&gt;E&lt;/input&gt;
    &lt;br /&gt;
    &lt;input type="submit" value="Submit" id="submit" /&gt;
  &lt;/form&gt;
  &lt;div id="q1correct" style="display:none"&gt;question 1 correct&lt;/div&gt;
  &lt;div id="q1incorrect" style="display:none"&gt;question 1 incorrect&lt;/div&gt;
  &lt;div id="whoops" style="display:none"&gt;something went wrong&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>