How to display correct score of a slide show quiz?

 I have a multiple choice quiz for speed test. Each question appears 
  after every five seconds and then the next, like a slide show. The 
  timer runs simultaneously. The last page that appears is score summary. 
  I can't figure out how to show the correct score though I have written 
  codes for it. The summary page shows score 0 each  time. 
  Could you please help me. Thanks a lot. Codepen link: https://codepen.io/Tarun1980/pen/bJKyEV
<body>

        <div id="container">
        <text> Time : <text id="time001"> 30 </text> </text> <br />
        <h1> Speed Test </h1>
        <button id="btn" onclick="begin001()"> Start </button>
     <form id="form">
     <div class="speed">
     <h2> Q.1 Who is the Prime Minister of India? </h2>
     <label> <input type="radio" name="q1" value="a" id="q1a"> Atal 
     Bihari </label> <br>
     <label> <input type="radio" name="q1" value="b" id="q1b"> 
     Narendra Modi </label> <br>
     <label> <input type="radio" name="q1" value="c" id="q1c"> 
     Rahul Gandhi </label> <br>
     <label> <input type="radio" name="q1" value="d" id="q1d"> 
     Soniya Gandhi </label> <br>
     </div>
       <div id="summary">
        <p> Score Summary </p>
        </div>
         </form>
        </div>
 </body>
 
 ```
      $('document').ready(function() {
      $(function() {
      $("#btn").click(function() {
      var interval = setInterval(function() {
      $("#form > div:first")
      .fadeIn(500)
      .next()
      .fadeOut(500)
      .end()
      .appendTo("#form");
       }, 5000);

      window.setTimeout(function() {
      clearInterval(interval);
      }, 35000);
      });
      });
      });
       function begin001() {
          c = 30;
       }
        var a = 0;
        a++;
        var b = 0;
        b++;
  
  ```
        function timer001() {
        c = c - 1;
        if (c < 30)
  
          {
              time001.innerHTML = c;
          }
  
          if (c < 1)
  
          {
              window.clearInterval(update);
  
          }
  
        }
  
        update = setInterval("timer001()", 1000);
  
  ```
        var q1 = document.getElementById("form")["q1"].value;
        var q2 = document.getElementById("form")["q2"].value;
        var q3 = document.getElementById("form")["q3"].value;
        var q4 = document.getElementById("form")["q4"].value;
        var q5 = document.getElementById("form")["q5"].value;
  
  ```
  
        var answers = ["b", "c", "a", "d", "c"];
        var score = 0;
        var total = 5;
        if (q1 == answers[0]) {
          score++
        }
        if (q2 == answers[1]) {
          score++
        }
        if (q3 == answers[2]) {
          score++
        }
        if (q4 == answers[3]) {
          score++
        }
        if (q5 == answers[4]) {
          score++
        }
  
  ```
        var result = document.getElementById("summary");
        result.innerHTML = "<p> You scored "+score+" out of "+total+" 
        </p>";
  
  ```
        Expected: You scored 2 out of 5.
  
        Currently showing: 0 out of 5.

codepen link: https://codepen.io/Tarun1980/pen/bJKyEV

Well for this you need to change string concatenation to this :

 "<p> You scored" + score + " out of "+ total +"</p>";

Check out the way you combine single quotes and double quotes. Go with one or another for string concatenation. I can see that your code has other flaws.
For example:

function begin001() {
         c = 30;
       }
  1. This function doesn’t do anything. Why? Because is not executing other functions or returning anything.
  2. c has to be declared before having an integer assigned to it. (var let const);

You need to understand SCOPE in JavaScript. You need to understand how functions work in JavaScript.

It seems to me that you attempting to run before you can walk.
Take baby steps, make sure you understand how this works.
Your project it may involve Asynchronous JavaScript so make sure that you understand this concept.
But before that you need to learn the basics.

1 Like

Thanks a lot for your help and suggestions, and I have made some corrections. I am learning basics side by side.
By the way the problem still exists. The score is 0 each time. Could you please help me?

Really sorry for this time. Next time I will do as per your suggestions.

Add your project here https://codepen.io/pen/ then save it and pass me the link. I would be happy to help you and answer any questions.

3 years ago I would have never thought that I will get to learn any programing language but I was curious, so I ordered from ebay a book series called “You dont know JavaScript” . You do not have to buy it. It is free on this link
https://github.com/getify/You-Dont-Know-JS .You do not have to read all the books (I did it ,about 3 times) but you will find an answer for most if not all questions you may have related to JavaScript in this books.

1 Like

Sir, I have added the project to codepen but I am unable to paste the link here as per the rules.
I have pasted the link in my question above. By the way, thanks for suggesting such a good book.

If you go to your pen an click Settings, go to javascript panel and list jquery there ( type jquery in cdn input and select it), this will automatically make jquery object available to your project.

I had a look over your code:
1.The code at the bottom of the post you want to make it to run in a function: (named like updateScore for example )

  • you want to refactor that code and use the event returned in the callback
  • that event will have the value you want to update and the element you want to check in the if statements
function updateScore(newEvent) {
     console.log(newEvent);

     //here newEvent is equal to event from click method bellow
     // newEvent has the value and the element you want to query to check against your array 
}

$( "YOUR QUESTION SELECTOR" ).click(function(event) {
  updateScore(event);
});

  1. You want updateScore() function to be ran every time you click an answer in order to update the state variable score, right? (You can create an event like on click or on change using jquery and call updateScore there)
  2. var score is the state for keeping score:
  • make it available globally and modify it from inside the function updateScore()
  • make a button which on a Click event will reset score and maybe reset the application state (this will need a new function named like resetScore or resetGame or … naming is the most difficult part in programming)

The major problem I see by looking at your code is that you want to code synchronously an application which by its nature is asynchronous. If you get to research what this means and understand the concept, you going to get that working as you want.

 var q1 = document.getElementById("form")["q1"].value;

    var q2 = document.getElementById("form")["q2"].value;

    var q3 = document.getElementById("form")["q3"].value;

    var q4 = document.getElementById("form")["q4"].value;

    var q5 = document.getElementById("form")["q5"].value;



    var answers = ["b", "c", "a", "d", "c"];

    var score = 0;

    var total = 5;


    if (q1 == answers[0]) {

        score++

    }

    if (q2 == answers[1]) {

        score++
    }

    if (q3 == answers[2]) {

        score++
    }

    if (q4 == answers[3]) {

        score++
    }

    if (q5 == answers[4]) {

        score++

    }
1 Like