#oktoberfest-quiz {
max-width: 760px;
margin: 25px auto;
color: #192d49;
font-family: Arial, Helvetica, sans-serif;
background: #fffdf5;
border: 4px solid #e0b43f;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,.13);
}
#oktoberfest-quiz * { box-sizing: border-box; }
#oktoberfest-quiz .oq-header {
text-align: center;
padding: 25px 18px;
color: white;
background: linear-gradient(135deg,#0754a5,#123675);
}
#oktoberfest-quiz .oq-decor { font-size: 35px; }
#oktoberfest-quiz h2 {
color: #0754a5;
font-size: clamp(24px,4vw,33px);
margin: 22px 0 10px;
}
#oktoberfest-quiz .oq-header h2 {
color: #fff;
font-size: clamp(27px,5vw,39px);
margin: 10px 0;
}
#oktoberfest-quiz .oq-header p { margin: 8px 0 0; }
#oktoberfest-quiz .oq-main { padding: 24px; }
#oktoberfest-quiz .oq-stats {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
font-weight: bold;
color: #0754a5;
}
#oktoberfest-quiz .oq-track {
height: 10px;
border-radius: 20px;
overflow: hidden;
background: #e5eaf1;
margin: 14px 0 22px;
}
#oktoberfest-quiz .oq-bar {
height: 100%;
width: 0;
background: #e1aa16;
transition: width .25s;
}
#oktoberfest-quiz .oq-instruction {
text-align: center;
color: #58677a;
line-height: 1.5;
}
#oktoberfest-quiz .oq-question { text-align: center; }
#oktoberfest-quiz .oq-answers {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 12px;
margin-top: 20px;
}
#oktoberfest-quiz .oq-answer {
width: 100%;
min-height: 60px;
padding: 13px 10px;
border: 2px solid #cbd9e9;
border-radius: 12px;
color: #192d49;
background: #fff;
font-size: 16px;
font-weight: bold;
line-height: 1.4;
cursor: pointer;
white-space: normal;
}
#oktoberfest-quiz .oq-answer:hover:not(:disabled) {
background: #eaf4ff;
border-color: #0754a5;
}
#oktoberfest-quiz .oq-answer:disabled { cursor: default; }
#oktoberfest-quiz .oq-answer.oq-correct {
background: #dff4e4;
border-color: #258345;
color: #14572b;
}
#oktoberfest-quiz .oq-answer.oq-wrong {
background: #ffe3e0;
border-color: #c52e2e;
color: #922222;
}
#oktoberfest-quiz .oq-feedback {
min-height: 50px;
padding: 15px 2px 3px;
font-weight: bold;
line-height: 1.5;
text-align: center;
}
#oktoberfest-quiz .oq-button {
display: inline-block;
padding: 13px 22px;
margin: 8px 4px;
border: 0;
border-radius: 10px;
color: #fff;
background: #bd2633;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
#oktoberfest-quiz .oq-button:hover { filter: brightness(.92); }
#oktoberfest-quiz .oq-center { text-align: center; }
#oktoberfest-quiz .oq-hidden { display: none !important; }
#oktoberfest-quiz .oq-result { text-align: center; line-height: 1.7; }
#oktoberfest-quiz .oq-big { font-size: 53px; }
#oktoberfest-quiz .oq-words {
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid #ddd5c1;
text-align: left;
}
#oktoberfest-quiz .oq-words summary {
color: #0754a5;
font-weight: bold;
cursor: pointer;
}
#oktoberfest-quiz .oq-words li { margin: 9px 0; line-height: 1.5; }
@media(max-width:520px) {
#oktoberfest-quiz .oq-main { padding: 16px; }
#oktoberfest-quiz .oq-answers { grid-template-columns: 1fr; }
#oktoberfest-quiz .oq-answer { min-height: 52px; }
}
(function () {
const root = document.getElementById('oktoberfest-quiz');
if (!root || root.dataset.initialized === 'yes') return;
root.dataset.initialized = 'yes';
const words = [
{ de: 'das Oktoberfest', ro: 'festivalul Oktoberfest' },
{ de: 'das Dirndl', ro: 'portul tradițional feminin bavarez' },
{ de: 'die Lederhose', ro: 'pantalonii tradiționali din piele' },
{ de: 'die Brezel', ro: 'covrigul bavarez' },
{ de: 'das Lebkuchenherz', ro: 'inima din turtă dulce' },
{ de: 'das Festzelt', ro: 'cortul festivalului' },
{ de: 'das Riesenrad', ro: 'roata panoramică' },
{ de: 'das Karussell', ro: 'caruselul' },
{ de: 'die Blasmusik', ro: 'muzica interpretată la instrumente de suflat' },
{ de: 'der Umzug', ro: 'parada' }
];
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('.oq-game').classList.remove('oq-hidden');
find('.oq-result').classList.add('oq-hidden');
renderQuestion();
}
function renderQuestion() {
locked = false;
const item = questions[current];
find('.oq-counter').textContent =
'Întrebarea ' + (current + 1) + ' din ' + questions.length;
find('.oq-score').textContent = 'Scor: ' + points;
find('.oq-bar').style.width =
(current / questions.length * 100) + '%';
find('.oq-question').textContent = item.de;
find('.oq-feedback').textContent = '';
find('.oq-next').classList.add('oq-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('.oq-answers');
answerBox.replaceChildren();
options.forEach(option => {
const button = document.createElement('button');
button.type = 'button';
button.className = 'oq-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('.oq-answers').children).forEach(answer => {
answer.disabled = true;
if (answer.textContent === item.ro) {
answer.classList.add('oq-correct');
}
});
const feedback = find('.oq-feedback');
if (choice === item.ro) {
points++;
feedback.textContent = '✅ Richtig! Foarte bine!';
feedback.style.color = '#176039';
} else {
button.classList.add('oq-wrong');
feedback.textContent =
'Răspuns corect: ' + item.de + ' = ' + item.ro;
feedback.style.color = '#b51d2a';
}
find('.oq-score').textContent = 'Scor: ' + points;
find('.oq-bar').style.width =
((current + 1) / questions.length * 100) + '%';
find('.oq-next').textContent =
current === questions.length - 1
? 'Vezi rezultatul 🏆'
: 'Următoarea întrebare →';
find('.oq-next').classList.remove('oq-hidden');
}
function showResult() {
find('.oq-game').classList.add('oq-hidden');
find('.oq-result').classList.remove('oq-hidden');
const percent = Math.round(points / words.length * 100);
find('.oq-big').textContent =
percent >= 80 ? '🏆' : percent >= 50 ? '⭐' : '🥨';
const message =
percent >= 80
? 'Fantastisch! Te descurci excelent!'
: percent >= 50
? 'Sehr gut! Mai repetă puțin vocabularul!'
: 'Weiter üben! Exersează și încearcă din nou!';
find('.oq-result-text').textContent =
'Ai obținut ' + points + ' din 10 puncte (' +
percent + '%). ' + message;
const list = find('.oq-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('.oq-next').addEventListener('click', function () {
current++;
if (current < questions.length) {
renderQuestion();
} else {
showResult();
}
});
find('.oq-restart').addEventListener('click', startGame);
startGame();
})();
🥨 🎡 🎶 🏵️
Quiz: Oktoberfest
10 cuvinte în germană cu traducere în română
Servus! Ești pregătit pentru provocare?
Întrebarea 1 din 10
Scor: 0
Alege traducerea corectă în limba română!
das Oktoberfest
🏆