Merge pull request #100 from nihalsaran/main

Test Number 7

experiment/simulation/NumbersPage/7/7.css

@@ -0,0 +1,171 @@
+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;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    bottom: 40px;
+}
+
+#canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    z-index: 10;
+    cursor: url('data:image/x-icon;base64,AAACAAEAICAQAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAAhYWFAPqv6ADgm4sASkpKAJ/l7QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACIAAAAAAAAAAAAAAAAAAAEiIAAAAAAAAAAAAAAAAAAxEiIAAAAAAAAAAAAAAAADMxEgAAAAAAAAAAAAAAAAMzMxAAAAAAAAAAAAAAAAAzMzMAAAAAAAAAAAAAAAADMzMwAAAAAAAAAAAAAAAAMzMzAAAAAAAAAAAAAAAAAzMzMAAAAAAAAAAAAAAAADMzMwAAAAAAAAAAAAAAAABTMzAAAAAAAAAAAAAAAAAFVTMAAAAAAAAAAAAAAAAABFVQAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////P////h////wP///4H///8D///+B////A////gf///wP///4H///+D////B////w////8///////////////w=='), auto;
+}
+
+.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;
+}
+
+.dot1 {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: red;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+}
+
+#stroke1 {
+    display: none;
+    position: absolute;
+    top: -26px;
+    left: 200px;
+    width: 15px;
+    height: 190px;
+    transform: rotate(90deg);
+
+
+}
+
+#stroke2 {
+    display: none;
+    position: absolute;
+    top: 54px;
+    left: 225px;
+    width: 15px;
+    height: 355px;
+    transform: rotate(202deg);
+    z-index: -1;
+
+}
+
+#stroke3 {
+
+    display: none;
+    position: absolute;
+    top: 75px;
+    left: 235px;
+    width: 15px;
+    height: 250px;
+    transform: rotate(162deg);
+
+}
+
+#stroke4 {
+
+    display: none;
+    position: absolute;
+    top: 73px;
+    left: 307px;
+    width: 15px;
+    height: 250px;
+    transform: rotate(197deg);
+
+}
+
+#sbox {
+    position: relative;
+    left: 115px;
+    width: 400px;
+    height: 400px;
+    z-index: -2;
+    display: none;
+}
+
+#trace {
+    position: relative;
+    bottom: 15px;
+    right: 55px;
+    width: 600px;
+    height: 450px;
+    z-index: -10;
+}
+
+.arrrow1 {
+
+    position: absolute;
+    top: 40px;
+    left: 184px;
+    width: 20px;
+    height: 130px;
+    transform: rotate(90deg);
+    z-index: 0;
+}
+
+.arrrow2 {
+
+    top: 80px;
+    left: 180px;
+    position: absolute;
+    transform: rotate(205deg);
+    z-index: 0;
+    width: 40px;
+    height: 210px;
+    z-index: -2;
+}
+
+.arrrow3 {
+
+    position: absolute;
+    transform: rotate(162deg);
+    z-index: 0;
+    top: 70px;
+    left: 240px;
+    width: 30px;
+    height: 170px;
+}
+
+.arrrow4 {
+
+    position: absolute;
+    top: 80px;
+    left: 330px;
+    width: 30px;
+    height: 200px;
+    transform: rotate(18deg);
+    z-index: 0;
+}

experiment/simulation/NumbersPage/7/7.js

@@ -0,0 +1,132 @@
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const dot1 = document.getElementById('dot1');
+
+const dot3 = document.getElementById('dot3');
+const dot4 = document.getElementById('dot4');
+const dot5 = document.getElementById('dot5');
+
+const arrow1 = document.getElementById('arrow1');
+const arrow2 = document.getElementById('arrow2');
+
+let isDrawing = false;
+let startX = 0;
+let startY = 0;
+let tolerance = 30;
+let nextConnection = 'dot3-dot5'; // Start with connecting dot3 to dot5
+
+arrow1.style.display = 'block'; // Initially, arrow1 is visible
+arrow2.style.display = 'none';
+
+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 'dot3-dot5':
+            targetDot = dot3;
+            break;
+        case 'dot4-dot1':
+            targetDot = dot4;
+            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('dot3') ? dot3 : dot4, 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 'dot3-dot5':
+            targetDot = dot5;
+            break;
+        case 'dot4-dot1':
+            targetDot = dot1;
+            break;
+    }
+
+    if (checkDotTolerance(targetDot, x, y)) {
+        console.log('Stopped drawing near', targetDot.id);
+        let strokeId;
+        switch (nextConnection) {
+            case 'dot3-dot5':
+                strokeId = '1';
+                nextConnection = 'dot4-dot1';
+                arrow1.style.display = 'none';
+                arrow2.style.display = 'block';
+                dot3.style.display = 'none';
+                dot5.style.display = 'none';
+                dot4.style.display = 'block';
+                dot1.style.display = 'block';
+                break;
+            case 'dot4-dot1':
+                strokeId = '2';
+                arrow2.style.display = 'none';
+                dot4.style.display = 'none';
+                dot1.style.display = 'none';
+                button.style.display = 'block';
+                congrats.style.display = 'block';
+                // Optionally loop back or end the sequence
+                // In this case, you may want to reset the connections, e.g., nextConnection = 'dot3-dot5';
+                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);
+