Merge pull request #65 from Harshil-Gupta21/logo

Logo Added
SnowScriptWinterOfCode · Jan 27, 2024 · 1d7048f · 1d7048f
2 parents 26652f2 + 5f6c90b
commit 1d7048f
Show file tree

Hide file tree

Showing 18 changed files with 172 additions and 32 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Dark/end.html b/Dark/end.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Congrats!</title>
+    <link rel="icon" href="/assets/logo-kviz.jpg" />
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
@@ -33,7 +34,7 @@ <h1 id="finalScore"></h1>
         <a class="btn" href="../Light/end.html">Change Theme</a>
       </div>
       <div class="socials">
-        <a  href="#" onclick="shareOnFacebook()" style="font-size: 3rem;">
+        <a href="#" onclick="shareOnFacebook()" style="font-size: 3rem">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             height="16"
@@ -45,7 +46,7 @@ <h1 id="finalScore"></h1>
             />
           </svg>
         </a>
-        <a  href="#" onclick="shareOnTwitter()"
+        <a href="#" onclick="shareOnTwitter()"
           ><svg
             xmlns="http://www.w3.org/2000/svg"
             height="16"
@@ -60,5 +61,6 @@ <h1 id="finalScore"></h1>
       </div>
     </div>
     <script src="end.js"></script>
+    <script src="../app.js"></script>
   </body>
 </html>
diff --git a/Dark/game.html b/Dark/game.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Game-play</title>
+    <link rel="icon" href="/assets/logo-kviz.jpg" />
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="game.css" />
   </head>
@@ -14,9 +15,7 @@
       <div id="game" class="justify-center flex-column hidden">
         <div id="hud">
           <div id="hud-item">
-            <p id="progressText" class="hud-prefix">
-              Question
-            </p>
+            <p id="progressText" class="hud-prefix">Question</p>
             <div id="progressBar">
               <div id="progressBarFull"></div>
             </div>
@@ -25,18 +24,18 @@
             <div class="timer">
               <div class="time_left_txt">Time Left</div>
               <div class="timer_sec" id="timer">15</div>
+            </div>
+            <div class="time_line"></div>
           </div>
-          <div class="time_line"></div>  
-          </div>
-            <div id="hud-item">
-            <p class="hud-prefix">
-              Score
-            </p>
-            <h1 class="hud-main-text" id="score">
-              0
-            </h1>
+          <div id="hud-item">
+            <p class="hud-prefix">Score</p>
+            <h1 class="hud-main-text" id="score">0</h1>
           </div>
         </div>
+
+
+
+
         <h2 id="question"></h2>
         <div class="choice-container">
           <p class="choice-prefix">A</p>
@@ -54,17 +53,42 @@ <h2 id="question"></h2>
           <p class="choice-prefix">D</p>
           <p class="choice-text" data-number="4"></p>
         </div>
-        <label for="un-mute" class="unmute" onclick="playpause()" id="playpauseBTN">
-    <img src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg" alt="Mute_Icon.svg" title="Mute icon">
-</label>
-<label for="un-mute" class="mute" onclick="playpause()" id="playpauseBTN">
-    <img src="http://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg" alt="Speaker_Icon.svg" title="Unmute/speaker icon">
-</label>
+
+
+        <h2 id="display">Correct option :</h2>
+
+        <label
+          for="un-mute"
+          class="unmute"
+          onclick="playpause()"
+          id="playpauseBTN"
+        >
+          <img
+            src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg"
+            alt="Mute_Icon.svg"
+            title="Mute icon"
+          />
+        </label>
+        <label
+          for="un-mute"
+          class="mute"
+          onclick="playpause()"
+          id="playpauseBTN"
+        >
+          <img
+            src="http://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg"
+            alt="Speaker_Icon.svg"
+            title="Unmute/speaker icon"
+          />
+        </label>
+
+
         <footer>
           <button class="next_btn">Next Ques</button>
-      </footer>
+        </footer>
       </div>
     </div>
     <script src="game.js"></script>
+    <script src="../app.js"></script>
   </body>
 </html>
diff --git a/Dark/highscore.html b/Dark/highscore.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>High Scores</title>
+    <link rel="icon" href="/assets/logo-kviz.jpg" />
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="highscore.css" />
   </head>
@@ -18,5 +19,6 @@ <h1 id="finalScore">High Scores</h1>
       </div>
     </div>
     <script src="highscore.js"></script>
+    <script src="../app.js"></script>
   </body>
 </html>
diff --git a/Dark/index.html b/Dark/index.html
@@ -5,19 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Kviz: A quiz app</title>
+    <link rel="icon" href="/assets/logo-kviz.jpg" />
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <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>
         <a class="btn" href="rules.html">Rules</a>
+
       </div>
     </div>
-    </div></div>
+    <script src="../app.js"></script>
   </body>
 </html>
diff --git a/Light/end.html b/Light/end.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Congrats!</title>
+    <link rel="icon" href="/assets/logo-kviz.jpg" />
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
@@ -33,7 +34,7 @@ <h1 id="finalScore"></h1>
         <a class="btn" href="../Dark/end.html">Change Theme</a>
       </div>
       <div class="socials">
-        <a  href="#" onclick="shareOnFacebook()" style="font-size: 3rem;">
+        <a href="#" onclick="shareOnFacebook()" style="font-size: 3rem">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             height="16"
@@ -45,7 +46,7 @@ <h1 id="finalScore"></h1>
             />
           </svg>
         </a>
