SnowScriptWinterOfCode · Akanchha112 · Jan 21, 2024 · Jan 17, 2024 · Jan 17, 2024 · Jan 17, 2024
diff --git a/Dark/game.css b/Dark/game.css
@@ -236,3 +236,37 @@ input#un-mute:checked ~ .mute img {
   height: 50px;
   width: 50px;
 }
+
+@keyframes fadeInOut {
+  0% { opacity: 1; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.5); }
+  100% { opacity: 0; transform: scale(2); }
+}
+
+.points-display {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 8rem; 
+  color: green;
+  font-weight: bold;
+  z-index: 9999;
+  animation: fadeInOut 1s ease-out; 
+}
+
+.choice-container {
+  position: relative;
+
+}
+
+.choice-container .points-display {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 9rem; 
+  font-weight: bold;
+  z-index: 1;
+  animation: fadeInOut 1s ease-out; 
+}
diff --git a/Dark/game.js b/Dark/game.js
@@ -198,6 +198,15 @@ function startTimerLine(time) {
 incrementScore = (num) => {
     score += num;
     scoreText.innerText = score;
+
+    const pointsDisplay = document.createElement('div');
+    pointsDisplay.classList.add('points-display');
+    pointsDisplay.innerText = `+${num}`;
+    document.body.appendChild(pointsDisplay);
+
+    setTimeout(() => {
+        pointsDisplay.remove();
+    }, 1000);
 };
 
 var count=0;

diff --git a/Dark/index.html b/Dark/index.html
@@ -15,6 +15,7 @@
         <h1>Kviz</h1>
         <a class="btn" href="game.html">Play</a>
         <a class="btn" href="highscore.html">High Scores</a>
+        <a class="btn" href="rules.html">Rules</a>
       </div>
     </div>
     </div></div>

diff --git a/Dark/rules.css b/Dark/rules.css
@@ -0,0 +1,38 @@
+body {
+    font-size: 25px; 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh; 
+}
+
+.rules-list {
+    font-size: 18px; 
+    text-align: left;
+    margin-top: 60px;
+}
+
+.rules-list li {
+    margin-bottom: 15px; 
+}
+
+.btn {
+    font-size: 1.8rem;
+    padding: 1rem 0;
+    margin-top: 40px;
+    width: 20rem;
+    text-align: center;
+    border: 0.1rem solid #56a5eb;
+    margin-bottom: 1rem;
+    text-decoration: none;
+    color: #56a5eb;
+    background-color: rgb(235, 244, 253);
+  }
+
+  .btn:hover {
+    cursor: pointer;
+    box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
+    transform: translateY(-0.1rem);
+    transition: transform 150ms;
+  }
diff --git a/Dark/rules.html b/Dark/rules.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Quiz Rules</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="rules.css" />
+</head>
+<body>
+    <h1>Quiz Rules</h1>
+    <ol class="rules-list"> 
+        <li>The game consists of 10 questions!</li>
+        <li>You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.</li>
+        <li>Speed Bonus If You Answer Quickly</li>
+        <ul>
+            <li>You will earn +10 points for providing a correct answer within the first 5 seconds.</li>
+            <li>If you give a correct answer after the initial 5 seconds but within 10 seconds, you get +5 points.</li>
+            <li>Answers given correctly after 10 seconds will still be rewarded with +2 points.</li>
+        </ul>
+
+        <li>There is no negative marking for a wrong answer.</li>
+    </ol>
+    <a class="btn" href="index.html" id="goHomeBtn">Go Home</a>
+</body>
+</html>
diff --git a/Dark/rules.js b/Dark/rules.js
@@ -0,0 +1,20 @@
+function openRulesPage() {
+    window.location.href = 'rules.html'; 
+}
+
+function goHome() {
+    window.location.href = 'index.html'; 
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    const rulesBtn = document.getElementById('rulesBtn');
+    const goHomeBtn = document.getElementById('goHomeBtn'); 
+
+    if (rulesBtn) {
+        rulesBtn.addEventListener('click', openRulesPage);
+    }
+
+    if (goHomeBtn) {
+        goHomeBtn.addEventListener('click', goHome);
+    }
+});
diff --git a/Light/game.css b/Light/game.css
@@ -236,3 +236,36 @@ input#un-mute:checked ~ .mute img {
   height: 50px;
   width: 50px;
 }
