Merge pull request #101 from nihalsaran/main

Test Number 8

experiment/simulation/NumbersPage/8/8.css

@@ -0,0 +1,230 @@
+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: 63px;
+    left: 83px;
+    width: 173px;
+    height: 152px;
+    z-index: -1;
+
+
+}
+
+#stroke2 {
+    display: none;
+    position: absolute;
+    top: 195px;
+    left: 68px;
+    width: 199px;
+    height: 210px;
+    transform: rotate(0deg);
+
+}
+
+#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: 99px;
+    left: 160px;
+    width: 55px;
+    height: 80px;
+    transform: rotate(180deg) scalex(-1);
+    z-index: -1;
+}
+.arrrow2 {
+   display: none;
+   position: absolute;
+    top: 216px;
+    left: 158px;
+    width: 80px;
+    height: 140px;
+    transform: rotate(0deg)scalex(1);
+    z-index: -1;
+}
+.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/8/8.js

@@ -0,0 +1,99 @@
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const dot3 = document.getElementById('dot3');
+const dot4 = document.getElementById('dot4');
+const dot1 = document.getElementById('dot1');
+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 = 'dot3-dot4'; // Start with connecting dot3 to dot4
+
+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;
+
+    if (nextConnection === 'dot3-dot4') {
+        expectedDot = dot3;
+    } else if (nextConnection === 'dot4-dot1') {
+        expectedDot = dot4;
+    } else {
+        return;
+    }
+
+    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 (nextConnection === 'dot3-dot4' && Math.hypot(x - (dot4.offsetLeft + 5), y - (dot4.offsetTop + 5)) <= tolerance) {
+        document.getElementById('stroke1').style.display = 'block';
+        console.log('Stopped drawing near', dot4.id);
+        nextConnection = 'dot4-dot1';
+        arrow1.style.display = 'none'; // Hide the first arrow
+        arrow2.style.display = 'block'; // Show the second arrow
+        dot3.style.display = 'none'; // Hide the first dot
+        dot4.style.zIndex = 1; // Bring the second dot to front
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    } else if (nextConnection === 'dot4-dot1' && Math.hypot(x - (dot1.offsetLeft + 5), y - (dot1.offsetTop + 5)) <= tolerance) {
+        document.getElementById('stroke2').style.display = 'block';
+        console.log('Stopped drawing near', dot1.id);
+        arrow2.style.display = 'none'; // Hide the arrow
+        dot4.style.display = 'none'; // Hide the second dot
+        dot1.style.display = 'none'; // Hide the third dot
+        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);

experiment/simulation/NumbersPage/8/eight.html

@@ -0,0 +1,63 @@
+<!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="/experiment/simulation/css/header.css" />
+
+	<link rel="stylesheet" href="8.css" />
+
+
+	<title>Virtual Labs</title>
+</head>
+
+<body>
+
+
+    <div class="simulation-container">
+
+			<h2 class="title">Lettering</h2>
+            <h3 class="instruction-main"> Number 8</h3>
+
+            <h1 class="rules">Rules-</h1>
+            <p class="rule">1] Draw the line in the direction of the arrow on the trace of the Number.</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: 198px; left: 204px;"></div>
+                <div class="dot" id="dot4" style="top: 207px; left: 167px;"></div> 
+                <div class="dot" id="dot1" style="top: 220px; left: 124px;"></div>
+                <img id="sbox" src="sboxx.png" >
+               <img id="trace" src="8-new.png" >
+              <img class="arrrow1" id="arrow1" src="curved arrow.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="8-stroke-1.png" >
+               <img id="stroke2" src="8-stroke-2.png" >
+               <!--  <img id="stroke3" src="stroke2.png" >-->
+            </div>
+            <h1 class="congrats" id="congrats">Congrats you have learnt to draw Number 8</h1>
+
+            <a href="../../Uppercase.html">
+            <button class="next-exp" id="button">Next Number</button>
+        </a>
+
+    </div>
+	<!-- Your code goes here-->
+
+	<!-- Add JS at the bottom of HTML file -->
+	<script src="8.js"></script>
+</body>
+
+</html>