Interactive Times Tables Challenge

Edit the times table at the top of the code.
Select and copy the text (ctrl+a,ctrl+c) and paste in a Google Sites embed section.

<html>
<head>
<script>
////////////// CHOOSE YOUR TIMES TABLE FROM 1 TO 10 HERE///////////

var timesTable = 5

///////////////////////////////////////////////////////////////////
</script>

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++
        }

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>

Output