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 to Sharath Chandra Cancel 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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>