用于多项选择测验的 Javascript

Question

有一个问题编号的下拉列表和一个用于选择答案的 radio 。问题是 1-30，答案是 A-E。点击提交(这将通过 post 方法将信息发送到外部数据库)，一组 if-else 语句将确定答案是否正确。

此时，将出现文本(来自隐藏的 div)，其中包含答案正确/不正确的陈述以及解释。我将有 60 个隐藏的 div(30 个说“正确，这是解释”，30 个说“不正确，这是解释”)，每次点击提交按钮时都会触发一个。此外，应该有一个“再试一次”按钮，它会重置所有内容。

长话短说:

• 根据问题/答案组合显示隐藏的 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

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

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