Merge pull request #92 from nihalsaran/main

Test Captial W
virtual-labs · Oct 27, 2024 · f0b334e · f0b334e
2 parents b44d212 + 8181dc1
commit f0b334e
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 29 deletions.
diff --git a/experiment/simulation/LettersPage/CapW/W.css b/experiment/simulation/LettersPage/CapW/W.css
@@ -45,23 +45,23 @@ body {
 
     display: none;
     position: absolute;
-    top: 75px;
-    left: 92px;
+    top: 62px;
+    left: 45px;
     width: 15px;
-    height: 250px;
-    transform: rotate(162deg);
+    height: 340px;
+    transform: rotate(164deg);
 
 
 }
 
 #stroke2 {
     display: none;
     position: absolute;
-    top: 75px;
-    left: 164px;
+    top: 63px;
+    left: 129px;
     width: 15px;
-    height: 250px;
-    transform: rotate(197deg);
+    height: 340px;
+    transform: rotate(192deg);
     z-index: -1;
 
 }
@@ -70,50 +70,49 @@ body {
 
     display: none;
     position: absolute;
-    top: 75px;
-    left: 235px;
+    top: 63px;
+    left: 212px;
     width: 15px;
-    height: 250px;
-    transform: rotate(162deg);
+    height: 340px;
+    transform: rotate(164deg);
 
 }
 
 #stroke4 {
 
     display: none;
     position: absolute;
-    top: 73px;
-    left: 307px;
+    top: 61px;
+    left: 304px;
     width: 15px;
-    height: 250px;
-    transform: rotate(197deg);
+    height: 340px;
+    transform: rotate(193deg);
 
 }
 
 #sbox {
     position: relative;
-    left: 155px;
-    width: 410px;
+    left: 115px;
+    width: 400px;
     height: 400px;
-    z-index: -10;
-    top: 5px;
+    z-index: -2;
+    display: none;
 }
 
 #trace {
     position: relative;
-    top: -01px;
-    right: 202px;
-    width: 300px;
-    height: 250px;
+    bottom: 15px;
+    right: 93px;
+    width: 600px;
+    height: 450px;
     z-index: -10;
-
 }
 
 .arrrow1 {
 
     position: absolute;
     top: 80px;
-    left: 30px;
+    left: -30px;
     width: 40px;
     height: 240px;
     transform: rotate(162deg);
@@ -123,7 +122,7 @@ body {
 .arrrow2 {
 
     top: 120px;
-    left: 130px;
+    left: 95px;
     position: absolute;
     transform: rotate(18deg);
     z-index: 0;
@@ -146,8 +145,8 @@ body {
 .arrrow4 {
 
     position: absolute;
-    top: 80px;
-    left: 330px;
+    top: 110px;
+    left: 360px;
     width: 30px;
     height: 200px;
     transform: rotate(18deg);

diff --git a/experiment/simulation/LettersPage/CapW/W.html b/experiment/simulation/LettersPage/CapW/W.html
@@ -0,0 +1,68 @@
+<!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="W.css" />
+
+
+	<title>Virtual Labs</title>
+</head>
+
+<body>
+
+
+    <div class="simulation-container">
+
+			<h2 class="title">Lettering</h2>
+            <h3 class="instruction-main"> Letter W</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: 73px; left: 9px;"></div> <!-- first line top dot-->
+                <!--    <div class="dot" id="dot4" style="top: 200px; left: 190px;"></div> -->
+                <div class="dot" id="dot1" style="top: 390px; left: 101px;"></div> <!-- first line bottom dot-->
+                <div class="dot" id="dot2" style="top: 72.5px; left: 348px;"></div> <!-- last line top dot-->
+                <div class="dot" id="dot5" style="top: 75px; left: 172px;"></div>
+                <div class="dot" id="dot6" style="top: 391px; left: 267px;"></div> <!-- last line bottom dot-->
+                <img id="sbox" src="sboxx.png">
+                <img id="trace" src="w-new.png">
+                <img class="arrrow1" id="arrow1" src="without-bg.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 class="arrrow4" id="arrow4" src="without-bg.gif" alt="Overlay Image">
+                <img id="stroke1" src="stroke1.png">
+                <img id="stroke2" src="stroke1.png">
+                <img id="stroke3" src="stroke1.png">
+                <img id="stroke4" src="stroke1.png">
+            </div>
+            <h1 class="congrats" id="congrats">Congrats you have learnt to draw Letter W</h1>
+
+            <a href="../../Uppercase.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="W.js"></script>
+</body>
+
+</html>
diff --git a/experiment/simulation/LettersPage/CapW/w-new.png b/experiment/simulation/LettersPage/CapW/w-new.png