Newer
Older
Björn Eßwein
committed
<!DOCTYPE html>
Björn Eßwein
committed
<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;
width: 100px;
height: 100px;
margin: 50px;
border-width: 1px;
Björn Eßwein
committed
}
#rectangle {
width: 10px;
height: 10px;
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<div id="scrollContainer">
<scroll-description title='OppositeLenScroll' alt='Given a triangle △A B C right-angled at ⊾C, the opposite side has length CA = tan(angleB) ⋅ BC.'>
<span>Given a triangle</span>
<math>
<mi>△<!-- △ --></mi>
baletiballo
committed
<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>--><!-- ⦝ -->
baletiballo
committed
<mi data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC"></mi>
</math>,<br />
<span>the opposite side has length</span>
<math>
baletiballo
committed
<mi data-solution-id="http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA"></mi>
<mo>=</mo>
<mrow>
<mi>tan</mi>
<!--<mo>⁡</mo>-->
<mo>(</mo>
baletiballo
committed
<mi data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB"></mi>
baletiballo
committed
<mi data-slot-id="http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC"></mi>
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
</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>
<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>
Björn Eßwein
committed
<script>
/**
* 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);
Björn Eßwein
committed
}
loadScript("./scroll_interaction/Drop_facts.js")
baletiballo
committed
loadScript("./scroll_interaction/SetScrollContent.js")
Björn Eßwein
committed
Björn Eßwein
committed
</script>
baletiballo
committed
<data id="assignments" 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":""}}">hi</data>
Björn Eßwein
committed
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!--<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>-->