Skip to content
Snippets Groups Projects
scrollView.html 39.7 KiB
Newer Older
  • Learn to ignore specific revisions
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>Scroll View</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
    
            [data-allowed-types="PointFact"] * {
                color: #0000ff
            }
    
            [data-allowed-types="LineFact"] * {
                color: #008000
            }
    
    
                /* 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>
    
        <!-- 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>
    
        <div id="scrollContainer">
            <scroll-description title='DefaultScroll' alt='No scroll loaded yet'>
                <div>No scroll selected yet.</div>
                <div>
    
                    Given a triangle
                    <math>
                        <mrow>
                            <mi>&xutri;<!-- △ --></mi>
                            <slot data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem?A" />
                            <slot data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem?B" />
                            <slot data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem?C" />
                        </mrow>
                    </math>
                    right-angled at
                    <math>
                        <!--<mi>&angrtvbd;</mi>--><!-- ⦝ -->
                        <mrow>
                            <slot
                                data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC" />
                        </mrow>
                    </math>,<br />
                    the opposite side has length
                    <math>
                        <mi data-solution-id="http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA">
                        </mi>
                        <mo>&equals;</mo>
                        <mrow>
                            <mi>tan</mi>
                            <!--<mo>&#8289;</mo>-->
                            <mo>(</mo>
    
                            <slot data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB" />
    
                            <mo>&times;</mo>
                            <slot data-slot-id="http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC" />
    
                        </mrow>
                    </math>.
                </div>
                <div>
                    <svg width='8cm' height='8cmm' viewBox='-25 -25 300 300' version='1.1' id='triangle'
    
                        xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'>
    
                        <g id='shape'
                            style='fill:none;stroke:#000000;stroke-linecap:butt;stroke-width:1;stroke-linejoin:miter;stroke-opacity:1'>
                            <path d='M 0,250 H 200 V 0 Z' id='triangle' />
                            <path id='angleABC' d='M 0,250 l 15.6,-19.5 a 25 25 0 0 1 9.4,19.5 z' />
                            <!-- M [corner] l [25*cos()],[-25*sin()] a 25 25 0 0 1 [25-25*cos()],[25*sin()]-->
    
                                <path id='rightAngle' d='M 200,250 v -25 a 25,25 0 0 0 -25,25 z' />
                                <circle style='fill:#000000;fill-opacity:1;stroke:none' id='rightAngleDot' cx='190' cy='240'
                                    r='1.5' />
                                <!-- Corner - (40,40); 40 = 15/sqrt(2) + epsilon -->
    
                        <g id='labels' style='line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;'>
                            <foreignObject id='pointB' x='200' y='-25' width="25" height="25">
                                <math xmlns="http://www.w3.org/1998/Math/MathML"
                                    data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem?A" />
                            </foreignObject>
                            <foreignObject id='pointB' x='-25' y='250' width="25" height="25">
                                <math xmlns="http://www.w3.org/1998/Math/MathML"
                                    data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem?B" />
                            </foreignObject>
                            <foreignObject id='pointB' x='200' y='250' width="25" height="25">
                                <math xmlns="http://www.w3.org/1998/Math/MathML"
                                    data-slot-id="http://mathhub.info/FrameIT/frameworld?TriangleProblem?C" />
                            </foreignObject>
                            <foreignObject id='pointB' x='30' y='225' width="50" height="25">
                                <math xmlns="http://www.w3.org/1998/Math/MathML"
    
                                    data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB' />
    
                            </foreignObject>
                            <foreignObject id='pointB' x='145' y='225' width="50" height="25">
                                <math xmlns="http://www.w3.org/1998/Math/MathML"
    
                                    data-slot-id='http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC' />
    
                            </foreignObject>
                            <foreignObject id='pointB' x='100' y='250' width="50" height="25">
                                <math xmlns="http://www.w3.org/1998/Math/MathML"
    
                                    data-slot-id='http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC' />
    
                            </foreignObject>
                            <foreignObject id='pointB' x='205' y='120' width="50" height="25">
                                <math xmlns="http://www.w3.org/1998/Math/MathML" style='color:#008000'
    
                                    data-solution-id='http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA' />
    
                        </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("./build/Drop_facts.js")
    
            loadScript("./build/Types.js")
    
            loadScript("./build/API_Parsers.js")
    
            loadScript("./build/SetScrollContent.js")
    
            //loadScript("./scroll_interaction/webgl-demo.js")
    
        </script>
    
        <!-- <script src="./build/Math_Mind.js" type="module"></script> -->
    
        <data id="Unity-Data-Interface" hidden
    
            data-assignments='{&quot;http://mathhub.info/FrameIT/frameworld?TriangleProblem?A&quot;:{&quot;Item1&quot;:&quot;(C)&quot;,&quot;Item2&quot;:&quot;http://mathhub.info/FrameIT/frameworld?DefaultSituationSpace/SituationTheory1?fact310&quot;},&quot;http://mathhub.info/FrameIT/frameworld?TriangleProblem?B&quot;:{&quot;Item1&quot;:&quot;(B)&quot;,&quot;Item2&quot;:&quot;http://mathhub.info/FrameIT/frameworld?DefaultSituationSpace/SituationTheory1?fact309&quot;},&quot;http://mathhub.info/FrameIT/frameworld?TriangleProblem?C&quot;:{&quot;Item1&quot;:&quot;C&quot;,&quot;Item2&quot;:&quot;&quot;},&quot;http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC&quot;:{&quot;Item1&quot;:&quot;⊾C&quot;,&quot;Item2&quot;:&quot;&quot;},&quot;http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC&quot;:{&quot;Item1&quot;:&quot;BC&quot;,&quot;Item2&quot;:&quot;&quot;},&quot;http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB&quot;:{&quot;Item1&quot;:&quot;∠ABC&quot;,&quot;Item2&quot;:&quot;&quot;},&quot;http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA&quot;:{&quot;Item1&quot;:&quot;CA&quot;,&quot;Item2&quot;:&quot;&quot;}}'
    
            data-scroll-dynamic='{
    
                "uri": {
                    "parseAs": "string",
                    "content": "http://mathhub.info/FrameIT/frameworld?OppositeLen"
                },
                "label": {
                    "parseAs": "MathMLElement",
                    "content": "<ms>OppositeLen</ms>"
                },
                "type": {
                    "parseAs": "string",
                    "content": "Scroll"
                },
    
                "slots": [
    
                        "label": {
                            "parseAs": "MathMLElement",
                            "content": "<mi>A</mi>"
    
                        "uri": {
                            "parseAs": "string",
                            "content": "http://mathhub.info/FrameIT/frameworld?TriangleProblem?A"
    
                        "type": {
                            "parseAs": "string",
                            "content": "Point_Fact"
                        }
    
                        "label": {
                            "parseAs": "MathMLElement",
                            "content": "<mi>B</mi>"
    
                        "uri": {
                            "parseAs": "string",
                            "content": "http://mathhub.info/FrameIT/frameworld?TriangleProblem?B"
    
                        "type": {
                            "parseAs": "string",
                            "content": "Point_Fact"
                        }
    
                        "label": {
                            "parseAs": "MathMLElement",
                            "content": "<mi>C</mi>"
    
                        "uri": {
                            "parseAs": "string",
                            "content": "http://mathhub.info/FrameIT/frameworld?TriangleProblem?C"
    
                        "type": {
                            "parseAs": "string",
                            "content": "Point_Fact"
                        }
    
                        "label": {
                            "parseAs": "MathMLElement",
                            "content": "<mi><mrow><mo>&angrtvbd;</mo><mi>C</mi></mrow></mi>"
    
                        "uri": {
                            "parseAs": "string",
                            "content": "http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC"
    
                        "type": {
                            "parseAs": "string",
                            "content": "Angle_Fact"
                        }
    
                        "label": {
                            "parseAs": "MathMLElement",
                            "content": "<mi><mrow><mi>B</mi><mi>C</mi></mrow></mi>"
    
                        "uri": {
                            "parseAs": "string",
                            "content": "http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC"
    
                        "type": {
                            "parseAs": "string",
                            "content": "LineSegment_Fact"
                        }
    
                        "label": {
                            "parseAs": "MathMLElement",
                            "content": "<mi><mrow><mo>∠</mo><mi>A</mi><mi>B</mi><mi>C</mi></mrow></mi>"
    
                        "uri": {
                            "parseAs": "string",
                            "content": "http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB"
    
                        "type": {
                            "parseAs": "string",
                            "content": "Angle_Fact"
                        }
    
                    }
                ],
                "acquiredFacts": [
                    {
    
                        "label": {
                            "parseAs": "MathMLElement",
                            "content": "<mi><mrow><mi>C</mi><mi>A</mi></mrow></mi>"
    
                        "uri": {
                            "parseAs": "string",
                            "content": "http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA"
                        },
                        "type": {
                            "parseAs": "string",
                            "content": "LineSegment_Fact"
                        }
                    }
                ],
                "description": {
                    "parseAs": "HTMLElement",
                    "content": "<scroll-description title=&#x27;OppositeLenScroll&#x27; alt=&#x27;Given a triangle △ABC right-angled at ⊾C, the opposite side has length CA = tan(∠ABC) ⋅ BC.&#x27;>     <span>Given a triangle</span>       <math>           <mi>&xutri;<!-- △ --></mi>           <mi data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem?A&#x27;></mi>           <mi data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem?B&#x27;></mi>           <mi data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem?C&#x27;></mi>       </math>       <span>right-angled at</span>       <math>           <!--<mi>&angrtvbd;</mi>--><!-- ⦝ -->           <mi data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC&#x27;></mi>       </math>,<br />       <span>the opposite side has length</span>       <math>           <mi data-solution-id=&#x27;http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA&#x27;></mi>           <mo>&equals;</mo>           <mrow>               <mi>tan</mi>               <!--<mo>&#8289;</mo>-->               <mo>(</mo>               <mi data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB&#x27;></mi>               <mo>)</mo>           </mrow>           <mo>&#8290;</mo>           <mi data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC&#x27;></mi>       </math>       <span>.</span> </scroll-description>"
                },
                "depiction": {
                    "parseAs": "HTMLElement",
                    "content": "<svg width=&#x27;8cm&#x27;height=&#x27;8cmm&#x27;viewBox=&#x27;-25-25300300&#x27;version=&#x27;1.1&#x27;id=&#x27;triangle&#x27;xmlns=&#x27;http://www.w3.org/2000/svg&#x27;xmlns:svg=&#x27;http://www.w3.org/2000/svg&#x27;><g id=&#x27;shape&#x27;style=&#x27;fill:none;stroke:#000000;stroke-linecap:butt;stroke-width:1;stroke-linejoin:miter;stroke-opacity:1&#x27;><path d=&#x27;M0,250H200V0Z&#x27;id=&#x27;triangle&#x27;/><path id=&#x27;angleABC&#x27;d=&#x27;M0,250l15.6,-19.5a25250019.4,19.5z&#x27;/><!--M[corner]l[25*cos()],[-25*sin()]a2525001[25-25*cos()],[25*sin()]--><g id=&#x27;angleBCA&#x27;><path id=&#x27;rightAngle&#x27;d=&#x27;M200,250v-25a25,25000-25,25z&#x27;/><circle style=&#x27;fill:#000000;fill-opacity:1;stroke:none&#x27;id=&#x27;rightAngleDot&#x27;cx=&#x27;190&#x27;cy=&#x27;240&#x27;r=&#x27;1.5&#x27;/><!--Corner-(40,40);40=15/sqrt(2)+epsilon--></g></g><g id=&#x27;labels&#x27;style=&#x27;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;&#x27;><foreignObject id=&#x27;pointB&#x27;x=&#x27;200&#x27;y=&#x27;-25&#x27;width=&#x27;25&#x27;height=&#x27;25&#x27;><div><math xmlns=&#x27;http://www.w3.org/1998/Math/MathML&#x27;data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem?A&#x27;/></div></foreignObject><foreignObject id=&#x27;pointB&#x27;x=&#x27;-25&#x27;y=&#x27;250&#x27;width=&#x27;25&#x27;height=&#x27;25&#x27;><div><math xmlns=&#x27;http://www.w3.org/1998/Math/MathML&#x27;data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem?B&#x27;/></div></foreignObject><foreignObject id=&#x27;pointB&#x27;x=&#x27;200&#x27;y=&#x27;250&#x27;width=&#x27;25&#x27;height=&#x27;25&#x27;><div><math xmlns=&#x27;http://www.w3.org/1998/Math/MathML&#x27;data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem?C&#x27;/></div></foreignObject><foreignObject id=&#x27;pointB&#x27;x=&#x27;30&#x27;y=&#x27;225&#x27;width=&#x27;50&#x27;height=&#x27;25&#x27;><div><math xmlns=&#x27;http://www.w3.org/1998/Math/MathML&#x27;data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB&#x27;/></div></foreignObject><foreignObject id=&#x27;pointB&#x27;x=&#x27;145&#x27;y=&#x27;225&#x27;width=&#x27;50&#x27;height=&#x27;25&#x27;><div><math xmlns=&#x27;http://www.w3.org/1998/Math/MathML&#x27;data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC&#x27;/></div></foreignObject><foreignObject id=&#x27;pointB&#x27;x=&#x27;100&#x27;y=&#x27;250&#x27;width=&#x27;50&#x27;height=&#x27;25&#x27;><div><math xmlns=&#x27;http://www.w3.org/1998/Math/MathML&#x27;data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC&#x27;/></div></foreignObject><foreignObject id=&#x27;pointB&#x27;x=&#x27;205&#x27;y=&#x27;120&#x27;width=&#x27;50&#x27;height=&#x27;25&#x27;><div><math xmlns=&#x27;http://www.w3.org/1998/Math/MathML&#x27;style=&#x27;color:#008000&#x27;data-solution-id=&#x27;http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA&#x27;/></div></foreignObject></g></svg>"
                }
            }'>
        </data>
        <data id="Scroll-Dynamic-Old" hidden data-scroll-dynamic='{
            "ref": "http://mathhub.info/FrameIT/frameworld?OppositeLen",
            "label": "OppositeLen",
            "description": "<scroll-description title=&#x27;OppositeLenScroll&#x27; alt=&#x27;Given a triangle △ABC right-angled at ⊾C, the opposite side has length CA = tan(∠ABC) ⋅ BC.&#x27;>     <span>Given a triangle</span>       <math>           <mi>&xutri;<!-- △ --></mi>           <mi data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem?A&#x27;></mi>           <mi data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem?B&#x27;></mi>           <mi data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem?C&#x27;></mi>       </math>       <span>right-angled at</span>       <math>           <!--<mi>&angrtvbd;</mi>--><!-- ⦝ -->           <mi data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC&#x27;></mi>       </math>,<br />       <span>the opposite side has length</span>       <math>           <mi data-solution-id=&#x27;http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA&#x27;></mi>           <mo>&equals;</mo>           <mrow>               <mi>tan</mi>               <!--<mo>&#8289;</mo>-->               <mo>(</mo>               <mi data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB&#x27;></mi>               <mo>)</mo>           </mrow>           <mo>&#8290;</mo>           <mi data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC&#x27;></mi>       </math>       <span>.</span>       <div>           <svg           width=&#x27;50mm&#x27;           height=&#x27;45mm&#x27;           viewBox=&#x27;35 0 90 70&#x27;           version=&#x27;1.1&#x27;           id=&#x27;triangle&#x27;           xmlns=&#x27;http://www.w3.org/2000/svg&#x27;           xmlns:svg=&#x27;http://www.w3.org/2000/svg&#x27;>           <g id=&#x27;shape&#x27;>               <path                   style=&#x27;fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1&#x27;                   d=&#x27;M 42.871972,64.67128 H 84.290656 V 7.6297578 Z&#x27;                   id=&#x27;triangle&#x27; />               <path                   id=&#x27;angleABC&#x27;                   style=&#x27;fill:none;stroke:#000000;stroke-width:0.265;stroke-dasharray:none;stroke-opacity:1&#x27;                   d=&#x27;m 46.024276,60.304806 a 5.3589964,5.3589964 0 0 1 2.252109,4.366474 h -5.358996 z&#x27; />               <g                   id=&#x27;angleBCA&#x27;>                   <path                       style=&#x27;fill:none;stroke:#000000;stroke-width:0.264999;stroke-dasharray:none;stroke-opacity:1&#x27;                       id=&#x27;rightAngle&#x27;                       d=&#x27;m 78.972396,64.665062 a 5.3308268,5.3308268 0 0 1 5.330827,-5.330827 v 5.330827 z&#x27; />                   <circle                       style=&#x27;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264999;stroke-dasharray:none;stroke-opacity:1&#x27;                       id=&#x27;rightAngleDot&#x27;                       cx=&#x27;82.081886&#x27;                       cy=&#x27;62.813831&#x27;                       r=&#x27;0.32113415&#x27; />               </g>           </g>           <g               id=&#x27;labels&#x27;               style=&#x27;font-size:4.23333px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;stroke-width:0.264583&#x27;           >               <text                   xml:space=&#x27;preserve&#x27;                   x=&#x27;39.242592&#x27;                   y=&#x27;67.117035&#x27;                   id=&#x27;pointB&#x27;                   style=&#x27;fill:#0000ff&#x27;                   data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem?B&#x27;>B</text>               <text                   xml:space=&#x27;preserve&#x27;                   x=&#x27;85.100548&#x27;                   y=&#x27;68.080437&#x27;                   id=&#x27;pointC&#x27;                   style=&#x27;fill:#0000ff&#x27;                   data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem?C&#x27;>C</text>               <text                   xml:space=&#x27;preserve&#x27;                   x=&#x27;84.650963&#x27;                   y=&#x27;6.551136&#x27;                   id=&#x27;pointA&#x27;                   style=&#x27;fill:#0000ff&#x27;                   data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem?A&#x27;>A</text>               <text                   xml:space=&#x27;preserve&#x27;                   x=&#x27;48.234348&#x27;                   y=&#x27;62.492699&#x27;                   id=&#x27;angleAtB&#x27;                   style=&#x27;fill:#ffcc00&#x27;                   data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem_AngleAtB?angleB&#x27;>∠ABC</text>               <text                   xml:space=&#x27;preserve&#x27;                   x=&#x27;71.548683&#x27;                   y=&#x27;60.951256&#x27;                   id=&#x27;rightAngleAtC&#x27;                   style=&#x27;fill:#ffcc00&#x27;                   data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?TriangleProblem_RightAngleAtC?rightAngleC&#x27;>⊾C</text>               <text                   xml:space=&#x27;preserve&#x27;                   x=&#x27;59.409813&#x27;                   y=&#x27;68.273117&#x27;                   id=&#x27;distanceBC&#x27;                   style=&#x27;fill:#008000&#x27;                   data-slot-id=&#x27;http://mathhub.info/FrameIT/frameworld?OppositeLen/Problem?distanceBC&#x27;>BC</text>               <text                   xml:space=&#x27;preserve&#x27;                   x=&#x27;84.972092&#x27;                   y=&#x27;35.260529&#x27;                   id=&#x27;solutionCA&#x27;                   style=&#x27;fill:#008000&#x27;                   data-solution-id=&#x27;http://mathhub.info/FrameIT/frameworld?OppositeLen/Solution?deducedLineCA&#x27;>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
        }'> </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>