multiple choice quiz with class correct and wrong

Question

I created a multiple choice quiz, and it working perfectly, I mean get the total score written on the website, but I wish to change it to just giving an extra 'correct' or 'wrong' CSS class to the selected input radio buttons after the Submit button has been hit.

HTML:

<section class="quiz">
                  <div id="results"></div>
                  <form name="quizForm" onsubmit="return submitAnswer()">
                    <h4 class="quiz-title knowledge-content-list-item-subheader">Question 1</h4>
                    <p>Question 1</p>
                    <div class="quiz-answers">
                      <input data-answer type="radio" name="q1" value="a" id="q1a"><label for="q1a">Test 1</label><br>
                      <input data-answer type="radio" name="q1" value="b" id="q1b"><label for="q1b">Test 2</label><br>
                      <input data-answer type="radio" name="q1" value="c" id="q1c"><label for="q1c">Test 3</label><br>
                    </div>

                    <h4 class="quiz-title knowledge-content-list-item-subheader">Question 2</h4>
                    <p>Question 2</p>
                    <div class="quiz-answers">
                      <input data-answer type="radio" name="q2" value="a" id="q2a"><label for="q2a">Test 4</label><br>
                      <input data-answer type="radio" name="q2" value="b" id="q2b"><label for="q2b">Test 5</label><br>
                      <input data-answer type="radio" name="q2" value="c" id="q2c"><label for="q2c">Test 6</label><br>
                    </div>

                    <h4 class="quiz-title knowledge-content-list-item-subheader">Question 3</h4>
                    <p>Question 3</p>
                    <div class="quiz-answers">
                      <input data-answer type="radio" name="q3" value="a" id="q3a"><label for="q3a">Test 7</label><br>
                      <input data-answer type="radio" name="q3" value="b" id="q3b"><label for="q3b">Test 8</label><br>
                      <input data-answer type="radio" name="q3" value="c" id="q3c"><label for="q3c">Test 9</label><br>
                    </div>

                    <h4 class="quiz-title knowledge-content-list-item-subheader">Question 4</h4>
                    <p>Question 4</p>
                    <div class="quiz-answers">
                      <input data-answer type="radio" name="q4" value="a" id="q4a"><label for="q4a">Test 10</label><br>
                      <input data-answer type="radio" name="q4" value="b" id="q4b"><label for="q4b">Test 11</label><br>
                      <input data-answer type="radio" name="q4" value="c" id="q4c"><label for="q4c">Test 12</label><br>
                    </div>

                    <button id="btn-submit" class="btn btn-submit" type="submit" name="submit" value="submit">submit</button>

                  </form>

              </div>
            </section>

JavaScript:

function submitAnswer() {
      var total = 4;
      var score = 0;

      // Get User Input
      var q1 = document.forms["quizForm"]["q1"].value;
      var q2 = document.forms["quizForm"]["q2"].value;
      var q3 = document.forms["quizForm"]["q3"].value;
      var q4 = document.forms["quizForm"]["q4"].value;

      // Validation
      for(i = 1; i <= total; i++){
          if(eval('q'+i) == null || eval('q'+i) == ''){
          alert('You missed question '+ i);
          return false;
        }
      }

      // Set Correct Answers
      var answers = ["a", "b", "c", "a"];

      // Check Answers
      for(i = 1; i <= total; i++){
        if(eval('q'+i) == answers[i - 1]){
          score++;
        } 
      }


      // Display results
      var results = document.getElementById('results');

      results.innerHTML = '<h3>You scored <span>'+score+'</span> out of <span>'+total+'</span></h3>';          


      return false;
    }

I would be really appreciated for any kind of help. Cheers

the op wants to add a class correct or wrong to the checked radio btns — orangespark, Apr 02 '18 at 11:19
Is this function really working the way you expect? You are using eval which is not something i would encourage using in the code. Also are there multiple forms? — orangespark, Apr 02 '18 at 11:22
Sorry, completely forget my question. So, I just need basically a snippet of code when I hit the submit button all of the correct questions get a 'correct' class or if the answers are wrong they get a 'wrong' class. — Regina, Apr 02 '18 at 11:22
orangespark - yep, this code is working, but it is just writing the total score on the website, what I basically don't need. — Regina, Apr 02 '18 at 11:24
if you want to just add check and add corresponding correct and wrong classes. I would prefer to get the list of all the elements using queryselector and then loop through them and check your answers if they match add the classes and btw you wont be needing that eval anyway. — orangespark, Apr 02 '18 at 11:29
orangespark - I know it's confusing, but yes, I don't need the score to show on the website because if you change let say background colour of the answer to be green or red, you will know straight away. your answer was correct or not. — Regina, Apr 02 '18 at 11:33

score 0 · Answer 1 · answered Apr 02 '18 at 11:19

0

You can use classLis.add() for that. So in your JS you'd do document.getElementById('q4a').classList.add('correct') document.getElementById('q4b').classList.add('wrong') document.getElementById('q4c').classList.add('wrong')

answered Apr 02 '18 at 11:19

Alex Lakatos

253
1
6

Thanks Alex, but the problem is that the 'q4a' 'q4b' 'q4c' are always changing as the users give different answers. So, I should store all of the selected answers in an array for example (not sure it would work) and get access them. – Regina Apr 02 '18 at 11:29
you can just remove all the correct and wrong classes from all inputs before adding it – orangespark Apr 02 '18 at 11:31
You can check the value first. so you'd do: if (document.forms["quizForm"]["q1"].value == document.getElementById('q4a').value) { document.getElementById('q4a').classList.add('correct') } else { document.getElementById('q4a').classList.add('wrong') } – Alex Lakatos Apr 02 '18 at 15:46

multiple choice quiz with class correct and wrong

1 Answers1