Newer
Older
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll View</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
[dropzone] {
background-color: grey;
margin: 1px;
border-width: 1px;
border-style: dashed;
}
[data-fact-id] {
background-color: lightgray;
}
[data-hint-available] {
background-color: yellow
}
math {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
}
.legacySlot {
width: 100px;
height: 100px;
margin: 50px;
border-width: 1px;
}
#rectangle {
width: 10px;
height: 10px;
position: absolute;
background-color: red;
}
</style>
<script src="jquery-3.7.1.slim.min.js"></script>
</head>
<body>
<!-- The canvas is initially hidden, it will be unhidden once the renderer is set up.
So, if that setup fails there is no empty space -->
<canvas id="math-mind-canvas" width="400" height="300" hidden></canvas>
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<div id="scrollContainer">
<scroll-description title='DefaultScroll' alt='No scroll loaded yet'>
<div>No scroll selected yet.</div>
<span>Given a triangle</span>
<math>
<mi>△<!-- △ --></mi>
<mi data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem?A"></mi>
<mi data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem?B"></mi>
<mi data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem?C"></mi>
</math>
<span>right-angled at</span>
<math>
<!--<mi>⦝</mi>--><!-- ⦝ -->
<mi data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC">
</mi>
</math>,<br />
<span>the opposite side has length</span>
<math>
<mi data-solution-id="http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA"></mi>
<mo>=</mo>
<mrow>
<mi>tan</mi>
<!--<mo>⁡</mo>-->
<mo>(</mo>
<mi data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB"></mi>
<mo>)</mo>
</mrow>
<mo>⁢</mo>
<mi data-slot-id="http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC"></mi>
</math>
<span>.</span>
<div>
<svg width='50mm' height='45mm' viewBox='35 0 90 70' version='1.1' id='triangle'
xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'>
<g id='shape'>
<path
style='fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1'
d='M 42.871972,64.67128 H 84.290656 V 7.6297578 Z' id='triangle' />
<path id='angleABC'
style='fill:none;stroke:#000000;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1'
d='m 46.024276,60.304806 a 5.3589964,5.3589964 0 0 1 2.252109,4.366474 h -5.358996 z' />
<g id='angleBCA'>
<path
style='fill:none;stroke:#000000;stroke-width:0.264999;stroke-dasharray:none;stroke-opacity:1'
id='rightAngle'
d='m 78.972396,64.665062 a 5.3308268,5.3308268 0 0 1 5.330827,-5.330827 v 5.330827 z' />
<circle
style='fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264999;stroke-dasharray:none;stroke-opacity:1'
id='rightAngleDot' cx='82.081886' cy='62.813831' r='0.32113415' />
</g>
</g>
<g id='labels'
style='font-size:4.23333px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;stroke-width:0.264583'>
<text xml:space='preserve' x='39.242592' y='67.117035' id='pointB' style='fill:#0000ff'
data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem?B'>${lverb B}</text>
<text xml:space='preserve' x='85.100548' y='68.080437' id='pointC' style='fill:#0000ff'
data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem?C'>${lverb C}</text>
<text xml:space='preserve' x='84.650963' y='6.551136' id='pointA' style='fill:#0000ff'
data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem?A'>${lverb A}</text>
<text xml:space='preserve' x='48.234348' y='62.492699' id='angleAtB' style='fill:#ffcc00'
data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB'>${lverb
angleB}</text>
<text xml:space='preserve' x='71.548683' y='60.951256' id='rightAngleAtC' style='fill:#ffcc00'
data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC'>${lverb
rightAngleC}</text>
<text xml:space='preserve' x='59.409813' y='68.273117' id='distanceBC' style='fill:#008000'
data-slot-id='http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC'>${lverb
distanceBC}</text>
<text xml:space='preserve' x='84.972092' y='35.260529' id='solutionCA' style='fill:#008000'
data-solution-id='http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA'>${lverb
deducedLineCA}</text>
</g>
</svg>
</div>
</scroll-description>
</div>
<button type="button" title="Apply the scroll" onclick="applyScroll('')">Apply</button><br>
<p>You can right click on yellow slots to get a hint.</p>
<script id="load-other-scripts">
/**
* Load all .js files for interactive scrolls. (So we can use e.g. Typescript)
*
* This is no more dangerous than having this file in the streaming assets.
* Any malicious code could just be written in here as well ¯\_(ツ)_/¯.
*/
function loadScript(url) {
const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
head.appendChild(script);
}
loadScript("./scroll_interaction/Drop_facts.js")
loadScript("./scroll_interaction/SetScrollContent.js")
//loadScript("./scroll_interaction/webgl-demo.js")
</script>
<script src="./scroll_interaction/Math_Mind.js" type="module"></script>
<data id="Unity-Data-Interface" hidden
data-assignments='{"http://mathhub.info/FrameIT/frameworld?TriangleProblem?A":{"Item1":"(C)","Item2":"http://mathhub.info/FrameIT/frameworld?DefaultSituationSpace/SituationTheory1?fact310"},"http://mathhub.info/FrameIT/frameworld?TriangleProblem?B":{"Item1":"(B)","Item2":"http://mathhub.info/FrameIT/frameworld?DefaultSituationSpace/SituationTheory1?fact309"},"http://mathhub.info/FrameIT/frameworld?TriangleProblem?C":{"Item1":"C","Item2":""},"http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC":{"Item1":"⊾C","Item2":""},"http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC":{"Item1":"BC","Item2":""},"http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB":{"Item1":"∠ABC","Item2":""},"http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA":{"Item1":"CA","Item2":""}}'
data-scroll-dynamic='{"ref":"http://mathhub.info/FrameIT/frameworld?OppositeLen","label":"OppositeLen","description":"<scroll-description title='OppositeLenScroll' alt='Given a triangle △ABC right-angled at ⊾C, the opposite side has length CA = tan(∠ABC) ⋅ BC.'> <span>Given a triangle</span> <math> <mi>△<!-- △ --></mi> <mi data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem?A'></mi> <mi data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem?B'></mi> <mi data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem?C'></mi> </math> <span>right-angled at</span> <math> <!--<mi>⦝</mi>--><!-- ⦝ --> <mi data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC'></mi> </math>,<br /> <span>the opposite side has length</span> <math> <mi data-solution-id='http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA'></mi> <mo>=</mo> <mrow> <mi>tan</mi> <!--<mo>⁡</mo>--> <mo>(</mo> <mi data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB'></mi> <mo>)</mo> </mrow> <mo>⁢</mo> <mi data-slot-id='http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC'></mi> </math> <span>.</span> <div> <svg width='50mm' height='45mm' viewBox='35 0 90 70' version='1.1' id='triangle' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'> <g id='shape'> <path style='fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' d='M 42.871972,64.67128 H 84.290656 V 7.6297578 Z' id='triangle' /> <path id='angleABC' style='fill:none;stroke:#000000;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1' d='m 46.024276,60.304806 a 5.3589964,5.3589964 0 0 1 2.252109,4.366474 h -5.358996 z' /> <g id='angleBCA'> <path style='fill:none;stroke:#000000;stroke-width:0.264999;stroke-dasharray:none;stroke-opacity:1' id='rightAngle' d='m 78.972396,64.665062 a 5.3308268,5.3308268 0 0 1 5.330827,-5.330827 v 5.330827 z' /> <circle style='fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264999;stroke-dasharray:none;stroke-opacity:1' id='rightAngleDot' cx='82.081886' cy='62.813831' r='0.32113415' /> </g> </g> <g id='labels' style='font-size:4.23333px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;stroke-width:0.264583' > <text xml:space='preserve' x='39.242592' y='67.117035' id='pointB' style='fill:#0000ff' data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem?B'>B</text> <text xml:space='preserve' x='85.100548' y='68.080437' id='pointC' style='fill:#0000ff' data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem?C'>C</text> <text xml:space='preserve' x='84.650963' y='6.551136' id='pointA' style='fill:#0000ff' data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem?A'>A</text> <text xml:space='preserve' x='48.234348' y='62.492699' id='angleAtB' style='fill:#ffcc00' data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB'>∠ABC</text> <text xml:space='preserve' x='71.548683' y='60.951256' id='rightAngleAtC' style='fill:#ffcc00' data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC'>⊾C</text> <text xml:space='preserve' x='59.409813' y='68.273117' id='distanceBC' style='fill:#008000' data-slot-id='http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC'>BC</text> <text xml:space='preserve' x='84.972092' y='35.260529' id='solutionCA' style='fill:#008000' data-solution-id='http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA'>CA</text> </g> </svg> </div> </scroll-description>","requiredFacts":[{"tp":{"kind":"OMS","uri":"http://mathhub.info/MitM/core/geometry?3DGeometry?point"},"df":null,"ref":{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?A"},"kind":"general","label":"A"},{"tp":{"kind":"OMS","uri":"http://mathhub.info/MitM/core/geometry?3DGeometry?point"},"df":null,"ref":{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?B"},"kind":"general","label":"B"},{"tp":{"kind":"OMS","uri":"http://mathhub.info/MitM/core/geometry?3DGeometry?point"},"df":null,"ref":{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?C"},"kind":"general","label":"C"},{"tp":{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://mathhub.info/MitM/Foundation?Logic?ded"},"arguments":[{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://mathhub.info/MitM/Foundation?Logic?eq"},"arguments":[{"kind":"OMS","uri":"http://mathhub.info/MitM/Foundation?RealLiterals?real_lit"},{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://mathhub.info/MitM/core/geometry?Geometry/Common?angle_between"},"arguments":[{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?B"},{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?C"},{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?A"}]},{"kind":"OMLIT<Double>","type":"http://mathhub.info/MitM/Foundation?RealLiterals?real_lit","value":90.0}]}]},"df":null,"ref":{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC"},"kind":"general","label":"⊾C"},{"lhs":{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://mathhub.info/MitM/core/geometry?Geometry/Common?metric"},"arguments":[{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?B"},{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?C"}]},"valueTp":{"kind":"OMS","uri":"http://mathhub.info/MitM/Foundation?RealLiterals?real_lit"},"value":null,"proof":null,"ref":{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC"},"kind":"veq","label":"BC"},{"lhs":{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://mathhub.info/MitM/core/geometry?Geometry/Common?angle_between"},"arguments":[{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?A"},{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?B"},{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?C"}]},"valueTp":{"kind":"OMS","uri":"http://mathhub.info/MitM/Foundation?RealLiterals?real_lit"},"value":null,"proof":null,"ref":{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB"},"kind":"veq","label":"∠ABC"}],"acquiredFacts":[{"lhs":{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://mathhub.info/MitM/core/geometry?Geometry/Common?metric"},"arguments":[{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?C"},{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?A"}]},"valueTp":{"kind":"OMS","uri":"http://mathhub.info/MitM/Foundation?RealLiterals?real_lit"},"value":{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://mathhub.info/MitM/core/arithmetics?RealArithmetics?multiplication"},"arguments":[{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://mathhub.info/MitM/Foundation?Trigonometry?tan"},"arguments":[{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://gl.mathhub.info/MMT/LFX/Sigma?Symbols?Projl"},"arguments":[{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB"}]}]},{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://gl.mathhub.info/MMT/LFX/Sigma?Symbols?Projl"},"arguments":[{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC"}]}]},"proof":{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://mathhub.info/MitM/Foundation?InformalProofs?proofsketch"},"arguments":[{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://mathhub.info/MitM/Foundation?Logic?eq"},"arguments":[{"kind":"OMS","uri":"http://mathhub.info/MitM/Foundation?RealLiterals?real_lit"},{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://mathhub.info/MitM/core/geometry?Geometry/Common?metric"},"arguments":[{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?C"},{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem?A"}]},{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://mathhub.info/MitM/core/arithmetics?RealArithmetics?multiplication"},"arguments":[{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://mathhub.info/MitM/Foundation?Trigonometry?tan"},"arguments":[{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://gl.mathhub.info/MMT/LFX/Sigma?Symbols?Projl"},"arguments":[{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB"}]}]},{"kind":"OMA","applicant":{"kind":"OMS","uri":"http://gl.mathhub.info/MMT/LFX/Sigma?Symbols?Projl"},"arguments":[{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC"}]}]}]},{"kind":"OMLIT<String>","type":"http://cds.omdoc.org/urtheories?Strings?string","value":"OppositeLen Scroll"}]},"ref":{"kind":"OMS","uri":"http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA"},"kind":"veq","label":"CA"}],"name":"http://mathhub.info/FrameIT/frameworld?OppositeLen","path":null}'>hi</data>
<!--<script src="visualiseCursor.mjs" defer type="module"></script>-->
<!--<script>
/* mouse and pointer event handling */
const rectangle = document.createElement("div");
rectangle.id = "rectangle";
console.log("appendChild to", document.body)
document.body.appendChild(rectangle);
function followCursor(event) {
const cursorX = event.clientX;
const cursorY = event.clientY +5;
//console.log(`MouseEvent X: ${cursorX}, Y: ${cursorY}, Event type: ${event.type}`, event);
rectangle.style.left = `${cursorX}px`;
rectangle.style.top = `${cursorY}px`;
}
document.addEventListener("mousemove", followCursor);
document.addEventListener("pointermove", followCursor);
document.addEventListener("mouseover", followCursor);
document.addEventListener("pointerover", followCursor);
document.addEventListener("mouseout", followCursor);
document.addEventListener("pointerout", followCursor);
</script>-->
</body>
</html>