How to store variables in javascript / jquery / html quiz

Question

Hello everyone i have been developing a quiz. this quiz has 5 questions that display one after another. i would like to make it so, that after the 5th question it displays the answers. I have been using this piece of javascript to write the answers after the first click :

const button = document.querySelector("#button")
button.addEventListener("click", e => {
    const rb = document.querySelector('input[name="_exam_"]:checked');
    document.write(rb.value);
});

this makes it so that it writes the scores of the first question on screen. but i cant find out how to make it so that this only happens after the last question and that it shows all 5 answers.

so my question is ; how can i store the selected answers from the radio objects?

and how can i show these answers at the end?

const button = document.querySelector("#button")
button.addEventListener("click", e => {
    const rb = document.querySelector('input[name="_exam_"]:checked');
    document.write(rb.value);
});

$(document).ready(function () {
    //hide all questions
    $('.questionForm').hide();
    $('#results').hide();
    //show first question 
    $('#q1').show();

    $('#q1 #button').click(function () {
        $('.questionForm').hide();
        $('#q2').show();
        return false;
    });

    $('#q2 #button').click(function () {
        $('.questionForm').hide();
        $('#q3').show();
        return false;
    });

    $('#q3 #button').click(function () {
        $('.questionForm').hide();
        $('#q4').show();
        return false;
    });

    $('#q4 #button').click(function () {
        $('.questionForm').hide();
        $('#q5').show();
        return false;
    });

    $('#q5 #button').click(function () {
        $('.questionForm').hide();
        $('#results').show();



        return false;
    });

});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="STYLE.CSS">
    <title>Document</title>
</head>

<body>
    <form class="questionForm" id="q1" data-question="1">
        <div>
            <p>Question 1</p>
            <p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
        </div>
        <input id="button" type="button" value="Volgende">
    </form>

    <form class="questionForm" id="q2" data-question="2">
        <div>
            <p>Question 2</p>
            <p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
        </div>
        <input id="button" type="button" value="Volgende">
    </form>

    <form class="questionForm" id="q3" data-question="3">
        <div>
            <p>Question 3</p>
            <p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
        </div>
        <input id="button" type="button" value="Volgende">
    </form>

    <form class="questionForm" id="q4" data-question="4">
        <div>
            <p>Question 4</p>
            <p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
        </div>
        <input id="button" type="button" value="Volgende">
    </form>

    <form class="questionForm" id="q5" data-question="5">
        <div>
            <p>Question 5</p>
            <p><input type="radio" name="_exam_" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_" value="e">E. Zorgzaamheid</p>
        </div>
        <input id="button" type="button" value="Volgende">
    </form>


    <form class="questionForm" id="results" data-question="6">
        <p> here are your results</p>
    </form>
    </div>
    <script src="jquery.js"></script>
    <script src="quiz.js"></script>
</body>

</html>

