-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathnumberline.html
123 lines (96 loc) · 2.72 KB
/
numberline.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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
#numberline {
border: 10px solid black;
border-top-width: 0;
border-bottom-width: 20px;
/* margin: 0 auto; */
width: 90vw;
height: 10px;
position: absolute;
top: 50vh;
}
div.marker {
border: 0px solid black;
border-left-width: 5px;
height: 20px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Math.random() Demo</h1>
<!-- <div id="0" class="numbers">0 <div class="marker"></div></div>
<div id="numberline"></div> -->
<p>(Math.random() x <input id="scale" type="number" value="1" min="1">) + <input id="shift" type="number" value="0"></p>
<!-- <button onclick="plotRandomPoint()">Plot Random point</button> -->
<div id="calculator" style="height: 200px;"></div>
<script src="https://www.desmos.com/api/v1.5/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
<script>
var calculatorSettings = {
settingsMenu: false,
zoomButtons: false,
keypad: false,
expressionsTopbar: false,
border: false,
lockViewport: true,
expressions: false
};
var calculator = Desmos.GraphingCalculator(
document.getElementById('calculator'),
calculatorSettings
);
var scaleInput = document.getElementById("scale");
var shiftInput = document.getElementById("shift");
calculator.updateSettings({
showYAxis: false,
showGrid: false
});
var points = []
scaleInput.onchange = update;
shiftInput.onchange = update;
function getScale() {
return parseInt(scaleInput.value)
}
function getShift() {
return parseInt(shiftInput.value)
}
//alias for getShift. they are the same value
getRandMin = getShift;
function getRandMax() {
return getScale() + getShift()
}
function update() {
calculator.removeExpressions(points);
points = []
let padding = .1*getScale()
calculator.setMathBounds({
left: getRandMin()- padding,
right: getRandMax()+ padding,
bottom: -1,
top: 1
});
let pointObj = {
id: "range" + points.length,
latex: getRandMin() + " <= x < " + getRandMax(),
color: Desmos.Colors.BLUE
};
points.push(pointObj);
// Add an expression
calculator.setExpression(pointObj);
}
function plotRandomPoint() {
let point = (Math.random() * getScale()) + getShift()
let id = "point" + points.length
let pointObj = { id: id, latex: '(' + point + ',0)' };
points.push(pointObj);
// Add an expression
calculator.setExpression(pointObj);
}
update()
</script>
</body>
</html>