diff --git a/.DS_Store b/.DS_Store index 229bf4b..04fccb4 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/README.md b/README.md index f90fb21..6844ca6 100644 --- a/README.md +++ b/README.md @@ -20,5 +20,6 @@ Fill a brief description of this experiment here SrNo | Name | Faculty or Student | Department| Institute | Email id :--|:--|:--|:--|:--|:--| -1 | . | . | . | . | . -2 | . | . | . | . | . +1 | Nihal Saran Das Duggirala | Student | Mechanical Engineering | Dayalbagh Educational Institute | nihalsarandasd@gmail.com +2 | Shyamendra Singh | Student | Agricultural Engineering | Dayalbagh Educational Institute | shyamendra.me@gmail.com +3 | Amol Satsangi | Student | Electrical Engineering | Dayalbagh Educational Institute | amolsatsangi02@gmail.com diff --git a/experiment/.DS_Store b/experiment/.DS_Store index f1d6ba2..6395165 100644 Binary files a/experiment/.DS_Store and b/experiment/.DS_Store differ diff --git a/experiment/simulation/.DS_Store b/experiment/simulation/.DS_Store new file mode 100644 index 0000000..d6fe826 Binary files /dev/null and b/experiment/simulation/.DS_Store differ diff --git a/experiment/simulation/B.html b/experiment/simulation/B.html deleted file mode 100644 index 3821bb7..0000000 --- a/experiment/simulation/B.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - - - - - - - - - Virtual Labs - - - - - - -
- -

Lettering

-

Letter B

- -

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 - Overlay Image - - - -
- -

Congrats you have learnt to draw Letter B

- - - - - -
- - - - - - - \ No newline at end of file diff --git a/experiment/simulation/Letters/.DS_Store b/experiment/simulation/Letters/.DS_Store new file mode 100644 index 0000000..ddb05ae Binary files /dev/null and b/experiment/simulation/Letters/.DS_Store differ diff --git a/experiment/simulation/LettersPage/A.html b/experiment/simulation/LettersPage/A.html new file mode 100644 index 0000000..a59d651 --- /dev/null +++ b/experiment/simulation/LettersPage/A.html @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + Virtual Labs + + + + + +
+ +

Lettering

+

Letter A

+ +

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 + Overlay Image + + + + + +
+ +

Congrats you have learnt to draw Letter A

+ + + + + +
+ + + + + + + \ No newline at end of file diff --git a/experiment/simulation/LettersPage/B.html b/experiment/simulation/LettersPage/B.html new file mode 100644 index 0000000..8c9f3e0 --- /dev/null +++ b/experiment/simulation/LettersPage/B.html @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + Virtual Labs + + + + + + +
+ +

Lettering

+

Letter B

+ +

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 + Overlay Image + + + +
+ +

Congrats you have learnt to draw Letter B

+ + + + + +
+ + + + + + + \ No newline at end of file diff --git a/experiment/simulation/C.html b/experiment/simulation/LettersPage/C.html similarity index 78% rename from experiment/simulation/C.html rename to experiment/simulation/LettersPage/C.html index 77f502e..e2dbf97 100644 --- a/experiment/simulation/C.html +++ b/experiment/simulation/LettersPage/C.html @@ -7,9 +7,9 @@ - + - + Virtual Labs @@ -38,19 +38,19 @@

Rules-

- - - Overlay Image + + + Overlay Image - +

Congrats you have learnt to draw Letter C

- + @@ -58,7 +58,7 @@

Congrats you have learnt to draw Letter C

