Scribd Logo
Upload

Welcome to Scribd!

  • 91 views

    Math Game Source Code PDF

    Uploaded by

    dhfjsd
    The document describes a math game with the following key elements: - It displays questions with multiple choice answers - Players select an answer and their score is adjusted based on correctness - A timer counts down and the game ends if time reaches 0 - Styling is applied using CSS to control layout and appearance of elements - JavaScript controls game play, generating questions, checking answers, updating scores

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Math Game Source Code PDF

    Uploaded by

    dhfjsd
    91 views11 pages
    The document describes a math game with the following key elements: - It displays questions with multiple choice answers - Players select an answer and their score is adjusted based on correctness - A timer counts down and the game ends if time reaches 0 - Styling is applied using CSS to control layout and appearance of elements - JavaScript controls game play, generating questions, checking answers, updating scores

    Original Title

    12. Math Game Source Code.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document describes a math game with the following key elements: - It displays questions with multiple choice answers - Players select an answer and their score is adjusted based on correctness - A timer counts down and the game ends if time reaches 0 - Styling is applied using CSS to control layout and appearance of elements - JavaScript controls game play, generating questions, checking answers, updating scores

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    91 views11 pages

    Math Game Source Code PDF

    Uploaded by

    dhfjsd
    The document describes a math game with the following key elements: - It displays questions with multiple choice answers - Players select an answer and their score is adjusted based on correctness - A timer counts down and the game ends if time reaches 0 - Styling is applied using CSS to control layout and appearance of elements - JavaScript controls game play, generating questions, checking answers, updating scores

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 11

    <!--index.

    html-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Maths Game</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
    initial-scale=1, user-scalable=yes">
    <link rel="stylesheet" href="styling.css">
    </head>

    <body>
    <div id="container">
    <div id="score">
    Score: <span id="scorevalue">0</span>
    </div>
    <div id="correct">
    Correct
    </div>
    <div id="wrong">
    Try again
    </div>
    <div id="question">

    </div>
    <div id="instruction">
    Click on the correct answer
    </div>
    <div id="choices">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    <div id="box4" class="box"></div>
    </div>
    <div id="startreset">
    Start Game
    </div>
    <div id="timeremaining">
    Time remaining: <span
    id="timeremainingvalue">60</span> sec
    </div>
    <div id="gameOver">

    </div>
    </div>
    <script src="javascript.js"></script>
    </body>
    </html>

    /*styling.css*/
    html{
    height: 100%;
    background: radial-gradient(circle, #fff, #ccc);
    background: -webkit-radial-gradient(circle, #fff,
    #ccc);
    background: -o-radial-gradient(circle, #fff, #ccc);
    background: -moz-radial-gradient(circle, #fff, #ccc);
    }

    #container{
    height: 400px;
    width: 550px;
    background-color: #9DD2EA;
    margin: 100px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 0px 0px #009de4;
    -moz-box-shadow: 0px 4px 0px 0px #009de4;
    -webkit-box-shadow: 0px 4px 0px 0px #009de4;
    /* box-shadow: [horizontal offset] [vertical
    offset] [blur radius] [optional spread radius] [color]*/
    position: relative;
    }

    #score{
    background-color: #F1FF92;
    color: #888E5F;
    padding: 11px;
    position: absolute;
    left: 500px;
    box-shadow: 0px 4px 0px #9da853;
    -moz-box-shadow: 0px 4px 0px #9da853;
    -webkit-box-shadow: 0px 4px 0px #9da853;
    }

    #correct{
    position: absolute;
    left: 260px;
    background-color: #42e252;
    color: white;
    padding: 11px;
    display: none;
    }

    #wrong{
    position: absolute;
    left: 250px;
    background-color: #de401a;
    color: white;
    padding: 11px;
    display: none;
    }

    #question{
    width: 450px;
    height: 150px;
    margin: 50px auto 10px auto;
    background-color: #9DA0EA;
    box-shadow: 0px 4px #535aa8;
    -moz-box-shadow: 0px 4px #535aa8;
    -webkit-box-shadow: 0px 4px #535aa8;
    font-size: 100px;
    text-align: center;
    font-family: cursive, sans-serif;
    color: black;
    }

    #instruction{
    width: 450px;
    height: 50px;
    background-color: #B481D9;
    margin: 10px auto;
    text-align: center;
    line-height: 45px;
    box-shadow: 0px 4px #8153a8;
    -moz-box-shadow: 0px 4px #8153a8;
    -webkit-box-shadow: 0px 4px #8153a8;
    }

    #choices{
    width: 450px;
    height: 100px;
    margin: 5px auto;
    }

    .box{
    width: 85px;
    height: 85px;
    background-color: white;
    float: left;
    margin-right: 36px;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
    line-height: 80px;
    position: relative;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    }

    .box:hover, #startreset:hover{
    /* background-color: #9C89F6;*/
    /* color: white;*/
    /* box-shadow: 0px 4px #6b54d3;*/
    /* -moz-box-shadow: 0px 4px #6b54d3;*/
    /* -webkit-box-shadow: 0px 4px #6b54d3;*/
    }

    .box:active, #startreset:active{
    background-color: #9C89F6;
    color: white;
    box-shadow: 0px 0px #6b54d3;
    -moz-box-shadow: 0px 0px #6b54d3;
    -webkit-box-shadow: 0px 0px #6b54d3;
    top: 4px;
    }
    #box4{
    margin-right: 0;
    }

    #startreset{
    width: 78px;
    padding: 10px;
    background-color: rgba(255,255,255,0.5);
    margin: 0 auto;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    }

    #timeremaining{
    width: 152px;
    padding: 10px;
    position: absolute;
    top: 395px;
    left: 400px;
    background-color: rgba(181, 235, 36, 0.8);
    border-radius: 3px;
    box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    /* visibility: hidden;*/
    display: none;
    }

    #gameOver{
    height: 200px;
    width: 500px;
    background: linear-gradient(#F3CA6B, #F3706C);
    background: -webkit-linear-gradient(#F3CA6B, #F3706C);
    background: -o-linear-gradient(#F3CA6B, #F3706C);
    background: -moz-linear-gradient(#F3CA6B, #F3706C);
    color: white;
    font-size: 2.5em;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    top: 100px;
    left: 45px;
    z-index: 2;
    display: none;

    //javascript.js
    var playing = false;
    var score;
    var action;
    var timeremaining;
    var correctAnswer;

    //if we click on the start/reset


    document.getElementById("startreset").onclick =
    function(){

    //if we are playing

    if(playing == true){

    location.reload(); //reload page

    }else{//if we are not playing

    //change mode to playing

    playing = true;

    //set score to 0

    score = 0;
    document.getElementById("scorevalue").innerHTML =
    score;

    //show countdown box

    show("timeremaining");
    timeremaining = 60;

    document.getElementById("timeremainingvalue").innerHTML =
    timeremaining;

    //hide game over box

    hide("gameOver");

    //change button to reset


    document.getElementById("startreset").innerHTML =
    "Reset Game";
    //start countdown

    startCountdown();

    //generate a new Q&A

    generateQA();
    }

    //Clicking on an answer box

    for(i=1; i<5; i++){


    document.getElementById("box"+i).onclick = function(){
    //check if we are playing
    if(playing == true){//yes
    if(this.innerHTML == correctAnswer){
    //correct answer

    //increase score by 1
    score++;

    document.getElementById("scorevalue").innerHTML = score;
    //hide wrong box and show correct box
    hide("wrong");
    show("correct");
    setTimeout(function(){
    hide("correct");
    }, 1000);

    //Generate new Q&A

    generateQA();
    }else{
    //wrong answer
    hide("correct");
    show("wrong");
    setTimeout(function(){
    hide("wrong");
    }, 1000);
    }
    }
    }
    }
    //if we click on answer box
    //if we are playing
    //correct?
    //yes
    //increase score
    //show correct box for 1sec
    //generate new Q&A
    //no
    //show try again box for 1sec

    //functions

    //start counter

    function startCountdown(){
    action = setInterval(function(){
    timeremaining -= 1;

    document.getElementById("timeremainingvalue").innerHTML =
    timeremaining;
    if(timeremaining == 0){// game over
    stopCountdown();
    show("gameOver");
    document.getElementById("gameOver").innerHTML =
    "<p>Game over!</p><p>Your score is " + score + ".</p>";
    hide("timeremaining");
    hide("correct");
    hide("wrong");
    playing = false;

    document.getElementById("startreset").innerHTML = "Start
    Game";
    }
    }, 1000);
    }

    //stop counter
    function stopCountdown(){
    clearInterval(action);
    }

    //hide an element

    function hide(Id){
    document.getElementById(Id).style.display = "none";
    }

    //show an element

    function show(Id){
    document.getElementById(Id).style.display = "block";
    }

    //generate question and multiple answers

    function generateQA(){
    var x = 1+ Math.round(9*Math.random());
    var y = 1+ Math.round(9*Math.random());
    correctAnswer = x*y;
    document.getElementById("question").innerHTML = x +
    "x" + y;
    var correctPosition = 1+ Math.round(3*Math.random());

    document.getElementById("box"+correctPosition).innerHTML =
    correctAnswer; //fill one box with the correct answer

    //fill other boxes with wrong answers

    var answers = [correctAnswer];

    for(i=1; i<5; i++){


    if(i != correctPosition) {
    var wrongAnswer;
    do{
    wrongAnswer = (1+
    Math.round(9*Math.random()))*(1+
    Math.round(9*Math.random())); //a wrong answer
    }while(answers.indexOf(wrongAnswer)>-1)
    document.getElementById("box"+i).innerHTML =
    wrongAnswer;
    answers.push(wrongAnswer);
    }
    }
    }

    You might also like