no name no name - 7 months ago 11
HTML Question

Keeping score in HTML game

I am developing a simple HTML game and each page has a single question. How do I keep score so that if the person gets the correct answer, the score is incremented and then when the game is over or the wrong answer is selected within the game, the game over page it shows the score. What options do I have and are there any possible ways to implement all of this in one single page rather than several pages?

Answer

If you have multiple web pages with questions, you will need to constantly pass the scores from one html page to another. If you would like to do that, here is a post that will teach you that. The other option is keep all of the questions on one page and use JavaScript to show a new question each time the previous questions has been answered. Here is the full code sample:

   <html>
<head>
<title>Ten Questions</title>
<script type="text/javascript">
    var score = 0;
    var questions = 10;

    function start() {
        if (questions == 10) {
            document.getElementById("question").innerHTML = "What car brand out of the following options is German?";
            document.getElementById("option1").innerHTML = "Mercedes Benz";
            document.getElementById("option2").innerHTML = "Toyota";
            document.getElementById("option3").innerHTML = "Skoda";
        }

        else if (questions == 9) {
            document.getElementById("question").innerHTML = "What is the biggest country in the world?";
            document.getElementById("option1").innerHTML = "Fiji";
            document.getElementById("option2").innerHTML = "United States of America";
            document.getElementById("option3").innerHTML = "Russia";
        }

        else if (questions == 8) {
            document.getElementById("question").innerHTML = "What is the biggest river in the world?";
            document.getElementById("option1").innerHTML = "Amazon River";
            document.getElementById("option2").innerHTML = "Nile River";
            document.getElementById("option3").innerHTML = "Hudson River";
        }

        else if (questions == 7) {
            document.getElementById("question").innerHTML = "What does HP stand for?";
            document.getElementById("option1").innerHTML = "Hewlett Packard";
            document.getElementById("option2").innerHTML = "Howard Powell";
            document.getElementById("option3").innerHTML = "Honda Panda";
        }

        else if (questions == 6) {
            document.getElementById("question").innerHTML = "What does PM stand for?";
            document.getElementById("option1").innerHTML = "Post Meridien";
            document.getElementById("option2").innerHTML = "Post Man";
            document.getElementById("option3").innerHTML = "P M";
        }

        else if (questions == 5) {
            document.getElementById("question").innerHTML = "Who created Facebook?";
            document.getElementById("option1").innerHTML = "Bill Gates";
            document.getElementById("option2").innerHTML = "Mark Zuckerburg";
            document.getElementById("option3").innerHTML = "Steve Wozniak";
        }

        else if (questions == 4) {
            document.getElementById("question").innerHTML = "What is a banana made of?";
            document.getElementById("option1").innerHTML = "A banana";
            document.getElementById("option2").innerHTML = "Small hair-like strands";
            document.getElementById("option3").innerHTML = "Steve Wozniak";
        }

        else if (questions == 3) {
            document.getElementById("question").innerHTML = "What does LCD stand for?";
            document.getElementById("option1").innerHTML = "Light crystal display";
            document.getElementById("option2").innerHTML = "Large crystal display";
            document.getElementById("option3").innerHTML = "Liquid crystal display";
        }

        else if (questions == 2) {
            document.getElementById("question").innerHTML = "How many wheels does a car have?";
            document.getElementById("option1").innerHTML = "12";
            document.getElementById("option2").innerHTML = "6";
            document.getElementById("option3").innerHTML = "4";
        }

        else if (questions == 1) {
            document.getElementById("question").innerHTML = "Who is Microsoft's new CEO?";
            document.getElementById("option1").innerHTML = "Satcha Nadella";
            document.getElementById("option2").innerHTML = "Bill Gates";
            document.getElementById("option3").innerHTML = "Mark Zuckerburg";
        }

        else if (questions == 0) {
            document.getElementById("question").innerHTML = "";
            document.getElementById("option1").innerHTML = "";
            document.getElementById("option2").innerHTML = "";
            document.getElementById("option3").innerHTML = "";
            document.getElementById("score").innerHTML = "Your score was: " + score;
        }

    }

    function answer(question) {
        if (questions == 10) {
            if (question == 1) {
                score++; 
                questions--;
                start();
            }

            else if (question == 2) {
                score = score;
                questions--;
                start();
            }

            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }

        else if (questions == 9) {
            if (question == 1) {
                score = score;
                questions--;
                start();
            }

            else if (question == 2) {
                score = score;
                questions--;
                start();
            }

            else if (question == 3) {
                score++;
                questions--;
                start();
            }
        }

        else if (questions == 8) {
            if (question == 1) {
                score = score;
                questions--;
                start();
            }

            else if (question == 2) {
                score++;
                questions--;
                start();
            }

            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }

        else if (questions == 7) {
            if (question == 1) {
                score++;
                questions--;
                start();
            }

            else if (question == 2) {
                score = score;
                questions--;
                start();
            }

            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }

        else if (questions == 6) {
            if (question == 1) {
                score++;
                questions--;
                start();
            }

            else if (question == 2) {
                score = score;
                questions--;
                start();
            }

            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }

        else if (questions == 5) {
            if (question == 1) {
                score = score;
                questions--;
                start();
            }

            else if (question == 2) {
                score++;
                questions--;
                start();
            }

            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }

        else if (questions == 4) {
            if (question == 1) {
                score = score;
                questions--;
                start();
            }

            else if (question == 2) {
                score++;
                questions--;
                start();
            }

            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }

        else if (questions == 3) {
            if (question == 1) {
                score = score;
                questions--;
                start();
            }

            else if (question == 2) {
                score = score;
                questions--;
                start();
            }

            else if (question == 3) {
                score++;
                questions--;
                start();
            }
        }

        else if (questions == 2) {
            if (question == 1) {
                score = score;
                questions--;
                start();
            }

            else if (question == 2) {
                score = score;
                questions--;
                start();
            }

            else if (question == 3) {
                score++;
                questions--;
                start();
            }
        }

        else if (questions == 1) {
            if (question == 1) {
                score++;
                questions--;
                start();
            }

            else if (question == 2) {
                score = score;
                questions--;
                start();
            }

            else if (question == 3) {
                score = score;
                questions--;
                start();
            }
        }
    }
</script>
</head>
 <body onload="javascript:start()">
 <div>
<span id="question">
The question will be changed dynamically so the text here doesn't matter
    </span><br />
    <button onclick="javascript:answer(1)" id="option1">Random Answer 1</button><br />
    <button onclick="javascript:answer(2)" id="option2">Random Answer 2</button><br />
    <button onclick="javascript:answer(3)" id="option3">Random Answer   3</button><br />
<font face="Tahoma" color="red"><span id="score"></span></font>
</div>
</body>
</html>

Also, visit this site and paste the code and see how it works.

Comments