-        <a  href="#" onclick="shareOnTwitter()"
+        <a href="#" onclick="shareOnTwitter()"
           ><svg
             xmlns="http://www.w3.org/2000/svg"
             height="16"
@@ -60,5 +61,6 @@ <h1 id="finalScore"></h1>
       </div>
     </div>
     <script src="end.js"></script>
+    <script src="../app.js"></script>
   </body>
 </html>
diff --git a/Light/game.html b/Light/game.html
@@ -5,29 +5,106 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Game-play</title>
+    <link rel="icon" href="/assets/logo-kviz.jpg" />
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="game.css" />
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
+    />
+
+
   </head>
   <body>
     <div class="container">
       <div id="loader"></div>
       <div id="game" class="justify-center flex-column hidden">
         <div id="hud">
           <div id="hud-item">
-            <p id="progressText" class="hud-prefix">
-              Question
-            </p>
+            <p id="progressText" class="hud-prefix">Question</p>
             <div id="progressBar">
               <div id="progressBarFull"></div>
             </div>
           </div>
-          <div id="hud-item" class="time">
-            <div class="timer">
-              <div class="time_left_txt">Time Left</div>
-              <div class="timer_sec" id="timer">15</div>
+
+
+          <div id="hud-item">
+            <div id="hud-item" class="time">
+              <div class="timer">
+                <div class="time_left_txt">Time Left</div>
+                <div class="timer_sec" id="timer">15</div>
+              </div>
+              <div class="time_line"></div>
+            </div>
+            <div id="hud-item">
+              <p class="hud-prefix">Score</p>
+              <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>
+            <p class="choice-text" data-number="1"></p>
           </div>
-          <div class="time_line"></div>  
+
+          <div class="choice-container">
+            <p class="choice-prefix">B</p>
+            <p class="choice-text" data-number="2"></p>
           </div>
+          <div class="choice-container">
+            <p class="choice-prefix">C</p>
+            <p class="choice-text" data-number="3"></p>
+          </div>
+          <div class="choice-container">
+            <p class="choice-prefix">D</p>
+            <p class="choice-text" data-number="4"></p>
+          </div>
+
+          <label
+            for="un-mute"
+            class="unmute"
+            onclick="playpause()"
+            id="playpauseBTN"
+          >
+            <img
+              src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg"
+              alt="Mute_Icon.svg"
+              title="Mute icon"
+            />
+          </label>
+          <label
+            for="un-mute"
+            class="mute"
+            onclick="playpause()"
+            id="playpauseBTN"
+          >
+            <img
+              src="http://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg"
+              alt="Speaker_Icon.svg"
+              title="Unmute/speaker icon"
+            />
+          </label>
+          <footer>
+            <button class="next_btn">Next Ques</button>
+          </footer>
+        </div>
+      </div>
+
+      <div>
+        <input type="checkbox" class="checkbox" id="checkbox" />
+        <label for="checkbox" class="label">
+          <i class="fas fa-moon"></i>
+          <i class="fas fa-sun"></i>
+          <div class="ball"></div>
+        </label>
+      </div>
+    </div>
+
+    <script src="toggle.js"></script>
+
             <div id="hud-item">
             <p class="hud-prefix">
               Score
@@ -65,6 +142,8 @@ <h2 id="question"></h2>
       </footer>
       </div>
     </div>
+
     <script src="game.js"></script>
+    <script src="../app.js"></script>
   </body>
 </html>
diff --git a/Light/highscore.html b/Light/highscore.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>High Scores</title>
+    <link rel="icon" href="/assets/logo-kviz.jpg" />
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="highscore.css" />
   </head>
@@ -18,5 +19,6 @@ <h1 id="finalScore">High Scores</h1>
       </div>
     </div>
     <script src="highscore.js"></script>
+    <script src="../app.js"></script>
   </body>
 </html>
diff --git a/Light/index.html b/Light/index.html
@@ -5,18 +5,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Kviz: A quiz app</title>
+    <link rel="icon" href="/assets/logo-kviz.jpg" />
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <div class="container">
       <div class="container">
+
+
       <div id="home" class="flex-center flex-column">
         <img src="kviz-1 (8).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>
   </body>
 </html>
diff --git a/app.js b/app.js
@@ -0,0 +1,19 @@
+let index = Math.floor(Math.random() * 5) + 1;
+let bgMusic = new Audio(`/assets/music_bg/${index}.mp3`);
+
+function changeMusic() {
+  bgMusic.src = `/assets/music_bg${index}.mp3`;
+  if (index <= music.length) {
+    index += 1;
+  } else {
+    index = 1;
+  }
+}
+
+window.addEventListener("load", () => {
+  bgMusic.play();
+});
+
+bgMusic.addEventListener("ended", () => {
+  changeMusic();
+});
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/music_bg/.DS_Store b/assets/music_bg/.DS_Store
diff --git a/assets/music_bg/1.mp3 b/assets/music_bg/1.mp3
diff --git a/assets/music_bg/2.mp3 b/assets/music_bg/2.mp3
diff --git a/assets/music_bg/3.mp3 b/assets/music_bg/3.mp3
diff --git a/assets/music_bg/4.mp3 b/assets/music_bg/4.mp3
diff --git a/assets/music_bg/5.mp3 b/assets/music_bg/5.mp3
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
  <!DOCTYPE html> 
 <html lang="en">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -72,4 +73,5 @@ <h2>Score History</h2>
     }
   </script>
 </body>
+
 </html>