Skip to content

Commit

Permalink
Fix up Javascript & iframe viewer tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshuahhh
joshuahhh committed Feb 15, 2017
1 parent c22160b commit 8409a20
Show file tree
Hide file tree
Showing 4 changed files with 147 additions and 82 deletions.
6 changes: 6 additions & 0 deletions viewer-test/bootstrap.min.css
View file

Large diffs are not rendered by default.

86 changes: 56 additions & 30 deletions viewer-test/iframe.html
View file
@@ -1,36 +1,62 @@
<!DOCTYPE html>
<html>

<head>
<title>Apparatus Viewer Test</title>
<html lang="en">
<head>
<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>
<iframe src='/?load=viewer-test/sum-of-odds.json
&amp;fullScreen=1
&amp;viewOnly=1
&amp;editLink=1
&amp;regionOfInterest={"x":[-0.5, 7.5],"y": [-1.5, 7.5]}'
width="300" height="300" style="border: none">
</iframe>
</div>
<title>Proofs by picture</title>
<link href="bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
margin-top: 100px;
margin-bottom: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="row"><div class="col-md-6 col-md-offset-3">
<h1>Proofs by picture</h1>

<h1>Circles and sinusoids</h1> What happens when you make clocks really thin?
<div>
<iframe src='/?load=viewer-test/circles.json
&amp;fullScreen=1
&amp;viewOnly=1
&amp;editLink=1
&amp;regionOfInterest={"x":[-1, 6.4],"y":[-1.1, 2.2]}'
width="400" height="250" style="border: none">
</iframe>
</div>
<h3>Adding up odd numbers</h3>

<p>What happens when you add up a bunch of odd numbers in a row, like 1 +
3 + 5 + 7?

<div>
<iframe src='../?load=viewer-test/sum-of-odds.json&amp;fullScreen=1&amp;viewOnly=1&amp;editLink=1&amp;regionOfInterest={"x":[-0.5, 7.5],"y": [-1.5, 7.5]}'
width="300" height="300" style="border: none">
</iframe>
</div>

<p>What a nifty way to make my favorite square number, 16!

</body>
<p>This diagram shows that the sum of the first <i>n</i> odd
numbers is always a square number – each odd number fits perfectly onto
the last square number, to make the next square number.

<p>Or, in symbols,
<blockquote><i>n</i><sup>2</sup> + (2<i>n</i> + 1) = (<i>n</i> + 1)<sup>2</sup></blockquote>

<p>Which do you find more convincing, the diagram, or the symbols? (Or
the diagram <i>plus</i> the symbols?)

<h3>Circles and sinusoids</h3>

<p>Here's something strange: a row of clocks with the hand going around:
12pm, 3pm, 6pm, 9pm. As we increase the number of circles, we'll have
the hand go around slower, and squeeze the circles horizontally so they
fit. See what happens:

<div>
<iframe src='../?load=viewer-test/circles.json&amp;fullScreen=1&amp;viewOnly=1&amp;editLink=1&amp;regionOfInterest={"x":[-1, 6.4],"y":[-1.1, 2.2]}'
width="400" height="250" style="border: none">
</iframe>
</div>

<p>By the time we get to 25 circles or so, a curve is forming. It's
called a <i>sine curve</i>. A sine curve tracks the vertical (or
horizontal) position of something moving around a circle, like our clock
hand.
</div></div>
</div>
</body>
</html>
52 changes: 0 additions & 52 deletions viewer-test/index.html
View file

This file was deleted.

85 changes: 85 additions & 0 deletions viewer-test/javascript.html
View file
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Proofs by picture</title>
<link href="bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
margin-top: 100px;
margin-bottom: 300px;
}
</style>
</head>
<body>
<script src="../dist/apparatus-viewer.js"></script>
<div class="container">
<div class="row"><div class="col-md-6 col-md-offset-3">
<h1>Proofs by picture</h1>

<h3>Adding up odd numbers</h3>

<p>What happens when you add up a bunch of odd numbers in a row, like 1 +
3 + 5 + 7?

<div id="diagram-sum-of-odds" style="width: 300px; height: 300px;"></div>

<p>What a nifty way to make my favorite square number, <span id="N-squared"></span>!

<p>This diagram shows that the sum of the first <i>n</i> odd
numbers is always a square number – each odd number fits perfectly onto
the last square number, to make the next square number.

<p>Or, in symbols,
<blockquote><i>n</i><sup>2</sup> + (2<i>n</i> + 1) = (<i>n</i> + 1)<sup>2</sup></blockquote>

<p>Which do you find more convincing, the diagram, or the symbols? (Or
the diagram <i>plus</i> the symbols?)

<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;
},
});
</script>

<h3>Circles and sinusoids</h3>

<p>Here's something strange: a row of clocks with the hand going around:
12pm, 3pm, 6pm, 9pm. As we increase the number of circles, we'll have
the hand go around slower, and squeeze the circles horizontally so they
fit. See what happens:

<div id="diagram-circles" style="width: 400px; height: 250px;"></div>

<p>By the time we get to <a href="#" id="click-for-25">25 circles</a> or
so, a curve is forming. It's called a <i>sine curve</i>. A sine curve
tracks the vertical (or horizontal) position of something moving around
a circle, like our clock hand.

<script>
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>
</div></div>
</div>
</body>
</html>

0 comments on commit 8409a20

Please sign in to comment.