From d9cb1e261e690f0c95b0982d47c4b424f55c28aa Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:09:06 +0530 Subject: [PATCH 1/3] Add the project --- Source-Code/QuizApp/index.html | 35 +++++++++++ Source-Code/QuizApp/script.js | 107 +++++++++++++++++++++++++++++++++ Source-Code/QuizApp/style.css | 85 ++++++++++++++++++++++++++ 3 files changed, 227 insertions(+) create mode 100644 Source-Code/QuizApp/index.html create mode 100644 Source-Code/QuizApp/script.js create mode 100644 Source-Code/QuizApp/style.css diff --git a/Source-Code/QuizApp/index.html b/Source-Code/QuizApp/index.html new file mode 100644 index 0000000..437eb41 --- /dev/null +++ b/Source-Code/QuizApp/index.html @@ -0,0 +1,35 @@ + + + + + + Quiz App + + + +
+

Quiz App

+
+
+

Loading question...

+
+
+ + + + +
+
+ +
+
+ +
+ + + + diff --git a/Source-Code/QuizApp/script.js b/Source-Code/QuizApp/script.js new file mode 100644 index 0000000..6a5b71a --- /dev/null +++ b/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(); diff --git a/Source-Code/QuizApp/style.css b/Source-Code/QuizApp/style.css new file mode 100644 index 0000000..e492d30 --- /dev/null +++ b/Source-Code/QuizApp/style.css @@ -0,0 +1,85 @@ +/* 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; + } + \ No newline at end of file From 9ade7a4bf0d8265bc5d45388ad51781c1a519df1 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:11:39 +0530 Subject: [PATCH 2/3] update the readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 72f2cb3..76da17e 100644 --- a/README.md +++ b/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.

    + +
    +
    • +

    (back to top)

    From 17e6d58018ce3dbe4fdf150c36a02e37af95b108 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Sun, 22 Dec 2024 02:15:15 +0530 Subject: [PATCH 3/3] solve linter errors --- Source-Code/QuizApp/style.css | 165 +++++++++++++++++----------------- 1 file changed, 82 insertions(+), 83 deletions(-) diff --git a/Source-Code/QuizApp/style.css b/Source-Code/QuizApp/style.css index e492d30..391b56c 100644 --- a/Source-Code/QuizApp/style.css +++ b/Source-Code/QuizApp/style.css @@ -1,85 +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; - } - \ No newline at end of file + 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; +}