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

我正在嘗試使用單選按鈕進行簡單的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>

來源

2015-06-27 Soro

考慮結構化你的答案爲對象的數組，像這樣：

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

然後，如果radio2是選中，你檢查answers數組中的第二項，看看它是否正確，如下所示：

// 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 
    }] 
});

來源

2015-06-27 21:14:51 dgrundel

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

回答

相關問題