/
index.html
52 lines (44 loc) · 1.28 KB
/
index.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<title>Apparatus Viewer Test</title>
<meta charset="utf-8">
</head>
<body>
<h1>Adding up odd numbers</h1>
What happens when you add up a bunch of odd numbers in a row?
<div id="diagram-sum-of-odds" style="width: 300px; height: 300px;"></div>
What a nifty way to make my favorite square number, <span id="N-squared"></span>!
<h1>Circles and sinusoids</h1>
What happens when you make clocks really thin?
<div id="diagram-circles" style="width: 400px; height: 250px;"></div>
(I recommend trying <a href="#" id="click-for-25">25 circles</a>.)
<script src="../dist/apparatus-viewer.js"></script>
<script>
new ApparatusViewer({
url: "sum-of-odds.json",
selector: "#diagram-sum-of-odds",
regionOfInterest: {
x: [-0.5, 7.5],
y: [-1.5, 7.5]
},
onRender: function() {
var N = this.getAttributeByLabel("N").value();
document.getElementById("N-squared").innerHTML = N * N;
},
});
var circles = new ApparatusViewer({
url: "circles.json",
selector: "#diagram-circles",
regionOfInterest: {
x: [-1, 6.4],
y: [-1.1, 2.2]
}
});
document.getElementById("click-for-25").onclick = function() {
circles.getAttributeByLabel("value").setExpression(25);
return false;
};
</script>
</body>
</html>