Merge branch 'main' into logo

SnowScriptWinterOfCode · Jan 23, 2024 · 5f6c90b · 5f6c90b
2 parents 42ddba0 + 26652f2
commit 5f6c90b
Show file tree

Hide file tree

Showing 18 changed files with 456 additions and 110 deletions.
diff --git a/Dark/game.css b/Dark/game.css
@@ -85,20 +85,7 @@
   background-color: #56a5eb;
   width: 0%;
 }
-#display{
-  border:2px solid black;
-  border-radius: 5px;
-  width:100%;
-  margin-bottom:2px;
-  display:block;
-}
-#display{
-  border:2px solid black;
-  border-radius: 5px;
-  width:100%;
-  margin-bottom:2px;
-  display:block;
-}
+
 /* LOADER */
 #loader {
   border: 1.6rem solid white;
@@ -231,7 +218,7 @@ input#un-mute:checked ~ .mute img {
   height: 50px;
   width: 50px;
   margin-top: 50px;
-  margin-left:1009px;
+  right: 0;
   border-style: groove;
   border-color: rgb(9, 9, 54);
   border-radius: 50%;
@@ -245,7 +232,41 @@ input#un-mute:checked ~ .mute img {
   border-radius: 50%;
   border-style: groove;
   border-color: rgb(9, 9, 54);
-  margin-left: 1009px;
+  right: 0;
   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.html b/Dark/game.html
@@ -32,7 +32,10 @@
             <h1 class="hud-main-text" id="score">0</h1>
           </div>
         </div>
-        <h2 id="question1">Question</h2>
+
+
+
+
         <h2 id="question"></h2>
         <div class="choice-container">
           <p class="choice-prefix">A</p>
@@ -51,6 +54,7 @@ <h2 id="question"></h2>
           <p class="choice-text" data-number="4"></p>
         </div>
 
+
         <h2 id="display">Correct option :</h2>
 
         <label
@@ -77,6 +81,8 @@ <h2 id="display">Correct option :</h2>
             title="Unmute/speaker icon"
           />
         </label>
+
+
         <footer>
           <button class="next_btn">Next Ques</button>
         </footer>

diff --git a/Dark/game.js b/Dark/game.js
@@ -9,9 +9,6 @@ const time_line = document.querySelector(".time .time_line");
 const timeText = document.querySelector(".timer .time_left_txt");
 const timeCount = document.querySelector(".timer .timer_sec");
 
-const question1= document.getElementById('question1');
-
-
 var soundCorrect = new Audio("sounds/correctAns.mp3");
 var soundIncorrect = new Audio("sounds/wrongAns.mp3");
 var myMusic = new Audio("sounds/gametheme.mp3");
@@ -85,7 +82,6 @@ getNewQuestion = () => {
         return window.location.assign('end.html');
     }
     questionCounter++;
-    question1.innerText = `Question  ${questionCounter}`;//update question number
     progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`;
     //Update the progress bar
     progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`;
@@ -141,10 +137,7 @@ choices.forEach((choice) => {
             soundCorrect.play();
         } else {
             soundIncorrect.play();
-            display(currentQuestion.answer);
         }
-        setInterval(displaynone,4000);
-
 
         selectedChoice.parentElement.classList.add(classToApply);
         setTimeout(() => {
@@ -201,30 +194,19 @@ function startTimerLine(time) {
         }
     }
 }
-let string;
-function display(string) {
-    let display = document.getElementById('display');
-    if (string == 1) { 
-    display.innerText = `Correct option : A`;
-    }
-    if (string == 2) { 
-        display.innerText = `Correct option : B`;
-    }
-    if (string == 3) { 
-        display.innerText = `Correct option : C`;
-    }
-    if (string == 4) { 
-        display.innerText = `Correct option : D`;
-        }
 
-}
-function displaynone() {
-    let display = document.getElementById('display');
-    display.innerText = `Correct option : `;
-}
 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
@@ -12,11 +12,13 @@
     <div class="container">
       <div class="container">
         <div id="home" class="flex-center flex-column">
-          <img src="kviz-1 (9).png" style="height: 80px" />
-          <h1>Kviz</h1>
-          <a class="btn" href="game.html">Play</a>
-          <a class="btn" href="highscore.html">High Scores</a>
-        </div>
+
+          <img src="kviz-1 (9).png" style="height: 80px;"/>
+        <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>
     <script src="../app.js"></script>

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,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/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
@@ -82,13 +82,7 @@
   background-color: #56a5eb;
   width: 0%;
 }
-#display{
-  border:2px solid black;
-  border-radius: 5px;
-  width:100%;
-  margin-bottom:2px;
-  display:block;
-}
+
 /* LOADER */
 #loader {
   border: 1.6rem solid white;
@@ -224,7 +218,7 @@ input#un-mute:checked ~ .mute img {
   height: 50px;
   width: 50px;
   margin-top: 50px;
-  margin-left:1009px;
+  right: 0;
   border-style: groove;
   border-color: rgb(9, 9, 54);
   border-radius: 50%;
@@ -238,7 +232,40 @@ input#un-mute:checked ~ .mute img {
   border-radius: 50%;
   border-style: groove;
   border-color: rgb(9, 9, 54);
-  margin-left: 1009px;
+  right: 0;
   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; 
+}