Certainly! I can help you create a styled quiz app using HTML, CSS, and JavaScript. Cool Quiz App

Simple Quiz

Question text goes here?

*, *::before, *::after { box-sizing: border-box; font-family: 'Arial', sans-serif; } body { padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(to right, #00aaff, #00ff6c); } .quiz-container { background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); width: 90%; max-width: 600px; text-align: center; } h1 { color: #333; margin-bottom: 20px; } #question-container { margin-bottom: 20px; } #question { font-size: 1.5rem; margin-bottom: 20px; color: #555; } .btn-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 10px; margin-top: 20px; } .btn { background-color: #007bff; border: 1px solid #007bff; border-radius: 5px; padding: 10px 20px; color: white; outline: none; cursor: pointer; font-size: 1rem; transition: background-color 0.3s ease, transform 0.1s ease; } .btn:hover { background-color: #0056b3; border-color: #0056b3; transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn.correct { background-color: #28a745; border-color: #28a745; } .btn.wrong { background-color: #dc3545; border-color: #dc3545; } .controls { margin-top: 20px; } .next-btn, .restart-btn { background-color: #6c757d; border: 1px solid #6c757d; border-radius: 5px; padding: 10px 20px; color: white; outline: none; cursor: pointer; font-size: 1.2rem; transition: background-color 0.3s ease; } .next-btn:hover, .restart-btn:hover { background-color: #5a6268; border-color: #545b62; } #score-container { margin-top: 20px; } #score { color: #007bff; } .hide { display: none; } const questions = [ { question: 'What is the capital of France?', answers: [ { text: 'Berlin', correct: false }, { text: 'Madrid', correct: false }, { text: 'Paris', correct: true }, { text: 'Rome', correct: false } ] }, { question: 'What is 2 + 2?', answers: [ { text: '3', correct: false }, { text: '4', correct: true }, { text: '5', correct: false }, { text: '6', correct: false } ] }, { question: 'Who wrote "Hamlet"?', answers: [ { text: 'Charles Dickens', correct: false }, { text: 'William Shakespeare', correct: true }, { text: 'Jane Austen', correct: false }, { text: 'Mark Twain', correct: false } ] } ]; const questionElement = document.getElementById('question'); const answerButtonsElement = document.getElementById('answer-buttons'); const nextButton = document.getElementById('next-button'); const scoreContainer = document.getElementById('score-container'); const scoreElement = document.getElementById('score'); const restartButton = document.getElementById('restart-button'); const questionContainerElement = document.getElementById('question-container'); let currentQuestionIndex = 0; let score = 0; function startGame() { currentQuestionIndex = 0; score = 0; scoreContainer.classList.add('hide'); nextButton.classList.add('hide'); questionContainerElement.classList.remove('hide'); restartButton.classList.add('hide'); setNextQuestion(); } function setNextQuestion() { resetState(); if (currentQuestionIndex < questions.length) { showQuestion(questions[currentQuestionIndex]); } else { showScore(); } } 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 === 'true'; if (correct) { score++; } setStatusClass(document.body, correct); Array.from(answerButtonsElement.children).forEach(button => { setStatusClass(button, button.dataset.correct === 'true'); button.removeEventListener('click', selectAnswer); // Disable buttons after selection }); if (questions.length > currentQuestionIndex + 1) { nextButton.classList.remove('hide'); } else { showScore(); } } 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'); } function showScore() { questionContainerElement.classList.add('hide'); nextButton.classList.add('hide'); scoreContainer.classList.remove('hide'); scoreElement.innerText = score; restartButton.classList.remove('hide'); } nextButton.addEventListener('click', () => { currentQuestionIndex++; setNextQuestion(); }); restartButton.addEventListener('click', startGame); startGame(); // Start the quiz when the page loads

Simple Quiz

Your Score: 0