#herbst-quiz {
max-width: 560px;
margin: auto;
padding: 20px;
border-radius: 18px;
background: #fff7e9;
color: #49301f;
font-family: Arial, sans-serif;
text-align: center;
box-sizing: border-box;
}
#herbst-quiz * { box-sizing: border-box; }
#herbst-quiz h2 { color: #a94e19; margin: 5px 0 8px; }
#herbst-quiz .subtitle { margin-bottom: 18px; }
#herbst-quiz .mascot { font-size: 48px; }
#herbst-quiz .progress { margin: 12px 0; font-weight: bold; }
#herbst-quiz .word {
font-size: 29px;
font-weight: bold;
margin: 22px 0;
color: #8b431b;
}
#herbst-quiz .answers {
display: grid;
gap: 10px;
}
#herbst-quiz button {
width: 100%;
padding: 13px 10px;
border: 2px solid #e2b887;
border-radius: 12px;
background: white;
color: #49301f;
font-size: 17px;
cursor: pointer;
}
#herbst-quiz button:disabled { cursor: default; opacity: 1; }
#herbst-quiz button.correct {
background: #d9efd7;
border-color: #4e914a;
}
#herbst-quiz button.wrong {
background: #ffe0d6;
border-color: #cc654c;
}
#herbst-quiz .feedback {
min-height: 48px;
margin: 14px 0;
font-weight: bold;
font-size: 17px;
}
#herbst-quiz .next {
background: #a94e19;
color: white;
border-color: #a94e19;
margin-top: 8px;
}
#herbst-quiz .restart {
background: #f1d3a8;
margin-top: 10px;
}
Iggy der Igel
Deutsch mit Spaß!
Herbst – Învățăm cuvinte despre toamnă
(function () {
const root = document.getElementById("herbst-quiz");
if (root.dataset.started) return;
root.dataset.started = "yes";
const words = [
{de:"der Herbst", ro:"toamna"},
{de:"das Blatt", ro:"frunza"},
{de:"der Baum", ro:"copacul"},
{de:"der Regen", ro:"ploaia"},
{de:"der Wind", ro:"vântul"},
{de:"die Wolke", ro:"norul"},
{de:"der Nebel", ro:"ceața"},
{de:"die Kastanie", ro:"castana"},
{de:"die Eichel", ro:"ghinda"},
{de:"der Kürbis", ro:"dovleacul"},
{de:"der Apfel", ro:"mărul"},
{de:"die Birne", ro:"para"},
{de:"die Traube", ro:"strugurele"},
{de:"die Jacke", ro:"geaca"},
{de:"der Schal", ro:"fularul"}
];
let order = [];
let current = 0;
let score = 0;
let answered = false;
const progress = root.querySelector("#herbst-progress");
const word = root.querySelector("#herbst-word");
const answers = root.querySelector("#herbst-answers");
const feedback = root.querySelector("#herbst-feedback");
const next = root.querySelector("#herbst-next");
const result = root.querySelector("#herbst-result");
function shuffle(list) {
return list.slice().sort(() => Math.random() - 0.5);
}
function start() {
order = shuffle(words);
current = 0;
score = 0;
result.innerHTML = "";
next.hidden = true;
showQuestion();
}
function showQuestion() {
answered = false;
const item = order[current];
progress.textContent = "Cuvântul " + (current + 1) + " din " + order.length;
word.textContent = item.de;
feedback.textContent = "";
answers.innerHTML = "";
next.hidden = true;
const wrongOptions = shuffle(
words.filter(w => w.ro !== item.ro)
).slice(0, 3).map(w => w.ro);
const options = shuffle([item.ro, ...wrongOptions]);
options.forEach(option => {
const button = document.createElement("button");
button.type = "button";
button.textContent = option;
button.addEventListener("click", function () {
if (answered) return;
answered = true;
Array.from(answers.children).forEach(b => {
b.disabled = true;
if (b.textContent === item.ro) b.classList.add("correct");
});
if (option === item.ro) {
score++;
feedback.textContent = "Richtig! Răspuns corect!";
} else {
button.classList.add("wrong");
feedback.textContent = "Nu chiar. " + item.de + " înseamnă " + item.ro + ".";
}
next.textContent = current === order.length - 1
? "Vezi rezultatul" : "Următorul cuvânt";
next.hidden = false;
});
answers.appendChild(button);
});
}
next.addEventListener("click", function () {
if (current < order.length - 1) {
current++;
showQuestion();
} else {
progress.textContent = "Joc terminat!";
word.textContent = "Deutsch mit Spaß!";
answers.innerHTML = "";
feedback.textContent = "Ai răspuns corect la " + score + " din " + order.length + " cuvinte.";
next.hidden = true;
const restart = document.createElement("button");
restart.type = "button";
restart.className = "restart";
restart.textContent = "Joacă din nou";
restart.addEventListener("click", start);
result.innerHTML = "";
result.appendChild(restart);
}
});
start();
})();