How to use JavaScript to create a dynamic quiz. 1. Create an interactive quize u
ID: 3603419 • Letter: H
Question
How to use JavaScript to create a dynamic quiz.
1. Create an interactive quize using Javascript, No Juqery.
- Make at least 20 questions. The quiz should display one question at a time and show a Next button to the next question by use a mixture of form controls(textboxes, radio group, select/list menu, checkboxes, ect...)
- The page should show the results of the quiz which must include the grade earned on the quiz, the answers by the user, whether the user got the question correct or incorrect, and show the correct answers. Provide input validation where necessary.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-size: 20px;
font-family: sans-serif;
color: #333;
}
.question{
font-weight: 600;
}
.answers {
margin-bottom: 20px;
}
#submit{
font-family: sans-serif;
font-size: 20px;
background-color: #297;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
}
#submit:hover{
background-color: #3a8;
}
</style>
</head>
<body>
<div id="quiz"></div>
<button id="submit">Get Results</button>
<div id="results"></div>
</body>
<script>
var myQuestions = [
{
question: "What is 10+2 ?",
answers: {
a: '3',
b: '12',
c: '115'
},
correctAnswer: 'b'
},
{
question: "What is 10*5?",
answers: {
a: '50',
b: '55',
c: '115'
},
correctAnswer: 'a'
},
{
question: "What is 9*6?",
answers: {
a: '36',
b: '54',
c: '11'
},
correctAnswer: 'b'
},
{
question: "What is 8-4?",
answers: {
a: '3',
b: '5',
c: '4'
},
correctAnswer: 'c'
},
{
question: "What is the color of water?",
answers: {
a: 'blue',
b: 'green',
c: 'no color'
},
correctAnswer: 'c'
},
{
question: "What is 0/8?",
answers: {
a: '3',
b: '5',
c: '0'
},
correctAnswer: 'c'
},
{
question: "What is 10/0?",
answers: {
a: '3',
b: '5',
c: 'infinity'
},
correctAnswer: 'c'
},
{
question: "What is 18/2?",
answers: {
a: '3',
b: '9',
c: '115'
},
correctAnswer: 'b'
},
{
question: "What is 9/2?",
answers: {
a: '3',
b: '9',
c: '4.5'
},
correctAnswer: 'c'
},
{
question: "What is 30/3?",
answers: {
a: '3',
b: '5',
c: '10'
},
correctAnswer: 'c'
}
];
var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');
generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);
function generateQuiz(questions, quizContainer, resultsContainer, submitButton){
function showQuestions(questions, quizContainer){
// we'll need a place to store the output and the answer choices
var output = [];
var answers;
// for each question...
for(var i=0; i<questions.length; i++){
// first reset the list of answers
answers = [];
// for each available answer...
for(letter in questions[i].answers){
// ...add an html radio button
answers.push(
'<label>'
+ '<input type="radio" name="question'+i+'" value="'+letter+'">'
+ letter + ': '
+ questions[i].answers[letter]
+ '</label>'
);
}
// add this question and its answers to the output
output.push(
'<div class="question">' + questions[i].question + '</div>'
+ '<div class="answers">' + answers.join('') + '</div>'
);
}
// finally combine our output list into one string of html and put it on the page
quizContainer.innerHTML = output.join('');
}
function showResults(questions, quizContainer, resultsContainer){
// gather answer containers from our quiz
var answerContainers = quizContainer.querySelectorAll('.answers');
// keep track of user's answers
var userAnswer = '';
var numCorrect = 0;
// for each question...
for(var i=0; i<questions.length; i++){
// find selected answer
userAnswer = (answerContainers[i].querySelector('input[name=question'+i+']:checked')||{}).value;
// if answer is correct
if(userAnswer===questions[i].correctAnswer){
// add to the number of correct answers
numCorrect++;
// color the answers green
answerContainers[i].style.color = 'lightgreen';
}
// if answer is wrong or blank
else{
// color the answers red
answerContainers[i].style.color = 'red';
}
}
// show number of correct answers out of total
resultsContainer.innerHTML = numCorrect + ' out of ' + questions.length;
}
// show questions right away
showQuestions(questions, quizContainer);
// on submit, show results
submitButton.onclick = function(){
showResults(questions, quizContainer, resultsContainer);
}
}
</script>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.