Reputation: 11

Add a score counter to a game using html and JavaScript

I'm extremely new to JavaScript and programming, but I was wondering if anyone could help me with trying to add a score counter to my maths game. The site randomly generates a multiplication question, which is checked and then a message appears saying whether they got the question right or not. I've added a timer and I've tried to add a score counter but failed. Here is my html:

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

<head>
    <script type="text/javascript" src="assets/stylesheets/script.js"></script>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning to multiply</title>
</head>

<body onload="genQuestion();">
<h1>Learning to multiply</h1>
<form name="myForm" id="myForm" action="#">
<label>What is...</label>
<input id="question" name="question" type="text" />
<br>
<label>My answer is...</label>
<input name="answer" id="answer" type="text" />
<br>
<input class="button" name="Check my answer..." type="button" value="Check my answer..." onclick="buttonPressed()" />
</form>
    <div class="score-board">
  <div class="player">
      <h4>Your score</h4>
      <div class="score-box">
         0 
      </div>
  </div>
        </div>
</body>
</html>

and this is my js file:

var x, y;



        function aNumber() {
        return 1 + Math.round(Math.random() * 11);
        }

        function genQuestion(){
            x = aNumber();
            y = aNumber();
            dout = document.getElementById("question");
            dout.value = x + " times " + y;
         }

        function buttonPressed() {
        var mult = document.getElementById("answer").value;



         var posStatements = [
            "Very Good", 
            "Excellent", 
            "Correct - Nice Work!", 
            "Correct - Keep up the good work"];

        var negStatements = [
            "No. Please try again", 
            "Wrong. Try once more", 
            "Incorrect - Don't give up", 
            "No - keep trying"];

         if (mult == x*y) 
            {
                window.alert(posStatements[Math.round(Math.random() * 3)]);
        }
        else 
        {
                window.alert(negStatements[Math.round(Math.random() * 3)]);
        }

        location.reload();
        }

var score=0 
var score = document.getElementById("score-box").value;
function scoreboard() {
    if (mult == x*y)
        {score= score +1}
}

window.onload = function timer() {
var secs = 0;
    var id = setInterval(function timer(){ 
        secs++; console.log(secs);
      if(secs> 9){
        clearInterval(id);
        alert("Time's up!");
       }
    }, 1000);
}

I'm aware it doesn't work but I have no idea how to go about this... Thank you!

Upvotes: 1

Answers (3)

Caleb Evans

Reputation: 25

instead use:

if (mult == x*y) 
{
    Score+=1;
}
else 
{
    Score-=1;
}

Upvotes: 0

codemonkey65

Reputation: 120

The problem that you are running into here is an important one in web development, namely that web applications are by default stateless. That simply means that each time that a web page is loaded, it loads with a completely fresh and new set of controls and variables.

So, when your buttonPressed() function calls location.reload(), the page and all its contents, including script variables, are loaded afresh as if they had never existed before.

In order for your idea of adding score keeping to your game to work, you will need to create state in your application, in other words, you will need to keep track of what the conditions (e.g. the score) were in the game before the current latest page load.

Now there are many, many ways of doing that, and modern web applications will probably not reload the page in its entirety between rounds, but just update the bits on the same page that need to be updated. That is certainly one way of doing it.

Another way, which suits the way that you have laid out your application, with calling genQuestion() on page load, would be to pass the score from the previous round on to the next next page load. This can be done in a number of ways as well, the simplest of which is arguably to pass a query string to the next page load, i.e. a URL that won't just be

http://...game.html

but rather

http://...game.html?score=3

That is just the starting point, though. Once you have what the current score is (and remember on the first page load it will simply be 0), then you need to update it in the correct place, if the user gets an answer right. As your code stands now, you will need to do that in the if statement that checks whether the user's answer was correct.

I won't give you a working solution, but to get you on your way, here are some pointers:

To pass the current score on to the next page load, don't just do a location.reload(), but do a window.location.assign(url), where the url is the same url with the score added at the end as "?score=xx". Refer to this w3schools article.

To the read the score on the next page load from the url, use location.search(). Refer to this w3schools article.

There are many other ways of solving this problem, but I'm sure you will learn a lot from doing it this way as a starting point. Good luck!

Upvotes: 3

Omid Farvid

Reputation: 831

1 - add a label for showing Score and set id to "lblScore"

<label id="lblScore">0</label>

2 - declare global variable in js file (out of functions body)

    var Score=0;

3 - add 1 or sub 1 to score depend on answer

if (mult == x*y) 
        {
            Score=Score+1;
    }
    else 
    {
            Score=Score-1;
    }

4 - you should set Score to label in js file (after part 2) like below

var lblScore = Document.getElementbyId('lblScore');
lblScore.innerHTML=Score;

Upvotes: 0

Add a score counter to a game using html and JavaScript

Answers (3)

Related Questions