#wm-quiz {
--wm-red:#a81927;
--wm-green:#17623b;
--wm-gold:#e0b64d;
max-width:780px;
margin:24px auto;
background:#fffaf0;
color:#352b22;
border:4px solid var(--wm-gold);
border-radius:22px;
overflow:hidden;
font-family:Arial,Helvetica,sans-serif;
box-shadow:0 10px 28px rgba(0,0,0,.13);
}
#wm-quiz * {box-sizing:border-box}
#wm-quiz .wm-header {
padding:26px 16px;
text-align:center;
color:#fff;
background:linear-gradient(135deg,#17623b,#0b482c);
}
#wm-quiz .wm-decor {font-size:36px}
#wm-quiz .wm-header h2 {
color:#ffe6a3;
font-size:clamp(26px,5vw,39px);
line-height:1.2;
margin:10px 0;
}
#wm-quiz .wm-header p {margin:8px 0;line-height:1.5}
#wm-quiz .wm-main {padding:24px}
#wm-quiz .wm-stats {
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;
color:var(--wm-green);
font-weight:bold;
}
#wm-quiz .wm-track {
height:10px;
margin:15px 0 22px;
background:#e9e1cf;
border-radius:20px;
overflow:hidden;
}
#wm-quiz .wm-bar {
height:100%;
width:0;
background:var(--wm-red);
transition:width .25s;
}
#wm-quiz .wm-label {
display:inline-block;
padding:7px 12px;
border-radius:20px;
background:#f9e8e8;
color:var(--wm-red);
font-size:13px;
font-weight:bold;
}
#wm-quiz .wm-instruction {
text-align:center;
color:#756b5f;
line-height:1.5;
}
#wm-quiz .wm-question {
color:var(--wm-green);
font-size:clamp(24px,5vw,34px);
line-height:1.3;
text-align:center;
margin:20px 0 8px;
overflow-wrap:anywhere;
}
#wm-quiz .wm-answers {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:22px;
}
#wm-quiz .wm-answer {
width:100%;
min-height:62px;
margin:0;
padding:14px 10px;
border:2px solid #deceb0;
border-radius:12px;
background:#fff;
color:#352b22;
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
font-weight:bold;
line-height:1.4;
white-space:normal;
cursor:pointer;
}
#wm-quiz .wm-answer:hover:not(:disabled) {
background:#edf7ef;
border-color:var(--wm-green);
}
#wm-quiz .wm-answer:disabled {cursor:default;opacity:1}
#wm-quiz .wm-answer.wm-correct {
background:#dcf3e1;
border-color:#278448;
color:#15592e;
}
#wm-quiz .wm-answer.wm-wrong {
background:#ffe3e0;
border-color:#c52f2f;
color:#8d2020;
}
#wm-quiz .wm-feedback {
min-height:52px;
padding:15px 2px 3px;
text-align:center;
font-weight:bold;
line-height:1.5;
overflow-wrap:anywhere;
}
#wm-quiz .wm-center {text-align:center}
#wm-quiz .wm-button {
display:inline-block;
margin:8px 3px;
padding:13px 22px;
border:0;
border-radius:10px;
background:var(--wm-red);
color:#fff;
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
font-weight:bold;
line-height:1.4;
cursor:pointer;
}
#wm-quiz .wm-button:hover {filter:brightness(.92)}
#wm-quiz .wm-hidden {display:none!important}
#wm-quiz .wm-result {text-align:center;line-height:1.7}
#wm-quiz .wm-result h3 {
color:var(--wm-green);
font-size:28px;
}
#wm-quiz .wm-big {font-size:54px}
#wm-quiz .wm-words {
margin-top:22px;
padding-top:16px;
border-top:1px solid #e1d5bd;
text-align:left;
}
#wm-quiz .wm-words summary {
color:var(--wm-green);
font-weight:bold;
line-height:1.5;
cursor:pointer;
}
#wm-quiz .wm-words li {
margin:9px 0;
line-height:1.5;
}
@media(max-width:520px) {
#wm-quiz .wm-main {padding:16px}
#wm-quiz .wm-answers {grid-template-columns:1fr}
#wm-quiz .wm-answer {min-height:53px}
}
(function () {
const root = document.getElementById('wm-quiz');
if (!root || root.dataset.wmInitialized === 'yes') return;
root.dataset.wmInitialized = 'yes';
const words = [
{de:'der Weihnachtsmarkt',ro:'târgul de Crăciun'},
{de:'der Glühwein',ro:'vinul fiert cu mirodenii'},
{de:'die Bratwurst',ro:'cârnatul fript'},
{de:'die gebrannten Mandeln',ro:'migdalele caramelizate'},
{de:'die Lichterkette',ro:'instalația luminoasă'},
{de:'der Weihnachtsbaum',ro:'bradul de Crăciun'},
{de:'die Krippe',ro:'ieslea'},
{de:'der Lebkuchen',ro:'turta dulce'},
{de:'das Karussell',ro:'caruselul'},
{de:'der Verkaufsstand',ro:'standul de vânzare'}
];
const find = selector => root.querySelector(selector);
let questions = [];
let current = 0;
let points = 0;
let locked = false;
function shuffle(array) {
const result = array.slice();
for (let i = result.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[result[i], result[j]] = [result[j], result[i]];
}
return result;
}
function startGame() {
questions = shuffle(words);
current = 0;
points = 0;
find('.wm-game').classList.remove('wm-hidden');
find('.wm-result').classList.add('wm-hidden');
renderQuestion();
}
function renderQuestion() {
locked = false;
const item = questions[current];
find('.wm-counter').textContent =
'Întrebarea ' + (current + 1) + ' din ' + questions.length;
find('.wm-score').textContent = 'Scor: ' + points;
find('.wm-bar').style.width =
(current / questions.length * 100) + '%';
find('.wm-question').textContent = item.de;
find('.wm-feedback').textContent = '';
find('.wm-next').classList.add('wm-hidden');
const wrongAnswers = shuffle(
words.filter(word => word.de !== item.de)
).slice(0, 3).map(word => word.ro);
const options = shuffle([item.ro].concat(wrongAnswers));
const answerBox = find('.wm-answers');
answerBox.replaceChildren();
options.forEach(option => {
const button = document.createElement('button');
button.type = 'button';
button.className = 'wm-answer';
button.textContent = option;
button.addEventListener('click', function () {
checkAnswer(button, option, item);
});
answerBox.appendChild(button);
});
}
function checkAnswer(button, choice, item) {
if (locked) return;
locked = true;
Array.from(find('.wm-answers').children).forEach(answer => {
answer.disabled = true;
if (answer.textContent === item.ro) {
answer.classList.add('wm-correct');
}
});
const feedback = find('.wm-feedback');
if (choice === item.ro) {
points++;
feedback.textContent = '✅ Richtig! Foarte bine!';
feedback.style.color = '#17623b';
} else {
button.classList.add('wm-wrong');
feedback.textContent =
'Răspuns corect: ' + item.de + ' = ' + item.ro;
feedback.style.color = '#a81927';
}
find('.wm-score').textContent = 'Scor: ' + points;
find('.wm-bar').style.width =
((current + 1) / questions.length * 100) + '%';
find('.wm-next').textContent =
current === questions.length - 1
? 'Vezi rezultatul 🏆'
: 'Următoarea întrebare →';
find('.wm-next').classList.remove('wm-hidden');
}
function showResult() {
find('.wm-game').classList.add('wm-hidden');
find('.wm-result').classList.remove('wm-hidden');
const percent = Math.round(points / words.length * 100);
find('.wm-big').textContent =
percent >= 80 ? '🏆' : percent >= 50 ? '⭐' : '🎄';
let message;
if (percent >= 80) {
message = 'Fantastisch! Te descurci excelent!';
} else if (percent >= 50) {
message = 'Sehr gut! Mai repetă puțin vocabularul!';
} else {
message = 'Weiter üben! Exersează și joacă din nou!';
}
find('.wm-result-text').textContent =
'Ai obținut ' + points + ' din 10 puncte (' +
percent + '%). ' + message;
const list = find('.wm-word-list');
list.replaceChildren();
words.forEach(word => {
const li = document.createElement('li');
const strong = document.createElement('strong');
strong.textContent = word.de;
li.appendChild(strong);
li.appendChild(document.createTextNode(' — ' + word.ro));
list.appendChild(li);
});
}
find('.wm-next').addEventListener('click', function () {
current++;
if (current < questions.length) {
renderQuestion();
} else {
showResult();
}
});
find('.wm-restart').addEventListener('click', startGame);
startGame();
})();
🎄 ⭐ 🎁 ✨ 🎄
Quiz: Weihnachtsmarkt
10 cuvinte de la târgul de Crăciun
Germană – Română
Frohe Weihnachten! Ești pregătit?
Întrebarea 1 din 10
Scor: 0
🎁 Vocabular de Crăciun
der Weihnachtsmarkt
Alege traducerea corectă în limba română!
🏆