Displaying one quiz item at a time
Question
I'm creating a quiz from scratch and right now I have it displaying all the quiz questions at one time. How do I change it to display only one question at a time so when the user clicks a "Next" button, the next question and its choices displays and so on? Thank you.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>State Capitals</title>
<script>
var myQuiz = [{
ques: "What is the capital of California?",
choices: ["Los Angeles", "San Francisco", "Sacramento", "San Diego", "Oakland"],
correctAnswer: "Sacramento"
},
{
ques: "What is the capital of Pennsylvania?",
choices: ["Pittsburgh", "Philadelphia", "Harrisburg", "Erie"],
correctAnswer: "Harrisburg"
},
{
ques: "What is the capital of Florida?",
choices: ["Tallahassee", "Tampa", "Miami", "Jacksonville"],
correctAnswer: "Tallahassee"
},
{
ques: "What is the capital of Georgia?",
choices: ["Augusta", "Atlanta", "Savannah"],
correctAnswer: "Atlanta"
}
]; //end of myQuiz array of objects
for (var i = 0; i < myQuiz.length; i++) {
document.write(myQuiz[i].ques + "<br />");
for (var j = 0; j < myQuiz[i].choices.length; j++) {
document.write("<input type=radio id=myRadio name=radAnswer>" + myQuiz[i].choices[j] + "<br />");
}
}
</script>
</head>
<body>
</body>
</html>
1 answers
solution1
3 ACCPTED 2017-04-19 18:02:42
This is how you can achieve what you want without changing your code too much.
var myQuiz = [ { ques: "What is the capital of California?", choices: ["Los Angeles", "San Francisco", "Sacramento", "San Diego", "Oakland"], correctAnswer: "Sacramento" }, { ques: "What is the capital of Pennsylvania?", choices: ["Pittsburgh", "Philadelphia", "Harrisburg", "Erie"], correctAnswer: "Harrisburg" }, { ques: "What is the capital of Florida?", choices: ["Tallahassee", "Tampa", "Miami", "Jacksonville"], correctAnswer: "Tallahassee" }, { ques: "What is the capital of Georgia?", choices: ["Augusta", "Atlanta", "Savannah"], correctAnswer: "Atlanta" } ]; //end of myQuiz array of objects var questionIndex = -1; // Not started function nextQuestion() { document.body.innerHTML = ''; ++questionIndex; document.write(myQuiz[questionIndex].ques + "<br />"); for (var j=0; j < myQuiz[questionIndex].choices.length; j++) { document.write("<input type=radio id=myRadio name=radAnswer>" + myQuiz[questionIndex].choices[j] + "<br />"); } if (questionIndex < (myQuiz.length - 1)) { var nextButton = document.createElement("input"); nextButton.type = "button"; nextButton.value = "Next question"; nextButton.addEventListener('click', nextQuestion); document.body.appendChild(nextButton); } }; nextQuestion();
However, bear in mind that isn't a good practice to work withdocument.write() . I don't know if this is a study question or something like, but you should work with DOM elements instead.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.