How to create a dynamic quiz with 3 questions in JavaScript. [No Jquery] The que

Question

How to create a dynamic quiz with 3 questions in JavaScript. [No Jquery] The questions have to added to the page dynamically in JavaScript file instead of statically added in the body section.

- 3 questions with different question types. 1) textbox input question 2) radio button input question 3) dropdown list question

- When the questions show up in the html page, display the questions one by one, when user completes the current question, then allow they to move on by clicking the Next button.

- After answering all the quesions, show a submit button. calculate the score and display every quesitons with the answers input by users whether correct or incorrect and the correct answers.

Below is the picture of the requirement:

I know this question has been asked for many times. but they were totally incorrect. So, please don't just copy and paste those answers. I appreciate those who can really help with this dynamic quiz problem, I'm just a newbie with JavaScript.

Requirements 1. Create an interactive quiz using JavaScript. Use your creativity to make an interactive quiz with at least 20 questions. The quiz should display one question at a time and use a mixture of form controls (textboxes, radio group, select/list menus, etc...). The page should show the results of the quiz which must include the grade earned on the quiz, the answers entered by the user, whether the user got the question correct or incorrect, and the correct answers. Provide input validation where necessary a. b. c. d.

Explanation / Answer

Step 1: Set up the structure

First, we'll create divs to hold our quiz and our results.

Then we'll put in a submit button.
Here's the HTML:

<div id="quiz"></div>
<button id="submit">Get Results</button>
<div id="results"></div>

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<questions.length; i++){
      
       // first reset the list of answers
       answers = [];

       // for each available answer to this question...
       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('');
}

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<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;
}

In the line that says "//find selected answer", we did a little trick. We used the || operator, which means "or" to basically say "Give us the selected answer OR if there's not one, then just give us an empty object." That way, trying to get the .value will give us undefined instead of causing an error.

That way, the quiz won't break if someone skips a question.
Show quiz results on submit

The next step is to show quiz results when someone clicks the submit button.

The following JavaScript will make that happen:

// on submit, show results
submitButton.onclick = function(){
   showResults(questions, quizContainer, resultsContainer);
}

Note that the submitButton variable comes from our original generateQuiz function as one of the parameters.
Step 4: Put it all together

Now that you have the pieces, you can generate your very own JavaScript quiz.

You have the questions in the myQuestions variable from Step 2. Now you need to let your JavaScript know which HTML elements to use for the quiz, the results, and the submit button.

var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');

Now that everything's in place, you can generate your JavaScript quiz!

generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);

Congrats!
Bonus: The fun part

Now that you have the basic idea of how to make a JavaScript quiz, you can try styling the elements however you want.
Sample CSS used in demo:

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;
}

Feel free to change whatever you want!

Related Questions

Navigate

• Browse (All)
• Browse H
• Subjects

---

---

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.