CODEWITHSUNDEEP
javascript
Obi-wan
Obi-wan

Reputation: 95

Vanilla JavaScript - keeping score in a quiz

I am trying to write my first JavaScript program which will be a basic math quiz using random numbers aimed at little children. I have got the random numbers to appear on the HTML page at the click of a button but when I input the answer and try to use an if/else statement to compare the user answer with the correct answer it is not responsive. I have then tried to use a for loop as that is what I have seen a lot on the internet but to no avail.

Here is the code I have written so far:

document.getElementById("button1").addEventListener("click", question);

var plusMinus = document.getElementById("plusMinus");

function question(){
  var startButton = document.getElementById("button1");
  var number1 = document.getElementById("number1");
  var number2 = document.getElementById("number2");
  var decider = Math.random();

  button1.textContent = "Again";
  number1.textContent = Math.floor(Math.random()*11);
  number2.textContent = Math.floor(Math.random()*11);

  if(decider<0.5){
    plusMinus.textContent = "+"  
  }
  else{plusMinus.textContent = "-"};
  };

document.getElementById("button2").addEventListener("click", answer);

function answer(){
  var num1 = parseInt(document.getElementById("number1").textContent, 10);
  var num2 = parseInt(document.getElementById("number2").textContent, 10);
  var answer = parseInt(document.getElementById("userAnswer").value, 10);
  var feedBack = document.getElementById("feedBack");
  var scoreReport = document.getElementById("score");
  var totalScore = 0;

  if (plusMinus.textContent == "+"){
    if(answer == num1 + num2) {
        feedBack.textContent = "Well Done!";
    } else {
        feedBack.textContent = "Try again!";
    }
  }
  else {
     if(answer == num1 - num2){
        feedBack.textContent = "Well Done!";
     } else {feedBack.textContent = "Try again!"};
  }

  for(count=0; count <=10; count++){
    if(plusMinus == "+" && answer == num1+num2){
        totalScore +1;
    }
    else if(plusMinus == "-" && answer == num1-num2){
        totalScore -1;
    }
  }

  scoreReport.textContent = totalScore;
};

I have made a Jfiddle: http://jsfiddle.net/way81/r9vdLkzp/1/

I appreciate any advice given and thank you for your time in reading my question.

Upvotes: 0

Views: 359

Answers (3)

rjmill
rjmill

Reputation: 320

There are a few problems I see with how you've set up your counter. For one, you set totalScore equal to 0 inside your answer function. You should have it be outside your answer function so that the program will "remember" it from the last time answer was run.

The other main problem is that inside your for loop, you're looking at just plusMinus, not plusMinus.textContent. You don't really need a loop for this though. If you want to increment it, let's say by 10, you can just increment the score while you're displaying the feedback like so:

if (plusMinus.textContent == "+"){
  if(answer == num1 + num2) {
    feedBack.textContent = "Well Done!";
    totalScore = totalScore + 10;
}

but in each place. I tested this out in a fiddle and it worked as expected.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

It does seem to be working, however I've noticed the score doesn't increase. That would be because of these lines:

totalScore +1

and

totalScore -1

I assume these should actually both be:

totalScore++;

to increase the player's score by one on a successful answer.

Other than that, everything seems to be working fine. I will mention, however, that subtractions resulting in negative numbers are generally not ideal for "little children", so consider adding something to ensure that the bigger number is always the first operand.

Upvotes: 1

Bindrid
Bindrid

Reputation: 3735

I made one minor change and it started working for me.

Your buttons, 

<button id = "button1">Start!</button>

and 

<button id = "button2">Answer</button>

did not include type. The default button type is submit. I changed your but to

<button type='button' id = "button1">Start!</button>

and 

<button type='button' id = "button2">Answer</button>

and it started working for me

Upvotes: 0

Related Questions