This repository has been archived by the owner on May 7, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 19
/
index.html
107 lines (95 loc) · 7.72 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<style>
body {
margin: 16px;
}
div {
margin-bottom:16px
}
</style>
<!-- STYLESHEET -->
<link rel="stylesheet" href="/css/library.css">
<div id="snake-game"></div><script type="module" src="./dist/examples/interaction/snake-game.js"></script>
<div id="click-accuracy-game"></div><script type="module" src="./dist/examples/interaction/click-accuracy-game.js"></script>
<div id="mouse-path-game"></div><script type="module" src="./dist/examples/interaction/mouse-path-game.js"></script>
<!-- CURRENT INTERACTIVE -->
<div id="load-external-svg"></div><script type="module" src="./dist/examples/svg/load-external-svg.js"></script>
<div id="prime-factorization"></div><script type="module" src="./dist/examples/graph/prime-factorization.js"></script>
<div id="country-selection"></div><script type="module" src="./dist/examples/maps/country-selection.js"></script>
<div id="merge-sort"></div><script type="module" src="./dist/examples/math/merge-sort.js"></script>
<div id="map-zoom-feature"></div><script type="module" src="./dist/examples/maps/map-zoom-feature.js"></script>
<div id="population-of-united-states"></div><script type="module" src="./dist/examples/maps/population-of-united-states.js"></script>
<div id="state-quiz"></div><script type="module" src="./dist/examples/maps/state-quiz.js"></script>
<div id="world-map"></div><script type="module" src="./dist/examples/maps/world-map.js"></script>
<!-- INPUT ELEMENTS -->
<div id="scrubber-element"></div><script type="module" src="./dist/examples/elements/scrubber-element.js"></script>
<div id="slider-element"></div><script type="module" src="./dist/examples/elements/slider-element.js"></script>
<div id="button-element"></div><script type="module" src="./dist/examples/elements/button-element.js"></script>
<div id="control-element"></div><script type="module" src="./dist/examples/elements/control-element.js"></script>
<div id="control-circle-element"></div><script type="module" src="./dist/examples/elements/control-circle-element.js"></script>
<div id="check-box-element"></div><script type="module" src="./dist/examples/elements/check-box-element.js"></script>
<div id="radio-control-element"></div><script type="module" src="./dist/examples/elements/radio-control-element.js"></script>
<div id="dropdown-control-element"></div><script type="module" src="./dist/examples/elements/dropdown-control-element.js"></script>
<!-- BASIC ELEMENTS -->
<div id="ellipse-element"></div><script type="module" src="./dist/examples/elements/ellipse-element.js"></script>
<div id="line-element"></div><script type="module" src="./dist/examples/elements/line-element.js"></script>
<div id="path-element"></div><script type="module" src="./dist/examples/elements/path-element.js"></script>
<div id="rectangle-element"></div><script type="module" src="./dist/examples/elements/rectangle-element.js"></script>
<div id="text-element"></div><script type="module" src="./dist/examples/elements/text-element.js"></script>
<div id="tspan-element"></div><script type="module" src="./dist/examples/elements/tspan-element.js"></script>
<!-- COMPLEX ELEMENTS -->
<div id="directed-graph-element"></div><script type="module" src="./dist/examples/elements/directed-graph-element.js"></script>
<div id="undirected-graph-element"></div><script type="module" src="./dist/examples/elements/undirected-graph-element.js"></script>
<div id="plot-element"></div><script type="module" src="./dist/examples/elements/plot-element.js"></script>
<!-- SVG -->
<div id="svg-circle"></div><script type="module" src="./dist/examples/svg/svg-circle.js"></script>
<div id="svg-coordinate-system"></div><script type="module" src="./dist/examples/svg/svg-coordinate-system.js"></script>
<div id="svg-ellipse"></div><script type="module" src="./dist/examples/svg/svg-ellipse.js"></script>
<div id="svg-line"></div><script type="module" src="./dist/examples/svg/svg-line.js"></script>
<div id="svg-path-arc"></div><script type="module" src="./dist/examples/svg/svg-path-arc.js"></script>
<div id="svg-path-bezier-cubic"></div><script type="module" src="./dist/examples/svg/svg-path-bezier-cubic.js"></script>
<div id="svg-path-bezier-quadratic"></div><script type="module" src="./dist/examples/svg/svg-path-bezier-quadratic.js"></script>
<div id="svg-path-line"></div><script type="module" src="./dist/examples/svg/svg-path-line.js"></script>
<div id="svg-rectangle"></div><script type="module" src="./dist/examples/svg/svg-rectangle.js"></script>
<div id="svg-clip-path"></div><script type="module" src="./dist/examples/svg/svg-clip-path.js"></script>
<!-- MATHS -->
<div id="angle"></div><script type="module" src="./dist/examples/math/angle.js"></script>
<div id="angle-between-two-vectors"></div><script type="module" src="./dist/examples/math/angle-between-two-vectors.js"></script>
<div id="area-between-two-vectors"></div><script type="module" src="./dist/examples/math/area-between-two-vectors.js"></script>
<div id="bezier-curve-quadratic"></div><script type="module" src="./dist/examples/math/bezier-curve-quadratic.js"></script>
<div id="bezier-curve-cubic"></div><script type="module" src="./dist/examples/math/bezier-curve-cubic.js"></script>
<div id="cartesian-coordinate-system"></div><script type="module" src="./dist/examples/math/cartesian-coordinate-system.js"></script>
<div id="circle-defined-by-three-points"></div><script type="module" src="./dist/examples/math/circle-defined-by-three-points.js"></script>
<div id="line-defined-by-two-points"></div><script type="module" src="./dist/examples/math/line-defined-by-two-points.js"></script>
<div id="point-where-two-lines-intersect"></div><script type="module" src="./dist/examples/math/point-where-two-lines-intersect.js"></script>
<div id="plot-normal-distribution"></div><script type="module" src="./dist/examples/math/plot-normal-distribution.js"></script>
<div id="right-triangle"></div><script type="module" src="./dist/examples/math/right-triangle.js"></script>
<div id="triangle"></div><script type="module" src="./dist/examples/math/triangle.js"></script>
<div id="triangle-law-of-sines"></div><script type="module" src="./dist/examples/math/triangle-law-of-sines.js"></script>
<div id="unit-circle"></div><script type="module" src="./dist/examples/math/unit-circle.js"></script>
<div id="unit-circle-trigonometric-functions"></div><script type="module" src="./dist/examples/math/unit-circle-trigonometric-functions.js"></script>
<div id="unit-circle-angle"></div><script type="module" src="./dist/examples/math/unit-circle-angle.js"></script>
<div id="unit-circle-right-triangle"></div><script type="module" src="./dist/examples/math/unit-circle-right-triangle.js"></script>
<div id="unit-circle-cosine"></div><script type="module" src="./dist/examples/math/unit-circle-cosine.js"></script>
<div id="unit-circle-sine"></div><script type="module" src="./dist/examples/math/unit-circle-sine.js"></script>
<script type="module">
import { download } from './dist/util/file.js';
// add a save function to the window to save the current interactive
window.save = function() {
let interactives = document.getElementsByClassName('interactive');
for( let i = 0; i < interactives.length; i++ ) {
let name = interactives[i].parentElement.id;
let id = interactives[i].id;
download(id, `${name}.svg`);
}
}
</script>
</body>
</html>