There are two questions actually: [this is how to read chosen answer from radio button](https://stackoverflow.com/questions/8622336/jquery-get-value-of-selected-radio-button) and the data in your case could be stored as an object, like `var answers = {q1: "answer"}` and so on, and you update them by `answers.q1 = "a"` or so. — Dawid Pura, Sep 11 '21 at 11:01
thank you for telling me how to store the data! veery helpfull. do u know how to display them after the quiz? i use document.write but not sure if this is the proper way — Juriaan, Sep 11 '21 at 11:16

Bernhard Beatus · Accepted Answer · 2021-09-13T15:29:26.283

This code will give you a group the Maximum as group.

$(document).ready(function() {
  $('#results').hide();
  $('#q2,#q3,#q4,#q5').hide();
  $('#q1').show();
  $('[name="_exam1"]').change(function() {
    var question_1 = $(this).val();
    $('#res_1').attr('data-result-1', question_1);
  });
  $('[name="_exam2"]').change(function() {
    var question_2 = $(this).val();
    $('#res_2').attr('data-result-2', question_2);
  });
  $('[name="_exam3"]').change(function() {
    var question_3 = $(this).val();
    $('#res_3').attr('data-result-3', question_3);
  });
  $('[name="_exam4"]').change(function() {
    var question_4 = $(this).val();
    $('#res_4').attr('data-result-4', question_4);
  });
  $('[name="_exam5"]').change(function() {
    var question_5 = $(this).val();
    $('#res_5').attr('data-result-5', question_5);
    $('#results').show();
  });

  $('#btn-1').click(function() {
    $('#q1').hide();
    $('#q2').show();
  });

  $('#btn-2').click(function() {
    $('#q2').hide();
    $('#q3').show();
  });

  $('#btn-3').click(function() {
    $('#q3').hide();
    $('#q4').show();
  });

  $('#btn-4').click(function() {
    $('#q4').hide();
    $('#q5').show();
  });

  var aaa;
  $('#btn-5').on("click", function() {
    var res1 = $('#res_1').data('result-1');
    aaa = $('#res_1').data('result-1');
    $('#results').append('<li data-res=' + res1 + '>Question 1:' + res1 + '</li>');
    var res2 = $('#res_2').data('result-2');
    $('#results').append('<li data-res=' + res2 + '>Question 2:' + res2 + '</li>');
    var res3 = $('#res_3').data('result-3');
    $('#results').append('<li data-res=' + res3 + '>Question 3:' + res3 + '</li>');
    var res4 = $('#res_4').data('result-4');
    $('#results').append('<li data-res=' + res4 + '>Question 4:' + res4 + '</li>');
    var res5 = $('#res_5').data('result-5');
    $('#results').append('<li data-res=' + res5 + '>Question 5:' + res5 + '</li>');
    var count = {};
    $.each($("#results li"), function(i, v) {
      count[$(this).attr('data-res')] = (count[$(this).attr('data-res')] || 0) + 1;
    });
    var max_value = 0;
    for (const [key, value] of Object.entries(count)) {
      if (value > max_value) {
        max_value = value;
        $('#group').attr('data-group', capitalizeFirstLetter(`${key}`));
        var group = $('#group').attr('data-group');
        $('#group').html('You are in group: ' + group);
      }
    }
  })

  function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="STYLE.CSS">
  <title>Document</title>
</head>

<body>
  <form class="questionForm-1" id="q1" data-question="1">
    <div>
      <p>Question 1</p>
      <p><input type="radio" name="_exam1" value="a">A. Rustgeving</p>
      <p><input type="radio" name="_exam1" value="b">B. Zingeving</p>
      <p><input type="radio" name="_exam1" value="c">C. Duurzaamheid</p>
      <p><input type="radio" name="_exam1" value="d">D. Verzuiling</p>
      <p><input type="radio" name="_exam1" value="e">E. Zorgzaamheid</p>
      <p id="res_1"></p>
    </div>
    <input id="btn-1" type="button" value="Volgende">
  </form>

  <form class="questionForm-2" id="q2" data-question="2">
    <div>
      <p>Question 2</p>
      <p><input type="radio" name="_exam2" value="a">A. Rustgeving</p>
      <p><input type="radio" name="_exam2" value="b">B. Zingeving</p>
      <p><input type="radio" name="_exam2" value="c">C. Duurzaamheid</p>
      <p><input type="radio" name="_exam2" value="d">D. Verzuiling</p>
      <p><input type="radio" name="_exam2" value="e">E. Zorgzaamheid</p>
      <p id="res_2"></p>
    </div>
    <input id="btn-2" type="button" value="Volgende">
  </form>

  <form class="questionForm-3" id="q3" data-question="3">
    <div>
      <p>Question 3</p>
      <p><input type="radio" name="_exam3" value="a">A. Rustgeving</p>
      <p><input type="radio" name="_exam3" value="b">B. Zingeving</p>
      <p><input type="radio" name="_exam3" value="c">C. Duurzaamheid</p>
      <p><input type="radio" name="_exam3" value="d">D. Verzuiling</p>
      <p><input type="radio" name="_exam3" value="e">E. Zorgzaamheid</p>
      <p id="res_3"></p>
    </div>
    <input id="btn-3" type="button" value="Volgende">
  </form>

  <form class="questionForm-4" id="q4" data-question="4">
    <div>
      <p>Question 4</p>
      <p><input type="radio" name="_exam4" value="a">A. Rustgeving</p>
      <p><input type="radio" name="_exam4" value="b">B. Zingeving</p>
      <p><input type="radio" name="_exam4" value="c">C. Duurzaamheid</p>
      <p><input type="radio" name="_exam4" value="d">D. Verzuiling</p>
      <p><input type="radio" name="_exam4" value="e">E. Zorgzaamheid</p>
      <p id="res_4"></p>
    </div>
    <input id="btn-4" type="button" value="Volgende">
  </form>

  <form class="questionForm-5" id="q5" data-question="5">
    <div>
      <p>Question 5</p>
      <p><input type="radio" name="_exam5" value="a">A. Rustgeving</p>
      <p><input type="radio" name="_exam5" value="b">B. Zingeving</p>
      <p><input type="radio" name="_exam5" value="c">C. Duurzaamheid</p>
      <p><input type="radio" name="_exam5" value="d">D. Verzuiling</p>
      <p><input type="radio" name="_exam5" value="e">E. Zorgzaamheid</p>
      <p id="res_5"></p>
    </div>
    <input id="btn-5" type="button" value="Volgende">
  </form>
  <div id="group"></div>
  <ul id="results"></ul>

</body>

</html>

Thank you bernhard ! i'm new to javascript and you don't know how much this helped me. — Juriaan, Sep 13 '21 at 10:36
i have one more question to you, this code appends the questions as variables called res1,res2,res3,res4. how can i know if the user picked A? i'd like to calculate their personality based on their picked answers — Juriaan, Sep 13 '21 at 11:36
Where do you get the personality from? Do you have a login form or so? If you have a login just make a div with a data attribute e.g. name and append the current name to your html code so you know always with person are doing the quiz — Bernhard Beatus, Sep 13 '21 at 11:48
the group of personality your in is based on your answers to above quiz. For example if ur answers are AABBB u would be placed in group B. to write this out i'd like to know how to acces what happens when a user picks A, B , C or D . this code above appends the "res1 variable" but how do i know if they picked A B C or D? — Juriaan, Sep 13 '21 at 11:54
var question_1 = $(this).val(); and so on gives you the current selected option which the user selected. — Bernhard Beatus, Sep 13 '21 at 12:11
okay and to make a function can i use if var question_1 = $(this).val(); == A {append...... (sorry im kinda new to javascript) — Juriaan, Sep 13 '21 at 12:17
I'm at work now. I will try to help you this evening or tomorrow. Sorry — Bernhard Beatus, Sep 13 '21 at 13:19
that's okay bernhard, I'll wait until you have time. appreciate you want to help me ! — Juriaan, Sep 13 '21 at 13:28
you are the best! do u have any media i can show support? you helped me out a bunch — Juriaan, Sep 13 '21 at 19:54

How to store variables in javascript / jquery / html quiz

1 Answers1