#dz-restaurant-quiz { font-family: Arial, sans-serif; max-width: 760px; margin: 20px auto; color: #172554; background: #fffaf0; border: 3px solid #f4c542; border-radius: 20px; overflow: hidden; box-shadow: 0 5px 18px #00000012; } #dz-restaurant-quiz * { box-sizing: border-box; } #dz-restaurant-quiz .dz-head { background: #102d63; color: white; text-align: center; padding: 24px 15px; } #dz-restaurant-quiz .dz-head h2 { color: white; margin: 0 0 8px; font-size: 29px; } #dz-restaurant-quiz .dz-head p { margin: 5px 0; } #dz-restaurant-quiz .dz-body { padding: 22px; } #dz-restaurant-quiz .dz-progress { height: 10px; background: #e5e7eb; border-radius: 20px; overflow: hidden; margin: 12px 0 20px; } #dz-restaurant-quiz .dz-bar { height: 100%; width: 0%; background: #eab308; transition: width .3s; } #dz-restaurant-quiz .dz-meta { display: flex; justify-content: space-between; gap: 10px; font-weight: bold; font-size: 14px; } #dz-restaurant-quiz .dz-question { font-size: 23px; line-height: 1.4; margin: 18px 0; color: #102d63; } #dz-restaurant-quiz .dz-hint { color: #475569; font-size: 15px; margin-bottom: 16px; } #dz-restaurant-quiz .dz-option { display: block; width: 100%; text-align: left; background: white; border: 2px solid #dbe3ef; border-radius: 12px; padding: 14px; margin: 10px 0; cursor: pointer; color: #172554; font-size: 17px; line-height: 1.4; transition: background .15s, border-color .15s; } #dz-restaurant-quiz .dz-option:hover { border-color: #2563eb; background: #eff6ff; } #dz-restaurant-quiz .dz-option:disabled { cursor: default; } #dz-restaurant-quiz .dz-option.dz-correct { background: #dcfce7; border-color: #16a34a; } #dz-restaurant-quiz .dz-option.dz-wrong { background: #fee2e2; border-color: #dc2626; } #dz-restaurant-quiz .dz-feedback { display: none; padding: 15px; border-radius: 12px; margin-top: 16px; line-height: 1.6; } #dz-restaurant-quiz .dz-feedback.dz-show { display: block; } #dz-restaurant-quiz .dz-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } #dz-restaurant-quiz .dz-btn { background: #102d63; color: white; border: none; padding: 13px 20px; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; } #dz-restaurant-quiz .dz-btn:hover { background: #1d4ed8; } #dz-restaurant-quiz .dz-btn:focus-visible, #dz-restaurant-quiz .dz-option:focus-visible { outline: 3px solid #eab308; outline-offset: 3px; } #dz-restaurant-quiz .dz-btn:disabled { opacity: .5; cursor: default; } #dz-restaurant-quiz .dz-result { display: none; text-align: center; padding: 20px 5px; } #dz-restaurant-quiz .dz-result h3 { font-size: 28px; color: #102d63; } #dz-restaurant-quiz .dz-score { font-size: 42px; font-weight: bold; color: #15803d; } #dz-restaurant-quiz .dz-footer { background: #fef3c7; text-align: center; padding: 15px; font-weight: bold; color: #102d63; } @media(max-width:480px) { #dz-restaurant-quiz .dz-body { padding: 15px; } #dz-restaurant-quiz .dz-question { font-size: 20px; } #dz-restaurant-quiz .dz-option { font-size: 16px; } } (function () { const root = document.getElementById('dz-restaurant-quiz'); if (!root || root.dataset.started === 'yes') return; root.dataset.started = 'yes'; const questions = [ { q: '1. Was bedeutet „die Speisekarte“?', hint: 'Vocabular – Alege traducerea.', a: ['Nota de plată', 'Meniul', 'Bucătăria'], c: 1, de: 'die Speisekarte', ro: 'meniul' }, { q: '2. Was bedeutet „der Kellner“?', hint: 'Vocabular – Cine servește la masă?', a: ['Bucătarul', 'Clientul', 'Chelnerul'], c: 2, de: 'der Kellner', ro: 'chelnerul' }, { q: '3. Was bedeutet „die Rechnung“?', hint: 'Vocabular – Ce cerem la final?', a: ['Nota de plată', 'Rezervarea', 'Desertul'], c: 0, de: 'die Rechnung', ro: 'nota de plată' }, { q: '4. Was bedeutet „das Getränk“?', hint: 'Vocabular – Ce putem bea?', a: ['Mâncarea', 'Băutura', 'Farfuria'], c: 1, de: 'das Getränk', ro: 'băutura' }, { q: '5. Was bedeutet „die Vorspeise“?', hint: 'Vocabular – Primul fel de mâncare.', a: ['Desertul', 'Felul principal', 'Aperitivul'], c: 2, de: 'die Vorspeise', ro: 'aperitivul' }, { q: '6. „Einen Tisch für zwei, bitte!“', hint: 'Dialog – Ce solicită clientul?', a: ['O masă pentru două persoane, vă rog!', 'Două cafele, vă rog!', 'Nota, vă rog!'], c: 0, de: 'Einen Tisch für zwei, bitte!', ro: 'O masă pentru două persoane, vă rog!' }, { q: '7. „Haben Sie einen Tisch reserviert?“', hint: 'Dialog – Întrebarea chelnerului.', a: ['Doriți un desert?', 'Aveți o rezervare la masă?', 'Ce doriți să beți?'], c: 1, de: 'Haben Sie einen Tisch reserviert?', ro: 'Aveți o rezervare la masă?' }, { q: '8. „Ich hätte gern die Speisekarte.“', hint: 'Dialog – Clientul cere ceva politicos.', a: ['Aș dori meniul.', 'Aș dori nota.', 'Aș dori o masă.'], c: 0, de: 'Ich hätte gern die Speisekarte.', ro: 'Aș dori meniul.' }, { q: '9. „Was möchten Sie trinken?“', hint: 'Dialog – Chelnerul întreabă despre băuturi.', a: ['Ce doriți să mâncați?', 'Doriți desert?', 'Ce doriți să beți?'], c: 2, de: 'Was möchten Sie trinken?', ro: 'Ce doriți să beți?' }, { q: '10. „Ein Wasser, bitte.“', hint: 'Dialog – Comandă o băutură.', a: ['O apă, vă rog.', 'O cafea, vă rog.', 'O supă, vă rog.'], c: 0, de: 'Ein Wasser, bitte.', ro: 'O apă, vă rog.' }, { q: '11. „Was empfehlen Sie?“', hint: 'Dialog – Cere o recomandare.', a: ['Cât costă?', 'Ce recomandați?', 'Unde este toaleta?'], c: 1, de: 'Was empfehlen Sie?', ro: 'Ce recomandați?' }, { q: '12. „Ich nehme das Hähnchen mit Gemüse.“', hint: 'Dialog – Clientul comandă mâncare.', a: ['Aș dori pește cu orez.', 'Aș dori o supă.', 'Voi lua pui cu legume.'], c: 2, de: 'Ich nehme das Hähnchen mit Gemüse.', ro: 'Voi lua pui cu legume.' }, { q: '13. „Ohne Zwiebeln, bitte.“', hint: 'Dialog – O cerință specială la comandă.', a: ['Fără ceapă, vă rog.', 'Cu ceapă, vă rog.', 'Fără sare, vă rog.'], c: 0, de: 'Ohne Zwiebeln, bitte.', ro: 'Fără ceapă, vă rog.' }, { q: '14. „Das Essen schmeckt sehr gut!“', hint: 'Dialog – Clientul apreciază mâncarea.', a: ['Mâncarea este rece.', 'Mâncarea este foarte gustoasă!', 'Mâncarea este scumpă.'], c: 1, de: 'Das Essen schmeckt sehr gut!', ro: 'Mâncarea este foarte gustoasă!' }, { q: '15. „Kann ich die Rechnung haben?“', hint: 'Dialog – Clientul dorește să plătească.', a: ['Pot primi meniul?', 'Pot comanda un desert?', 'Pot primi nota de plată?'], c: 2, de: 'Kann ich die Rechnung haben?', ro: 'Pot primi nota de plată?' }, { q: '16. „Zusammen oder getrennt?“', hint: 'Dialog – Chelnerul întreabă cum plătiți.', a: ['Împreună sau separat?', 'Apă plată sau minerală?', 'Aici sau la pachet?'], c: 0, de: 'Zusammen oder getrennt?', ro: 'Împreună sau separat?' }, { q: '17. „Wir möchten getrennt bezahlen.“', hint: 'Dialog – Doi clienți plătesc separat.', a: ['Dorim să comandăm împreună.', 'Dorim să plătim separat.', 'Dorim două meniuri.'], c: 1, de: 'Wir möchten getrennt bezahlen.', ro: 'Dorim să plătim separat.' }, { q: '18. „Kann ich mit Karte bezahlen?“', hint: 'Dialog – Clientul întreabă despre plata cu cardul.', a: ['Pot rezerva o masă?', 'Pot plăti în numerar?', 'Pot plăti cu cardul?'], c: 2, de: 'Kann ich mit Karte bezahlen?', ro: 'Pot plăti cu cardul?' }, { q: '19. „Das macht 25 Euro.“', hint: 'Dialog – Chelnerul spune suma de plată.', a: ['Costă 25 de euro.', 'Masa este la ora 25.', 'Sunt 25 de persoane.'], c: 0, de: 'Das macht 25 Euro.', ro: 'Costă 25 de euro.' }, { q: '20. „Vielen Dank! Auf Wiedersehen!“', hint: 'Dialog – Clientul își ia rămas-bun.', a: ['Poftă bună! La revedere!', 'Mulțumesc mult! La revedere!', 'Bună dimineața!'], c: 1, de: 'Vielen Dank! Auf Wiedersehen!', ro: 'Mulțumesc mult! La revedere!' } ]; let index = 0; let score = 0; let answered = false; const $ = id => root.querySelector('#' + id); const count = $('dz-count'); const points = $('dz-points'); const bar = $('dz-bar'); const hint = $('dz-hint'); const question = $('dz-question'); const options = $('dz-options'); const feedback = $('dz-feedback'); const next = $('dz-next'); const game = $('dz-game'); const result = $('dz-result'); function render() { answered = false; const item = questions[index]; count.textContent = 'Întrebarea ' + (index + 1) + ' din ' + questions.length; points.textContent = 'Puncte: ' + score; bar.style.width = (index / questions.length * 100) + '%'; hint.textContent = item.hint; question.textContent = item.q; options.innerHTML = ''; feedback.className = 'dz-feedback'; feedback.textContent = ''; next.disabled = true; next.textContent = index === questions.length - 1 ? 'Vezi rezultatul →' : 'Următoarea →'; item.a.forEach((answer, i) => { const btn = document.createElement('button'); btn.type = 'button'; btn.className = 'dz-option'; btn.textContent = String.fromCharCode(65 + i) + '. ' + answer; btn.addEventListener('click', () => choose(i)); options.appendChild(btn); }); } function choose(choice) { if (answered) return; answered = true; const item = questions[index]; const buttons = options.querySelectorAll('button'); buttons.forEach((btn, i) => { btn.disabled = true; if (i === item.c) btn.classList.add('dz-correct'); if (i === choice && choice !== item.c) btn.classList.add('dz-wrong'); }); if (choice === item.c) { score++; feedback.style.background = '#dcfce7'; feedback.style.color = '#166534'; feedback.innerHTML = '✓ Richtig! Corect!
Foarte bine! Ai ales răspunsul corect.'; } else { feedback.style.background = '#fee2e2'; feedback.style.color = '#991b1b'; feedback.innerHTML = '✗ Nicht ganz! Nu chiar!
Răspuns corect: ' + String.fromCharCode(65 + item.c) + '. ' + item.a[item.c]; } const translation = document.createElement('p'); const de = document.createElement('strong'); de.textContent = 'Germană: '; translation.appendChild(de); translation.appendChild(document.createTextNode(item.de)); translation.appendChild(document.createElement('br')); const ro = document.createElement('strong'); ro.textContent = 'Română: '; translation.appendChild(ro); translation.appendChild(document.createTextNode(item.ro)); feedback.appendChild(translation); feedback.classList.add('dz-show'); points.textContent = 'Puncte: ' + score; next.disabled = false; } function finish() { game.style.display = 'none'; result.style.display = 'block'; count.textContent = 'Quiz finalizat!'; points.textContent = 'Puncte: ' + score; bar.style.width = '100%'; $('dz-final-score').textContent = score + '/20'; $('dz-percent').textContent = 'Rezultat: ' + (score * 5) + '%'; let message; if (score === 20) message = 'Fantastisch! Ai răspuns corect la toate întrebările! 🥇'; else if (score >= 15) message = 'Sehr gut! Te descurci foarte bine! 🌟'; else if (score >= 10) message = 'Gut gemacht! Mai exersează și vei progresa! 👏'; else message = 'Weiter üben! Continuă să exersezi vocabularul german! 📚'; $('dz-message').textContent = message; } next.addEventListener('click', () => { if (!answered) return; if (index { index = 0; score = 0; game.style.display = 'block'; result.style.display = 'none'; render(); }); render(); })();