feat: Add Instruments Quiz Section (KendallDoesCoding#75)

Co-authored-by: Kendall <kendalldoescoding@gmail.com>
Kendall-Does-Coding-Websites · Aug 2, 2023 · 80d5531 · 80d5531
1 parent f2bcb2c
commit 80d5531
Show file tree

Hide file tree

Showing 7 changed files with 217 additions and 2 deletions.
diff --git a/css/topics.css b/css/topics.css
@@ -159,6 +159,12 @@ background-image: linear-gradient(
   );
 }
 
+#instrum-btn {
+background-color: #85FFBD;
+background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
+}
+
+
 #jaidenanimations-btn {
   background-color: #4158D0;
   background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

diff --git a/js/data/index.js b/js/data/index.js
@@ -20,6 +20,7 @@ import footballQA from "./football.js";
 
 import fruitQA from "./fruit.js";
 import generalQA from "./general.js";
+import instrumentsQA from "./instruments.js";
 import kendallQA from "./kendall_quiz.js";
 
 import minecraftQA from "./minecraft.js";
@@ -45,6 +46,7 @@ export {
   footballQA,
   fruitQA,
   generalQA,
+  instrumentsQA,
   kendallQA,
   minecraftQA,
   presidentsQA,
@@ -55,4 +57,4 @@ export {
   youtubeQA,
   TheOdd1sOutQA,
   JaidenAnimationsQA,
-};
+};
diff --git a/js/data/instruments.js b/js/data/instruments.js
@@ -0,0 +1,82 @@
+export default [
+  {
+    question: "Which instrument is a member of the woodwind family?",
+    choice1: "Trumpet",
+    choice2: "Clarinet",
+    choice3: "Violin",
+    choice4: "Drums",
+    answer: 2,
+  },
+  {
+    question: "Which of these instruments is a member of the percussion family?",
+    choice1: "Piano",
+    choice2: "Saxophone",
+    choice3: "Flute",
+    choice4: "Bongo drums",
+    answer: 4,
+  },
+  {
+    question: "Which stringed instrument is played with a bow?",
+    choice1: "Guitar",
+    choice2: "Cello",
+    choice3: "Trumpet",
+    choice4: " Trombone",
+    answer: 2,
+  },
+  {
+    question: "What is the primary material used to make the body of a classical guitar?",
+    choice1: "Plastic",
+    choice2: "Metal",
+    choice3: "Wood",
+    choice4: "Carbon fiber",
+    answer: 3,
+  },
+  {
+    question: "Which instrument has keys, pedals, and strings and is often used in classical music?",
+    choice1: "Harp",
+    choice2: "Accordion",
+    choice3: "Bagpipes",
+    choice4: "Banjo",
+    answer: 1,
+  },
+  {
+    question: "The 'King of Instruments' is a nickname for which musical instrument?",
+    choice1: "Trumpet",
+    choice2: "Piano",
+    choice3: "Organ",
+    choice4: "Saxophone",
+    answer: 3,
+  },
+  {
+    question: " Which brass instrument has the highest pitch?",
+    choice1: "Trombone",
+    choice2: "French horn",
+    choice3: "Tuba",
+    choice4: "Trumpet",
+    answer: 4,
+  },
+  {
+    question: " Which instrument is used as the lead melodic instrument in traditional Indian classical music?",
+    choice1: "Sitar",
+    choice2: "Tabla",
+    choice3: "Bansuri (Indian flute)",
+    choice4: "Sarod",
+    answer: 1,
+  },
+  {
+    question: "Which percussion instrument consists of small metal discs mounted in a circular frame?",
+    choice1: "Tambourine",
+    choice2: "Maracas",
+    choice3: "Djembe",
+    choice4: "Conga",
+    answer: 1,
+  },
+  {
+    question: "Which instrument is known for its unique sliding sound and is often associated with Hawaiian music?",
+    choice1: "Ukulele",
+    choice2: "Didgeridoo",
+    choice3: "Steel guitar",
+    choice4: "Bagpipe",
+    answer: 3,
+  },
+];
diff --git a/pages/football/game.html b/pages/football/game.html
@@ -24,7 +24,7 @@
         }
       });
     </script>
-
+    
   </head>
 
   <body>

