50Projects-HTML-CSS-JavaScript : Quiz app

README.md

@@ -452,6 +452,17 @@ In order to run this project you need:
 
 
 
+
+
+Quiz App
+A simple quiz app built using HTML, CSS, and JavaScript. The app presents multiple-choice questions, and the user can select answers to test their knowledge. At the end of the quiz, the user's score is displayed along with an option to restart the quiz.
+
+Live Demo
+Source
+ 
+
+
+
 
 
 (back to top)

Source-Code/QuizApp/index.html

@@ -0,0 +1,35 @@
+
+
+
+  
+  
+  Quiz App
+  
+
+
+  
+    Quiz App
+    
+      
+        Loading question...
+      
+      
+        Answer 1
+        Answer 2
+        Answer 3
+        Answer 4
+      
+      
+        Next
+      
+    
+    
+      Quiz Completed!
+      
+      Restart
+    
+  
+
+  
+
+

Source-Code/QuizApp/script.js

@@ -0,0 +1,107 @@
+const questions = [
+  {
+    question: 'What is the capital of France?',
+    answers: ['Berlin', 'Madrid', 'Paris', 'Rome'],
+    correct: 2,
+  },
+  {
+    question: 'Which planet is known as the Red Planet?',
+    answers: ['Earth', 'Mars', 'Jupiter', 'Saturn'],
+    correct: 1,
+  },
+  {
+    question: 'What is the largest ocean on Earth?',
+    answers: ['Atlantic', 'Indian', 'Arctic', 'Pacific'],
+    correct: 3,
+  },
+  {
+    question: "Who wrote 'Romeo and Juliet'?",
+    answers: ['Shakespeare', 'Dickens', 'Hemingway', 'Austen'],
+    correct: 0,
+  },
+];
+
+let currentQuestionIndex = 0;
+let score = 0;
+
+const questionElement = document.getElementById('question');
+const answerButtons = document.querySelectorAll('.answer-btn');
+const nextButton = document.getElementById('next-btn');
+const resultContainer = document.getElementById('result-container');
+const restartButton = document.getElementById('restart-btn');
+const scoreElement = document.getElementById('score');
+
+// Load question and answers
+const loadQuestion = () => {
+  const currentQuestion = questions[currentQuestionIndex];
+  questionElement.textContent = currentQuestion.question;
+
+  answerButtons.forEach((button, index) => {
+    button.textContent = currentQuestion.answers[index];
+    button.disabled = false;
+    button.style.backgroundColor = '#4CAF50'; // Reset button color
+  });
+
+  nextButton.disabled = true; // Disable next button until an answer is selected
+};
+
+// Handle answer selection
+const handleAnswerClick = (index) => {
+  const currentQuestion = questions[currentQuestionIndex];
+
+  if (index === currentQuestion.correct) {
+    score += 1;
+  }
+
+  // Disable all buttons after an answer is selected
+  answerButtons.forEach((button, i) => {
+    button.disabled = true;
+    if (i === currentQuestion.correct) {
+      button.style.backgroundColor = '#4CAF50'; // Correct answer
+    } else {
+      button.style.backgroundColor = '#f44336'; // Incorrect answers
+    }
+  });
+
+  nextButton.disabled = false; // Enable next button
+};
+
+// Show quiz result
+const showResult = () => {
+  document.getElementById('quiz-box').classList.add('hidden');
+  resultContainer.classList.remove('hidden');
+  scoreElement.textContent = `You scored ${score} out of ${questions.length}`;
+};
+
+// Move to next question
+const nextQuestion = () => {
+  currentQuestionIndex += 1;
+  if (currentQuestionIndex < questions.length) {
+    loadQuestion();
+  } else {
+    showResult();
+  }
+};
+
+// Restart the quiz
+const restartQuiz = () => {
+  currentQuestionIndex = 0;
+  score = 0;
+  resultContainer.classList.add('hidden');
+  document.getElementById('quiz-box').classList.remove('hidden');
+  loadQuestion();
+};
+
+// Add event listeners to answer buttons
+answerButtons.forEach((button, index) => {
+  button.addEventListener('click', () => handleAnswerClick(index));
+});
+
+// Add event listener to next button
+nextButton.addEventListener('click', nextQuestion);
+
+// Add event listener to restart button
+restartButton.addEventListener('click', restartQuiz);
+
+// Start the quiz
+loadQuestion();

Source-Code/QuizApp/style.css

@@ -0,0 +1,84 @@
+/* styles.css */
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+
+.quiz-container {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  width: 300px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  text-align: center;
+  color: #333;
+}
+
+#question-container {
+  margin-bottom: 20px;
+}
+
+#answer-container {
+  margin-bottom: 20px;
+}
+
+.answer-btn {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px;
+  width: 100%;
+  margin: 5px 0;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.answer-btn:hover {
+  background-color: #45a049;
+}
+
+#next-btn {
+  background-color: #008cba;
+  color: white;
+  padding: 10px;
+  width: 100%;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+#next-btn:disabled {
+  background-color: #ccc;
+}
+
+.hidden {
+  display: none;
+}
+
+#result-container {
+  text-align: center;
+}
+
+#restart-btn {
+  background-color: #f44336;
+  color: white;
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  width: 100%;
+}
+
+#restart-btn:hover {
+  background-color: #d32f2f;
+}