test small q

virtual-labs · Oct 13, 2024 · 5ea8562 · 5ea8562
1 parent 2eaa688
commit 5ea8562
Show file tree

Hide file tree

Showing 11 changed files with 755 additions and 0 deletions.
diff --git a/experiment/simulation/LettersPage/SmaQ/curved arrow.gif b/experiment/simulation/LettersPage/SmaQ/curved arrow.gif
diff --git a/experiment/simulation/LettersPage/SmaQ/index.html b/experiment/simulation/LettersPage/SmaQ/index.html
@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Connect Dots</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            /* Center horizontally */
+            align-items: center;
+            /* Center vertically */
+            height: 100vh;
+            /* Full height of the viewport */
+            margin: 0;
+            /* Remove default margin */
+        }
+
+        #canvas-container {
+            position: relative;
+            width: 400px;
+            height: 400px;
+            border: 1px solid black;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            border: 1px solid black;
+            z-index: 10;
+        }
+
+        .dot {
+
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: red;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        .dot4 {
+
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: red;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            display: none;
+        }
+
+
+
+
+        #stroke1 {
+
+           display: none;
+            position: absolute;
+            top: 90px;
+            left: 258px;
+            width: 11px;
+            height: 310px;
+
+
+        }
+
+        #stroke2 {
+
+            display: none;
+            position: absolute;
+            top: 85px;
+            left: 92px;
+            width: 181px;
+            height: 235px;
+
+        }
+
+        #stroke3 {
+
+            display: none;
+            position: absolute;
+            top: 175px;
+            left: 233px;
+            width: 15px;
+            height: 200px;
+            transform: rotate(145deg);
+            z-index: -1;
+
+        }
+
+        #sbox {
+            position: relative;
+            left: 115px;
+            width: 400px;
+            height: 400px;
+            z-index: -2;
+            display: none;
+        }
+
+        #trace {
+            position: relative;
+            bottom: 20px;
+            right: 90px;
+            width: 600px;
+            height: 550px;
+            z-index: -10;
+        }
+
+        .arrrow1 {
+
+            position: absolute;
+            top: 80px;
+            left: 290px;
+            width: 40px;
+            height: 240px;
+            transform: rotate(180deg);
+            z-index: -1;
+        }
+
+        .arrrow2 {
+            display: none;
+            position: absolute;
+            top: 90px;
+            left: 140px;
+            width: 50px;
+            height: 100px;
+            transform: rotate(250deg);
+            z-index: -1;
+        }
+
+        .arrrow3 {
+            display: none;
+            position: absolute;
+            top: 200px;
+            left: 310px;
+            width: 20px;
+            height: 110px;
+            transform: rotate(180deg);
+            z-index: 0;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div id="canvas-container">
+        <canvas id="canvas" width="400" height="400"></canvas>
+        <div class="dot4" id="dot3" style="top: 98px; left: 264px;"></div>
+        <div class="dot" id="dot4" style="top: 180px; left: 100px;"></div>
+        <div class="dot4" id="dot1" style="top: 395px; left: 264px;"></div>
+        <div class="dot" id="dot2" style="top: 225px; left: 100px;"></div>
+
+
+        <img id="sbox" src="sboxx.png">
+        <img id="trace" src="q-new.png">
+        <img class="arrrow1" id="arrow1" src="without-bg.gif" alt="Overlay Image">
+        <img class="arrrow2" id="arrow2" src="curved arrow.gif" alt="Overlay Image">
+        <img class="arrrow3" id="arrow3" src="without-bg.gif" alt="Overlay Image">
+        <img id="stroke1" src="stroke1.png">
+        <img id="stroke2" src="p-stroke.png">
+        <img id="stroke3" src="stroke1.png">
+    </div>
+
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const dot1 = document.getElementById('dot1');
+        const dot2 = document.getElementById('dot2');
+        const dot3 = document.getElementById('dot3');
+        const dot4 = document.getElementById('dot4'); // Added reference to dot4
+        const stroke1 = document.getElementById('stroke1');
+        const stroke2 = document.getElementById('stroke2');
+
+        const arrow1 = document.getElementById('arrow1');
+        const arrow2 = document.getElementById('arrow2');
+
+        let isDrawing = false;
+        let startX = 0;
+        let startY = 0;
+        let tolerance = 30;
+        let nextConnection = 'dot4-dot2'; // Start with connecting dot4 to dot2 (reversed)
+
+        arrow1.style.display = 'none'; // Initially, arrow1 is hidden, arrow2 is shown
+        arrow2.style.display = 'block';
+
+        function checkDotTolerance(dot, x, y) {
+            return Math.hypot(x - (dot.offsetLeft + 5), y - (dot.offsetTop + 5)) <= tolerance;
+        }
+
+        function drawToleranceCircle(dot, ctx) {
+            ctx.beginPath();
+            ctx.arc(dot.offsetLeft + 5, dot.offsetTop + 5, tolerance, 0, 2 * Math.PI);
+            ctx.strokeStyle = 'rgba(255, 200, 0, 0.5)';
+            ctx.stroke();
+        }
+
+        function startDrawing(e) {
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            let targetDot;
+
+            switch (nextConnection) {
+                case 'dot4-dot2': // Now starts with dot4 to dot2
+                    targetDot = dot4;
+                    break;
+                case 'dot3-dot1': // The second connection is now dot3 to dot1
+                    targetDot = dot3;
+                    break;
+            }
+
+            if (!checkDotTolerance(targetDot, x, y)) {
+                alert('Please follow rules and draw accordingly. Try again!');
+                return;
+            }
+
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            drawToleranceCircle(targetDot, ctx);
+            drawToleranceCircle(nextConnection.includes('dot4') ? dot4 : targetDot, ctx);
+
+            isDrawing = true;
+            startX = targetDot.offsetLeft + 5;
+            startY = targetDot.offsetTop + 5;
+        }
+
+        function draw(e) {
+            if (!isDrawing) return;
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            ctx.beginPath();
+            ctx.moveTo(startX, startY);
+            ctx.lineTo(x, y);
+            ctx.stroke();
+            startX = x;
+            startY = y;
+            ctx.strokeStyle = 'black';
+            ctx.lineWidth = 6;
+        }
+
+        function stopDrawing(e) {
+            if (!isDrawing) return;
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            let targetDot;
+
+            switch (nextConnection) {
+                case 'dot4-dot2': // Now handles dot4 to dot2 first
+                    targetDot = dot2;
+                    break;
+                case 'dot3-dot1': // Then handles dot3 to dot1
+                    targetDot = dot1;
+                    break;
+            }
+
+            if (checkDotTolerance(targetDot, x, y)) {
+                console.log('Stopped drawing near', targetDot.id);
+                let strokeId;
+                switch (nextConnection) {
+                    case 'dot4-dot2':
+                        strokeId = '2';
+                        nextConnection = 'dot3-dot1'; // Change the next connection to dot3-dot1
+                        arrow2.style.display = 'none';
+                        arrow1.style.display = 'block';
+                        dot4.style.display = 'none'; // Hide dot4
+                        dot2.style.display = 'none'; // Hide dot2
+                        dot3.style.display = 'block'; // Show dot3
+                        dot3.style.zIndex = '10';
+                        stroke2.style.zIndex = '-1';
+
+                        dot1.style.display = 'block'; // Show dot1
+                        dot1.style.zIndex = '10';
+                        break;
+                    case 'dot3-dot1': // Handle the second connection case
+                        strokeId = '1';
+                        arrow1.style.display = 'none';
+                        dot3.style.display = 'none';
+                        dot1.style.display = 'none';
+                        break;
+                }
+
+                if (strokeId) {
+                    document.getElementById('stroke' + strokeId).style.display = 'block';
+                }
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+            } else {
+                alert('Complete the line near the correct dot. Try Again!');
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+            }
+            isDrawing = false;
+        }
+
+        canvas.addEventListener('mousedown', startDrawing);
+        canvas.addEventListener('mousemove', draw);
+        canvas.addEventListener('mouseup', stopDrawing);
+
+
+
+
+    </script>
+</body>
+
+</html>