iPad compatible #HTML5 #CSS3 Jquery Times Table Game Script #code

This code uses jquery (1.6.4in this case), cross browser CSS3  and google fonts to make an small times table activity for students.

css3 html5 jquery game

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”width=640″ />

<title>Times Table</title>

<link href=’http://fonts.googleapis.com/css?family=Quicksand’ rel=’stylesheet’ type=’text/css’>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js” type=”text/javascript”></script>

<style type=”text/css”>

body {

background-color:#000;

font-family: “Quicksand”, ” Comic Sans MS”, cursive;

}

#grid {

width: 420px;

left: 100px;

position: relative;

}

#question {

font-size: 20px;

color: #0F9;

}

#status {

padding-bottom: 20px;

position: relative;

left: 100px;

width: 420px;

}

#button {

position: absolute;

right: 0px;

display: none;

padding: 4px;

}

.grid {

display: block;

width: 40px;

height: 37px;

padding: 0px;

float: left;

border-style:solid;

border-color:#FFFFFF;

border-width: thin;

font-size: 24px;

text-align: center;

padding-top: 3px;

position:relative;

}

.button {

-moz-border-radius: .2em .5em .2em .5em;

border-radius: .2em .5em .2em .5em;

text-shadow: 1px 1px #FFF;

}

.lowlight{

background-color: #FFF;

background-image: linear-gradient(bottom, rgb(120,220,134) 7%, rgb(156,255,161) 54%);

background-image: -o-linear-gradient(bottom, rgb(120,220,134) 7%, rgb(156,255,161) 54%);

background-image: -moz-linear-gradient(bottom, rgb(120,220,134) 7%, rgb(156,255,161) 54%);

background-image: -webkit-linear-gradient(bottom, rgb(120,220,134) 7%, rgb(156,255,161) 54%);

background-image: -ms-linear-gradient(bottom, rgb(120,220,134) 7%, rgb(156,255,161) 54%);

background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.07, rgb(120,220,134)), color-stop(0.54, rgb(156,255,161)) );

}

.highlight {

background-color: #6FC;

background: -moz-linear-gradient(top, white 0%, #ccc 100%); /* FF 3.6+ */

background-image: -ms-linear-gradient(top, white 0%, #ccc 100%); /* IE10 */

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #ccc)); /* Safari 4+, Chrome 2+ */

background-image: -webkit-linear-gradient(white, #ccc); /* Safari 5.1+, Chrome 10+ */

background-image: -o-linear-gradient(top, white 0%, #ccc 100%); /* Opera 11.10 */

text-decoration:underline;

}

</style>

</head>

<body>

<div id=”status”><span id=”question”></span><span id=”button” class=”button lowlight” onClick=”randomQn()” >Next–></span></div>

<div id=”grid”>

<script>

var counter=0;

var numberOne;

var numberTwo;

//draw grid

for(var i=1;i<=10;i++){

for(var j=1;j<=10;j++){

counter++;

if(i==1 || j==1){

myClasses=”grid button highlight”

} else {

myClasses=”grid button lowlight”;

}

//With jquery should use .bind rather than dynamically writing the html

$(“#grid”).append(“<div class=\””+myClasses+”\” onClick=\”check(“+(i*j)+”)\”>”+(i*j)+”</div>”);

}

}

function randomQn(){

numberOne = Math.ceil(Math.random()*10);

numberTwo = Math.ceil(Math.random()*10);

$(“#question”).html(“What is “+numberOne+” times “+numberTwo+”?”);

$(“#button”).css(“display”,”none”);

}

function check(id){

if(id==numberOne*numberTwo){

$(“#question”).html(“Correct! “+numberOne+” times “+numberTwo+” equals “+id);

$(“#button”).css(“display”,”inline”);

} else {

$(“#question”).html(“Try again. What is “+numberOne+” times “+numberTwo+”?”);

}

}

randomQn();

</script>

</div>

</body>

</html>

This entry was posted in Code, edtech. Bookmark the permalink.

2 Responses to iPad compatible #HTML5 #CSS3 Jquery Times Table Game Script #code

  1. Pingback: Timestable games | Blessingmagazi

  2. Hi,

    Using HTML5, you can develop games which are mobile friendly, interactive and fun to play…
    I wrote a blog on the same “HTML5-The Trendsetter in E-learning” I will be glad if you can give your feedback
    link: http://bit.ly/13ELQrs

Leave a Reply

Your email address will not be published. Required fields are marked *

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box