Prodigy-InfoTech · avnee-gy · Oct 17, 2023
diff --git a/Quiz-App/README.md b/Quiz-App/README.md
@@ -0,0 +1,43 @@
+# Quiz Web App
+
+This is a simple Quiz Web App implemented with HTML, CSS, and JavaScript. In this app, you can take quizand test your general knowledge. The app provides a user-friendly interface and keeps track of your quiz scores.
+
+## Table of Contents
+
+- [How to Play](#how-to-play)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Credits](#credits)
+
+## How to Play
+
+1. Open the Quiz Web App in your web browser.
+2. Start the quiz.
+3. Answer the quiz questions to the best of your ability.
+4. After completing the quiz, you'll receive instant feedback on your score and the correct answers to the questions.
+
+## Installation
+
+To run the Quiz Web App locally on your computer, follow these steps:
+
+1. Clone the repository or download the ZIP file.
+
+```bash
+git clone https://github.com/Prodigy-InfoTech/Web-Development-Projects.git
+```
+
+2. Open the project folder.
+
+```bash
+cd Quiz-App
+```
+
+3. Run `index.html` in your preferred web browser.
+
+## Usage
+
+Once you've opened the index.html file in your web browser, you can start taking the quiz. Answer the questions, and receive instant feedback on your performance.
+
+## Credits
+
+This game was created by Avnee Goyal (github.com/avnee-gy)
diff --git a/Quiz-App/index.html b/Quiz-App/index.html
@@ -0,0 +1,30 @@
+<!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">
+  <link href="./styles.css" rel="stylesheet">
+  <script defer src="./script.js"></script>
+  <title>Quiz App</title>
+</head>
+<body>
+  <h1>Quiz App!!</h1>
+  <div class="container">
+    <div id="question-container" class="hide">
+      <div id="question">Question</div>
+      <div id="answer-buttons" class="btn-grid">
+        <button class="btn">Answer 1</button>
+        <button class="btn">Answer 2</button>
+        <button class="btn">Answer 3</button>
+        <button class="btn">Answer 4</button>
+      </div>
+    </div>
+    <div class="controls">
+      <button id="start-btn" class="start-btn btn">Start</button>
+      <button id="next-btn" class="next-btn btn hide">Next</button>
+    </div>
+    <div id="score" class="score hide">Score: 0</div>
+  </div>
+</body>
+</html>
diff --git a/Quiz-App/script.js b/Quiz-App/script.js
@@ -0,0 +1,159 @@
+const startButton = document.getElementById('start-btn')
+const nextButton = document.getElementById('next-btn')
+const questionContainerElement = document.getElementById('question-container')
+const questionElement = document.getElementById('question')
+const answerButtonsElement = document.getElementById('answer-buttons')
+const scoreElement = document.getElementById('score')
+
+let shuffledQuestions, currentQuestionIndex, score
+
+console.log("Made with 💗 by Avnee")
+
+startButton.addEventListener('click', startGame)
+nextButton.addEventListener('click', () => {
+  currentQuestionIndex++
+  setNextQuestion()
+})
+
+function startGame() {
+  startButton.classList.add('hide')
+  score = 0
+  scoreElement.innerText = 'Score: 0'
+  shuffledQuestions = questions.sort(() => Math.random() - .5)
+  currentQuestionIndex = 0
+  questionContainerElement.classList.remove('hide')
+  setNextQuestion()
+}
+
+function setNextQuestion() {
+  resetState()
+  showQuestion(shuffledQuestions[currentQuestionIndex])
+}
+
+function showQuestion(question) {
+  questionElement.innerText = question.question
+  question.answers.forEach(answer => {
+    const button = document.createElement('button')
+    button.innerText = answer.text
+    button.classList.add('btn')
+    if (answer.correct) {
+      button.dataset.correct = answer.correct
+    }
+    button.addEventListener('click', selectAnswer)
+    answerButtonsElement.appendChild(button)
+  })
+}
+
+function resetState() {
+  clearStatusClass(document.body)
+  nextButton.classList.add('hide')
+  while (answerButtonsElement.firstChild) {
+    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
+  }
+}
+
+function selectAnswer(e) {
+  const selectedButton = e.target
+  const correct = selectedButton.dataset.correct
+  setStatusClass(document.body, correct)
+  Array.from(answerButtonsElement.children).forEach(button => {
+    setStatusClass(button, button.dataset.correct)
+  })
+  if (correct) {
+    score++
+    scoreElement.innerText = 'Score: ' + score
+  }
+  if (shuffledQuestions.length > currentQuestionIndex + 1) {
+    nextButton.classList.remove('hide')
+  } else {
+    startButton.innerText = 'Restart'
+    startButton.classList.remove('hide')
+  }
+}
+
+function setStatusClass(element, correct) {
+  clearStatusClass(element)
+  if (correct) {
+    element.classList.add('correct')
+  } else {
+    element.classList.add('wrong')
+  }
+}
+
+function clearStatusClass(element) {
+  element.classList.remove('correct')
+  element.classList.remove('wrong')
+}
+
+const questions = [
+  {
+    question: 'What is 2 + 2?',
+    answers: [
+      { text: '4', correct: true },
+      { text: '22', correct: false }
+    ]
+  },
+  {
+    question: 'What is the scientific name of a butterfly?',
+    answers: [
+      { text: 'Apis', correct: false },
+      { text: 'Coleoptera', correct: false },
+      { text: 'Formicidae', correct: false },
+      { text: 'Rhopalocera', correct: true }
+    ]
+  },
+  {
+    question: 'How hot is the surface of the sun?',
+    answers: [
+      { text: '1,233 K', correct: false },
+      { text: '5,778 K', correct: true },
+      { text: '12,130 K', correct: false },
+      { text: '101,300 K', correct: false }
+    ]
+  },
+  {
+    question: 'What is the capital of Spain?',
+    answers: [
+      { text: 'Berlin', correct: false },
+      { text: 'Buenos Aires', correct: false },
+      { text: 'Madrid', correct: true },
+      { text: 'San Juan', correct: false }
+    ]
+  },
+  {
+    question: 'How far is the moon from Earth?',
+    answers: [
+      { text: '7,918 miles (12,742 km)', correct: false },
+      { text: '86,881 miles (139,822 km)', correct: false },
+      { text: '238,400 miles (384,400 km)', correct: true },
+      { text: '35,980,000 miles (57,910,000 km)', correct: false }
+    ]
+  },
+  {
+    question: 'When did The Avengers come out?',
+    answers: [
+      { text: 'May 2, 2008', correct: false },
+      { text: 'May 4, 2012', correct: true },
+      { text: 'May 3, 2013', correct: false },
+      { text: 'April 4, 2014', correct: false }
+    ]
+  },
+  {
+    question: 'Is web development fun?',
+    answers: [
+      { text: 'Kinda', correct: false },
+      { text: 'YES!!!', correct: true },
+      { text: 'Um no', correct: false },
+      { text: 'IDK', correct: false }
+    ]
+  },
+  {
+    question: 'What is 65 times 52?',
+    answers: [
+      { text: '117', correct: false },
+      { text: '3120', correct: false },
+      { text: '3380', correct: true },
+      { text: '3520', correct: false }
+    ]
+  }
+]
diff --git a/Quiz-App/styles.css b/Quiz-App/styles.css
@@ -0,0 +1,98 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  font-family: Gotham Rounded;
+}
+
+:root {
+  --hue-neutral: 200;
+  --hue-wrong: 0;
+  --hue-correct: 145;
+}
+
+body {
+  --hue: var(--hue-neutral);
+  padding: 0;
+  margin: 0;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+  background-color: hsl(var(--hue), 100%, 20%);
+}
+
+body.correct {
+  --hue: var(--hue-correct);
+}
+
+body.wrong {
+  --hue: var(--hue-wrong);
+}
+
+h1 {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.container {
+  width: 800px;
+  max-width: 80%;
+  background-color: white;
+  border-radius: 5px;
+  padding: 10px;
+  box-shadow: 0 0 10px 2px;
+}
+
+.btn-grid {
+  display: grid;
+  grid-template-columns: repeat(2, auto);
+  gap: 10px;
+  margin: 20px 0;
+}
+
+.btn {
+  --hue: var(--hue-neutral);
+  border: 1px solid hsl(var(--hue), 100%, 30%);
+  background-color: hsl(var(--hue), 100%, 50%);
+  border-radius: 5px;
+  padding: 5px 10px;
+  color: white;
+  outline: none;
+}
+
+.btn:hover {
+  border-color: black;
+}
+
+.btn.correct {
+  --hue: var(--hue-correct);
+  color: black;
+}
+
+.btn.wrong {
+  --hue: var(--hue-wrong);
+}
+
+.start-btn, .next-btn {
+  font-size: 1.5rem;
+  font-weight: bold;
+  padding: 10px 20px;
+}
+
+.controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.score {
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin: 10px 0;
+  display: none; /* Hide the score element initially */
+}
+
+.hide {
+  display: none;
+}