Question

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

测验样式将A列中的项目与B列中的项目匹配。

B列项目使用select元素匹配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

使用jquery：

$(document).ready(function(){
    var rightAnswers = 0;
    $("select").each(function(){
        if($(this).val()=='right'){ 
            rightAnswers++;    
        }
    });
    alert('right answers: ' + rightAnswers);
});

Answer 2

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

现场演示：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语句中添加了类问题）：

     <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>

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

2 个答案: