Javascript 测验 - 如何计算多个选择元素中答案的分数？

Question

我无法编写一个循环来计算我为我的 wordpress 网站创建的测验的分数。

测验样式是“将 A 列中的项目与 B 列中的项目进行匹配”。

B 列项目使用选择元素来匹配 A 列中的相应项目。

我能想到的最好办法是像这样手动将每个选定的答案添加在一起..

html

<select id="testValues1">
    <option value="right">a</option>
    <option value="wrong">b</option>
    <option value="wrong">c</option>
</select>
<select id="testValues2">
    <option value="wrong">a</option>
    <option value="right">b</option>
    <option value="wrong">c</option>
</select>
<select id="testValues3">
    <option value="wrong">a</option>
    <option value="wrong">b</option>
    <option value="right">c</option>
</select>

<button type="button" onclick="finalScore()">Submit</button>

<div id="scoreDisplay">score goes here</div>

JavaScript

<script>
function finalScore(){
var i = 0;
var select1 = document.getElementById("testValues1");
var answer1 = select1.options[select1.selectedIndex].value;
    if(answer1 == "right"){
        i++;
    }

var select2 = document.getElementById("testValues2");
var answer2 = select2.options[select2.selectedIndex].value;
    if(answer2 == "right"){
        i++;
    }

var select3 = document.getElementById("testValues3");
var answer3 = select3.options[select3.selectedIndex].value;
    if(answer3 == "right"){
        i++;
    }

document.getElementById("scoreDisplay").innerHTML = i;
}
</script>

上面的效果很好，但我想添加更多这样的测验，有些测验有超过 3 个可能的问题/匹配。

我一直无法编码的想法..

JavaScript

function finalScore() {
    var answersCorrect = 0;
    var answersCounter = 0;
    foreach "select" {
        var rightOrWrong = "get value";
        if (rightOrWrong = right) {
            answersCorrect++
        }
        answersCounter++;
    }
    var finalScore = Math.floor((answersCorrect / answersCounter) * 100));
    document.getElementById("scoreDisplay").innerHTML = finalScore;
}

解决方案不一定是纯 javascript，如果不可能的话，但我对 jquery 的精通程度更低。

Answer 1

我相信以下功能将使您的测验代码更易于重用。在计算正确答案的百分比时，它会考虑问题的数量。为了添加问题，您只需将类问题添加到将成为问题的每个选择语句中。

现场演示:http://codepen.io/larryjoelane/pen/ZQrKjY

function finalScore(){//begin function

  //initialize the correct variable
  var correct = 0;

  var selectValue;

  //store the collection of elements with the class name question
  var questions = document.getElementsByClassName("question");

  //the number of questions(elements with a class name of question)
  var numOfQuestions = questions.length;

//loop through the collection of elements with a question class
for(var i = 0; i < questions.length; i++ ){//begin for loop

 //get the value of the select element
 selectValue =  questions[i].options[questions[i].selectedIndex].value;

  //if the value equals right
  if(selectValue === "right"){//begin if then

    //increment the correct variable
    correct++;

  }//end if then

}//end for loop

//get the percentage of correct answers
document.getElementById("scoreDisplay").innerHTML = (100/numOfQuestions) * correct;  

}//end function

HTML(注意在每个选择语句中添加类问题):

     <select class ="question" id="testValues1">
       <option value="right">a</option>
       <option value="wrong">b</option>
       <option value="wrong">c</option>
    </select>
    <select class="question" id="testValues2">
       <option value="wrong">a</option>
       <option value="right">b</option>
       <option value="wrong">c</option>
    </select>
    <select class="question" id="testValues3">
       <option value="wrong">a</option>
       <option value="wrong">b</option>
       <option value="right">c</option>
    </select>

<button type="button" onclick="finalScore()">Submit</button>

<div id="scoreDisplay">score goes here</div>