Merge pull request #38 from nihalsaran/main

test small f

experiment/simulation/LettersPage/SmaE/e.css

@@ -26,6 +26,7 @@ body {
     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 {

experiment/simulation/LettersPage/SmaF/f.css

@@ -0,0 +1,129 @@
+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;
+    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;
+    z-index: 10;
+}
+
+.dot {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background-color: red;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+}
+
+
+#stroke1 {
+
+    display: none;
+    position: absolute;
+    top: 0px;
+    left: 145px;
+    width: 132px;
+    height: 320px;
+    z-index: -1;
+
+
+
+}
+
+#stroke2 {
+
+    display: none;
+    position: absolute;
+    top: 33px;
+    left: 162px;
+    width: 10px;
+    height: 150px;
+    transform: rotate(90deg);
+
+}
+
+#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: 05px;
+    left: 190px;
+    width: 50px;
+    height: 90px;
+    transform: scalex(-1)rotate(300deg);
+    z-index: -1;
+
+}
+
+.arrrow2 {
+
+    position: absolute;
+    top: 100px;
+    left: 140px;
+    width: 20px;
+    height: 100px;
+    transform: rotate(90deg);
+    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/SmaF/f.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="f.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 f</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="dot3" style="top: 108px; left: 100px;"></div>
+                <div class="dot" id="dot2" style="top: 27px; left: 270px;"></div>
+                <div class="dot" id="dot1" style="top: 110px; left: 235px;"></div>
+                <div class="dot" id="dot4" style="top: 310px; left: 150px;"></div>
+                <img id="sbox" src="sboxx.png">
+                <img id="trace" src="f-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="stroke1f.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 f</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="f.js"></script>
+</body>
+
+</html>

experiment/simulation/LettersPage/SmaF/f.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 = 'block'; // Initially, arrow1 is not 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)'; // 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 = '1';
+                nextConnection = 'dot3-dot1'; // Set next connection to dot3-dot1
+                arrow2.style.display = 'block';
+                arrow1.style.display = 'none';
+                dot2.style.display = 'none';
+                dot4.style.display = 'none';
+                dot1.style.zIndex = '10';
+                dot3.style.zIndex = '10';
+                break;
+            case 'dot3-dot1':
+                strokeId = '2';
+                nextConnection = 'dot2-dot4'; // Optionally loop back to the start
+                arrow2.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);