Geo - Prova - NeoScripta

Quiz a Risposta Multipla

Prossima DomandaRicomincia il Quiz
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Quiz a Risposta Multipla</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            color: #333;
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .quiz-container {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px;
            padding: 20px;
            text-align: center;
        }
        .question {
            font-size: 1.2em;
            margin-bottom: 20px;
        }
        .options {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .option {
            padding: 10px;
            border: 2px solid #ccc;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }
        .option:hover {
            background-color: #007bff;
            color: #fff;
        }
        .feedback {
            margin-top: 20px;
            font-size: 1.1em;
        }
        .next-btn, .restart-btn {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 1em;
            border-radius: 8px;
            cursor: pointer;
            margin-top: 20px;
        }
        .next-btn:hover, .restart-btn:hover {
            background-color: #0056b3;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="quiz-container">
        <div id="question-container" class="question"></div>
        <div id="options-container" class="options"></div>
        <div id="feedback" class="feedback hidden"></div>
        <button id="next-btn" class="next-btn hidden">Prossima Domanda</button>
        <button id="restart-btn" class="restart-btn hidden">Ricomincia il Quiz</button>
    </div>

    <script>
        const quizData = [
            {
                question: "Qual è il colore del cielo in una giornata serena?",
                options: ["Verde", "Blu", "Rosso", "Giallo"],
                correct: 1
            },
            {
                question: "Quanto fa 2 + 2?",
                options: ["3", "4", "5", "6"],
                correct: 1
            },
            {
                question: "Qual è la capitale d'Italia?",
                options: ["Milano", "Roma", "Napoli", "Torino"],
                correct: 1
            },
            {
                question: "Chi ha scritto 'La Divina Commedia'?",
                options: ["Petrarca", "Boccaccio", "Dante Alighieri", "Leopardi"],
                correct: 2
            },
            {
                question: "Qual è il pianeta più vicino al Sole?",
                options: ["Venere", "Terra", "Marte", "Mercurio"],
                correct: 3
            },
            {
                question: "In che anno è iniziata la Seconda Guerra Mondiale?",
                options: ["1914", "1939", "1945", "1929"],
                correct: 1
            },
            {
                question: "Qual è l'elemento chimico con simbolo 'O'?",
                options: ["Oro", "Ossigeno", "Osmio", "Ozono"],
                correct: 1
            },
            {
                question: "Chi ha dipinto la 'Gioconda'?",
                options: ["Michelangelo", "Raffaello", "Leonardo da Vinci", "Caravaggio"],
                correct: 2
            },
            {
                question: "Qual è la montagna più alta del mondo?",
                options: ["K2", "Everest", "Kilimangiaro", "Monte Bianco"],
                correct: 1
            },
            {
                question: "Qual è l'oceano più grande?",
                options: ["Atlantico", "Indiano", "Artico", "Pacifico"],
                correct: 3
            }
        ];

        let currentQuestionIndex = 0;
        let score = 0;

        const questionContainer = document.getElementById('question-container');
        const optionsContainer = document.getElementById('options-container');
        const feedbackContainer = document.getElementById('feedback');
        const nextButton = document.getElementById('next-btn');
        const restartButton = document.getElementById('restart-btn');

        function loadQuestion() {
            clearFeedback();
            const currentQuestion = quizData[currentQuestionIndex];
            questionContainer.textContent = currentQuestion.question;
            optionsContainer.innerHTML = '';
            currentQuestion.options.forEach((option, index) => {
                const button = document.createElement('button');
                button.textContent = option;
                button.classList.add('option');
                button.onclick = () => selectAnswer(index);
                optionsContainer.appendChild(button);
            });
        }

        function selectAnswer(selectedIndex) {
            const correctIndex = quizData[currentQuestionIndex].correct;
            if (selectedIndex === correctIndex) {
                score++;
                showFeedback(true);
            } else {
                showFeedback(false, quizData[currentQuestionIndex].options[correctIndex]);
            }
            if (currentQuestionIndex < quizData.length - 1) {
                nextButton.classList.remove('hidden');
            } else {
                showFinalScore();
            }
        }

        function showFeedback(isCorrect, correctAnswer = '') {
            feedbackContainer.classList.remove('hidden');
            if (isCorrect) {
                feedbackContainer.textContent = 'Risposta corretta!';
                feedbackContainer.style.color = '#4caf50';
            } else {
                feedbackContainer.textContent = `Risposta sbagliata. La risposta corretta è: ${correctAnswer}.`;
                feedbackContainer.style.color = '#f44336';
            }
            optionsContainer.querySelectorAll('.option').forEach(button => {
                button.disabled = true;
            });
        }

        function clearFeedback() {
            feedbackContainer.classList.add('hidden');
            nextButton.classList.add('hidden');
            optionsContainer.querySelectorAll('.option').forEach(button => {
                button.disabled = false;
            });
        }

        function nextQuestion() {
            currentQuestionIndex++;
            if (currentQuestionIndex < quizData.length) {
                loadQuestion();

::contentReference[oaicite:0]{index=0}
::contentReference[oaicite:0]{index=0}