<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Missione Italiano con Bogdan 🇮🇹✨</title>
<style>
body {
font-family: "Poppins", sans-serif;
background: linear-gradient(135deg, #fff5e6, #d6eaf8);
color: #222;
text-align: center;
padding: 20px;
}
h1 {
color: #1e8449;
text-shadow: 2px 2px 4px #aed6f1;
}
.quiz-container {
max-width: 600px;
margin: auto;
background: white;
border-radius: 15px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
padding: 20px;
}
.question {
font-size: 1.3em;
margin-bottom: 15px;
}
.answers button {
display: block;
width: 100%;
margin: 8px 0;
padding: 10px;
border-radius: 8px;
border: 2px solid #1e8449;
background-color: #ebf5fb;
cursor: pointer;
transition: 0.3s;
}
.answers button:hover {
background-color: #d4efdf;
}
.hidden {display:none;}
#result {
font-size: 1.4em;
margin-top: 20px;
color: #1e8449;
}
#next-btn {
margin-top: 15px;
padding: 10px 20px;
background-color: #1e8449;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
}
.flag {
font-size: 2em;
}
</style>
</head>
<body>
<h1>🇮🇹 Missione Italiano con Bogdan ✨</h1>
<div class="quiz-container">
<div id="quiz"></div>
<button id="next-btn" class="hidden">Prossima domanda ➡️</button>
<div id="result" class="hidden"></div>
</div>
<script>
const questions = [
{q:"Come ti chiami?", a:["Io mi chiamo Marco.","Tu sei Marco.","Lui è Marco."], correct:0},
{q:"Che cosa è questo? (📖)", a:["È un libro.","È una sedia.","È una finestra."], correct:0},
{q:"Traduci: Io sono Bogdan.", a:["I am Bogdan.","You are Bogdan.","He is Bogdan."], correct:0},
{q:"Qual è il numero 'cinque'?", a:["3","5","8"], correct:1},
{q:"Come si dice 'stolica' in italiano?", a:["Libro","Finestra","Sedia"], correct:2},
{q:"Qual è la traduzione di 'sette'?", a:["6","7","8"], correct:1},
{q:"Io ___ uno studente.", a:["sei","sono","è"], correct:1},
{q:"Tu ___ simpatico.", a:["sono","è","sei"], correct:2},
{q:"Lui ___ un ragazzo.", a:["è","sei","sono"], correct:0},
{q:"Noi ___ amici.", a:["siete","siamo","sono"], correct:1},
{q:"Voi ___ bravi.", a:["siete","è","sono"], correct:0},
{q:"Loro ___ bambini.", a:["siete","è","sono"], correct:2},
{q:"Che cosa è questo? (🪟)", a:["È una finestra.","È una sedia.","È un libro."], correct:0},
{q:"Completa: Io mi ___.", a:["chiami","chiama","chiamo"], correct:2},
{q:"Come si dice 'devet'?", a:["otto","nove","dieci"], correct:1}
];
let shuffled = questions.sort(()=>0.5-Math.random());
let current = 0;
let score = 0;
const quizDiv = document.getElementById("quiz");
const nextBtn = document.getElementById("next-btn");
const resultDiv = document.getElementById("result");
function showQuestion() {
const q = shuffled[current];
quizDiv.innerHTML = `
<div class="question">${current+1}. ${q.q}</div>
<div class="answers">
${q.a.map((ans,i)=>`<button onclick="checkAnswer(${i})">${ans}</button>`).join("")}
</div>
`;
}
function checkAnswer(index) {
const q = shuffled[current];
const buttons = document.querySelectorAll(".answers button");
buttons.forEach((b,i)=>{
b.disabled = true;
if(i===q.correct) b.style.backgroundColor="#82e0aa";
else if(i===index) b.style.backgroundColor="#f5b7b1";
});
if(index===q.correct) score++;
nextBtn.classList.remove("hidden");
}
nextBtn.addEventListener("click", ()=>{
current++;
if(current < shuffled.length) {
showQuestion();
nextBtn.classList.add("hidden");
} else {
showResult();
}
});
function showResult(){
quizDiv.innerHTML = "";
nextBtn.classList.add("hidden");
resultDiv.classList.remove("hidden");
resultDiv.innerHTML = `
🎉 <b>Bravo, hai vinto la missione!</b><br>
🏆 Hai completato la missione con ${score} punti su 15! 🇮🇹
`;
}
showQuestion();
</script>
</body>
</html>