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)

    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..391b56c --- /dev/null +++ b/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; +}