- + \ No newline at end of file diff --git a/experiment/simulation/LettersPage/CapA/A.css b/experiment/simulation/LettersPage/CapA/A.css new file mode 100644 index 0000000..85aacc2 --- /dev/null +++ b/experiment/simulation/LettersPage/CapA/A.css @@ -0,0 +1,225 @@ +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; + z-index: 4; + bottom: 10%; +} + +#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; +} + +.dot { + position: absolute; + width: 10px; + height: 10px; + background-color: red; + border-radius: 50%; + transform: translate(-50%, -50%); + z-index: 4; +} + + + +#stroke1 { + display: none; + position: absolute; + top: 66px; + left: 143px; + width: 10px; + height: 264px; + transform: rotate(204deg); + +} + +#stroke2 { + display: none; + position: absolute; + top: 66px; + left: 250px; + width: 10px; + height: 264px; + transform: rotate(156deg); +} + +#stroke3 { + display: none; + position: absolute; + top: 150px; + left: 197px; + width: 10px; + height: 130px; + transform: rotate(90deg); +} + +#sbox { + position: relative; + left: 126.5px; + width: 400px; + height: 400px; + z-index: -10; + +} + +.arrrow1 { + position: absolute; + top: 60px; + left: 80px; + width: 40px; + height: 280px; + transform: rotate(207deg); + z-index: 0; +} +.arrrow2 { + position: absolute; + top: 60px; + left: 280px; + width: 40px; + height: 280px; + transform: rotate(153deg); + z-index: 0; +} +.arrrow3 { + position: absolute; + top: 200px; + left: 190px; + width: 30px; + height: 130px; + transform: rotate(90deg); + z-index: 0; +} + +#trace { + position: relative; + bottom: 10px; + right: 200px; + width: 250px; + height: 250px; + z-index: -10; + +} + + +* { + 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: 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%; + bottom: 40%; + font-size: 150%; + +} + +.next-exp { + position: absolute; + display: none; + left: 70%; + 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: 150px; +} diff --git a/experiment/simulation/A.html b/experiment/simulation/LettersPage/CapA/A.html similarity index 91% rename from experiment/simulation/A.html rename to experiment/simulation/LettersPage/CapA/A.html index 5f4d61a..5194cbb 100644 --- a/experiment/simulation/A.html +++ b/experiment/simulation/LettersPage/CapA/A.html @@ -7,9 +7,9 @@ - + - + Virtual Labs @@ -27,12 +27,6 @@

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 .

- - - - - -
@@ -54,7 +48,7 @@

Rules-

Congrats you have learnt to draw Letter A

- + @@ -62,7 +56,7 @@

Congrats you have learnt to draw Letter A

