Here's the HTML:
Next, we'll create a function to generate a quiz.
Your function will need these inputs:
The quiz questions
A place to put the quiz
A place for the results
A submit button
And if you put those things in, the function should spit out a fully-formed quiz.
The JavaScript structure:
function generateQuiz(questions, quizContainer, resultsContainer, submitButton){
function showQuestions(questions, quizContainer){
// code will go here
}
function showResults(questions, quizContainer, resultsContainer){
// code will go here
}
// show the questions
showQuestions(questions, quizContainer);
// when user clicks submit, show results
submitButton.onclick = function(){
showResults(questions, quizContainer, resultsContainer);
}
}
If you look closely at the JavaScript structure, you'll see that our generateQuiz function contains helper functions to show the quiz, accept submissions, and show the results.
Step 2: Show the questions
First we'll need the questions, so put this in your JavaScript:
var myQuestions = [
{
question: "What is 10/2?",
answers: {
a: '3',
b: '5',
c: '115'
},
correctAnswer: 'b'
},
{
question: "What is 30/3?",
answers: {
a: '3',
b: '5',
c: '10'
},
correctAnswer: 'c'
}
];
Next we'll need a way to show our questions.
For this, we'll fill out our showQuestions function.
The general idea:
For each question, show the question along with all of its answer choices. Read through the comments in this code to see how it works.
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'
+ ''
+ letter + ': '
+ questions[i].answers[letter]
+ ''
);
}
// add this question and its answers to the output
output.push(
'
' + questions[i].question + '
'
+ '' + answers.join('') + '
'
);
}
// finally combine our output list into one string of html and put it on the page
quizContainer.innerHTML = output.join('');
}
Once that's ready, you can run the function like this:
showQuestions(questions, quizContainer);
Note that in this line, the questions and quizContainer values will come from your generateQuiz function.
The nice part about our code is that it works for any number of questions or answer choices you might have in your JavaScript quiz.
Step 3: On submit, show the results
We'll need to fill out our showResults function to show the results of our quiz.
Here's how our JavaScript logic will look:
For each question, find the selected answer
If the answer is correct, respond accordingly
If the answer is wrong, respond accordingly
Show the number of correct answers out of the total
And here's the JavaScript to show the results of our quiz:
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
Comments
Post a Comment
All the best my friends