Company Party \u2013 Resolution Test<\/title>\n\n<style>\n :root{\n --quiz-bg: #DFE3E4C9;\n --quiz-text: #2F3C47;\n --quiz-font-size: 18px;\n\n --sage: #9caf88;\n --start-btn-bg: #eef5ec;\n --start-btn-bg-hover:#e3ecd5;\n\n --outro-btn-bg:#2F3C47;\n --outro-btn-bg-hover:#24303a;\n }\n\n html{ scroll-behavior:smooth; }\n\n .start-screen {\n text-align: center;\n max-width: 1300px;\n margin: 1rem auto;\n }\n .start-button-wrapper{\n display:flex;\n justify-content:center;\n margin-top: 1.8rem;\n }\n .start-button {\n padding: 1.05rem 2rem;\n border-radius: 16px;\n border: 1px solid #cfd8cc;\n background: var(--start-btn-bg);\n color: var(--quiz-text);\n cursor: pointer;\n font-size: 1.4rem;\n font-weight: 700;\n transition: background 0.2s ease, transform 0.1s ease;\n }\n .start-button:hover {\n background: var(--start-btn-bg-hover);\n transform: translateY(-1px);\n }\n\n .quiz-box {\n max-width: 13000px;\n margin: 1rem auto;\n padding: 1rem 1.25rem;\n border: 1px solid #2F3C47;\n border-radius: 14px;\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n background: var(--quiz-bg);\n color: var(--quiz-text);\n font-size: var(--quiz-font-size);\n }\n .quiz-title {\n margin: 0 0 0.5rem 0;\n font-size: 1.4rem;\n font-weight: 700;\n }\n\n .quiz-progress {\n margin: 0.5rem 0 1rem 0;\n font-size: 0.95rem;\n }\n .quiz-progress .bar {\n height: 8px;\n background: #eee;\n border-radius: 999px;\n overflow: hidden;\n }\n .quiz-progress .bar-fill {\n height: 100%;\n background: var(--sage);\n transition: width 0.25s ease;\n width: 10%;\n }\n\n fieldset { border: 0; padding: 0; margin: 0; }\n legend {\n font-weight: 700;\n margin-bottom: 0.5rem;\n font-size: 1.1rem;\n }\n label {\n display: block;\n padding: 0.55rem 0.65rem;\n border: 1px solid #ddd;\n border-radius: 12px;\n margin: 0.45rem 0;\n cursor: pointer;\n transition: background-color 0.2s;\n }\n label:hover { background: #f3f4f6; }\n input[type=\"radio\"],\n input[type=\"checkbox\"] { margin-right: 0.6rem; }\n\n .quiz-actions {\n display: flex;\n gap: 0.5rem;\n margin-top: 1rem;\n }\n button {\n padding: 0.65rem 1rem;\n border-radius: 12px;\n border: 1px solid #ccc;\n background: #f7f7f7;\n cursor: pointer;\n font-size: 1rem;\n }\n button[disabled] { opacity: 0.55; cursor: not-allowed; }\n #btnRestart {\n background: var(--start-btn-bg);\n border-color: #b8d7b0;\n }\n\n .quiz-result {\n margin-top: 1rem;\n padding: 1rem;\n border: 1px solid #e5e5e5;\n border-radius: 12px;\n background: #fafafa;\n }\n .quiz-result ul {\n margin-top: 0.6rem;\n padding-left: 1.2rem;\n }\n .quiz-result li { margin-bottom: 0.9rem; }\n\n .answer-correct {\n background: #ecfdf5;\n border-left: 4px solid #22c55e;\n padding: 0.45rem 0.65rem;\n border-radius: 10px;\n margin-top: 0.35rem;\n }\n .answer-wrong {\n background: #fef2f2;\n border-left: 4px solid #ef4444;\n padding: 0.45rem 0.65rem;\n border-radius: 10px;\n margin-top: 0.35rem;\n }\n\n .result-cta{\n margin-top: 1.5rem;\n display:flex;\n justify-content:center;\n }\n .result-button{\n display:inline-block;\n padding: 0.8rem 1.6rem;\n border-radius: 14px;\n background: var(--outro-btn-bg);\n color:#fff;\n text-decoration:none;\n font-weight:700;\n transition: background-color 0.2s ease, transform 0.1s ease;\n }\n .result-button:hover{\n background: var(--outro-btn-bg-hover);\n transform: translateY(-1px);\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div id=\"quizApp\">\n \n <div id=\"startScreen\" class=\"start-screen\">\n <div class=\"start-button-wrapper\">\n <button id=\"btnStart\" class=\"start-button\">Go to the Resolution Test<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz\" class=\"quiz-box\" lang=\"en\" hidden>\n <h2 class=\"quiz-title\">\n Now it\u2019s time to focus and solve the case.<br>\n MAGNIFICUM wishes you the best of luck!\n <\/h2>\n\n <div class=\"quiz-progress\" aria-live=\"polite\">\n <span id=\"progressText\">Question 1 of 4<\/span>\n <div class=\"bar\">\n <div class=\"bar-fill\" id=\"progressBar\"><\/div>\n <\/div>\n <\/div>\n\n <form id=\"quizForm\">\n \n <fieldset class=\"quiz-step\" data-step=\"1\" hidden>\n <legend>1) Who tried to kill Agneta Hellwig? <small>(you may select multiple people)<\/small><\/legend>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Johannes Beckmann\"> Johannes Beckmann<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Niculai Barnica\"> Niculai Barnica<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Silvan Rothe\"> Silvan Rothe<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Tamara Barnica\"> Tamara Barnica<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Mayari Schumann\"> Mayari Schumann<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Constanze Bender-Beckman\"> Constanze Bender-Beckman<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Annouka Satorius\"> Annouka Satorius<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Chrisander M\u00e4kel\u00e4\"> Chrisander M\u00e4kel\u00e4<\/label>\n <\/fieldset>\n\n \n <fieldset class=\"quiz-step\" data-step=\"2\" hidden>\n <legend>2) Which of the seven guests saved the old lady\u2019s life?<\/legend>\n <label><input type=\"radio\" name=\"q2\" value=\"wrong\"> Niculai Barnica<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"wrong\"> Tamara Barnica<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"wrong\"> Constanze Bender-Beckman<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"wrong\"> Johannes Beckmann<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"wrong\"> Mayari Schumann<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"correct\"> Silvan Rothe<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"wrong\"> Chrisander M\u00e4kel\u00e4<\/label>\n <\/fieldset>\n\n \n <fieldset class=\"quiz-step\" data-step=\"3\" hidden>\n <legend>3) How was the poison given to the hostess?<\/legend>\n <label><input type=\"radio\" name=\"q3\" value=\"wrong\"> Through a mouth spray that had been smuggled into her handbag<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"wrong\"> Through the sauce on her plate during the main course<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"wrong\"> Through a few poisoned peanuts<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"correct\"> Through her water glass for the performance<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"wrong\"> Through a poisoned wine glass during the appetizer<\/label>\n <\/fieldset>\n\n \n <fieldset class=\"quiz-step\" data-step=\"4\" hidden>\n <legend>4) Who owns the phone found at the crime scene?<\/legend>\n <label><input type=\"radio\" name=\"q4\" value=\"wrong\"> Constanze Bender-Beckman<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"wrong\"> Agneta Hellwig<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"wrong\"> Mayari Schumann<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"wrong\"> Tamara Barnica<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"correct\"> Annouka Satorius<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"wrong\"> Niculai Barnica<\/label>\n <\/fieldset>\n <\/form>\n\n <div class=\"quiz-actions\">\n <button type=\"button\" id=\"btnNext\" disabled>Next<\/button>\n <button type=\"button\" id=\"btnRestart\" hidden>Play again<\/button>\n <\/div>\n\n <div id=\"result\" class=\"quiz-result\" hidden aria-live=\"polite\"><\/div>\n <\/div>\n<\/div>\n\n<script>\n(function () {\n const AUDIO_URL = 'https:\/\/magnificum.net\/wp-content\/uploads\/2025\/12\/suspense-cinematic-atmosphere-255436.mp3';\n\n const startScreen = document.getElementById('startScreen');\n const btnStart = document.getElementById('btnStart');\n const quiz = document.getElementById('quiz');\n const quizForm = document.getElementById('quizForm');\n\n const steps = Array.from(quizForm.querySelectorAll('.quiz-step'));\n\n const btnNext = document.getElementById('btnNext');\n const btnRestart = document.getElementById('btnRestart');\n const resultBox = document.getElementById('result');\n const progressText = document.getElementById('progressText');\n const progressBar = document.getElementById('progressBar');\n\n \/\/ --- Audio setup ---\n const bgAudio = new Audio(AUDIO_URL);\n bgAudio.loop = true;\n bgAudio.preload = 'auto';\n bgAudio.volume = 1;\n\n let fadeRAF = null;\n\n function cancelFade() {\n if (fadeRAF) cancelAnimationFrame(fadeRAF);\n fadeRAF = null;\n }\n\n function fadeOutAudio(audio, durationMs = 1500) {\n cancelFade();\n const startVol = audio.volume ?? 1;\n const start = performance.now();\n\n function tick(now) {\n const t = Math.min(1, (now - start) \/ durationMs);\n audio.volume = Math.max(0, startVol * (1 - t));\n\n if (t < 1) {\n fadeRAF = requestAnimationFrame(tick);\n } else {\n audio.pause();\n audio.currentTime = 0;\n audio.volume = startVol;\n fadeRAF = null;\n }\n }\n fadeRAF = requestAnimationFrame(tick);\n }\n\n function startAudio() {\n cancelFade();\n bgAudio.currentTime = 0;\n bgAudio.volume = 1;\n bgAudio.play().catch(() => {});\n }\n\n const questionTexts = [\n 'Who tried to kill Agneta Hellwig?',\n 'Which of the seven guests saved the old lady\u2019s life?',\n 'How was the poison given to the hostess?',\n 'Who owns the phone found at the crime scene?'\n ];\n\n const correctAnswers = [\n ['Johannes Beckmann', 'Silvan Rothe', 'Mayari Schumann', 'Constanze Bender-Beckman'],\n 'Silvan Rothe',\n 'Through her water glass for the performance.',\n 'Annouka Satorius'\n ];\n\n let current = 0;\n const total = steps.length;\n\n btnStart.addEventListener('click', () => {\n startScreen.style.display = 'none';\n quiz.hidden = false;\n toggleStep(0, true);\n updateProgress();\n\n \/\/ Start audio (autoplay-safe via click)\n startAudio();\n\n \/\/ Scroll quiz into view (centered) + optional focus\n requestAnimationFrame(() => {\n quiz.scrollIntoView({ behavior: 'smooth', block: 'center' });\n const firstInput = steps[0].querySelector('input');\n if (firstInput) firstInput.focus({ preventScroll: true });\n });\n });\n\n steps.forEach((fs) => {\n fs.addEventListener('change', () => {\n btnNext.disabled = !isAnswered(fs);\n });\n });\n\n btnNext.addEventListener('click', () => {\n const fs = steps[current];\n if (!isAnswered(fs)) return;\n\n if (current === total - 1) {\n showResult();\n return;\n }\n\n toggleStep(current, false);\n current += 1;\n toggleStep(current, true);\n updateProgress();\n btnNext.disabled = !isAnswered(steps[current]);\n\n requestAnimationFrame(() => {\n quiz.scrollIntoView({ behavior: 'smooth', block: 'center' });\n });\n });\n\n btnRestart.addEventListener('click', resetQuiz);\n\n function isAnswered(fieldset) {\n const hasCheckbox = fieldset.querySelector('input[type=\"checkbox\"]');\n if (hasCheckbox) {\n return Array.from(fieldset.querySelectorAll('input[type=\"checkbox\"]')).some(cb => cb.checked);\n }\n return !!fieldset.querySelector('input[type=\"radio\"]:checked');\n }\n\n function toggleStep(index, show) {\n if (!steps[index]) return;\n steps[index].hidden = !show;\n }\n\n function updateProgress() {\n const stepNr = current + 1;\n progressText.textContent = `Question ${stepNr} of ${total}`;\n const pct = Math.round((stepNr \/ total) * 100);\n progressBar.style.width = pct + '%';\n }\n\n function showResult() {\n fadeOutAudio(bgAudio, 1500);\n\n let score = 0;\n let list = '<h3>Results (green = correct, red = incorrect):<\/h3><ul>';\n\n \/\/ Q1: checkboxes (exact match)\n const selectedQ1 = Array.from(quizForm.querySelectorAll('input[name=\"q1\"]:checked')).map(el => el.value);\n const correctQ1 = correctAnswers[0];\n const q1Correct = correctQ1.every(ans => selectedQ1.includes(ans)) && selectedQ1.length === correctQ1.length;\n if (q1Correct) score++;\n\n \/\/ Q2-Q4: correct\/wrong via value\n const q2 = quizForm.querySelector('input[name=\"q2\"]:checked');\n const q3 = quizForm.querySelector('input[name=\"q3\"]:checked');\n const q4 = quizForm.querySelector('input[name=\"q4\"]:checked');\n\n if (q2 && q2.value === 'correct') score++;\n if (q3 && q3.value === 'correct') score++;\n if (q4 && q4.value === 'correct') score++;\n\n \/\/ per-question breakdown\n steps.forEach((fs, i) => {\n const qIndex = i + 1;\n\n let isCorrect = false;\n let playerText = 'No answer';\n\n if (qIndex === 1) {\n const chosen = Array.from(fs.querySelectorAll('input[type=\"checkbox\"]:checked'))\n .map(el => el.parentElement.textContent.trim());\n playerText = chosen.length ? chosen.join(', ') : 'No answer';\n isCorrect = q1Correct;\n } else {\n const sel = fs.querySelector('input[type=\"radio\"]:checked');\n playerText = sel ? sel.parentElement.textContent.trim() : 'No answer';\n isCorrect = !!(sel && sel.value === 'correct');\n }\n\n const correctText = Array.isArray(correctAnswers[i]) ? correctAnswers[i].join(', ') : correctAnswers[i];\n\n list += `\n <li>\n <strong>${questionTexts[i]}<\/strong>\n <div class=\"${isCorrect ? 'answer-correct' : 'answer-wrong'}\">\n ${isCorrect ? '\u2714 Correct \u2013 your answer:' : '\u2718 Incorrect \u2013 your answer:'}\n ${playerText}\n <\/div>\n ${!isCorrect ? `\n <div class=\"answer-correct\">\n \u2714 Correct answer: ${correctText}\n <\/div>` : ''}\n <\/li>\n `;\n });\n\n list += '<\/ul>';\n\n steps[current].hidden = true;\n btnNext.hidden = true;\n btnRestart.hidden = false;\n progressText.textContent = 'Result';\n progressBar.style.width = '100%';\n\n const percent = Math.round((score \/ total) * 100);\n\n resultBox.innerHTML = `\n <strong>You got ${score} out of ${total} correct (${percent}%).<\/strong>\n ${list}\n <div class=\"result-cta\">\n <a href=\"https:\/\/magnificum.net\/ho-outro\" class=\"result-button\">Listen to the final audio drama<\/a>\n <\/div>\n `;\n resultBox.hidden = false;\n\n requestAnimationFrame(() => {\n resultBox.scrollIntoView({ behavior: 'smooth', block: 'center' });\n });\n }\n\n function resetQuiz() {\n cancelFade();\n bgAudio.pause();\n bgAudio.currentTime = 0;\n bgAudio.volume = 1;\n\n quizForm.reset();\n steps.forEach((fs, i) => (fs.hidden = i !== 0));\n current = 0;\n btnNext.hidden = false;\n btnRestart.hidden = true;\n btnNext.disabled = true;\n resultBox.hidden = true;\n resultBox.innerHTML = '';\n updateProgress();\n\n startAudio();\n\n requestAnimationFrame(() => {\n quiz.scrollIntoView({ behavior: 'smooth', block: 'center' });\n const firstInput = steps[0].querySelector('input');\n if (firstInput) firstInput.focus({ preventScroll: true });\n });\n }\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-758ffa89 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"758ffa89\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-53decaa5\" data-id=\"53decaa5\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f9001fb elementor-widget elementor-widget-spacer\" data-id=\"f9001fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c936b8 elementor-widget elementor-widget-text-editor\" data-id=\"3c936b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\"><span style=\"color: #ffffff;\"><strong><a style=\"color: #ffffff;\" href=\"\/en\/datenschutz\/\">DATA PROTECTION<\/a>\u00a0 |\u00a0 <a style=\"color: #ffffff;\" href=\"https:\/\/magnificum.net\/en\/impressum\/\">LEGAL NOTICE<\/a><\/strong><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c2d47a9 elementor-widget elementor-widget-spacer\" data-id=\"6c2d47a9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5338a39d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5338a39d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-346c7c3e\" data-id=\"346c7c3e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-59b78eb1 elementor-widget elementor-widget-spacer\" data-id=\"59b78eb1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Company Party \u2013 Resolution Test Go to the Resolution Test Now it\u2019s time to focus and solve the case. MAGNIFICUM wishes you the best of luck! Question 1 of 4 1) Who tried to kill Agneta Hellwig? (you may select multiple people) Johannes Beckmann Niculai Barnica Silvan Rothe Tamara Barnica Mayari Schumann Constanze Bender-Beckman Annouka Satorius Chrisander M\u00e4kel\u00e4 2) Which of the seven guests […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-29163","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/29163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/comments?post=29163"}],"version-history":[{"count":0,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/29163\/revisions"}],"wp:attachment":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/media?parent=29163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t

<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nCompany Party \u2013 Resolution Test<\/title>\n\n<style>\n :root{\n --quiz-bg: #DFE3E4C9;\n --quiz-text: #2F3C47;\n --quiz-font-size: 18px;\n\n --sage: #9caf88;\n --start-btn-bg: #eef5ec;\n --start-btn-bg-hover:#e3ecd5;\n\n --outro-btn-bg:#2F3C47;\n --outro-btn-bg-hover:#24303a;\n }\n\n html{ scroll-behavior:smooth; }\n\n .start-screen {\n text-align: center;\n max-width: 1300px;\n margin: 1rem auto;\n }\n .start-button-wrapper{\n display:flex;\n justify-content:center;\n margin-top: 1.8rem;\n }\n .start-button {\n padding: 1.05rem 2rem;\n border-radius: 16px;\n border: 1px solid #cfd8cc;\n background: var(--start-btn-bg);\n color: var(--quiz-text);\n cursor: pointer;\n font-size: 1.4rem;\n font-weight: 700;\n transition: background 0.2s ease, transform 0.1s ease;\n }\n .start-button:hover {\n background: var(--start-btn-bg-hover);\n transform: translateY(-1px);\n }\n\n .quiz-box {\n max-width: 13000px;\n margin: 1rem auto;\n padding: 1rem 1.25rem;\n border: 1px solid #2F3C47;\n border-radius: 14px;\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n background: var(--quiz-bg);\n color: var(--quiz-text);\n font-size: var(--quiz-font-size);\n }\n .quiz-title {\n margin: 0 0 0.5rem 0;\n font-size: 1.4rem;\n font-weight: 700;\n }\n\n .quiz-progress {\n margin: 0.5rem 0 1rem 0;\n font-size: 0.95rem;\n }\n .quiz-progress .bar {\n height: 8px;\n background: #eee;\n border-radius: 999px;\n overflow: hidden;\n }\n .quiz-progress .bar-fill {\n height: 100%;\n background: var(--sage);\n transition: width 0.25s ease;\n width: 10%;\n }\n\n fieldset { border: 0; padding: 0; margin: 0; }\n legend {\n font-weight: 700;\n margin-bottom: 0.5rem;\n font-size: 1.1rem;\n }\n label {\n display: block;\n padding: 0.55rem 0.65rem;\n border: 1px solid #ddd;\n border-radius: 12px;\n margin: 0.45rem 0;\n cursor: pointer;\n transition: background-color 0.2s;\n }\n label:hover { background: #f3f4f6; }\n input[type=\"radio\"],\n input[type=\"checkbox\"] { margin-right: 0.6rem; }\n\n .quiz-actions {\n display: flex;\n gap: 0.5rem;\n margin-top: 1rem;\n }\n button {\n padding: 0.65rem 1rem;\n border-radius: 12px;\n border: 1px solid #ccc;\n background: #f7f7f7;\n cursor: pointer;\n font-size: 1rem;\n }\n button[disabled] { opacity: 0.55; cursor: not-allowed; }\n #btnRestart {\n background: var(--start-btn-bg);\n border-color: #b8d7b0;\n }\n\n .quiz-result {\n margin-top: 1rem;\n padding: 1rem;\n border: 1px solid #e5e5e5;\n border-radius: 12px;\n background: #fafafa;\n }\n .quiz-result ul {\n margin-top: 0.6rem;\n padding-left: 1.2rem;\n }\n .quiz-result li { margin-bottom: 0.9rem; }\n\n .answer-correct {\n background: #ecfdf5;\n border-left: 4px solid #22c55e;\n padding: 0.45rem 0.65rem;\n border-radius: 10px;\n margin-top: 0.35rem;\n }\n .answer-wrong {\n background: #fef2f2;\n border-left: 4px solid #ef4444;\n padding: 0.45rem 0.65rem;\n border-radius: 10px;\n margin-top: 0.35rem;\n }\n\n .result-cta{\n margin-top: 1.5rem;\n display:flex;\n justify-content:center;\n }\n .result-button{\n display:inline-block;\n padding: 0.8rem 1.6rem;\n border-radius: 14px;\n background: var(--outro-btn-bg);\n color:#fff;\n text-decoration:none;\n font-weight:700;\n transition: background-color 0.2s ease, transform 0.1s ease;\n }\n .result-button:hover{\n background: var(--outro-btn-bg-hover);\n transform: translateY(-1px);\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div id=\"quizApp\">\n \n <div id=\"startScreen\" class=\"start-screen\">\n <div class=\"start-button-wrapper\">\n <button id=\"btnStart\" class=\"start-button\">Go to the Resolution Test<\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz\" class=\"quiz-box\" lang=\"en\" hidden>\n <h2 class=\"quiz-title\">\n Now it\u2019s time to focus and solve the case.<br>\n MAGNIFICUM wishes you the best of luck!\n <\/h2>\n\n <div class=\"quiz-progress\" aria-live=\"polite\">\n <span id=\"progressText\">Question 1 of 4<\/span>\n <div class=\"bar\">\n <div class=\"bar-fill\" id=\"progressBar\"><\/div>\n <\/div>\n <\/div>\n\n <form id=\"quizForm\">\n \n <fieldset class=\"quiz-step\" data-step=\"1\" hidden>\n <legend>1) Who tried to kill Agneta Hellwig? <small>(you may select multiple people)<\/small><\/legend>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Johannes Beckmann\"> Johannes Beckmann<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Niculai Barnica\"> Niculai Barnica<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Silvan Rothe\"> Silvan Rothe<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Tamara Barnica\"> Tamara Barnica<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Mayari Schumann\"> Mayari Schumann<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Constanze Bender-Beckman\"> Constanze Bender-Beckman<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Annouka Satorius\"> Annouka Satorius<\/label>\n <label><input type=\"checkbox\" name=\"q1\" value=\"Chrisander M\u00e4kel\u00e4\"> Chrisander M\u00e4kel\u00e4<\/label>\n <\/fieldset>\n\n \n <fieldset class=\"quiz-step\" data-step=\"2\" hidden>\n <legend>2) Which of the seven guests saved the old lady\u2019s life?<\/legend>\n <label><input type=\"radio\" name=\"q2\" value=\"wrong\"> Niculai Barnica<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"wrong\"> Tamara Barnica<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"wrong\"> Constanze Bender-Beckman<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"wrong\"> Johannes Beckmann<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"wrong\"> Mayari Schumann<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"correct\"> Silvan Rothe<\/label>\n <label><input type=\"radio\" name=\"q2\" value=\"wrong\"> Chrisander M\u00e4kel\u00e4<\/label>\n <\/fieldset>\n\n \n <fieldset class=\"quiz-step\" data-step=\"3\" hidden>\n <legend>3) How was the poison given to the hostess?<\/legend>\n <label><input type=\"radio\" name=\"q3\" value=\"wrong\"> Through a mouth spray that had been smuggled into her handbag<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"wrong\"> Through the sauce on her plate during the main course<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"wrong\"> Through a few poisoned peanuts<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"correct\"> Through her water glass for the performance<\/label>\n <label><input type=\"radio\" name=\"q3\" value=\"wrong\"> Through a poisoned wine glass during the appetizer<\/label>\n <\/fieldset>\n\n \n <fieldset class=\"quiz-step\" data-step=\"4\" hidden>\n <legend>4) Who owns the phone found at the crime scene?<\/legend>\n <label><input type=\"radio\" name=\"q4\" value=\"wrong\"> Constanze Bender-Beckman<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"wrong\"> Agneta Hellwig<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"wrong\"> Mayari Schumann<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"wrong\"> Tamara Barnica<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"correct\"> Annouka Satorius<\/label>\n <label><input type=\"radio\" name=\"q4\" value=\"wrong\"> Niculai Barnica<\/label>\n <\/fieldset>\n <\/form>\n\n <div class=\"quiz-actions\">\n <button type=\"button\" id=\"btnNext\" disabled>Next<\/button>\n <button type=\"button\" id=\"btnRestart\" hidden>Play again<\/button>\n <\/div>\n\n <div id=\"result\" class=\"quiz-result\" hidden aria-live=\"polite\"><\/div>\n <\/div>\n<\/div>\n\n<script>\n(function () {\n const AUDIO_URL = 'https:\/\/magnificum.net\/wp-content\/uploads\/2025\/12\/suspense-cinematic-atmosphere-255436.mp3';\n\n const startScreen = document.getElementById('startScreen');\n const btnStart = document.getElementById('btnStart');\n const quiz = document.getElementById('quiz');\n const quizForm = document.getElementById('quizForm');\n\n const steps = Array.from(quizForm.querySelectorAll('.quiz-step'));\n\n const btnNext = document.getElementById('btnNext');\n const btnRestart = document.getElementById('btnRestart');\n const resultBox = document.getElementById('result');\n const progressText = document.getElementById('progressText');\n const progressBar = document.getElementById('progressBar');\n\n \/\/ --- Audio setup ---\n const bgAudio = new Audio(AUDIO_URL);\n bgAudio.loop = true;\n bgAudio.preload = 'auto';\n bgAudio.volume = 1;\n\n let fadeRAF = null;\n\n function cancelFade() {\n if (fadeRAF) cancelAnimationFrame(fadeRAF);\n fadeRAF = null;\n }\n\n function fadeOutAudio(audio, durationMs = 1500) {\n cancelFade();\n const startVol = audio.volume ?? 1;\n const start = performance.now();\n\n function tick(now) {\n const t = Math.min(1, (now - start) \/ durationMs);\n audio.volume = Math.max(0, startVol * (1 - t));\n\n if (t < 1) {\n fadeRAF = requestAnimationFrame(tick);\n } else {\n audio.pause();\n audio.currentTime = 0;\n audio.volume = startVol;\n fadeRAF = null;\n }\n }\n fadeRAF = requestAnimationFrame(tick);\n }\n\n function startAudio() {\n cancelFade();\n bgAudio.currentTime = 0;\n bgAudio.volume = 1;\n bgAudio.play().catch(() => {});\n }\n\n const questionTexts = [\n 'Who tried to kill Agneta Hellwig?',\n 'Which of the seven guests saved the old lady\u2019s life?',\n 'How was the poison given to the hostess?',\n 'Who owns the phone found at the crime scene?'\n ];\n\n const correctAnswers = [\n ['Johannes Beckmann', 'Silvan Rothe', 'Mayari Schumann', 'Constanze Bender-Beckman'],\n 'Silvan Rothe',\n 'Through her water glass for the performance.',\n 'Annouka Satorius'\n ];\n\n let current = 0;\n const total = steps.length;\n\n btnStart.addEventListener('click', () => {\n startScreen.style.display = 'none';\n quiz.hidden = false;\n toggleStep(0, true);\n updateProgress();\n\n \/\/ Start audio (autoplay-safe via click)\n startAudio();\n\n \/\/ Scroll quiz into view (centered) + optional focus\n requestAnimationFrame(() => {\n quiz.scrollIntoView({ behavior: 'smooth', block: 'center' });\n const firstInput = steps[0].querySelector('input');\n if (firstInput) firstInput.focus({ preventScroll: true });\n });\n });\n\n steps.forEach((fs) => {\n fs.addEventListener('change', () => {\n btnNext.disabled = !isAnswered(fs);\n });\n });\n\n btnNext.addEventListener('click', () => {\n const fs = steps[current];\n if (!isAnswered(fs)) return;\n\n if (current === total - 1) {\n showResult();\n return;\n }\n\n toggleStep(current, false);\n current += 1;\n toggleStep(current, true);\n updateProgress();\n btnNext.disabled = !isAnswered(steps[current]);\n\n requestAnimationFrame(() => {\n quiz.scrollIntoView({ behavior: 'smooth', block: 'center' });\n });\n });\n\n btnRestart.addEventListener('click', resetQuiz);\n\n function isAnswered(fieldset) {\n const hasCheckbox = fieldset.querySelector('input[type=\"checkbox\"]');\n if (hasCheckbox) {\n return Array.from(fieldset.querySelectorAll('input[type=\"checkbox\"]')).some(cb => cb.checked);\n }\n return !!fieldset.querySelector('input[type=\"radio\"]:checked');\n }\n\n function toggleStep(index, show) {\n if (!steps[index]) return;\n steps[index].hidden = !show;\n }\n\n function updateProgress() {\n const stepNr = current + 1;\n progressText.textContent = `Question ${stepNr} of ${total}`;\n const pct = Math.round((stepNr \/ total) * 100);\n progressBar.style.width = pct + '%';\n }\n\n function showResult() {\n fadeOutAudio(bgAudio, 1500);\n\n let score = 0;\n let list = '<h3>Results (green = correct, red = incorrect):<\/h3><ul>';\n\n \/\/ Q1: checkboxes (exact match)\n const selectedQ1 = Array.from(quizForm.querySelectorAll('input[name=\"q1\"]:checked')).map(el => el.value);\n const correctQ1 = correctAnswers[0];\n const q1Correct = correctQ1.every(ans => selectedQ1.includes(ans)) && selectedQ1.length === correctQ1.length;\n if (q1Correct) score++;\n\n \/\/ Q2-Q4: correct\/wrong via value\n const q2 = quizForm.querySelector('input[name=\"q2\"]:checked');\n const q3 = quizForm.querySelector('input[name=\"q3\"]:checked');\n const q4 = quizForm.querySelector('input[name=\"q4\"]:checked');\n\n if (q2 && q2.value === 'correct') score++;\n if (q3 && q3.value === 'correct') score++;\n if (q4 && q4.value === 'correct') score++;\n\n \/\/ per-question breakdown\n steps.forEach((fs, i) => {\n const qIndex = i + 1;\n\n let isCorrect = false;\n let playerText = 'No answer';\n\n if (qIndex === 1) {\n const chosen = Array.from(fs.querySelectorAll('input[type=\"checkbox\"]:checked'))\n .map(el => el.parentElement.textContent.trim());\n playerText = chosen.length ? chosen.join(', ') : 'No answer';\n isCorrect = q1Correct;\n } else {\n const sel = fs.querySelector('input[type=\"radio\"]:checked');\n playerText = sel ? sel.parentElement.textContent.trim() : 'No answer';\n isCorrect = !!(sel && sel.value === 'correct');\n }\n\n const correctText = Array.isArray(correctAnswers[i]) ? correctAnswers[i].join(', ') : correctAnswers[i];\n\n list += `\n <li>\n <strong>${questionTexts[i]}<\/strong>\n <div class=\"${isCorrect ? 'answer-correct' : 'answer-wrong'}\">\n ${isCorrect ? '\u2714 Correct \u2013 your answer:' : '\u2718 Incorrect \u2013 your answer:'}\n ${playerText}\n <\/div>\n ${!isCorrect ? `\n <div class=\"answer-correct\">\n \u2714 Correct answer: ${correctText}\n <\/div>` : ''}\n <\/li>\n `;\n });\n\n list += '<\/ul>';\n\n steps[current].hidden = true;\n btnNext.hidden = true;\n btnRestart.hidden = false;\n progressText.textContent = 'Result';\n progressBar.style.width = '100%';\n\n const percent = Math.round((score \/ total) * 100);\n\n resultBox.innerHTML = `\n <strong>You got ${score} out of ${total} correct (${percent}%).<\/strong>\n ${list}\n <div class=\"result-cta\">\n <a href=\"https:\/\/magnificum.net\/ho-outro\" class=\"result-button\">Listen to the final audio drama<\/a>\n <\/div>\n `;\n resultBox.hidden = false;\n\n requestAnimationFrame(() => {\n resultBox.scrollIntoView({ behavior: 'smooth', block: 'center' });\n });\n }\n\n function resetQuiz() {\n cancelFade();\n bgAudio.pause();\n bgAudio.currentTime = 0;\n bgAudio.volume = 1;\n\n quizForm.reset();\n steps.forEach((fs, i) => (fs.hidden = i !== 0));\n current = 0;\n btnNext.hidden = false;\n btnRestart.hidden = true;\n btnNext.disabled = true;\n resultBox.hidden = true;\n resultBox.innerHTML = '';\n updateProgress();\n\n startAudio();\n\n requestAnimationFrame(() => {\n quiz.scrollIntoView({ behavior: 'smooth', block: 'center' });\n const firstInput = steps[0].querySelector('input');\n if (firstInput) firstInput.focus({ preventScroll: true });\n });\n }\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-758ffa89 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"758ffa89\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-53decaa5\" data-id=\"53decaa5\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f9001fb elementor-widget elementor-widget-spacer\" data-id=\"f9001fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c936b8 elementor-widget elementor-widget-text-editor\" data-id=\"3c936b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\"><span style=\"color: #ffffff;\"><strong><a style=\"color: #ffffff;\" href=\"\/en\/datenschutz\/\">DATA PROTECTION<\/a>\u00a0 |\u00a0 <a style=\"color: #ffffff;\" href=\"https:\/\/magnificum.net\/en\/impressum\/\">LEGAL NOTICE<\/a><\/strong><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6c2d47a9 elementor-widget elementor-widget-spacer\" data-id=\"6c2d47a9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5338a39d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5338a39d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-346c7c3e\" data-id=\"346c7c3e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-59b78eb1 elementor-widget elementor-widget-spacer\" data-id=\"59b78eb1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Company Party \u2013 Resolution Test Go to the Resolution Test Now it\u2019s time to focus and solve the case. MAGNIFICUM wishes you the best of luck! Question 1 of 4 1) Who tried to kill Agneta Hellwig? (you may select multiple people) Johannes Beckmann Niculai Barnica Silvan Rothe Tamara Barnica Mayari Schumann Constanze Bender-Beckman Annouka Satorius Chrisander M\u00e4kel\u00e4 2) Which of the seven guests […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-29163","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/29163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/comments?post=29163"}],"version-history":[{"count":0,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/29163\/revisions"}],"wp:attachment":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/media?parent=29163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}