Question

我创建了一个多项选择测验，它工作得很好，我的意思是得到在网站上写的总分，但我希望将其更改为仅为所选输入提供额外的“正确”或“错误”CSS类点击提交按钮后的单选按钮。

HTML：

<section class="quiz">
                  <div id="results"></div>
                  <form name="quizForm" onsubmit="return submitAnswer()">
                    <h4 class="quiz-title knowledge-content-list-item-subheader">Question 1</h4>
                    <p>Question 1</p>
                    <div class="quiz-answers">
                      <input data-answer type="radio" name="q1" value="a" id="q1a"><label for="q1a">Test 1</label><br>
                      <input data-answer type="radio" name="q1" value="b" id="q1b"><label for="q1b">Test 2</label><br>
                      <input data-answer type="radio" name="q1" value="c" id="q1c"><label for="q1c">Test 3</label><br>
                    </div>

                    <h4 class="quiz-title knowledge-content-list-item-subheader">Question 2</h4>
                    <p>Question 2</p>
                    <div class="quiz-answers">
                      <input data-answer type="radio" name="q2" value="a" id="q2a"><label for="q2a">Test 4</label><br>
                      <input data-answer type="radio" name="q2" value="b" id="q2b"><label for="q2b">Test 5</label><br>
                      <input data-answer type="radio" name="q2" value="c" id="q2c"><label for="q2c">Test 6</label><br>
                    </div>

                    <h4 class="quiz-title knowledge-content-list-item-subheader">Question 3</h4>
                    <p>Question 3</p>
                    <div class="quiz-answers">
                      <input data-answer type="radio" name="q3" value="a" id="q3a"><label for="q3a">Test 7</label><br>
                      <input data-answer type="radio" name="q3" value="b" id="q3b"><label for="q3b">Test 8</label><br>
                      <input data-answer type="radio" name="q3" value="c" id="q3c"><label for="q3c">Test 9</label><br>
                    </div>

                    <h4 class="quiz-title knowledge-content-list-item-subheader">Question 4</h4>
                    <p>Question 4</p>
                    <div class="quiz-answers">
                      <input data-answer type="radio" name="q4" value="a" id="q4a"><label for="q4a">Test 10</label><br>
                      <input data-answer type="radio" name="q4" value="b" id="q4b"><label for="q4b">Test 11</label><br>
                      <input data-answer type="radio" name="q4" value="c" id="q4c"><label for="q4c">Test 12</label><br>
                    </div>

                    <button id="btn-submit" class="btn btn-submit" type="submit" name="submit" value="submit">submit</button>

                  </form>

              </div>
            </section>

JavaScript的：

function submitAnswer() {
      var total = 4;
      var score = 0;

      // Get User Input
      var q1 = document.forms["quizForm"]["q1"].value;
      var q2 = document.forms["quizForm"]["q2"].value;
      var q3 = document.forms["quizForm"]["q3"].value;
      var q4 = document.forms["quizForm"]["q4"].value;

      // Validation
      for(i = 1; i <= total; i++){
          if(eval('q'+i) == null || eval('q'+i) == ''){
          alert('You missed question '+ i);
          return false;
        }
      }

      // Set Correct Answers
      var answers = ["a", "b", "c", "a"];

      // Check Answers
      for(i = 1; i <= total; i++){
        if(eval('q'+i) == answers[i - 1]){
          score++;
        } 
      }


      // Display results
      var results = document.getElementById('results');

      results.innerHTML = '<h3>You scored <span>'+score+'</span> out of <span>'+total+'</span></h3>';          


      return false;
    }

我会非常感激任何帮助。干杯

Answer 1

您可以使用classLis.add()。所以在你的JS中你会这样做 document.getElementById('q4a').classList.add('correct') document.getElementById('q4b').classList.add('wrong') document.getElementById('q4c').classList.add('wrong')

类正确和错误的多项选择测验

1 个答案: