diff --git a/Quiz-App/README.md b/Quiz-App/README.md new file mode 100644 index 0000000..b8f3c7a --- /dev/null +++ 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 new file mode 100644 index 0000000..3cf7ea5 --- /dev/null +++ b/Quiz-App/index.html @@ -0,0 +1,30 @@ + + + + + + + + + Quiz App + + +

Quiz App!!

+
+
+
Question
+
+ + + + +
+
+
+ + +
+
Score: 0
+
+ + \ No newline at end of file diff --git a/Quiz-App/script.js b/Quiz-App/script.js new file mode 100644 index 0000000..8664f13 --- /dev/null +++ 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 } + ] + } +] \ No newline at end of file diff --git a/Quiz-App/styles.css b/Quiz-App/styles.css new file mode 100644 index 0000000..6d99c01 --- /dev/null +++ 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; +} \ No newline at end of file