+
+@keyframes fadeInOut {
+  0% { opacity: 1; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.5); }
+  100% { opacity: 0; transform: scale(2); }
+}
+
+.points-display {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 8rem; 
+  color: green;
+  font-weight: bold;
+  z-index: 9999;
+  animation: fadeInOut 1s ease-out; 
+}
+
+.choice-container {
+  position: relative;
+}
+
+.choice-container .points-display {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 8rem; 
+  font-weight: bold;
+  z-index: 1;
+  animation: fadeInOut 1s ease-out; 
+}
diff --git a/Light/game.js b/Light/game.js
@@ -198,6 +198,15 @@ function startTimerLine(time) {
 incrementScore = (num) => {
     score += num;
     scoreText.innerText = score;
+
+    const pointsDisplay = document.createElement('div');
+    pointsDisplay.classList.add('points-display');
+    pointsDisplay.innerText = `+${num}`;
+    document.body.appendChild(pointsDisplay);
+
+    setTimeout(() => {
+        pointsDisplay.remove();
+    }, 1000);
 };
 
 var count=0;

diff --git a/Light/index.html b/Light/index.html
@@ -15,6 +15,7 @@
         <h1>Kviz</h1>
         <a class="btn" href="game.html">Play</a>
         <a class="btn" href="highscore.html">High Scores</a>
+        <a class="btn" href="rules.html">Rules</a>
       </div>
     </div>
   </body>

diff --git a/Light/rules.css b/Light/rules.css
@@ -0,0 +1,38 @@
+body {
+    font-size: 25px; 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh; 
+}
+
+.rules-list {
+    font-size: 18px; 
+    text-align: left;
+    margin-top: 60px;
+}
+
+.rules-list li {
+    margin-bottom: 15px; 
+}
+
+.btn {
+    font-size: 1.8rem;
+    padding: 1rem 0;
+    margin-top: 40px;
+    width: 20rem;
+    text-align: center;
+    border: 0.1rem solid #56a5eb;
+    margin-bottom: 1rem;
+    text-decoration: none;
+    color: #56a5eb;
+    background-color: rgb(235, 244, 253);
+  }
+
+  .btn:hover {
+    cursor: pointer;
+    box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
+    transform: translateY(-0.1rem);
+    transition: transform 150ms;
+  }
diff --git a/Light/rules.html b/Light/rules.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Quiz Rules</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="rules.css" />
+</head>
+<body>
+    <h1>Quiz Rules</h1>
+    <ol class="rules-list"> 
+        <li>The game consists of 10 questions!</li>
+        <li>You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.</li>
+        <li>Speed Bonus If You Answer Quickly</li>
+        <ul>
+            <li>You will earn +10 points for providing a correct answer within the first 5 seconds.</li>
+            <li>If you give a correct answer after the initial 5 seconds but within 10 seconds, you get +5 points.</li>
+            <li>Answers given correctly after 10 seconds will still be rewarded with +2 points.</li>
+        </ul>
+
+        <li>There is no negative marking for a wrong answer.</li>
+    </ol>
+    <h2>ALL THE BEST!</h2>
+    <a class="btn" href="index.html" id="goHomeBtn">Go Home</a>
+</body>
+</html>
diff --git a/Light/rules.js b/Light/rules.js
@@ -0,0 +1,20 @@
+function openRulesPage() {
+    window.location.href = 'rules.html'; 
+}
+
+function goHome() {
+    window.location.href = 'index.html'; 
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    const rulesBtn = document.getElementById('rulesBtn');
+    const goHomeBtn = document.getElementById('goHomeBtn'); 
+
+    if (rulesBtn) {
+        rulesBtn.addEventListener('click', openRulesPage);
+    }
+
+    if (goHomeBtn) {
+        goHomeBtn.addEventListener('click', goHome);
+    }
+});