使用單選按鈕計算測驗中的分數

Question

我正在嘗試使用單選按鈕進行簡單的Javascript測驗。 每個問題和選項都應存儲在一個數組中，並使用getElementById()動態替換這些問題。 我一直在嘗試為單選按鈕分配值，以便可以在最后顯示分數。

我是javascript新手，這是我正在從事的第一個項目。

這是我到目前為止的內容：

 var questionsArray = new Array; questionsArray[0] = ["1. Who is the president of the US?"]; questionsArray[1] = ["2. What is the capital city of France?"]; questionsArray[2] = ["3. What is your favorite food?"]; var choicesArray = new Array(); choicesArray[0] = ["Lebron James", "Barack Obama", "George Bush"]; choicesArray[1] = ["Nairobi", "London", "Paris"]; choicesArray[2] = ["Pizza", "Sushi", "Pasta"]; var i = 0; var theScore = 0; function btnOnclick() { var radElement = document.form1.options; var showDiv = document.getElementById("questionsDiv"); showDiv.className = "showClass"; document.getElementById("next").value = "Next"; while(i < questionsArray.length && i < choicesArray.length) { var currQues = questionsArray[i]; var option1 = choicesArray[i][0]; var option2 = choicesArray[i][1]; var option3 = choicesArray[i][2]; i++; document.getElementById("question").innerHTML = currQues; document.getElementById("choice1").innerHTML = option1; document.getElementById("choice2").innerHTML = option2; document.getElementById("choice3").innerHTML = option3; return true } if(questionsArray[0] && radElement[1].checked == true) { theScore += 10 } else { theScore += 0 } if(questionsArray[1] && radElement[2].checked == true) { theScore += 10 } else { theScore += 0 } if(questionsArray[2] && radElement[1].checked == true) { theScore += 10 } else { theScore += 0 } alert(theScore) } function bodyOnload() { var hideDiv = document.getElementById("questionsDiv"); hideDiv.className = "hideClass"; document.getElementById("next").value = "Start Quiz" }

 .hideClass{ display: none; } .showClass{ display: block; }

 <body onload="bodyOnload()"> <h1>QUIZ</h1> <div id="questionsDiv"> <form name="form1"> <p id="question" class="showQuestion"></p> <tr> <span id="choice1"></span> <td> <input type="radio" id="radio1" value="0" name="options" /> </td> <td> <span id="choice2"></span> <input type="radio" id="radio2" value="0" name="options" /> </td> <td> <span id="choice3"></span> <input type="radio" id="radio3" value="0" name="options" /> </td> </tr> </div> <br /> <br /> <hr> <tr> <td> <input type="button" id="next" value="Next" name="nextButton" onclick="btnOnclick()"/> </td> </tr> </form> </body>

Answer 1

考慮將答案構造為對象數組，如下所示：

choicesArray[2] = [{
    text: "Pizza",
    correct: true
}, {
    text: "Pasta",
    correct: false
}, {
    text: "Sushi",
    correct: false
}];

然后，如果選擇了radio2 ，則檢查答案數組中的第二項以查看其是否正確，如下所示：

// use index 1 for the second choice in the list.
if(choicesArray[2][1].correct === true) {
    //it's right!
} else {
    //it's wrong...
}

在獲得此功能之前，顯然您還有路要走，但這是我的第一個建議。

您可以進一步（我願意！），將問題和答案放在一起，以方便參考：

var question = {
    questionText: 'What is your favorite food?',
    answers: [{
        answerText: "Pizza",
        correct: true
    }, {
        answerText: "Pasta",
        correct: false
    }, {
        answerText: "Sushi",
        correct: false
    }]
};

然后，您可以訪問如下內容：

var currentQuestionIndex = 1; //or whatever it is

var questionText = questionsArray[currentQuestionIndex].questionText;

var answer1 = questionsArray[currentQuestionIndex].answers[0].answerText;
var answer1isCorrect = questionsArray[currentQuestionIndex].answers[0].correct;

var answer2 = questionsArray[currentQuestionIndex].answers[1].answerText;
var answer2isCorrect = questionsArray[currentQuestionIndex].answers[1].correct;

var answer3 = questionsArray[currentQuestionIndex].answers[2].answerText;
var answer3isCorrect = questionsArray[currentQuestionIndex].answers[2].correct;

另外，在將項目添加到數組時，您不必如此明確。 它使您的代碼變得脆弱。 考慮使用push() ：

var questionsArray = [];

questionsArray.push({
    questionText: 'What is your favorite food?',
    answers: [{
        answerText: "Pizza",
        correct: true
    }, {
        answerText: "Pasta",
        correct: false
    }, {
        answerText: "Sushi",
        correct: false
    }]
});

使用單選按鈕計算測驗中的分數

問題描述

1 個解決方案

解決方案1
0 已采納 2015-06-27 21:14:51

使用單選按鈕計算測驗中的分數

問題描述

1 個解決方案

解決方案1 0 已采納 2015-06-27 21:14:51

解決方案1
0 已采納 2015-06-27 21:14:51