<!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>
</head>
<body>
<div id="scrollContainer">
<div>No scroll selected</div>
<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>
<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>
/**
* 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")
</script>
<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>
<!--<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>