Times Tables
The code below will allow you to embed a times tables quick game into your site. Edit the code to choose which times table you want and embed the code into
Full code:
Edit the number in blue and embed in your Google Site.
<html>
<head>
<script>
////////////// CHOOSE YOUR TIMES TABLE FROM 1 TO 10 HERE///////////
var timesTable = 5
///////////////////////////////////////////////////////////////////
</script>
<style>
body {
background-color: lightgrey;
}
td {
border: solid grey 1px;
vertical-align: center;
text-align: center;
font-family: 'Cairo';
font-size: 3vmin;
font-weight: bold;
height: 7vmin;
width: 7vmin;
max-height: 7vmin;
max-width: 7vmin;
border-radius: 1vmin;
background-color: white;
}
td:hover {
background: yellow;
}
#qDiv {
font-family: 'Cairo';
font-size: 3vmin;
font-weight: bold;
background-color: yellow;
margin-left: 2px;
padding-left: 10px;
padding-right: 10px;
border-radius: 1vmin;
display: inline-block;
width: 52vmin;
text-align: center;
}
button {
text-align: center;
font-family: 'Cairo';
font-size: 3vmin;
border-radius: 1vmin;
background-color: white;
}
.banner {
background-color: darkgrey;
color: white;
text-align: center;
padding: 0px;
margin: 2px;
font-family: 'Cairo';
font-size: 30px;
border-radius: 1vmin;
max-width: 86vmin;
}
.answers {
background-color: lightgrey;
width: 26vmin;
font-size: 20px;
}
</style>
<script>
var myMultiplier = 5
var questionNumber = 0
var multipliers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var currentNumber
var finished = 0
var seconds = 0
var myTimer
function shuffleArray() {
for (var i = multipliers.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = multipliers[i];
multipliers[i] = multipliers[j];
multipliers[j] = temp;
}
}
function newQuestion() {
if (questionNumber < 10) {
currentNumber = multipliers[questionNumber]
document.getElementById('qDiv').innerHTML = currentNumber + " X " + timesTable
//document.getElementById(200 + questionNumber + currentNumber).innerHTML=currentNumber + " X " + timesTable + " = " + currentNumber*timesTable
questionNumber++
} else {
document.getElementById('qDiv').innerHTML = 'All correct! You took ' + seconds + ' seconds!'
document.getElementById("allTen").play()
clearInterval(myTimer)
}
}
function markNow(id) {
if (id == currentNumber * timesTable) {
markedCorrect(id)
} else {
document.getElementById(id).style.backgroundColor = "red"
document.getElementById("beepDown").play()
document.getElementById('qDiv').innerHTML = "Wrong answer. Please start again!"
}
}
function startNow() {
resetAll()
shuffleArray()
newQuestion()
startTimer()
}
function markedCorrect(id) {
document.getElementById("beepUp").play()
document.getElementById(id).style.backgroundColor = "yellow"
document.getElementById(200 + currentNumber).innerHTML = currentNumber + " X " + timesTable + " = " + currentNumber * timesTable
newQuestion()
}
function startTimer() {
myTimer = setInterval(addSeconds, 1000);
}
function addSeconds() {
seconds++
}
function resetAll() {
for (i = 0; i < 109; i++) {
document.getElementById(i).style.backgroundColor = "white"
questionNumber = 0
finished = 0
seconds = 0
}
for (i = 1; i < 11; i++) {
document.getElementById(200 + i).innerHTML = ""
}
}
document.getElementById(211).innerHTML = " X " + timesTable
</script>
</head>
<body>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap" rel="stylesheet">
<audio id="beepUp" src="http://www.soundjay.com/button/button-14.wav"></audio>
<audio id="beepDown" src="http://www.soundjay.com/button/button-4.wav"></audio>
<audio id="finish" src="https://www.soundjay.com/misc/magic-chime-01.wav"></audio>
<audio id="allTen" src="https://sites.google.com/a/pdoschool.com/pdo/sounds/fx-cheering.mp3"></audio>
<div class="banner" id="whichTable"></div>
<table>
<tr>
<td onClick="markNow(id);this.style.background=chosenColor" id="100">100</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="101">101</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="102">102</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="103">103</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="104">104</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="105">105</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="106">106</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="107">107</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="108">108</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="109">109</td>
<td class="answers" style="font-size:24px;background-color:yellow;" id="211"></td>
</tr>
<tr>
<td onClick="markNow(id);this.style.background=chosenColor" id="90">90</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="91">91</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="92">92</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="93">93</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="94">94</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="95">95</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="96">96</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="97">97</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="98">98</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="99">99</td>
<td class="answers" id="210"></td>
</tr>
<tr>
<td onClick="markNow(id);this.style.background=chosenColor" id="80">80</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="81">81</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="82">82</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="83">83</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="84">84</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="85">85</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="86">86</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="87">87</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="88">88</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="89">89</td>
<td class="answers" id="209"></td>
</tr>
<tr>
<td onClick="markNow(id);this.style.background=chosenColor" id="70">70</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="71">71</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="72">72</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="73">73</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="74">74</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="75">75</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="76">76</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="77">77</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="78">78</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="79">79</td>
<td class="answers" id="208"></td>
</tr>
<tr>
<td onClick="markNow(id);this.style.background=chosenColor" id="60">60</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="61">61</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="62">62</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="63">63</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="64">64</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="65">65</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="66">66</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="67">67</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="68">68</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="69">69</td>
<td class="answers" id="207"></td>
</tr>
<tr>
<td onClick="markNow(id);this.style.background=chosenColor" id="50">50</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="51">51</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="52">52</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="53">53</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="54">54</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="55">55</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="56">56</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="57">57</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="58">58</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="59">59</td>
<td class="answers" id="206"></td>
</tr>
<tr>
<td onClick="markNow(id);this.style.background=chosenColor" id="40">40</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="41">41</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="42">42</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="43">43</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="44">44</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="45">45</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="46">46</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="47">47</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="48">48</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="49">49</td>
<td class="answers" id="205"></td>
</tr>
<tr>
<td onClick="markNow(id);this.style.background=chosenColor" id="30">30</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="31">31</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="32">32</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="33">33</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="34">34</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="35">35</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="36">36</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="37">37</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="38">38</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="39">39</td>
<td class="answers" id="204"></td>
</tr>
<tr>
<td onClick="markNow(id);this.style.background=chosenColor" id="20">20</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="21">21</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="22">22</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="23">23</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="24">24</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="25">25</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="26">26</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="27">27</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="28">28</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="29">29</td>
<td class="answers" id="203"></td>
</tr>
<tr>
<td onClick="markNow(id);this.style.background=chosenColor" id="10">10</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="11">11</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="12">12</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="13">13</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="14">14</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="15">15</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="16">16</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="17">17</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="18">18</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="19">19</td>
<td class="answers" id="202"></td>
</tr>
<tr>
<td onClick="markNow(id);this.style.background=chosenColor" id="0">0</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="1">1</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="2">2</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="3">3</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="4">4</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="5">5</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="6">6</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="7">7</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="8">8</td>
<td onClick="markNow(id);this.style.background=chosenColor" id="9">9</td>
<td class="answers" id="201"></td>
</tr>
</table>
<button style="width:14vmin;" onClick="startNow()">Start</button>
<span id="qDiv"> </span>
<div class="banner " style="text-align:left;font-size:24px;padding-left:6px;">by Dave Salt</div>
<script>
document.getElementById('whichTable').innerHTML = " Times Table Challenge"
document.getElementById(211).innerHTML = " X " + timesTable
</script>
</body>
</html>