Wednesday, January 4, 2012

Math Game using HTML, CSS, JavaScript

<html>
<head>

<!-- link style sheet -->
<link href="../css/main.css" rel="stylesheet" type="text/css">

<!--starts scripting-->
<script type="text/javascript">

    function load_game()
    {
       
        //declare arrays and variables for use below
        var numbers1 = new Array();
        var numbers2 = new Array();
        var answers = new Array();
        var operators= new Array();
        var opt = new Array();
        var ans = new Array();
        var score=0;
        var mks=2;
       
       
        for (x = 0; x < 10; x++){

            //generating random numbers
            numbers1[x] = (Math.floor(Math.random()*101));
            numbers2[x] = (Math.floor(Math.random()*101));
            operators[x] = (Math.floor(Math.random()*4));
        }

   
        //promt to user to input answers
        for (z = 0; z < 10; z++){           

            if(operators[z]==0)
            {
                opt[z]='+';
                answers[z] = prompt(numbers1[z]+" + "+numbers2[z],"");   
                ans [z] = numbers1[z] + numbers2[z];
            }
            if(operators[z]==1)
            {
                opt[z]='-';
                answers[z] = prompt(numbers1[z]+" - "+numbers2[z],"");   
                ans [z] = numbers1[z] - numbers2[z];
            }
            if(operators[z]==2)
            {
                opt[z]='*';
                answers[z] = prompt(numbers1[z]+" * "+numbers2[z],"");   
                ans [z] = numbers1[z] * numbers2[z];
            }
            if(operators[z]==3)
            {
                opt[z]='/';
                answers[z] = prompt(numbers1[z]+" / "+numbers2[z],"Round answer into 2 decimal points");   
                ans [z] =Math.round(numbers1[z] / numbers2[z]*100)/100;
            }

            if(isNaN(answers[z])){

                alert("Invalid Answer");
                z=z-1;
            }
       
        }
       
        //Display results..
        for(i=0;i<10;i++){

            document.write((i+1)+") "+numbers1[i]+opt[i]+numbers2[i]+"= ");

            //check for correct answer
             if(answers[i]==ans[i])
             {
                 document.write(answers[i]+" ..... Well done!! correct answer.<br/>");
                score=score+mks;
             }

            // check whether the answered or skipped
            else if(answers[i]=="" || answers[i]==null){
                document.write("   ...... skipped by the player.<br/>");

            }

            // when answer is incorrect
             else
             {
                document.write(answers[i]+" ..... Oops!! incorrect, The correct answer is:"+ans[i]+".<br/>");
             }   

        }
       
        document.write("<br/>Your Score is: "+score); //DISPALY SCORE

        //Change background color according to the score
        if(score < 6){
            document.bgColor='#F6358A';
        }
        else if(score < 10){
            document.bgColor='#46C7C7';
        }
        else if(score < 16){
            document.bgColor='#4CC417';
        }
        else{
            document.bgColor='#6698FF';
        }
    }

</script>

</head>

<body bgcolor='#FFCC66'>

    <br/><h1 align="center">** Welcome To Maths Game **</h1>
   
    <script>
        load_game(); //run the game..
    </script>
   

    <p>
        <font size="2" ><br/><hr /><a href="mailto:wmwaves@gmail.com"> wmwaves@gmail.com</a>
        </br> Last modified: 15 May 2011  </font>
    </p>

</body>
</html>