diff --git a/experiment/simulation/LettersPage/SmaE/e.css b/experiment/simulation/LettersPage/SmaE/e.css index 950758f..f7ecca3 100644 --- a/experiment/simulation/LettersPage/SmaE/e.css +++ b/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 { diff --git a/experiment/simulation/LettersPage/SmaF/curved arrow.gif b/experiment/simulation/LettersPage/SmaF/curved arrow.gif new file mode 100644 index 0000000..1e1a94c Binary files /dev/null and b/experiment/simulation/LettersPage/SmaF/curved arrow.gif differ diff --git a/experiment/simulation/LettersPage/SmaF/f-new.png b/experiment/simulation/LettersPage/SmaF/f-new.png new file mode 100644 index 0000000..754c562 Binary files /dev/null and b/experiment/simulation/LettersPage/SmaF/f-new.png differ diff --git a/experiment/simulation/LettersPage/SmaF/f.css b/experiment/simulation/LettersPage/SmaF/f.css new file mode 100644 index 0000000..4caf5e1 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/experiment/simulation/LettersPage/SmaF/f.html b/experiment/simulation/LettersPage/SmaF/f.html new file mode 100644 index 0000000..865fb00 --- /dev/null +++ b/experiment/simulation/LettersPage/SmaF/f.html @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + Virtual Labs + + + + + +
+ +

Lettering

+

Letter f

+ +

Rules-

+

1] Draw the line in the direction of the arrow on the trace of the letter.

+

2] To draw, click on the starting point and drag the cursor to end point .

+ +
+ +
+
+
+
+ + + Overlay Image + Overlay Image + + + + +
+ +

Congrats you have learnt to draw Letter f

+ + + + + +
+ + + + + + + \ No newline at end of file diff --git a/experiment/simulation/LettersPage/SmaF/f.js b/experiment/simulation/LettersPage/SmaF/f.js new file mode 100644 index 0000000..d4228d8 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/experiment/simulation/LettersPage/SmaF/index.html b/experiment/simulation/LettersPage/SmaF/index.html new file mode 100644 index 0000000..51338ac --- /dev/null +++ b/experiment/simulation/LettersPage/SmaF/index.html @@ -0,0 +1,288 @@ + + + + + + + Connect Dots + + + + + +
+ +
+
+
+
+ + + Overlay Image + Overlay Image + + + + +
+ + + + + \ No newline at end of file diff --git a/experiment/simulation/LettersPage/SmaF/main.css b/experiment/simulation/LettersPage/SmaF/main.css new file mode 100644 index 0000000..7f58f3f --- /dev/null +++ b/experiment/simulation/LettersPage/SmaF/main.css @@ -0,0 +1,105 @@ +* { + 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: 800px; /* 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: 45px; + 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%; + top: 80%; + font-size: 150%; + +} + +.next-exp { + position: absolute; + display: none; + left: 75%; + transform: translateX(-50%); /* Centering button horizontally */ + padding: 10px 15px; + color: white; + background-color: rgb(20, 117, 228); + font-weight: 600; + border: none; + border-radius: 4px; + cursor: pointer; + bottom: 30px; +} \ No newline at end of file diff --git a/experiment/simulation/LettersPage/SmaF/sboxx.png b/experiment/simulation/LettersPage/SmaF/sboxx.png new file mode 100644 index 0000000..bc30ae9 Binary files /dev/null and b/experiment/simulation/LettersPage/SmaF/sboxx.png differ diff --git a/experiment/simulation/LettersPage/SmaF/stroke11.png b/experiment/simulation/LettersPage/SmaF/stroke11.png new file mode 100644 index 0000000..3f06a3c Binary files /dev/null and b/experiment/simulation/LettersPage/SmaF/stroke11.png differ diff --git a/experiment/simulation/LettersPage/SmaF/stroke1f.png b/experiment/simulation/LettersPage/SmaF/stroke1f.png new file mode 100644 index 0000000..5e47201 Binary files /dev/null and b/experiment/simulation/LettersPage/SmaF/stroke1f.png differ diff --git a/experiment/simulation/LettersPage/SmaF/without-bg.gif b/experiment/simulation/LettersPage/SmaF/without-bg.gif new file mode 100644 index 0000000..455420f Binary files /dev/null and b/experiment/simulation/LettersPage/SmaF/without-bg.gif differ