- + \ No newline at end of file diff --git a/experiment/simulation/LettersPage/CapA/A.js b/experiment/simulation/LettersPage/CapA/A.js new file mode 100644 index 0000000..c7a0126 --- /dev/null +++ b/experiment/simulation/LettersPage/CapA/A.js @@ -0,0 +1,138 @@ +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 dot5 = document.getElementById('dot5'); + const arrow1 = document.getElementById('arrow1'); + const arrow2 = document.getElementById('arrow2'); + const arrow3 = document.getElementById('arrow3'); + + let isDrawing = false; + let startX = 0; + let startY = 0; + let tolerance = 30; // Tolerance radius for dot connection + let nextConnection = 'dot3-dot1'; // Start with connecting dot3 to dot1 + + arrow1.style.display = 'block'; // Initially, arrow1 is visible + arrow2.style.display = 'none'; + arrow3.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 'dot3-dot1': + case 'dot3-dot2': + targetDot = dot3; + break; + case 'dot4-dot5': + targetDot = dot4; + 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 : nextConnection.includes('dot2') ? dot2 : dot5, 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 'dot3-dot1': + targetDot = dot1; + break; + case 'dot3-dot2': + targetDot = dot2; + break; + case 'dot4-dot5': + targetDot = dot5; + break; + } + + if (checkDotTolerance(targetDot, x, y)) { + console.log('Stopped drawing near', targetDot.id); + let strokeId; + switch (nextConnection) { + case 'dot3-dot1': + strokeId = '1'; + nextConnection = 'dot3-dot2'; // Set next connection to dot3-dot2 + arrow1.style.display = 'none'; + arrow2.style.display = 'block'; + break; + case 'dot3-dot2': + strokeId = '2'; + nextConnection = 'dot4-dot5'; // Set next connection to dot4-dot5 + arrow2.style.display = 'none'; + arrow3.style.display = 'block'; + break; + case 'dot4-dot5': + strokeId = '3'; + nextConnection = 'dot3-dot1'; // Optionally loop back or end the sequence + arrow3.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/CapA/AA.png b/experiment/simulation/LettersPage/CapA/AA.png new file mode 100644 index 0000000..804c864 Binary files /dev/null and b/experiment/simulation/LettersPage/CapA/AA.png differ diff --git a/experiment/simulation/LettersPage/CapA/arrow_down.gif b/experiment/simulation/LettersPage/CapA/arrow_down.gif new file mode 100644 index 0000000..b8f3a52 Binary files /dev/null and b/experiment/simulation/LettersPage/CapA/arrow_down.gif differ diff --git a/experiment/simulation/LettersPage/CapA/cursor.cur b/experiment/simulation/LettersPage/CapA/cursor.cur new file mode 100644 index 0000000..2ffd42c Binary files /dev/null and b/experiment/simulation/LettersPage/CapA/cursor.cur differ diff --git a/experiment/simulation/LettersPage/CapA/sboxx.png b/experiment/simulation/LettersPage/CapA/sboxx.png new file mode 100644 index 0000000..bc30ae9 Binary files /dev/null and b/experiment/simulation/LettersPage/CapA/sboxx.png differ diff --git a/experiment/simulation/LettersPage/CapA/stroke1.png b/experiment/simulation/LettersPage/CapA/stroke1.png new file mode 100644 index 0000000..3f06a3c Binary files /dev/null and b/experiment/simulation/LettersPage/CapA/stroke1.png differ diff --git a/experiment/simulation/LettersPage/CapA/without-bg.gif b/experiment/simulation/LettersPage/CapA/without-bg.gif new file mode 100644 index 0000000..455420f Binary files /dev/null and b/experiment/simulation/LettersPage/CapA/without-bg.gif differ diff --git a/experiment/simulation/D.html b/experiment/simulation/LettersPage/D.html similarity index 100% rename from experiment/simulation/D.html rename to experiment/simulation/LettersPage/D.html diff --git a/experiment/simulation/E.html b/experiment/simulation/LettersPage/E.html similarity index 100% rename from experiment/simulation/E.html rename to experiment/simulation/LettersPage/E.html diff --git a/experiment/simulation/F.html b/experiment/simulation/LettersPage/F.html similarity index 100% rename from experiment/simulation/F.html rename to experiment/simulation/LettersPage/F.html diff --git a/experiment/simulation/G.html b/experiment/simulation/LettersPage/G.html similarity index 100% rename from experiment/simulation/G.html rename to experiment/simulation/LettersPage/G.html diff --git a/experiment/simulation/H.html b/experiment/simulation/LettersPage/H.html similarity index 100% rename from experiment/simulation/H.html rename to experiment/simulation/LettersPage/H.html diff --git a/experiment/simulation/I.html b/experiment/simulation/LettersPage/I.html similarity index 100% rename from experiment/simulation/I.html rename to experiment/simulation/LettersPage/I.html diff --git a/experiment/simulation/J.html b/experiment/simulation/LettersPage/J.html similarity index 100% rename from experiment/simulation/J.html rename to experiment/simulation/LettersPage/J.html diff --git a/experiment/simulation/K.html b/experiment/simulation/LettersPage/K.html similarity index 100% rename from experiment/simulation/K.html rename to experiment/simulation/LettersPage/K.html diff --git a/experiment/simulation/L.html b/experiment/simulation/LettersPage/L.html similarity index 100% rename from experiment/simulation/L.html rename to experiment/simulation/LettersPage/L.html diff --git a/experiment/simulation/M.html b/experiment/simulation/LettersPage/M.html similarity index 100% rename from experiment/simulation/M.html rename to experiment/simulation/LettersPage/M.html diff --git a/experiment/simulation/N.html b/experiment/simulation/LettersPage/N.html similarity index 100% rename from experiment/simulation/N.html rename to experiment/simulation/LettersPage/N.html diff --git a/experiment/simulation/O.html b/experiment/simulation/LettersPage/O.html similarity index 100% rename from experiment/simulation/O.html rename to experiment/simulation/LettersPage/O.html diff --git a/experiment/simulation/P.html b/experiment/simulation/LettersPage/P.html similarity index 100% rename from experiment/simulation/P.html rename to experiment/simulation/LettersPage/P.html diff --git a/experiment/simulation/Q.html b/experiment/simulation/LettersPage/Q.html similarity index 100% rename from experiment/simulation/Q.html rename to experiment/simulation/LettersPage/Q.html diff --git a/experiment/simulation/R.html b/experiment/simulation/LettersPage/R.html similarity index 100% rename from experiment/simulation/R.html rename to experiment/simulation/LettersPage/R.html diff --git a/experiment/simulation/S.html b/experiment/simulation/LettersPage/S.html similarity index 100% rename from experiment/simulation/S.html rename to experiment/simulation/LettersPage/S.html diff --git a/experiment/simulation/T.html b/experiment/simulation/LettersPage/T.html similarity index 100% rename from experiment/simulation/T.html rename to experiment/simulation/LettersPage/T.html diff --git a/experiment/simulation/U.html b/experiment/simulation/LettersPage/U.html similarity index 100% rename from experiment/simulation/U.html rename to experiment/simulation/LettersPage/U.html diff --git a/experiment/simulation/V.html b/experiment/simulation/LettersPage/V.html similarity index 100% rename from experiment/simulation/V.html rename to experiment/simulation/LettersPage/V.html diff --git a/experiment/simulation/W.html b/experiment/simulation/LettersPage/W.html similarity index 100% rename from experiment/simulation/W.html rename to experiment/simulation/LettersPage/W.html diff --git a/experiment/simulation/X.html b/experiment/simulation/LettersPage/X.html similarity index 100% rename from experiment/simulation/X.html rename to experiment/simulation/LettersPage/X.html diff --git a/experiment/simulation/Y.html b/experiment/simulation/LettersPage/Y.html similarity index 100% rename from experiment/simulation/Y.html rename to experiment/simulation/LettersPage/Y.html diff --git a/experiment/simulation/Z.html b/experiment/simulation/LettersPage/Z.html similarity index 100% rename from experiment/simulation/Z.html rename to experiment/simulation/LettersPage/Z.html diff --git a/experiment/simulation/images/.DS_Store b/experiment/simulation/images/.DS_Store new file mode 100644 index 0000000..c600bf4 Binary files /dev/null and b/experiment/simulation/images/.DS_Store differ diff --git a/experiment/simulation/js/Uppercase.js b/experiment/simulation/js/Uppercase.js index 92518df..308ef23 100644 --- a/experiment/simulation/js/Uppercase.js +++ b/experiment/simulation/js/Uppercase.js @@ -30,107 +30,107 @@ document.addEventListener('DOMContentLoaded', function () { // Adding event listeners A.addEventListener('click', function() { - window.location.href = 'A.html'; // Change URL to your specific page for upper case + window.location.href = 'LettersPage/CapA/A.html'; // Change URL to your specific page for upper case }); B.addEventListener('click', function() { - window.location.href = 'B.html'; // Change URL to your specific page for lower case + window.location.href = 'LettersPage/B.html'; // Change URL to your specific page for lower case }); C.addEventListener('click', function() { - window.location.href = 'C.html'; // Change URL to your specific page for upper case + window.location.href = 'LettersPage/C.html'; // Change URL to your specific page for upper case }); D.addEventListener('click', function() { - window.location.href = 'D.html'; // Change URL to your specific page for lower case + window.location.href = 'LettersPage/D.html'; // Change URL to your specific page for lower case }); E.addEventListener('click', function() { - window.location.href = 'E.html'; // Change URL to your specific page for upper case + window.location.href = 'LettersPage/E.html'; // Change URL to your specific page for upper case }); F.addEventListener('click', function() { - window.location.href = 'F.html'; // Change URL to your specific page for lower case + window.location.href = 'LettersPage/F.html'; // Change URL to your specific page for lower case }); G.addEventListener('click', function() { - window.location.href = 'G.html'; // Change URL to your specific page for upper case + window.location.href = 'LettersPage/G.html'; // Change URL to your specific page for upper case }); H.addEventListener('click', function() { - window.location.href = 'H.html'; // Change URL to your specific page for lower case + window.location.href = 'LettersPage/H.html'; // Change URL to your specific page for lower case }); I.addEventListener('click', function() { - window.location.href = 'I.html'; // Change URL to your specific page for upper case + window.location.href = 'LettersPage/I.html'; // Change URL to your specific page for upper case }); J.addEventListener('click', function() { - window.location.href = 'J.html'; // Change URL to your specific page for lower case + window.location.href = 'LettersPage/J.html'; // Change URL to your specific page for lower case }); K.addEventListener('click', function() { - window.location.href = 'K.html'; // Change URL to your specific page for upper case + window.location.href = 'LettersPage/K.html'; // Change URL to your specific page for upper case }); L.addEventListener('click', function() { - window.location.href = 'L.html'; // Change URL to your specific page for lower case + window.location.href = 'LettersPage/L.html'; // Change URL to your specific page for lower case }); M.addEventListener('click', function() { - window.location.href = 'M.html'; // Change URL to your specific page for upper case + window.location.href = 'LettersPage/M.html'; // Change URL to your specific page for upper case }); N.addEventListener('click', function() { - window.location.href = 'N.html'; // Change URL to your specific page for lower case + window.location.href = 'LettersPage/N.html'; // Change URL to your specific page for lower case }); O.addEventListener('click', function() { - window.location.href = 'O.html'; // Change URL to your specific page for upper case + window.location.href = 'LettersPage/O.html'; // Change URL to your specific page for upper case }); P.addEventListener('click', function() { - window.location.href = 'P.html'; // Change URL to your specific page for lower case + window.location.href = 'LettersPage/P.html'; // Change URL to your specific page for lower case }); Q.addEventListener('click', function() { - window.location.href = 'Q.html'; // Change URL to your specific page for upper case + window.location.href = 'LettersPage/Q.html'; // Change URL to your specific page for upper case }); R.addEventListener('click', function() { - window.location.href = 'R.html'; // Change URL to your specific page for lower case + window.location.href = 'LettersPage/R.html'; // Change URL to your specific page for lower case }); S.addEventListener('click', function() { - window.location.href = 'S.html'; // Change URL to your specific page for upper case + window.location.href = 'LettersPage/S.html'; // Change URL to your specific page for upper case }); T.addEventListener('click', function() { - window.location.href = 'T.html'; // Change URL to your specific page for lower case + window.location.href = 'LettersPage/T.html'; // Change URL to your specific page for lower case }); U.addEventListener('click', function() { - window.location.href = 'U.html'; // Change URL to your specific page for upper case + window.location.href = 'LettersPage/U.html'; // Change URL to your specific page for upper case }); V.addEventListener('click', function() { - window.location.href = 'V.html'; // Change URL to your specific page for lower case + window.location.href = 'LettersPage/V.html'; // Change URL to your specific page for lower case }); W.addEventListener('click', function() { - window.location.href = 'W.html'; // Change URL to your specific page for upper case + window.location.href = 'LettersPage/W.html'; // Change URL to your specific page for upper case }); X.addEventListener('click', function() { - window.location.href = 'X.html'; // Change URL to your specific page for lower case + window.location.href = 'LettersPage/X.html'; // Change URL to your specific page for lower case }); Y.addEventListener('click', function() { - window.location.href = 'Y.html'; // Change URL to your specific page for upper case + window.location.href = 'LettersPage/Y.html'; // Change URL to your specific page for upper case }); Z.addEventListener('click', function() { - window.location.href = 'Z.html'; // Change URL to your specific page for lower case + window.location.href = 'LettersPage/Z.html'; // Change URL to your specific page for lower case }); }); \ No newline at end of file