Test Number 9

experiment/simulation/NumbersPage/8/eight.html

@@ -49,7 +49,7 @@ <h1 class="rules">Rules-</h1>
             </div>
             <h1 class="congrats" id="congrats">Congrats you have learnt to draw Number 8</h1>
 
-            <a href="../../Uppercase.html">
+            <a href="../../Numbers.html" >
             <button class="next-exp" id="button">Next Number</button>
         </a>
 

experiment/simulation/NumbersPage/9/9.css

@@ -0,0 +1,229 @@
+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;
+    z-index: 4;
+    bottom: 10%;
+}
+
+#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%);
+}
+
+
+#stroke1 {
+
+    display: none;
+    position: absolute;
+    top: 61px;
+    left: 67px;
+    width: 202px;
+    height: 339px;
+
+}
+
+#stroke2 {
+
+    display: none;
+    position: absolute;
+    top: 70px;
+    left: 140px;
+    width: 170px;
+    height: 125px;
+
+}
+
+#stroke3 {
+
+    display: none;
+    position: absolute;
+    top: 187px;
+    left: 140px;
+    width: 170px;
+    height: 132px;
+
+}
+#sbox {
+    position: relative;
+    left: 115px;
+    width: 400px;
+    height: 400px;
+    z-index: -2;
+    display: none;
+}
+
+#trace {
+    position: relative;
+    bottom: 15px;
+    right: 93px;
+    width: 600px;
+    height: 450px;
+    z-index: -10;
+}
+
+.arrrow1 {
+
+    position: absolute;
+    top: 146px;
+    left: 170px;
+    width: 60px;
+    height: 100px;
+    transform: rotate(50deg) scalex(1);
+    z-index: -1;
+}
+.arrrow2 {
+    display: none;
+    position: absolute;
+    top: 80px;
+    left: 300px;
+    width: 20px;
+    height: 110px;
+    transform: rotate(180deg);
+    z-index: 0;
+}
+.arrrow3 {
+    display: none;
+    position: absolute;
+    top: 200px;
+    left: 310px;
+    width: 20px;
+    height: 110px;
+    transform: rotate(180deg);
+    z-index: 0;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    box-sizing: border-box; /* Ensures padding and border are included in width/height calculations */
+    z-index: -4;
+}
+
+.simulation-container {
+    background-color: rgba(220, 229, 236, 1);
+    width: 100%; /* Responsive width */
+    max-width: 1000px; /* Max width to maintain design integrity */
+    min-height: 700px; /* Minimum height */
+    margin: 20px auto; /* Auto margins for centering */
+    z-index: 0;
+    display: grid;
+    justify-items: center;
+
+}
+
+.title {
+    margin: 0;
+    padding: 5px;
+    letter-spacing: 0.1em;
+    background-color: rgb(0, 140, 255);
+    color: white;
+    display: flex;
+    justify-content: center;
+    width: 100%; /* Ensure it fills the container */
+    height: 60%;
+}
+
+.instruction-main {
+   position: relative;
+    display: grid;
+    justify-content: center;
+    z-index: 0;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+    height: 10%;
+    bottom: 40%;
+    font-size: 50px;
+    margin-top: 20px;
+}
+
+.instruction-main1 {
+    position: relative;
+   display: grid;
+    justify-content: center;
+    z-index: 0;
+   bottom: 100%;
+    height: 10%;
+
+
+}
+
+.rules {
+    position: relative;
+    display: flex;
+    justify-content: start;
+    z-index: 0;
+
+    height: 10%;
+    bottom: 37px;
+    font-size: 150%;
+    left: -40%;
+}
+
+.rule {
+    position: relative;
+    display: flex;
+    justify-content: start;
+    z-index: 0;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+
+
+    left: -100px;
+    bottom: 80px;
+
+}   
+
+.congrats {
+    position: relative;
+    display: none;
+    justify-content: start;
+    z-index: 0;
+
+    height: 10%;
+    bottom: 40%;
+    font-size: 150%;
+
+}
+
+.next-exp {
+    position: absolute;
+    display: none;
+    left: 75%;
+    transform: translateX(-50%); /* Centering button horizontally */
+    bottom: 20px; /* Position from the bottom */
+    padding: 10px 15px;
+    color: white;
+    background-color: rgb(20, 117, 228);
+    font-weight: 600;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+
+
+   bottom: 90px;
+}

experiment/simulation/NumbersPage/9/9.js

@@ -0,0 +1,77 @@
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const dot3 = document.getElementById('dot3');
+const dot1 = document.getElementById('dot1');
+const arrow1 = document.getElementById('arrow1');
+
+let isDrawing = false;
+let startX = 0;
+let startY = 0;
+let tolerance = 30; // Tolerance radius for dot connection
+let nextConnection = 'dot3-dot1'; // Start with connecting dot3 to dot1
+
+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)'; // Visual guide for connection
+    ctx.stroke();
+}
+
+function startDrawing(e) {
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    let expectedDot = (nextConnection === 'dot3-dot1') ? dot3 : dot1;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawToleranceCircle(expectedDot, ctx);
+
+    if (Math.hypot(x - (expectedDot.offsetLeft + 5), y - (expectedDot.offsetTop + 5)) > tolerance) {
+        alert('Please follow rules and draw accordingly');
+        return;
+    }
+
+    isDrawing = true;
+    startX = expectedDot.offsetLeft + 5;
+    startY = expectedDot.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'; // Change line color to 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;
+
+    if (Math.hypot(x - (dot1.offsetLeft + 5), y - (dot1.offsetTop + 5)) <= tolerance) {
+        document.getElementById('stroke1').style.display = 'block';
+        console.log('Stopped drawing near', dot1.id);
+        arrow1.style.display = 'none'; // Hide the arrow
+        button.style.display = 'block';
+        congrats.style.display = 'block';
+        nextConnection = ''; // All connections done
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    } else {
+        alert('Complete the line. Try Again!');
+        ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+    }
+    isDrawing = false;
+}
+
+canvas.addEventListener('mousedown', startDrawing);
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mouseup', stopDrawing);