多项选择测验的Javascript

Question

有一个问题编号下拉列表，以及一个用于选择答案的收音机。 问题是1-30，答案是AE。 点击提交（它将通过post方法将信息发送到外部数据库），一组if-else语句将确定答案是否正确。

届时，将出现文本（从一个隐藏的div中出来），并附有一个关于答案是否正确/不正确的说明以及一个解释。 我将有60个隐藏的div（30个表示“正确，这是解释”，30个表示“不正确，这是解释”），并且每次按下“提交”按钮时都会触发一个。 另外，应该有一个“重试”按钮，它将重置所有内容。

TL; DR：

• 单击提交按钮时，根据问题/答案组合显示隐藏的div
• 使用按钮重置所有内容，以便他们可以重试。

这是我的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

在Jquery中，它不是onclick，而是单击。 当文档准备好时，您还需要注册click事件

$( 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/

您还应该删除表单标签以防止页面重新加载。

Answer 2

我稍微改变了你的结构，我希望你不要介意

 $('#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>