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}
