Merge pull request #45 from nihalsaran/main

test small h

experiment/simulation/LettersPage/SmaG/g.html

@@ -22,7 +22,7 @@
     <div class="simulation-container">
 
 			<h2 class="title">Lettering</h2>
-            <h3 class="instruction-main"> Letter f</h3>
+            <h3 class="instruction-main"> Letter g</h3>
 
             <h1 class="rules">Rules-</h1>
             <p class="rule">1] Draw the line in the direction of the arrow on the trace of the letter.</p>
@@ -44,7 +44,7 @@ <h1 class="rules">Rules-</h1>
                 <!--   <img id="stroke3" src="stroke2.png" >-->
             </div>
 
-            <h1 class="congrats" id="congrats">Congrats you have learnt to draw Letter f</h1>
+            <h1 class="congrats" id="congrats">Congrats you have learnt to draw Letter g</h1>
 
             <a href="../../Lowercase.html" >
                 <button class="next-exp" id="button">Next Letter</button>

experiment/simulation/LettersPage/SmaH/h.css

@@ -0,0 +1,128 @@
+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;
+    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: 87px;
+    left: 81px;
+    width: 192px;
+    height: 230px;
+    z-index: -1;
+
+
+}
+
+#stroke2 {
+
+    display: none;
+    position: absolute;
+    top: 0px;
+    left: 88px;
+    width: 15px;
+    height: 315px;
+    transform: rotate(180deg);
+    z-index: -1;
+
+}
+
+#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: 20px;
+    right: 90px;
+    width: 600px;
+    height: 550px;
+    z-index: -10;
+}
+
+.arrrow1 {
+    position: absolute;
+    top: 155px;
+    left: 125px;
+    width: 80px;
+    height: 130px;
+    transform: rotate(240deg) scalex(1);
+    z-index: 1;
+}
+
+.arrrow2 {
+
+    position: absolute;
+    top: 85px;
+    left: 30px;
+    width: 40px;
+    height: 230px;
+    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;
+}

experiment/simulation/LettersPage/SmaH/h.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<link href="https://fonts.googleapis.com/css2?family=Open+Sans&amp;family=Raleway&amp;display=swap"
+		rel="stylesheet" />
+	<link rel="icon" href="images/favicon.ico" />
+	<link rel="stylesheet" href="../../css/header.css" />
+
+	<link rel="stylesheet" href="h.css" />
+    <link rel="stylesheet" href="main.css" />
+
+
+	<title>Virtual Labs</title>
+</head>
+
+<body>
+
+
+    <div class="simulation-container">
+
+			<h2 class="title">Lettering</h2>
+            <h3 class="instruction-main"> Letter h</h3>
+
+            <h1 class="rules">Rules-</h1>
+            <p class="rule">1] Draw the line in the direction of the arrow on the trace of the letter.</p>
+            <p class="rule">2] To draw, click on the starting point and drag the cursor to end point .</p>
+
+			<div id="canvas-container">
+                <canvas id="canvas" width="400" height="400"></canvas>
+                <div class="dot" id="dot2" style="top: 15px; left: 95px;"></div>
+                <div class="dot" id="dot4" style="top: 312px; left: 95px;"></div>
+                <div class="dot" id="dot3" style="top: 312px; left: 95px;"></div>
+                <div class="dot" id="dot1" style="top: 312px; left: 263px;"></div>
+                <img id="sbox" src="sboxx.png">
+                <img id="trace" src="h-new.png">
+                <img class="arrrow1" id="arrow1" src="curved arrow.gif" alt="Overlay Image">
+                <img class="arrrow2" id="arrow2" src="without-bg.gif" alt="Overlay Image">
+                <!--      <img class="arrrow3" id="arrow3" src="without-bg.gif" alt="Overlay Image"> -->
+                <img id="stroke1" src="hstroke.png">
+                <img id="stroke2" src="stroke11.png">
+                <!--   <img id="stroke3" src="stroke2.png" >-->
+            </div>
+
+            <h1 class="congrats" id="congrats">Congrats you have learnt to draw Letter h</h1>
+
+            <a href="../../Lowercase.html" >
+                <button class="next-exp" id="button">Next Letter</button>
+            </a> 
+
+    </div>
+	<!-- Your code goes here-->
+
+	<!-- Add JS at the bottom of HTML file -->
+	<script src="h.js"></script>
+</body>
+
+</html>

experiment/simulation/LettersPage/SmaH/h.js

@@ -0,0 +1,128 @@
+const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const dot3 = document.getElementById('dot3');
+        const dot1 = document.getElementById('dot1');
+        const dot2 = document.getElementById('dot2');
+        const dot4 = document.getElementById('dot4');
+        const arrow1 = document.getElementById('arrow1');
+        const arrow2 = document.getElementById('arrow2');
+
+        let isDrawing = false;
+        let startX = 0;
+        let startY = 0;
+        let tolerance = 30; // Tolerance radius for dot connection
+        let nextConnection = 'dot2-dot4'; // Start with connecting dot2 to dot4
+
+        arrow1.style.display = 'none'; // Initially, arrow1 is not visible
+        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)'; // 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 targetDot;
+
+            switch (nextConnection) {
+                case 'dot2-dot4':
+                    targetDot = dot2;
+                    break;
+                case 'dot3-dot1':
+                    targetDot = dot3;
+                    break;
+            }
+
+            if (!checkDotTolerance(targetDot, x, y)) {
+                alert('Please follow rules and draw accordingly, Try again!');
+                return; // Do not start drawing if not within tolerance of target dot
+            }
+
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            drawToleranceCircle(targetDot, ctx);
+            drawToleranceCircle(nextConnection.includes('dot1') ? dot1 : 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'; // 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;
+            let targetDot;
+
+            switch (nextConnection) {
+                case 'dot2-dot4':
+                    targetDot = dot4;
+                    break;
+                case 'dot3-dot1':
+                    targetDot = dot1;
+                    break;
+            }
+
+            if (checkDotTolerance(targetDot, x, y)) {
+                console.log('Stopped drawing near', targetDot.id);
+                let strokeId;
+                switch (nextConnection) {
+                    case 'dot2-dot4':
+                        strokeId = '2';
+                        nextConnection = 'dot3-dot1'; // Set next connection to dot3-dot1
+                        arrow2.style.display = 'none';
+                        arrow1.style.display = 'block';
+                        dot2.style.display = 'none';
+                        dot4.style.display = 'none';
+                        dot1.style.zIndex = '10';
+                        dot3.style.zIndex = '10';
+                        break;
+                    case 'dot3-dot1':
+                        strokeId = '1';
+                        nextConnection = 'dot2-dot4'; // Optionally loop back to the start
+                        arrow1.style.display = 'none';
+                        dot1.style.display = 'none';
+                        dot3.style.display = 'none';
+                        button.style.display = 'block';
+                        congrats.style.display = 'block';
+                        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); // Clear the canvas
+            }
+            isDrawing = false;
+        }
+
+        canvas.addEventListener('mousedown', startDrawing);
+        canvas.addEventListener('mousemove', draw);
+        canvas.addEventListener('mouseup', stopDrawing);