Skip to content

Instantly share code, notes, and snippets.

@psrajarajan

psrajarajan/Kids-Multiplication-Tables.html

Created April 25, 2022 05:28
Show Gist options
  • Save psrajarajan/9f7579cebcda62ee96afbf5ed90d9741 to your computer and use it in GitHub Desktop.
Save psrajarajan/9f7579cebcda62ee96afbf5ed90d9741 to your computer and use it in GitHub Desktop.
Download ZIP
Kids Multiplication Tables
Raw
Kids-Multiplication-Tables.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="maths, times tables, quiz"/>
<title>Times-Table quiz for kids</title>
<style type="text/css">
body {
background-image: url("http://www.desktopwallpaperhd.net/wallpapers/20/a/art-vector-flowers-background-wallpaper-image-207562.jpg");
}
.container{
max-width: 750px;
width: 100%;
height: 100%;
position: absolute;
margin: 25px auto;
background: #e3e3e3;
padding: 15px;
}
.page-header h1 {
font-family: 'Poiret One', cursive, sans-serif;
font-size: 90px;
text-align: center;
color: #0000FF;
}
.carousel {
position: relative;
height: auto;
background-color: #800000;
}
.instruction h2, .speed-buttons h2 {
font-family: calibi, sans-serif;
font-size: 50px;
text-align: center;
color: #98FB98;
}
.speed-buttons h2 {
font-family: calibi, sans-serif;
font-size: 50px;
text-align: left;
color: #98FB98;
}
.btn-group {
min-width: 50%;
margin-left: 30%;
}
.btn {width: 10%;}
.answers-image {
display: inline;
}
.loading p {
display: inline;
font-family: calibi, sans-serif;
font-size: 50px;
color: #F35CF5;
}
.loading {
display:none;
}
.carousel-content h1 {
font-family: calibi, sans-serif;
font-size: 320px;
text-align: center;
color: #98FB98;
}
.carousel-content h3 {
font-family: calibri, sans-serif;
font-size: 80px;
margin-left: 3%;
color: #D3D3D3;
}
.quiz-finish h2 {
font-family: calibi, sans-serif;
font-size: 100px;
text-align: center;
color: #98FB98;
}
.answers-image h3 {
font-family: calibri, sans-serif;
font-size: 80px;
margin-left: 5%;
color: #D3D3D3;
}
.success, .warning {
font-family: calibri, sans-serif;
font-size: 50px;
text-align: left;
color: #800000;
}
.contact p {
display: inline;
font-family: 'Poiret One', cursive, sans-serif;
font-size: 25px;
margin-left: 5%;
margin-right: 5%;
color: #FFFFFF;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
$(function () {
$('#myCarousel').carousel({
interval:60000,
pause: "false"
});
$('#onesec').click(function () {
c = $('#myCarousel')
opt = c.data()['bs.carousel'].options
opt.interval= 1000;
c.data({options: opt})
$('#wait').toggle('show');
});
$('#threesec').click(function () {
c = $('#myCarousel')
opt = c.data()['bs.carousel'].options
opt.interval= 3000;
c.data({options: opt})
$('#wait').toggle('show');
});
$('#fivesec').click(function () {
c = $('#myCarousel')
opt = c.data()['bs.carousel'].options
opt.interval= 5000;
c.data({options: opt})
$('#wait').toggle('show');
});
$('#eightsec').click(function () {
c = $('#myCarousel')
opt = c.data()['bs.carousel'].options
opt.interval= 8000;
c.data({options: opt})
$('#wait').toggle('show');
});
$('#tensec').click(function () {
c = $('#myCarousel')
opt = c.data()['bs.carousel'].options
opt.interval= 10000;
c.data({options: opt})
$('#wait').toggle('show');
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1><strong>Times Table Quiz for Kids with Answers</strong></h1>
</div>
<div id="myCarousel" class="carousel slide" data-wrap = "false">
<div ng-app='ttableModule' ng-controller='myController'>
<!-- carousel inner -->
<div class="carousel-inner">
<div class="item active">
<div class="instruction">
<h2>Hi&nbsp<span style="color:#FFFF00">kid</span>&nbsp,&nbspAre you ready? Get a piece of paper & pencil. </h2>
<h2>There are twenty questions to answer. You can verify your answers at the end. </h2>
<h2>You have to select the slide speed and click the forward button.</h2>
</div>
<br><br>
<hr>
<div class="speed-buttons">
<h2>Please select your slide-speed:</h2>
</div>
<div class="carousel-buttons">
<div class="btn-group" role="group" aria-label="First group">
<button id="onesec" type="button" class="btn btn-primary btn-lg">1 Sec </button>
<button id="threesec" type="button" class="btn btn-primary btn-lg">3 Secs</button>
<button id="fivesec" type="button" class="btn btn-primary btn-lg">5 Secs</button>
<button id="eightsec" type="button" class="btn btn-primary btn-lg">8 Secs</button>
<button id="tensec" type="button" class="btn btn-primary btn-lg">10 Secs</button>
</div>
</div>
<hr>
<div id="wait" class="loading">
<p><span style="display:inline-block; width: 19%;"></span>Click&nbsp<i class="fa fa-chevron-circle-right" style="font-size:60px;color:#FFFFFF;text-shadow:2px 2px 4px #000000;"></i>&nbsp(Right-side) to start the quiz</p>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#1</h3>
<h1> {{bothnos[0]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#2</h3>
<h1> {{bothnos[1]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#3</h3>
<h1> {{bothnos[2]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#4</h3>
<h1> {{bothnos[3]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#5</h3>
<h1> {{bothnos[4]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#6</h3>
<h1> {{bothnos[5]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#7</h3>
<h1> {{bothnos[6]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#8</h3>
<h1> {{bothnos[7]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#9</h3>
<h1> {{bothnos[8]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#10</h3>
<h1> {{bothnos[9]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#11</h3>
<h1> {{bothnos[10]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#12</h3>
<h1> {{bothnos[11]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#13</h3>
<h1> {{bothnos[12]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#14</h3>
<h1> {{bothnos[13]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#15</h3>
<h1> {{bothnos[14]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#16</h3>
<h1> {{bothnos[15]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#17</h3>
<h1> {{bothnos[16]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#18</h3>
<h1> {{bothnos[17]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#19</h3>
<h1> {{bothnos[18]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<h3>#20</h3>
<h1> {{bothnos[19]}} </h1>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div class="quiz-finish">
<br>
<h2>That's it.<h2>
<h2>Next slide brings the correct answers for your verification</h2>
<br>
</div>
</div>
</div>
<div class="item">
<div class="answers-image">
<img src="http://www.tewksbury.k12.ma.us/webpages/lhyland/photos/x_044253_Multiplication.gif" class="img-rounded" alt="Cinque Terre" width="350" height="250" style= "float: right">
<h3 style= "float: left">Answers:</h3>
<div style:"clear: both"></div>
</div id="multi-answers">
<table class="table table-striped table-bordered table-hover" >
<tbody>
<tr class="success">
<div id="myRow">
<td>{{results[0]}}</td>
<td>{{results[5]}}</td>
<td>{{results[10]}}</td>
<td>{{results[15]}}</td>
</div>
</tr>
<tr class="warning">
<div id="myRow">
<td>{{results[1]}}</td>
<td>{{results[6]}}</td>
<td>{{results[11]}}</td>
<td>{{results[16]}}</td>
</div>
</tr>
<tr class="success">
<div id="myRow">
<td>{{results[2]}}</td>
<td>{{results[7]}}</td>
<td>{{results[12]}}</td>
<td>{{results[17]}}</td>
</div>
</tr>
<tr class="warning">
<div id="myRow">
<td>{{results[3]}}</td>
<td>{{results[8]}}</td>
<td>{{results[13]}}</td>
<td>{{results[18]}}</td>
</div<
</tr>
<tr class="success">
<div id="myRow">
<td>{{results[4]}}</td>
<td>{{results[9]}}</td>
<td>{{results[14]}}</td>
<td>{{results[19]}}</td>
</div>
</tr>
</tbody>
</table>
<div class="contact">
<p style="float: left">&nbsp;&nbsp;Feedback to: rajarajan.seetharaman@gmail.com</p>
<p style="float: right">Created on: 22-Jan-2016&nbsp;&nbsp</p>
<div style:"clear: both"></div>
</div>
</div>
</div>
</div><!-- end of carousel inner -->
<!-- carousel Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- end of angular -->
</div><!-- end of carousel -->
</div><!-- end of container-->
</body>
<script>
var myApp = angular.module('ttableModule', []);
myApp.controller('myController', ['$scope', function($scope) {
$scope.myinterval = 5000;
$scope.firstno = [];
$scope.secondno = [];
$scope.bothnos = [];
$scope.results = [];
$scope.myDate = new Date();
for(var i=0; i < 20; i++) {
$scope.firstno[i] = (Math.floor((Math.random() * 9)+2));
$scope.secondno[i] = (Math.floor((Math.random() * 7)+3));
$scope.bothnos[i] = $scope.firstno[i] + ' x ' + $scope.secondno[i];
$scope.results[i] = '(' + (i+1) + ') ' + $scope.bothnos[i] + ' = ' + parseFloat($scope.firstno[i]) * parseFloat($scope.secondno[i]) ;
}
return $scope.firstno;
return $scope.secondno;
return $scope.bothnos;
return $scope.results;
}]);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment