html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- It took me some time to do this -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|PT+Sans|Raleway" rel="stylesheet">
</head>
<body>
<!-- Tabs and Pages -->
<nav>
<ul>
<li><a href="#" class="link active" onclick="openTab(event,'information')">Visualising times tables</a></li>
<h3></h3>
<li><a href="#" class="link" onclick="openTab(event,'canv')">Testing out</a></li>
</ul>
</nav>
<!-- Information part -->
<div id="information" class ="content">
<ul>
<p>Hello! Not all of my codes include explications, but this one is pretty complicated to understand, so why not?</p>
<p>Imagine you have got a circle. Then you divide the circumference into a bunch of points with equal space between them.</p>
<p>If you go to the "Testing Out" page, and set the modulo to 10, you will see what I mean.</p>
<p>Wait?! What is MODULO? If you still have the modulo on 10, you will see the greatest number is 9. If we continue the pattern, 0 will be point 10, 1 will be point 11 etc.</p>
<p>You may wonder what are the points for? What is the multiplier too? So, we have the times tables.. Let's say we want to set the multiplier to 2. 0 * 2 is 0... We trace a line from point 0 to point 0. Then we take the next point. 1* 2 = 2. We trace a line between point 1 and 2. And so on, until we get to the modulo, which is the maximum number.</p>
<p>Why do we stop at modulo? Let's take the 2 times table. Let's take the 10 as a modulo... 10*2 = 20, so we do nothing, then 11 * 2 is 22.. The connections are exactly the same...</p>
<p>However, I recommend using a fixed modulo, like 100 or 200, because they help you visualise better.</p>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
margin: 0;
padding: 0;
background-image: url("http://www.numeracyhelper.com/interactTables/files/times.GIF");
background-repeat: no-repeat;
background-attachment: fixed;
}
nav {
margin: auto;
vertical-align: middle;
width: 100%;
font-family: 'PT Sans', sans-serif;
text-align: center;
}
ul {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.2) 25%,
rgba(255, 255, 255, 0.2) 75%,
rgba(255, 255, 255, 0) 100%);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1),
inset 0 0 1px rgba(255, 255, 255, 0.6);
padding: 10px;
}
nav ul li {
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Note: var canvas is the div that contains the canvas */
var c, ctx, centerX, centerY, t, radius;
var canvas;
var n = 1;
var points = [];
var locationNum = [];
var scale = 2;
var modulo = 200;
window.onload = function() {
/* Canvas */
c = document.getElementById("c");
ctx = c.getContext("2d");
/* Body's background depending on the screen size*/
var body = document.getElementsByTagName("body")[0];
body.style.backgroundSize = "100% " + window.innerWidth / 396 * 377 + " px";
var canvas = document.getElementById("canv");
/* Seting up the canvas size. On computer, because the width is smaller, you cannot see the whole thing */
c.height = 4*window.innerHeight/5;
if(window.innerWidth < 1000) {
c.width = window.innerWidth;
} else {
canvas.style.width = window.innerWidth * 0.7;
c.width = window.innerWidth * 0.7;
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run