diff --git a/pages/instruments/game.html b/pages/instruments/game.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+    integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
+
+    <title>Quiz Page - instruments</title>
+
+    <link rel="stylesheet" href="../../css/index.css" />
+    <link rel="stylesheet" href="../../css/game.css" />
+    <script type="module" defer>
+      import { instrumentsQA } from "../../js/data/index.js";
+      import { Quiz } from "../../js/QuizClass.js";
+
+      const QuizInstance = new Quiz(instrumentsQA);
+
+      document.addEventListener("click", (e) => {
+        if (e.target.dataset.number) {
+          QuizInstance.checkAnswer(+e.target.dataset.number, QuizInstance.answer);
+        }
+      });
+    </script>
+
+  </head>
+
+  <body>
+    <div class="container">
+      <div id="game" class="justify-center flex-column">
+        <div id="hud">
+          <div class="hud-item">
+            <p id="progressText" class="hud-prefix">Question</p>
+            <div id="progressBar">
+              <div id="progressBarFull"></div>
+            </div>
+          </div>
+          <div class="hud-item">
+            <p class="hud-prefix">Score</p>
+            <h1 class="hud-main-text" id="score">0</h1>
+          </div>
+        </div>
+        <h1 id="question">What is the answer to this question</h1>
+        <div class="choice-container">
+          <p class="choice-prefix">A</p>
+          <p class="choice-text" data-number="1">Choice 1</p>
+        </div>
+        <div class="choice-container">
+          <p class="choice-prefix">B</p>
+          <p class="choice-text" data-number="2">Choice 2</p>
+        </div>
+        <div class="choice-container">
+          <p class="choice-prefix">C</p>
+          <p class="choice-text" data-number="3">Choice 3</p>
+        </div>
+        <div class="choice-container">
+          <p class="choice-prefix">D</p>
+          <p class="choice-text" data-number="4">Choice 4</p>
+        </div>
+      </div>
+    </div>
+    <div class="music">
+      <audio loop="loop" id="my_audio" preload="auto" autoplay>
+        <source id="audio_source" src="" type="audio/mpeg">
+      </audio>
+
+      <div class="music-container flex-center flex-row">
+        <a onclick="toggleMusic()" class="button1" id="musicOnButton" style="display: none;"> Music On <i class="fas fa-light fa-headphones"></i></a>
+        <a onclick="pauseMusic()" class="button2"> Music Off <i class="fas fa-light fa-volume-off"></i></a>
+      </div>
+    </div>
+  </body>
+  <script src="/js/songs.js"></script>
+</html>
diff --git a/pages/instruments/index.html b/pages/instruments/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Instruments Quiz Game - Home Page</title>
+
+    <link rel="stylesheet" href="../../css/index.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
+    <!-- Google Analytics -->
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-55DLRTJ04T"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-55DLRTJ04T");
+    </script>
+
+  </head>
+
+  <body>
+    <div class="container">
+      <div id="home" class="flex-column flex-center">
+        <h1>Are you Ready?</h1>
+        <h2 class="white-title">Instruments Quiz!</h2>
+
+        <a href="./game.html" class="btn">Play<i class="fas fa-play-circle"></i></a>
+
+        <a href="../topics.html" id="topics-btn" class="btn">Topics</a>
+
+        <a href="../highscores.html" id="highscore-btn" class="btn">High Scores<i class="fas fa-crown"></i></a>
+
+        <a href="../rules.html" id="rules-btn" class="btn">Rules & Info<i class="fas fa-info-circle"></i></a>
+
+        <a href="../suggestion.html" id="suggestion-btn" class="btn">Question Suggestion<i class="fas fa-edit"></i></a>
+
+      </div>
+    </div>
+  </body>
+
+</html>
diff --git a/pages/topics.html b/pages/topics.html
@@ -90,6 +90,7 @@ <h1>Quiz Topics</h1>
         <a href="./fruit/index.html" id="fruit-btn" class="btn">Fruit Quiz <i class="fas fa-apple-alt"></i></a>
         <a href="./kendall-quiz/index.html" id="hwdyk-btn" class="btn">How Well Do You Know Kendall Quiz<i
             class="fas fa-question"></i></a>
+        <a href="./instruments/index.html" id="instrum-btn" class="btn">Instrument Quiz<i class="fa-solid fa-piano"></i></a>
       </div>
     </div>
   </body>