{"id":2198,"date":"2025-11-09T23:50:56","date_gmt":"2025-11-09T22:50:56","guid":{"rendered":"https:\/\/guldbajerklubben.dk\/?page_id=2198"},"modified":"2025-11-13T23:59:15","modified_gmt":"2025-11-13T22:59:15","slug":"guldbajer-quiz","status":"publish","type":"page","link":"https:\/\/guldbajerklubben.dk\/index.php\/guldbajer-quiz\/","title":{"rendered":"Guldbajer Quiz"},"content":{"rendered":"    <div id=\"guldbajerquiz-app\" style=\"background:#000;color:#fff;text-align:center;padding:0;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100vw;margin-left:calc(-50vw + 50%);overflow-x:hidden;\">\n        <div id=\"intro\" style=\"width:100%;padding:20px 12px 12px 12px;\">\n            <img  title=\"\" decoding=\"async\" id=\"quizLogo\" src=\"\"  alt=\" Guldbajer Quiz\"  class=\"moving-logo\"style=\"max-width:100%; height:auto; margin:12px auto 18px auto; display:block; max-height:55vh;\">\n            <button id=\"startQuiz\" class=\"pulse-btn start-btn\">Start Quiz \ud83c\udf7a<\/button>\n            <button id=\"showHighscore\" class=\"no-glow\" style=\"background:#111;border:3px solid #f1c40f;color:#f1c40f;padding:20px 30px;border-radius:18px;font-size:1.8em;font-weight:700;cursor:pointer;margin:12px 8px;width:88vw;max-width:460px;\">Highscore \ud83c\udfc6<\/button>\n             <!-- \u2705 Forlad Quiz-knap under scroll-tekst -->\n            <div id=\"exitStartContainer\" style=\"width:100%;text-align:center;margin:20px 0;\">\n                <button id=\"exitQuizStart\" class=\"no-glow\" \n                    style=\"background:transparent;color:#e74c3c;padding:20px 30px;border:none;border-radius:18px;font-size:2em;font-weight:700;cursor:pointer;width:88vw;max-width:460px;\">\n                    \ud83d\udeaa Forlad Quiz\n                <\/button>\n            <\/div>\n        <\/div>\n        <div id=\"quiz\" style=\"display:none;width:100%;max-width:100%;padding:12px;box-sizing:border-box;overflow-y:auto;\">\n            <h1 style=\"font-size:2.2em;margin:12px 12px;font-weight:700;\">\ud83c\udf7a Guldbajer Quiz \ud83c\udf7a<\/h1>\n            <h2 id=\"question\" style=\"margin:18px 12px;font-size:10em;line-height:1.4;font-weight:700;\"><\/h2>\n            <div id=\"answers\" style=\"margin:12px 12px;\"><\/div>\n            <div id=\"feedback\" style=\"margin:10px 12px;font-weight:700;font-size:3.35em;\"><\/div>\n            <div id=\"countdown\" style=\"font-size:5em;color:#f1c40f;margin:10px 12px;font-weight:700;\"><\/div>\n            <div id=\"progressBarContainer\" style=\"width:88%;background:#222;border-radius:12px;height:20px;margin:12px auto;overflow:hidden;\">\n                <div id=\"progressBar\" style=\"width:100%;height:100%;background:linear-gradient(90deg,#f1c40f,#ffd700);transition:width 0.1s linear;\"><\/div>\n            <\/div>\n\n            <p id=\"score\" style=\"color:#f1c40f;font-size:3.6em;margin:12px 12px;font-weight:700;\">Point: 0<\/p>\n        <\/div>\n        <!-- Scrollende tekst over hele sk\u00e6rmen -->\n        <div id=\"scrollTextContainer\">\n            <div id=\"scrollText\">\ud83c\udf7a Tag en slurk og pr\u00f8v Quizzen!\ud83c\udf7a\ud83d\ude04<\/div>\n        <\/div>\n        <div id=\"runningControls\" style=\"text-align:center;margin:12px 0;\">\n            <button id=\"restartQuizRunning\" class=\"no-glow\" style=\"display:none;background:transparent;color:#f1c40f;padding:16px 20px;border:none;border-radius:18px;font-size:2em;font-weight:800;cursor:pointer;width:88vw;max-width:460px;\">\ud83d\udd04 Start forfra<\/button>\n        <\/div>\n        <!-- Video mellem scroll-tekst og knapper -->\n        <div id=\"quizVideoContainer\">\n            <video id=\"quizVideo\" autoplay muted loop playsinline style=\"max-width:90%;border-radius:12px;\">\n                <source src=\"https:\/\/guldbajerklubben.dk\/wp-content\/uploads\/2025\/12\/ny-video.mov\" type=\"video\/mp4\">\n                Din browser underst\u00f8tter ikke video.\n            <\/video>\n        <\/div>\n\n        <!-- Knapper -->\n        <div id=\"quizControls\">\n            <button id=\"restartQuizBottom\" class=\"no-glow\" style=\"display:none;background:transparent;color:#f1c40f;border:none;font-weight:800;padding:14px 18px;border-radius:18px;cursor:pointer;\">\ud83d\udd04 Start forfra<\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n     \n    async function initQuiz() {\n        const res = await fetch('https:\/\/guldbajerklubben.dk\/wp-json\/guldbajerquiz\/v1\/questions');\n        const data = await res.json();\n        function shuffle(a){const b=a.slice();for(let i=b.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[b[i],b[j]]=[b[j],b[i]];}return b;}\n        \/\/ Maks antal sp\u00f8rgsm\u00e5l fra admin (default 10)\n        const adminLimit = parseInt(data.question_limit || 10, 10);\n\n        \/\/ Forbered alle sp\u00f8rgsm\u00e5l fra API\n        const qFromApi = Array.isArray(data.questions) ? data.questions : [];\n\n        const available = qFromApi.length;\n\n        \/\/ Brug det laveste tal af \"admin-limit\" og \"faktisk antal\"\n        const maxQuestions = Math.min(adminLimit, available);\n\n        const sh = shuffle(qFromApi).map(x => ({\n            q: x.q,\n            a: String(x.a || x.correct_answer || '').trim(),\n            options: shuffle((x.options || []).map(o => String(o).trim()))\n        }));\n\n          \/\/ Lav en begr\u00e6nset bunke sp\u00f8rgsm\u00e5l\n        const limited = sh.slice(0, maxQuestions);\n\n          \/\/ H\u00e5ndter sessionStorage: hvis gq findes og matcher \u00f8nsket antal -> brug den\n            let questions;\n            try {\n                const s = sessionStorage.getItem('gq');\n                if (s) {\n                    const parsed = JSON.parse(s);\n                    \/\/ Hvis parsed er en array og l\u00e6ngde matcher, brug den; ellers overskriv med limited\n                    if (Array.isArray(parsed) && parsed.length === limited.length) {\n                        questions = parsed;\n                    } else {\n                        questions = limited;\n                        sessionStorage.setItem('gq', JSON.stringify(questions));\n                    }\n                } else {\n                    questions = limited;\n                    sessionStorage.setItem('gq', JSON.stringify(questions));\n                }\n            } catch (err) {\n                \/\/ Hvis parsing fejler, fallback til limited\n                console.warn('sessionStorage error, rebuilding questions', err);\n                questions = limited;\n                try { sessionStorage.setItem('gq', JSON.stringify(questions)); } catch(e){\/* ignore *\/ }\n            }\n        document.getElementById(\"quizLogo\").src=data.logo||'';\n        let audio;\n        if(data.music){\n            audio=new Audio(data.music);\n            audio.loop=true;\n               \/\/ iOS kr\u00e6ver brugertryk \u2013 men vi klarg\u00f8r lyden s\u00e5 den afspilles straks\n             document.addEventListener(\"touchstart\", function enableAudio() {\n                audio.play().catch(()=>{});\n                audio.pause();\n                document.removeEventListener(\"touchstart\", enableAudio);\n        });\n        }\n        const TL=parseInt(data.time_limit||15,10);let curr=0,score=0,timer=null;const cd=document.getElementById(\"countdown\");const pb=document.getElementById(\"progressBar\");\n        function startTimer(s,cb){if(timer)clearInterval(timer);const t=s||15;if(pb)pb.style.width='100%';const start=Date.now();timer=setInterval(()=>{const el=(Date.now()-start)\/1000;const rem=Math.max(0,t-el);const pct=Math.max(0,(rem\/t)*100);if(pb)pb.style.width=pct+'%';cd.innerText='\u23f1\ufe0f '+Math.ceil(rem)+'s';if(rem<=0){if(timer)clearInterval(timer);timer=null;cd.innerText='';cb();}},100);}\n        document.getElementById(\"startQuiz\").onclick=()=>{\n            if (audio) {\n                audio.currentTime = 0;\n                audio.play().catch(()=>{});\n            }\n                \/\/ Skjul intro og vis quiz\n                document.getElementById(\"intro\").style.display=\"none\";\n                document.getElementById(\"quiz\").style.display=\"block\";\n\n                \/\/ Vis Start forfra knap \u00f8verst under scroll-teksten\n                var runningBtn = document.getElementById(\"restartQuizRunning\");\n                if (runningBtn) runningBtn.style.display = \"block\";\n\n                \/\/ Skjul eventuelt bund-knappen\n                var bottomRestart = document.getElementById(\"restartQuizBottom\");\n                if (bottomRestart) bottomRestart.style.display = \"none\";\n\n                \/\/ Skjul intro's \"Forlad Quiz\" knap mens spillet k\u00f8rer\n                var exitStartContainer = document.getElementById('exitStartContainer');\n                if (exitStartContainer) exitStartContainer.style.display = 'none';\n                var exitQuizStartBtn = document.getElementById('exitQuizStart');\n                if (exitQuizStartBtn) exitQuizStartBtn.style.display = 'none';\n\n                show();\n        }; \n         \n        document.getElementById(\"showHighscore\").onclick = async () => {\n            const res = await fetch('https:\/\/guldbajerklubben.dk\/wp-json\/guldbajerquiz\/v1\/highscores');\n            const scores = await res.json();\n            let html = '<h2 style=\"color:#f1c40f;\">\ud83c\udfc6 Highscore \ud83c\udfc6<\/h2><table style=\"width:90%;margin:auto;color:#fff;font-size:2em;\">';\n            scores.forEach(s => {\n                const d = new Date(s.tidspunkt);\n                const day = String(d.getDate()).padStart(2, '0');\n                const month = String(d.getMonth() + 1).padStart(2, '0'); \/\/ +1 fordi m\u00e5neder starter fra 0\n                const year = d.getFullYear();\n                const formattedDate = `${day}-${month}-${year}`; \/\/ 20-12-2025\n                html += `<tr><td>${s.navn}<\/td><td>${s.point}<\/td><td>${formattedDate}<\/td><\/tr>`;\n            });\n            html += '<\/table>';\n            html += '<!-- \u2705 Knapper -->';\n            html += '<div style=\"text-align:center;margin:20px 0;\">';\n            html += '<button id=\"restartQuizBottom\" class=\"no-glow\" style=\"background:#f1c40f;color:#000;padding:20px;font-size:2em;border:none;border-radius:12px;margin-bottom:10px;\">\ud83d\udd04 Til Start<\/button>';\n            html += '<\/div>'; \n            document.getElementById(\"intro\").innerHTML = html;\n        };\n\n        function show(){\n       \n         const q=questions[curr];\n            if(!q){ showEndScreen(); return; }\n            document.getElementById(\"question\").innerText=q.q;\n            document.getElementById(\"answers\").innerHTML=q.options.map(o=>'<button class=\"gq-answer\">'+o+'<\/button>').join('');\n            document.querySelectorAll(\"#answers button\").forEach(btn=>{\n                btn.onclick=()=>check(btn.innerText);\n            });\n            document.getElementById(\"feedback\").innerText='';\n            startTimer(TL,()=>{document.getElementById(\"feedback\").innerText='\u23f0 Timeout!';document.getElementById(\"feedback\").style.color='#e74c3c';setTimeout(()=>{curr++;show();},900);});\n        };\n        function check(a){\n            if(timer)clearInterval(timer);\n            timer=null;\n            cd.innerText='';\n            if(pb)pb.style.width='0%';\n\n            document.querySelectorAll(\"#answers button\").forEach(btn => {\n            btn.disabled = true; \/\/ Deaktiver alle knapper\n            btn.style.opacity = \"0.6\"; \/\/ Valgfrit: g\u00f8r dem gr\u00e5\n            btn.style.cursor = \"not-allowed\"; \/\/ Valgfrit: \u00e6ndrer cursor\n            if (btn.innerText.trim() === questions[curr].a.trim()) {\n                btn.style.borderColor = \"#2ecc71\"; \/\/ Fremh\u00e6v det korrekte svar\n            }\n            });\n\n            const fb=document.getElementById(\"feedback\");\n            if(a.trim()===questions[curr].a.trim()){\n                fb.innerText='\u2705 Rigtigt!';\n                fb.style.color='#2ecc71';score++;\n            }else{\n                fb.innerText='\u274c Forkert!';\n                fb.style.color='#e74c3c';\n            }\n            \n            document.getElementById(\"score\").innerText='Point: '+score;\n            setTimeout(()=>{curr++;show();},1000);\n\n     \n\n}\n        \n\/\/ Efter quiz er slut:\n function showEndScreen() {\n    document.getElementById(\"quiz\").innerHTML = `\n        <h2 style=\"font-size:2em;color:#f1c40f;\">Du fik ${score} point!<\/h2>\n        <input id=\"playerName\" type=\"text\" placeholder=\"Tilf\u00f8j dit navn\" \n            style=\"display:block;\n                   margin: 20px auto;\n                   width:80%;\n                   max-width:420px;\n                   padding:14px;\n                   font-size:1.3em;\n                   text-align:center;\n                   border-radius:12px; \n            \">\n            <br>\n        <button id=\"saveScore\" class=\"pulse-btn\" style=\"background:#f1c40f;color:#000;padding:20px;font-size:2.5em;border:none;border-radius:12px;\">Gem p\u00e5 Highscore<\/button>\n     \n\n`;\n    \n  \/\/ Tilf\u00f8j placeholder styling med !important\n    const style = document.createElement('style');\n    style.innerHTML = `\n        #playerName::placeholder {\n            font-size: 1.5em !important;\n            color: #999;\n            text-align: center;\n        }\n        @media (max-width: 768px) {\n            #playerName::placeholder { font-size: 2em !important; }\n        }\n        @media (max-width: 480px) {\n            #playerName::placeholder { font-size: 2.4em !important; }\n        }\n    `;\n    document.head.appendChild(style);\n\n   \n    document.getElementById(\"saveScore\").onclick = async () => {\n        const btn = document.getElementById(\"saveScore\");\n        btn.disabled = true; \/\/ Deaktiver knappen\n        btn.style.opacity = \"0.6\"; \/\/ G\u00f8r den visuelt inaktiv\n        btn.innerText = \"Gemmer...\"; \/\/ Feedback til brugeren\n\n        const navn = document.getElementById(\"playerName\").value;\n        const apiUrl = \"https:\/\/guldbajerklubben.dk\/index.php\/wp-json\/guldbajerquiz\/v1\/highscore\";\n        await fetch(apiUrl, {\n            method: 'POST',\n            headers: { 'Content-Type': 'application\/json',\n                    'X-WP-Nonce': 'ed02c27c29'},\n            body: JSON.stringify({ navn, point: score })\n        });\n        \n         \/\/ \u2705 Naviger tilbage til startsiden og genindl\u00e6s\n        window.location.href = window.location.origin + window.location.pathname;\n\n        \/\/ \u2705 Zoom tilbage til default visuelt\n       \/\/ document.body.style.transform = \"scale(1)\";\n       \/* document.body.style.transformOrigin = \"0 0\";\n        document.body.style.width = \"100%\";\n\n        \/\/ Hent highscore og vis det\n        const res = await fetch(\"https:\/\/guldbajerklubben.dk\/index.php\/wp-json\/guldbajerquiz\/v1\/highscores\");\n        const scores = await res.json();\n\n        let html = '<h2 style=\"color:#f1c40f;\">\ud83c\udfc6 Highscore \ud83c\udfc6<\/h2><table style=\"width:90%;margin:auto;color:#fff;font-size:2em;\">';\n        scores.forEach(s => {\n            const d = new Date(s.tidspunkt);\n            const day = String(d.getDate()).padStart(2, '0');\n            const month = String(d.getMonth() + 1).padStart(2, '0');\n            const year = d.getFullYear();\n            const formattedDate = `${day}-${month}-${year}`;\n            html += `<tr><td>${s.navn}<\/td><td>${s.point}<\/td><td>${formattedDate}<\/td><\/tr>`;\n        });\n        html += '<\/table>';\n\n        document.getElementById(\"quiz\").innerHTML = html;*\/\n\n    };\n\n }\n}\n    \n    initQuiz();\n\n    \/\/ Enable tap-to-fullscreen on the quiz video for mobile\/desktop\n    (function(){\n        const vid = document.getElementById('quizVideo');\n        const app = document.getElementById('guldbajerquiz-app');\n        function enterFS(el){ if (el.requestFullscreen) el.requestFullscreen(); else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen(); else if (el.msRequestFullscreen) el.msRequestFullscreen(); }\n        function exitFS(){ if (document.exitFullscreen) document.exitFullscreen(); else if (document.webkitExitFullscreen) document.webkitExitFullscreen(); else if (document.msExitFullscreen) document.msExitFullscreen(); }\n        if(vid){\n            vid.style.cursor = 'zoom-in';\n            \/\/vid.style.cursor = 'default';\n            vid.addEventListener('click', function(e){\n                e.stopPropagation();\n                \/\/ If not fullscreen, enter and hide UI\n                const isFS = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;\n                if(!isFS){\n                    if(app) app.classList.add('video-fullscreen');\n                    \/\/ prefer making the video element fullscreen\n                    enterFS(vid);\n                } else {\n                    if(app) app.classList.remove('video-fullscreen');\n                    exitFS();\n                }\n            });\n            \n            \/\/ When exiting fullscreen (via gesture\/esc), remove class\n            document.addEventListener('fullscreenchange', ()=>{ if(!document.fullscreenElement){ if(app) app.classList.remove('video-fullscreen'); } });\n            document.addEventListener('webkitfullscreenchange', ()=>{ if(!document.webkitFullscreenElement){ if(app) app.classList.remove('video-fullscreen'); } });\n\n            \/\/ On orientation change or resize, ensure we exit any video-fullscreen state\n            function safeExitFullscreen(){ try{ if(document.exitFullscreen) document.exitFullscreen(); else if(document.webkitExitFullscreen) document.webkitExitFullscreen(); }catch(e){}\n                \/\/ Force remove video-fullscreen class if present\n                if(app && app.classList.contains('video-fullscreen')) app.classList.remove('video-fullscreen');\n                if(!app) app = document.getElementById('guldbajerquiz-app'); if(app && app.classList.contains('video-fullscreen')) app.classList.remove('video-fullscreen');\n\n                \/\/ If in landscape on small devices, hide the video container to prioritise quiz UI\n                var isLandscape = (window.matchMedia && window.matchMedia('(orientation: landscape)').matches) || window.innerWidth > window.innerHeight;\n                var vidc = document.getElementById('quizVideoContainer');\n                var vid = document.getElementById('quizVideo');\n                if(isLandscape){ if(vidc) vidc.style.display = 'none'; if(vid){ vid.style.maxHeight = '34vh'; vid.style.maxWidth = '48vw'; }} else { if(vidc) vidc.style.display = ''; if(vid){ vid.style.maxHeight = ''; vid.style.maxWidth = ''; }}\n                \/\/ Scroll quiz into view to ensure question\/timer\/progress are visible\n                var q = document.getElementById('quiz'); if(q) try { q.scrollIntoView({behavior:'smooth', block:'start'}); } catch(e){}\n                \/\/ Ensure core elements are visible and on top (use !important to override any stylesheet !important rules)\n                var els = ['question','answers','countdown','progressBarContainer','score']; els.forEach(id=>{ const el=document.getElementById(id); if(el){ try{ el.style.setProperty('display','block','important'); el.style.setProperty('visibility','visible','important'); el.style.setProperty('z-index','9999','important'); }catch(e){ el.style.display='block'; el.style.visibility='visible'; el.style.zIndex='9999'; } }});\n            }\n            window.addEventListener('orientationchange', function(){ safeExitFullscreen(); });\n            window.addEventListener('resize', function(){ safeExitFullscreen(); });\n        }\n    })();\n\n    document.addEventListener(\"click\", e => {\n       \n        if (e.target.id === \"exitQuizStart\") {\n        window.location.href = \"https:\/\/guldbajerklubben.dk\";\n        }\n\n        \n         if (e.target.id === \"restartQuizBottom\" || e.target.id === \"restartQuizRunning\") {\n        sessionStorage.removeItem('gq'); \/\/ Nulstil sp\u00f8rgsm\u00e5l\n        window.location.reload(); \/\/ Genindl\u00e6s quiz\n        }\n    });\n\n    \n    document.addEventListener('gesturestart', function (e) {\n        e.preventDefault();\n    });\n    document.addEventListener('dblclick', function (e) {\n        e.preventDefault();\n    });\n\n    <\/script>\n    <style>\n        * { box-sizing: border-box; }\n        html, body { margin: 0; padding: 0; overflow-x: hidden; font-size: 20px; }\n        #guldbajerquiz-app { width: 100vw; font-size: 1em; }\n        #guldbajerquiz-app button { transition: all 0.2s ease; }\n        #guldbajerquiz-app button:active { transform: scale(0.95); }\n\n        \/* Answer button base style (larger) *\/\n        .gq-answer {\n            display:block;\n            width:88vw;\n            margin:10px auto;\n            padding:18px 14px;\n            background:#333;\n            color:#fff;\n            border:3px solid #f1c40f;\n            border-radius:14px;\n            cursor:pointer;\n            font-size:3em;\n            font-weight:700;\n            text-align:center;\n        }\n\n        #startQuiz { animation: pulse 2s infinite; box-shadow: 0 0 20px rgba(241,196,15,0.95), 0 0 40px rgba(255,215,0,0.35); padding: 22px 32px;\n        font-size: 4.2em;\n        width: 90vw;\n        margin: 20px auto; }\n        h1 { font-size: 3.4em !important; }\n        h2 { font-size: 2.8em !important; }\n        @keyframes pulse { 0%,100%{box-shadow:0 0 12px rgba(241,196,15,0.6);} 50%{box-shadow:0 0 24px rgba(255,215,0,0.95);} }\n        .moving-logo { animation: swing 3.5s ease-in-out infinite; transform-origin: 50% 0%; }\n        @keyframes swing { 0%,100%{transform:rotate(0deg);} 25%{transform:rotate(4deg) translateX(6px);} 75%{transform:rotate(-4deg) translateX(-6px);} }\n\n        \/\/ Style for the name input placeholder\n        #playerName::placeholder {\n            font-size: 18px !important; \/* G\u00f8r placeholder st\u00f8rre *\/\n            color: #999; \/* Valgfrit: g\u00f8r farven lidt lysere *\/\n            text-align: center; \/* Centrer placeholder-teksten *\/\n        }\n        \n        \/* Larger sizes on tablets\/desktop *\/\n        @media (min-width: 769px) {\n            #startQuiz { font-size:2.1em; padding:28px 44px; max-width:520px; width:78vw; }\n            .gq-answer { font-size:2em; padding:18px 14px; border-width:3px; width:90vw; border-radius:14px; }\n            h1 { font-size:7.4em; }\n            h2 { font-size:6.9em; }\n            #feedback { font-size:1.5em; }\n            #countdown { font-size:6em; }\n            #score { font-size:1.8em; }\n        }\n\n        \/* Mobile adjustments (still bigger than before) *\/\n        @media (max-width: 768px) {\n            #guldbajerquiz-app { justify-content: flex-start; padding-top: 12px; align-items: center; }\n            #intro { min-height: auto; padding-top: 10px; }\n            #startQuiz { padding:22px 32px; font-size:1.9em; width:90vw; }\n            h1 { font-size:6.9em !important; }\n            h2 { font-size:6.6em !important; }\n            .gq-answer { font-size:1.50em; padding:16px 12px; width:90vw; }\n            #countdown { font-size:5em; }\n            #score { font-size:1.5em; }\n            #playerName {\n                width: 90%;\n                font-size: 1.6em !important; \n            }\n            #playerName::placeholder {\n                font-size: 2em !important;\n            }\n            \n            #scrollText {\n                font-size: 2em; \/* Mindre p\u00e5 tablets *\/\n            }\n            \n            #quizVideo {\n                    width: 96vw;\n                    max-width: 100%;\n                    height: auto;\n                    max-height: 65vh; \/* Begr\u00e6ns h\u00f8jde s\u00e5 den ikke fylder for meget *\/\n                    border-radius: 12px;\n                }\n\n            \/* Juster video container for tablet *\/\n            #quizVideoContainer { margin: 12px 0; padding: 0 6px; }\n\n        }\n\n        @media (max-width: 480px) {\n            html, body { font-size: 22px; }\n            #startQuiz { padding:26px 36px; font-size:2.4em; width:94vw; margin:12px auto; }\n            h1 { font-size:6.6em !important; }\n            h2 { font-size:5em !important; }\n            .gq-answer { font-size:2em; padding:22px 18px; width:94vw; margin:8px auto; }\n            #countdown { font-size:7em; }\n            #score { font-size:2em; }\n            #playerName::placeholder {\n                font-size: 2.4em !important; \/* Ekstra stort p\u00e5 meget sm\u00e5 sk\u00e6rme *\/\n            }\n        }\n        \n       \/\/ Highscore table styles\n        table { border-collapse: collapse; width: 100%; }\n        td { padding: 8px; border-bottom: 1px solid #f1c40f; }\n\n                \/* Bedre mobilvisning *\/\n        @media (max-width: 480px) {\n            #intro {\n                padding-top: 20px;\n            }\n\n            #quizLogo {\n                max-width: 90%;\n                max-height: 40vh;\n                margin-top: 10px;\n            }\n\n            #startQuiz {\n                font-size: 2.6em !important;\n                padding: 26px 30px !important;\n                width: 92vw !important;\n            }\n\n            #playerName {\n                width: 92% !important;\n                font-size: 2.2em !important;\n                padding: 18px !important;\n                margin: 20px auto !important;\n                display: block !important;\n                text-align: center !important;\n            }\n            \n            #quizControls {\n                    position: static; \/* Fjern fixed hvis pladsen er for lille *\/\n                    margin-top: 20px;\n            }\n            \n            #scrollText {\n                font-size: 3em; \/* \u2705 Endnu st\u00f8rre p\u00e5 sm\u00e5 sk\u00e6rme *\/\n            }\n\n            #quizVideo {\n                width: 100vw; \/* Edge-to-edge on small screens *\/\n                max-width: 100%;\n                height: auto;\n                max-height: 90vh; \/* Allow larger but keep some room *\/\n                border-radius: 4px; \/* Slight rounding *\/\n                display: block;\n                margin: 0;\n                }\n\n\n        }\n\n    \n\n            @keyframes exitPulse {\n                0%, 100% {\n                    transform: translateX(-50%) scale(1);\n                    box-shadow: 0 0 14px rgba(231,76,60,0.7);\n                }\n                50% {\n                    transform: translateX(-50%) scale(1.08);\n                    box-shadow: 0 0 28px rgba(255,60,60,1);\n                }\n            }\n\n\n            .start-btn {\n                background:#f1c40f;\n                color:#000;\n                padding:26px 40px;\n                border:none;\n                border-radius:18px;\n                font-size:2.0em;\n                font-weight:700;\n                cursor:pointer;\n                margin:12px 8px;\n                width:88vw;\n                max-width:460px;\n            }\n           \/* Mobilvenlig puls-animation *\/\n            .pulse-btn {\n                animation: pulseGlow 1.8s infinite ease-in-out;\n                -webkit-animation: pulseGlow 1.8s infinite ease-in-out;\n                transition: transform 0.25s;\n                display: inline-block;\n            }\n\n            \/* Hover + mobil-tap effekt *\/\n            .pulse-btn:hover,\n            .pulse-btn:active {\n                transform: scale(1.08);\n            }\n\n            \/* Remove glow\/animation for specified buttons *\/\n            .no-glow {\n                animation: none !important;\n                -webkit-animation: none !important;\n                box-shadow: none !important;\n                transform: none !important;\n            }\n            .no-glow:hover,\n            .no-glow:active {\n                transform: none !important;\n                box-shadow: none !important;\n            }\n\n            \/* SAFARI + CHROME MOBILE kompatibel keyframes *\/\n            @-webkit-keyframes pulseGlow {\n                0% {\n                    -webkit-transform: scale(1);\n                    transform: scale(1);\n                    box-shadow: 0 0 8px rgba(241,196,15,0.3);\n                }\n                50% {\n                    -webkit-transform: scale(1.05);\n                    transform: scale(1.05);\n                    box-shadow: 0 0 22px rgba(241,196,15,0.7);\n                }\n                100% {\n                    -webkit-transform: scale(1);\n                    transform: scale(1);\n                    box-shadow: 0 0 8px rgba(241,196,15,0.3);\n                }\n            }\n\n            @keyframes pulseGlow {\n                0% {\n                    transform: scale(1);\n                    box-shadow: 0 0 8px rgba(241,196,15,0.3);\n                }\n                50% {\n                    transform: scale(1.05);\n                    box-shadow: 0 0 22px rgba(241,196,15,0.7);\n                }\n                100% {\n                    transform: scale(1);\n                    box-shadow: 0 0 8px rgba(241,196,15,0.3);\n                }\n            }\n            \n        \n            #quizControls {\n                display: flex;\n                flex-direction: column;\n                gap: 16px;\n                width: 90%;\n                max-width: 480px;\n                margin: 20px auto;\n            }\n            #quizControls button {\n                width: 100%;\n                font-size: 2em;\n                font-weight: 700;\n                padding: 18px 24px;\n                border: none;\n                border-radius: 18px;\n                cursor: pointer;\n                box-sizing: border-box;\n            }\n\n            #restartQuizBottom {\n                background: #f1c40f;\n                color: #000;\n            }\n            \n            #scrollTextContainer {\n                width: 100vw;\n                overflow: hidden;\n                position: relative;\n                min-height: 110px;\n                padding: 8px 0;\n                margin: 14px 0;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n            }\n\n            #scrollText {\n                display: inline-block;\n                position: absolute;\n                white-space: nowrap;\n                font-size: 3em;\n                font-weight: 700;\n                line-height: 110px;\n                text-transform: uppercase;\n                animation: scrollText 8s linear infinite,\n                        colorChange 4s ease-in-out infinite,\n                        pulseGlow 2s ease-in-out infinite;\n                will-change: transform;\n            }\n\n            #runningControls {\n                width: 100%;\n                text-align: center;\n                margin: 10px 0 20px 0;\n                z-index: 2;\n            }\n\n            #runningControls button {\n                display: inline-block;\n                margin: 0 auto;\n                padding: 16px 22px;\n                font-size: 1.9em;\n                border-radius: 18px;\n                max-width: 460px;\n                width: 88vw;\n            }\n\n            \/* \u2705 Scroll fra venstre til h\u00f8jre *\/\n            @keyframes scrollText {\n                0% { transform: translateX(calc(-100% - 100vw)); }\n                100% { transform: translateX(calc(100vw)); }\n            }\n\n            \/* Farveskift *\/\n            @keyframes colorChange {\n                0% { color: #f1c40f; }\n                25% { color: #e74c3c; }\n                50% { color: #2ecc71; }\n                75% { color: #3498db; }\n                100% { color: #f1c40f; }\n            }\n\n            \/* Glow og puls *\/\n            @keyframes pulseGlow {\n                0%, 100% { text-shadow: 0 0 10px rgba(255,255,255,0.6); }\n                50% { text-shadow: 0 0 25px rgba(255,255,255,1); }\n            }\n\n            \/* Responsive tweaks *\/\n            @media (max-width: 768px) {\n                #scrollTextContainer { min-height: 120px; padding: 10px 0; }\n                #scrollText { font-size: 2.4em; line-height: 120px; }\n                #runningControls button { font-size: 2em; padding: 18px 24px; width: 90vw; }\n            }\n\n            @media (max-width: 480px) {\n                #scrollTextContainer { min-height: 140px; padding: 14px 0; }\n                #scrollText { font-size: 3em; line-height: 140px; }\n                #runningControls button { font-size: 2.2em; padding: 20px 26px; width: 94vw; }\n            }\n\n            #quizVideoContainer {\n                width: 100%;\n                display: flex;\n                justify-content: center;\n                margin: 12px 0;\n                padding: 0 6px;\n            }\n            #quizVideo {\n                max-width: 100%;\n                height: auto;\n                border-radius: 12px;\n            }\n\n            \/* Fullscreen helper: hide non-video UI and expand video *\/\n            .video-fullscreen {\n                background: #000;\n            }\n            .video-fullscreen #scrollTextContainer,\n            .video-fullscreen #runningControls,\n            .video-fullscreen #quizControls,\n            .video-fullscreen #answers,\n            .video-fullscreen #question,\n            .video-fullscreen #feedback,\n            .video-fullscreen #countdown,\n            .video-fullscreen #score {\n                display: none !important;\n            }\n            .video-fullscreen #quizVideo {\n                width: 100vw !important;\n                height: 100vh !important;\n                max-height: none !important;\n                object-fit: cover;\n                border-radius: 0 !important;\n            }\n\n\n\n            \/* Portrait-specific adjustments *\/\n            @media (max-width: 480px) and (orientation: portrait) {\n                html, body { font-size: 18px; }\n                #quiz { padding: 8px 6px 18px 6px; }\n                #question { font-size: clamp(2.4em, 10vw, 5em); line-height: 1.08; margin: 10px 6px; }\n                .gq-answer { font-size: clamp(1.4em, 5.4vw, 2.0em); padding: 12px 10px; width: 96vw; margin: 8px auto; border-width: 2px; }\n                #countdown { font-size: clamp(3.2em, 10vw, 6.2em); }\n                #score { font-size: clamp(1.2em, 4.2vw, 1.8em); }\n                #progressBarContainer { height: 12px; border-radius: 10px; }\n                #scrollTextContainer { min-height: 110px; padding: 6px 0; }\n                #quizVideo { width: 100vw; max-height: 62vh; border-radius: 6px; }\n                \/* Ensure content can scroll if space is tight *\/\n                #quiz { max-height: calc(100vh - 160px); overflow-y: auto; }\n                \/* Make large elements wrap instead of overflow *\/\n                #question, #answers { box-sizing: border-box; }\n            }\n\n            \/* Landscape-specific adjustments (mobile\/tablet) *\/\n            @media (max-width: 768px) and (orientation: landscape) {\n                html, body { font-size: 16px; }\n                #guldbajerquiz-app { align-items: stretch; }\n\n                \/* Hide the video container on small landscape to prioritise quiz content *\/\n                #quizVideoContainer { display: none !important; }\n\n                \/* Make the quiz content take full width *\/\n                #quiz { display: block; width: 100%; padding: 6px 8px; position: relative; z-index: 6; max-height: calc(100vh - 60px); overflow-y: auto; }\n\n                \/* Adjust question and answers to fit landscape nicely *\/\n                #question { font-size: clamp(1.4em, 6vw, 3.0em); line-height: 1.04; margin: 6px 6px; display:block; }\n                #answers { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }\n                .gq-answer { font-size: clamp(1.0em, 3.2vw, 1.6em); padding: 8px 6px; width: 46%; margin: 6px 2%; box-sizing: border-box; }\n\n                \/* Keep timer and progress visible and compact *\/\n                #countdown { font-size: clamp(1.8em, 5vw, 3.2em); display:block; margin-top:6px; }\n                #progressBarContainer { height: 10px; width: 92%; margin: 8px auto; display:block; }\n\n                \/* Reduce big headers so they don't push content off-screen *\/\n                h1, h2 { font-size: clamp(1.2em, 4.5vw, 2.0em) !important; }\n\n                \/* Force visibility for core elements *\/\n                #question, #answers, #countdown, #progressBarContainer, #score { display: block !important; visibility: visible !important; }\n            }\n\n            \/* Very small landscape devices safety tweaks *\/\n            @media (max-width: 360px) and (orientation: landscape) {\n                .gq-answer { font-size: 1.05em; padding: 8px 6px; width: 44vw; }\n                #question { font-size: 2.2em; }\n                #quizVideo { max-height: 46vh; }\n            }\n\n            \/* Forhindrer pinch-zoom og dobbelt-tap *\/\n            html, body {\n                touch-action: manipulation; \/* Bloker zoom-gestus *\/\n                -ms-touch-action: manipulation; \/* For \u00e6ldre IE\/Edge *\/\n                overflow-x: hidden;\/* Undg\u00e5 horisontal scroll *\/\n            }\n\n            #quizVideo {\n                pointer-events: none; \/* Ingen klik eller ber\u00f8ring *\/\n            }\n\n\n\n    <\/style>\n    \n\n\n\n<p><\/p>\n<div class=\"kodex_buttons\" style=\"text-align:left;\"><button type=\"button\" class=\"kodex_button kodex_like_button\" data-id=\"2198\" data-action=\"like\">\r\n\t\t\t<span class=\"icon\"><\/span><span class=\"text\">Like<\/span><\/button><input type=\"hidden\" id=\"nonce\" name=\"nonce\" value=\"1693a0c54c\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php\/wp-json\/wp\/v2\/pages\/2198\" \/><\/div>","protected":false},"excerpt":{"rendered":"<p>Like<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank.php","meta":{"footnotes":""},"class_list":["post-2198","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Guldbajer Quiz - GuldbajerKlub<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/guldbajerklubben.dk\/index.php\/guldbajer-quiz\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guldbajer Quiz - GuldbajerKlub\" \/>\n<meta property=\"og:description\" content=\"Like\" \/>\n<meta property=\"og:url\" content=\"https:\/\/guldbajerklubben.dk\/index.php\/guldbajer-quiz\/\" \/>\n<meta property=\"og:site_name\" content=\"GuldbajerKlub\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-13T22:59:15+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/guldbajerklubben.dk\\\/index.php\\\/guldbajer-quiz\\\/\",\"url\":\"https:\\\/\\\/guldbajerklubben.dk\\\/index.php\\\/guldbajer-quiz\\\/\",\"name\":\"Guldbajer Quiz - GuldbajerKlub\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/guldbajerklubben.dk\\\/#website\"},\"datePublished\":\"2025-11-09T22:50:56+00:00\",\"dateModified\":\"2025-11-13T22:59:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/guldbajerklubben.dk\\\/index.php\\\/guldbajer-quiz\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/guldbajerklubben.dk\\\/index.php\\\/guldbajer-quiz\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/guldbajerklubben.dk\\\/index.php\\\/guldbajer-quiz\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Hjem\",\"item\":\"https:\\\/\\\/guldbajerklubben.dk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guldbajer Quiz\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/guldbajerklubben.dk\\\/#website\",\"url\":\"https:\\\/\\\/guldbajerklubben.dk\\\/\",\"name\":\"Guldbajerklubben\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/guldbajerklubben.dk\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/guldbajerklubben.dk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/guldbajerklubben.dk\\\/#organization\",\"name\":\"Guldbajerklubben\",\"url\":\"https:\\\/\\\/guldbajerklubben.dk\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/guldbajerklubben.dk\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/guldbajerklubben.dk\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/GuldLogo.png\",\"contentUrl\":\"https:\\\/\\\/guldbajerklubben.dk\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/GuldLogo.png\",\"width\":535,\"height\":243,\"caption\":\"Guldbajerklubben\"},\"image\":{\"@id\":\"https:\\\/\\\/guldbajerklubben.dk\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Guldbajer Quiz - GuldbajerKlub","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/guldbajerklubben.dk\/index.php\/guldbajer-quiz\/","og_locale":"da_DK","og_type":"article","og_title":"Guldbajer Quiz - GuldbajerKlub","og_description":"Like","og_url":"https:\/\/guldbajerklubben.dk\/index.php\/guldbajer-quiz\/","og_site_name":"GuldbajerKlub","article_modified_time":"2025-11-13T22:59:15+00:00","twitter_card":"summary_large_image","twitter_misc":{"Estimeret l\u00e6setid":"1 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/guldbajerklubben.dk\/index.php\/guldbajer-quiz\/","url":"https:\/\/guldbajerklubben.dk\/index.php\/guldbajer-quiz\/","name":"Guldbajer Quiz - GuldbajerKlub","isPartOf":{"@id":"https:\/\/guldbajerklubben.dk\/#website"},"datePublished":"2025-11-09T22:50:56+00:00","dateModified":"2025-11-13T22:59:15+00:00","breadcrumb":{"@id":"https:\/\/guldbajerklubben.dk\/index.php\/guldbajer-quiz\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/guldbajerklubben.dk\/index.php\/guldbajer-quiz\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/guldbajerklubben.dk\/index.php\/guldbajer-quiz\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Hjem","item":"https:\/\/guldbajerklubben.dk\/"},{"@type":"ListItem","position":2,"name":"Guldbajer Quiz"}]},{"@type":"WebSite","@id":"https:\/\/guldbajerklubben.dk\/#website","url":"https:\/\/guldbajerklubben.dk\/","name":"Guldbajerklubben","description":"","publisher":{"@id":"https:\/\/guldbajerklubben.dk\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/guldbajerklubben.dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":"Organization","@id":"https:\/\/guldbajerklubben.dk\/#organization","name":"Guldbajerklubben","url":"https:\/\/guldbajerklubben.dk\/","logo":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/guldbajerklubben.dk\/#\/schema\/logo\/image\/","url":"https:\/\/guldbajerklubben.dk\/wp-content\/uploads\/2024\/06\/GuldLogo.png","contentUrl":"https:\/\/guldbajerklubben.dk\/wp-content\/uploads\/2024\/06\/GuldLogo.png","width":535,"height":243,"caption":"Guldbajerklubben"},"image":{"@id":"https:\/\/guldbajerklubben.dk\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/guldbajerklubben.dk\/index.php\/wp-json\/wp\/v2\/pages\/2198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guldbajerklubben.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/guldbajerklubben.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/guldbajerklubben.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/guldbajerklubben.dk\/index.php\/wp-json\/wp\/v2\/comments?post=2198"}],"version-history":[{"count":3,"href":"https:\/\/guldbajerklubben.dk\/index.php\/wp-json\/wp\/v2\/pages\/2198\/revisions"}],"predecessor-version":[{"id":2205,"href":"https:\/\/guldbajerklubben.dk\/index.php\/wp-json\/wp\/v2\/pages\/2198\/revisions\/2205"}],"wp:attachment":[{"href":"https:\/\/guldbajerklubben.dk\/index.php\/wp-json\/wp\/v2\/media?parent=2198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}