Harry Potter Kv\u00edz<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <script src=\"\/_sdk\/data_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel+Decorative:wght@400;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap\" rel=\"stylesheet\">\n <style>\n .font-magic { font-family: 'Cinzel Decorative', cursive; }\n .font-body { font-family: 'Crimson Text', serif; }\n \n @keyframes float {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-20px) rotate(5deg); }\n }\n \n @keyframes sparkle {\n 0%, 100% { opacity: 0; transform: scale(0); }\n 50% { opacity: 1; transform: scale(1); }\n }\n \n @keyframes glow {\n 0%, 100% { box-shadow: 0 0 20px rgba(218, 165, 32, 0.3); }\n 50% { box-shadow: 0 0 40px rgba(218, 165, 32, 0.6); }\n }\n \n .float { animation: float 6s ease-in-out infinite; }\n .sparkle { animation: sparkle 2s ease-in-out infinite; }\n .glow { animation: glow 3s ease-in-out infinite; }\n \n .star {\n position: absolute;\n background: gold;\n border-radius: 50%;\n animation: sparkle 3s ease-in-out infinite;\n }\n \n .house-gryffindor { background: linear-gradient(135deg, #740001 0%, #ae0001 50%, #eeba30 100%); }\n .house-slytherin { background: linear-gradient(135deg, #1a472a 0%, #2a623d 50%, #5d5d5d 100%); }\n .house-ravenclaw { background: linear-gradient(135deg, #0e1a40 0%, #222f5b 50%, #946b2d 100%); }\n .house-hufflepuff { background: linear-gradient(135deg, #ecb939 0%, #f0c75e 50%, #372e29 100%); }\n \n .btn-magic {\n position: relative;\n overflow: hidden;\n transition: all 0.3s ease;\n }\n \n .btn-magic::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);\n transform: rotate(45deg);\n transition: all 0.5s ease;\n }\n \n .btn-magic:hover::before {\n left: 100%;\n }\n \n .answer-btn {\n transition: all 0.3s ease;\n border: 2px solid transparent;\n }\n \n .answer-btn:hover:not(:disabled) {\n transform: translateX(10px);\n border-color: #daa520;\n }\n \n .answer-btn.correct {\n background: linear-gradient(135deg, #2d5a27 0%, #4a7c43 100%) !important;\n border-color: #90ee90 !important;\n }\n \n .answer-btn.wrong {\n background: linear-gradient(135deg, #8b0000 0%, #b22222 100%) !important;\n border-color: #ff6b6b !important;\n }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <\/head>\n <body class=\"h-full font-body\">\n <div id=\"app\" class=\"h-full w-full overflow-auto\" style=\"background: linear-gradient(180deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);\">\n \n <div id=\"stars\" class=\"fixed inset-0 pointer-events-none overflow-hidden\"><\/div>\n <div class=\"relative z-10 min-h-full flex flex-col items-center justify-center p-6\">\n \n <div id=\"start-screen\" class=\"text-center max-w-2xl mx-auto\">\n <div class=\"float mb-8\">\n <svg class=\"w-32 h-32 mx-auto text-yellow-500\" viewbox=\"0 0 100 100\" fill=\"currentColor\">\n <path d=\"M50 5 L53 35 L85 35 L58 55 L68 90 L50 70 L32 90 L42 55 L15 35 L47 35 Z\" \/>\n <\/svg>\n <\/div>\n <h1 id=\"game-title\" class=\"font-magic text-4xl md:text-6xl text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-yellow-200 to-yellow-400 mb-4 glow\">Harry Potter Kv\u00edz<\/h1>\n <p id=\"welcome-text\" class=\"text-xl text-gray-300 mb-8\">V\u00edtejte v magick\u00e9m sv\u011bt\u011b Bradavic! Otestujte sv\u00e9 znalosti o postav\u00e1ch z filmov\u00e9 s\u00e9rie.<\/p>\n <div class=\"mb-8\">\n <input type=\"text\" id=\"player-name\" placeholder=\"Zadejte sv\u00e9 jm\u00e9no, kouzeln\u00edku...\" class=\"w-full max-w-md px-6 py-4 bg-gray-900\/50 border-2 border-yellow-600\/50 rounded-lg text-white text-center text-lg focus:outline-none focus:border-yellow-400 placeholder-gray-500\">\n <\/div><button id=\"start-btn\" class=\"btn-magic px-12 py-4 bg-gradient-to-r from-yellow-700 via-yellow-600 to-yellow-700 text-white font-magic text-xl rounded-lg hover:from-yellow-600 hover:via-yellow-500 hover:to-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed\"> \u26a1 Za\u010d\u00edt dobrodru\u017estv\u00ed \u26a1 <\/button> \n <div id=\"leaderboard\" class=\"mt-12 hidden\">\n <h3 class=\"font-magic text-2xl text-yellow-400 mb-4\">\ud83c\udfc6 S\u00ed\u0148 sl\u00e1vy<\/h3>\n <div id=\"leaderboard-list\" class=\"bg-gray-900\/50 rounded-lg p-4 max-w-md mx-auto border border-yellow-600\/30\">\n <\/div>\n <\/div>\n <\/div>\n <div id=\"quiz-screen\" class=\"hidden w-full max-w-3xl mx-auto\">\n <div class=\"bg-gray-900\/70 backdrop-blur rounded-2xl p-8 border border-yellow-600\/30\">\n \n <div class=\"flex justify-between items-center mb-6\">\n <span id=\"question-counter\" class=\"font-magic text-yellow-400\">Ot\u00e1zka 1\/10<\/span> <span id=\"score-display\" class=\"font-magic text-yellow-400\">Sk\u00f3re: 0<\/span>\n <\/div>\n <div class=\"w-full bg-gray-800 rounded-full h-2 mb-8\">\n <div id=\"progress-bar\" class=\"bg-gradient-to-r from-yellow-600 to-yellow-400 h-2 rounded-full transition-all duration-500\" style=\"width: 10%\"><\/div>\n <\/div>\n <div id=\"character-display\" class=\"text-center mb-6\">\n <div class=\"w-32 h-32 mx-auto rounded-full bg-gradient-to-br from-yellow-600 to-yellow-800 flex items-center justify-center text-6xl mb-4 glow\">\n \u26a1\n <\/div>\n <\/div>\n <h2 id=\"question-text\" class=\"font-magic text-2xl md:text-3xl text-white text-center mb-8\">Ot\u00e1zka se na\u010d\u00edt\u00e1…<\/h2>\n <div id=\"answers-container\" class=\"space-y-4\">\n <\/div> <button id=\"next-btn\" class=\"hidden mt-8 w-full btn-magic px-8 py-4 bg-gradient-to-r from-yellow-700 via-yellow-600 to-yellow-700 text-white font-magic text-xl rounded-lg hover:from-yellow-600 hover:via-yellow-500 hover:to-yellow-600\"> Dal\u0161\u00ed ot\u00e1zka \u2192 <\/button>\n <\/div>\n <\/div>\n <div id=\"result-screen\" class=\"hidden text-center max-w-2xl mx-auto\">\n <div class=\"bg-gray-900\/70 backdrop-blur rounded-2xl p-8 border border-yellow-600\/30\">\n <div id=\"house-badge\" class=\"w-40 h-40 mx-auto rounded-full flex items-center justify-center text-7xl mb-6 glow house-gryffindor\">\n \ud83e\udd81\n <\/div>\n <h2 id=\"result-title\" class=\"font-magic text-4xl text-yellow-400 mb-4\">Gratulace!<\/h2>\n <p id=\"result-message\" class=\"text-xl text-gray-300 mb-4\"><\/p>\n <div id=\"final-score\" class=\"font-magic text-5xl text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-yellow-200 mb-8\">\n 0\/10\n <\/div>\n <p id=\"house-message\" class=\"text-lg text-gray-400 mb-8\"><\/p><button id=\"play-again-btn\" class=\"btn-magic px-12 py-4 bg-gradient-to-r from-yellow-700 via-yellow-600 to-yellow-700 text-white font-magic text-xl rounded-lg hover:from-yellow-600 hover:via-yellow-500 hover:to-yellow-600\"> \u26a1 Hr\u00e1t znovu \u26a1 <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n \/\/ Quiz questions about Harry Potter characters - improved Czech and visuals\n const questions = [\n {\n question: \"\ud83e\uddd9\u200d\u2642\ufe0f Kdo je \u0159editelem Bradavic na po\u010d\u00e1tku p\u0159\u00edb\u011bhu?\",\n answers: [\"Albus Brumb\u00e1l\", \"Severus Snape\", \"Minerva McGonagallov\u00e1\", \"Rubeus Hagrid\"],\n correct: 0,\n emoji: \"\ud83e\uddd9\u200d\u2642\ufe0f\"\n },\n {\n question: \"\u26a1 Jak\u00e9ho patrona, joko zv\u00ed\u0159e, si Harry Potter vytvo\u0159il?\",\n answers: [\"\u010cern\u00fd vlk\", \"St\u0159\u00edbrn\u00fd jelen\", \"Zlat\u00fd f\u00e9nix\", \"Jedovat\u00fd had\"],\n correct: 1,\n emoji: \"\ud83e\udd8c\"\n },\n {\n question: \"\ud83d\udc6b Kdo je nejlep\u0161\u00edm a nejloaj\u00e1ln\u011bj\u0161\u00edm p\u0159\u00edtelem Harryho Pottera?\",\n answers: [\"Draco Malfoy\", \"Neville Longbottom\", \"Ron Weasley\", \"Cedric Diggory\"],\n correct: 2,\n emoji: \"\ud83d\udc6b\"\n },\n {\n question: \"\ud83e\udddf Jak se jmenuje dom\u00e1c\u00ed sk\u0159\u00edtek, kter\u00fd se stane v\u011brn\u00fdm pomocn\u00edkem Harryho?\",\n answers: [\"Dobby\", \"Kr\u00e1tura\", \"Winky\", \"Hokey\"],\n correct: 0,\n emoji: \"\ud83e\udddf\"\n },\n {\n question: \"\u2694\ufe0f Ve kter\u00e9m filmu se Harry potk\u00e1 s Voldemortem v Bradavick\u00e9 arm\u00e1d\u011b?\",\n answers: [\"V\u011bze\u0148 z Azkabanu\", \"F\u00e9nix \u0159\u00e1du\", \"Princ dvoj\u00ed krve\", \"Relikvie smrti\"],\n correct: 3,\n emoji: \"\u2694\ufe0f\"\n },\n {\n question: \"\ud83d\udc9a Jakou barvu maj\u00ed o\u010di Harryho Pottera podle knihy ?\",\n answers: [\"Lesklou hn\u011bdou\", \"Nebeskou modrou\", \"Smaragdov\u011b zelenou\", \"Ledov\u011b \u0161edou\"],\n correct: 2,\n emoji: \"\ud83d\udc9a\"\n },\n {\n question: \"\ud83d\udc15 Kter\u00fd z t\u011bchto kouzeln\u00edk\u016f se pomoc\u00ed anim\u00e1gie m\u016f\u017ee m\u011bnit na \u010dern\u00e9ho psa?\",\n answers: [\"Remus Lupin\", \"Sirius Black\", \"Peter Pettigrew\", \"James Potter\"],\n correct: 1,\n emoji: \"\ud83d\udc15\"\n },\n {\n question: \"\ud83d\udd25 Jak se jmenuje v\u011brn\u00fd f\u00e9nix Albuse Brumb\u00e1la?\",\n answers: [\"Fawkes\", \"Fireheart\", \"Phoenix\", \"Inferno\"],\n correct: 0,\n emoji: \"\ud83d\udd25\"\n },\n {\n question: \"\ud83e\udea8 Kdo byl skute\u010dn\u00fdm tv\u016frcem legend\u00e1rn\u00edho Kamene mudrc\u016f?\",\n answers: [\"Albus Brumb\u00e1l\", \"Nicolas Flamel\", \"Salazar Zmijozel\", \"Godric Nebelv\u00edr\"],\n correct: 1,\n emoji: \"\ud83d\udc8e\"\n },\n {\n question: \"\ud83d\udc0d Jak\u00e9 je skute\u010dn\u00e9 a pln\u00e9 jm\u00e9no Lorda Voldemorta?\",\n answers: [\"Tomio Raddle\", \"Tom Marvolo Riddle\", \"Thomas Marvolo Riddlus\", \"Timothy Riddle\"],\n correct: 2,\n emoji: \"\ud83d\udc0d\"\n }\n ];\n\n \/\/ Game state\n let currentQuestion = 0;\n let score = 0;\n let playerName = '';\n let shuffledQuestions = [];\n let leaderboardData = [];\n\n \/\/ Default config\n const defaultConfig = {\n game_title: 'Harry Potter Kv\u00edz',\n welcome_text: 'V\u00edtejte v magick\u00e9m sv\u011bt\u011b Bradavic! Otestujte sv\u00e9 znalosti o postav\u00e1ch z filmov\u00e9 s\u00e9rie.',\n primary_color: '#daa520',\n secondary_color: '#1a1a2e',\n text_color: '#ffffff',\n accent_color: '#ffd700',\n button_color: '#b8860b',\n font_family: 'Cinzel Decorative',\n font_size: 16\n };\n\n \/\/ Create magical stars\n function createStars() {\n const starsContainer = document.getElementById('stars');\n starsContainer.innerHTML = '';\n for (let i = 0; i < 50; i++) {\n const star = document.createElement('div');\n star.className = 'star';\n star.style.left = Math.random() * 100 + '%';\n star.style.top = Math.random() * 100 + '%';\n star.style.width = Math.random() * 4 + 2 + 'px';\n star.style.height = star.style.width;\n star.style.animationDelay = Math.random() * 3 + 's';\n starsContainer.appendChild(star);\n }\n }\n\n \/\/ Shuffle array\n function shuffleArray(array) {\n const shuffled = [...array];\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];\n }\n return shuffled;\n }\n\n \/\/ Show screen\n function showScreen(screenId) {\n document.querySelectorAll('#start-screen, #quiz-screen, #result-screen').forEach(el => {\n el.classList.add('hidden');\n });\n document.getElementById(screenId).classList.remove('hidden');\n }\n\n \/\/ Start game\n function startGame() {\n playerName = document.getElementById('player-name').value.trim() || 'Kouzeln\u00edk';\n currentQuestion = 0;\n score = 0;\n shuffledQuestions = shuffleArray(questions);\n showScreen('quiz-screen');\n showQuestion();\n }\n\n \/\/ Show question\n function showQuestion() {\n const q = shuffledQuestions[currentQuestion];\n document.getElementById('question-counter').textContent = `Ot\u00e1zka ${currentQuestion + 1}\/${shuffledQuestions.length}`;\n document.getElementById('score-display').textContent = `Sk\u00f3re: ${score}`;\n document.getElementById('progress-bar').style.width = ((currentQuestion + 1) \/ shuffledQuestions.length * 100) + '%';\n document.getElementById('question-text').textContent = q.question;\n document.getElementById('character-display').querySelector('div').textContent = q.emoji;\n \n const answersContainer = document.getElementById('answers-container');\n answersContainer.innerHTML = '';\n \n q.answers.forEach((answer, index) => {\n const btn = document.createElement('button');\n btn.className = 'answer-btn w-full p-4 bg-gray-800\/80 hover:bg-gray-700\/80 text-white text-lg text-left rounded-lg';\n btn.innerHTML = `<span class=\"font-magic text-yellow-400 mr-3\">${String.fromCharCode(65 + index)}.<\/span> ${answer}`;\n btn.onclick = () => selectAnswer(index);\n answersContainer.appendChild(btn);\n });\n \n document.getElementById('next-btn').classList.add('hidden');\n }\n\n \/\/ Select answer\n function selectAnswer(index) {\n const q = shuffledQuestions[currentQuestion];\n const buttons = document.querySelectorAll('.answer-btn');\n \n buttons.forEach((btn, i) => {\n btn.disabled = true;\n if (i === q.correct) {\n btn.classList.add('correct');\n } else if (i === index && index !== q.correct) {\n btn.classList.add('wrong');\n }\n });\n \n if (index === q.correct) {\n score++;\n document.getElementById('score-display').textContent = `Sk\u00f3re: ${score}`;\n }\n \n document.getElementById('next-btn').classList.remove('hidden');\n document.getElementById('next-btn').textContent = currentQuestion < shuffledQuestions.length - 1 ? 'Dal\u0161\u00ed ot\u00e1zka \u2192' : 'Zobrazit v\u00fdsledky \u2192';\n }\n\n \/\/ Next question\n function nextQuestion() {\n currentQuestion++;\n if (currentQuestion < shuffledQuestions.length) {\n showQuestion();\n } else {\n showResults();\n }\n }\n\n \/\/ Determine house\n function determineHouse(score) {\n const percentage = score \/ questions.length;\n if (percentage >= 0.9) return { name: 'Nebelv\u00edr', emoji: '\ud83e\udd81', class: 'house-gryffindor', message: 'Tv\u00e1 odvaha a znalosti jsou legend\u00e1rn\u00ed!' };\n if (percentage >= 0.7) return { name: 'Havrasp\u00e1r', emoji: '\ud83e\udd85', class: 'house-ravenclaw', message: 'Tv\u00e1 moudrost je obdivuhodn\u00e1!' };\n if (percentage >= 0.5) return { name: 'Mrzimor', emoji: '\ud83e\udda1', class: 'house-hufflepuff', message: 'Tv\u00e1 vytrvalost se vyplatila!' };\n return { name: 'Zmijozel', emoji: '\ud83d\udc0d', class: 'house-slytherin', message: 'M\u00e1\u0161 potenci\u00e1l, jen v\u00edc studuj!' };\n }\n\n \/\/ Show results\n async function showResults() {\n const house = determineHouse(score);\n \n document.getElementById('house-badge').className = `w-40 h-40 mx-auto rounded-full flex items-center justify-center text-7xl mb-6 glow ${house.class}`;\n document.getElementById('house-badge').textContent = house.emoji;\n document.getElementById('result-title').textContent = `${playerName}, jsi ${house.name}!`;\n document.getElementById('result-message').textContent = house.message;\n document.getElementById('final-score').textContent = `${score}\/${questions.length}`;\n document.getElementById('house-message').textContent = `Moudr\u00fd klobouk t\u011b za\u0159adil do koleje ${house.name} na z\u00e1klad\u011b tv\u00fdch znalost\u00ed.`;\n \n showScreen('result-screen');\n \n \/\/ Save score to Data SDK\n if (window.dataSdk) {\n if (leaderboardData.length >= 999) {\n console.warn('Leaderboard limit reached');\n } else {\n const result = await window.dataSdk.create({\n player_name: playerName,\n house: house.name,\n score: score,\n completed_at: new Date().toISOString()\n });\n if (!result.isOk) {\n console.error('Failed to save score');\n }\n }\n }\n }\n\n \/\/ Update leaderboard display\n function updateLeaderboard(data) {\n leaderboardData = data;\n const container = document.getElementById('leaderboard-list');\n const leaderboard = document.getElementById('leaderboard');\n \n if (data.length === 0) {\n leaderboard.classList.add('hidden');\n return;\n }\n \n leaderboard.classList.remove('hidden');\n \n const sorted = [...data].sort((a, b) => b.score - a.score).slice(0, 5);\n \n container.innerHTML = sorted.map((entry, index) => {\n const medals = ['\ud83e\udd47', '\ud83e\udd48', '\ud83e\udd49', '\u2728', '\u2b50'];\n return `\n <div class=\"flex justify-between items-center py-2 ${index < sorted.length - 1 ? 'border-b border-yellow-600\/20' : ''}\">\n <span class=\"text-yellow-400\">${medals[index] || '\u2b50'} ${entry.player_name}<\/span>\n <span class=\"text-gray-300\">${entry.score}\/10 (${entry.house})<\/span>\n <\/div>\n `;\n }).join('');\n }\n\n \/\/ Render function for config changes\n async function onConfigChange(config) {\n const title = config.game_title || defaultConfig.game_title;\n const welcome = config.welcome_text || defaultConfig.welcome_text;\n const primaryColor = config.primary_color || defaultConfig.primary_color;\n const textColor = config.text_color || defaultConfig.text_color;\n const fontFamily = config.font_family || defaultConfig.font_family;\n const fontSize = config.font_size || defaultConfig.font_size;\n \n const titleEl = document.getElementById('game-title');\n const welcomeEl = document.getElementById('welcome-text');\n \n if (titleEl) {\n titleEl.textContent = title;\n titleEl.style.fontFamily = `${fontFamily}, cursive`;\n titleEl.style.fontSize = `${fontSize * 2.5}px`;\n }\n \n if (welcomeEl) {\n welcomeEl.textContent = welcome;\n welcomeEl.style.fontSize = `${fontSize * 1.25}px`;\n welcomeEl.style.color = textColor;\n }\n \n document.querySelectorAll('.font-magic').forEach(el => {\n el.style.fontFamily = `${fontFamily}, cursive`;\n });\n }\n\n \/\/ Initialize\n async function init() {\n createStars();\n \n \/\/ Initialize Element SDK\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange,\n mapToCapabilities: (config) => ({\n recolorables: [\n {\n get: () => config.primary_color || defaultConfig.primary_color,\n set: (v) => { config.primary_color = v; window.elementSdk.setConfig({ primary_color: v }); }\n },\n {\n get: () => config.secondary_color || defaultConfig.secondary_color,\n set: (v) => { config.secondary_color = v; window.elementSdk.setConfig({ secondary_color: v }); }\n },\n {\n get: () => config.text_color || defaultConfig.text_color,\n set: (v) => { config.text_color = v; window.elementSdk.setConfig({ text_color: v }); }\n },\n {\n get: () => config.accent_color || defaultConfig.accent_color,\n set: (v) => { config.accent_color = v; window.elementSdk.setConfig({ accent_color: v }); }\n },\n {\n get: () => config.button_color || defaultConfig.button_color,\n set: (v) => { config.button_color = v; window.elementSdk.setConfig({ button_color: v }); }\n }\n ],\n borderables: [],\n fontEditable: {\n get: () => config.font_family || defaultConfig.font_family,\n set: (v) => { config.font_family = v; window.elementSdk.setConfig({ font_family: v }); }\n },\n fontSizeable: {\n get: () => config.font_size || defaultConfig.font_size,\n set: (v) => { config.font_size = v; window.elementSdk.setConfig({ font_size: v }); }\n }\n }),\n mapToEditPanelValues: (config) => new Map([\n ['game_title', config.game_title || defaultConfig.game_title],\n ['welcome_text', config.welcome_text || defaultConfig.welcome_text]\n ])\n });\n }\n \n \/\/ Initialize Data SDK\n if (window.dataSdk) {\n const result = await window.dataSdk.init({\n onDataChanged: (data) => {\n updateLeaderboard(data);\n }\n });\n if (!result.isOk) {\n console.error('Failed to initialize Data SDK');\n }\n }\n \n \/\/ Event listeners\n document.getElementById('start-btn').addEventListener('click', startGame);\n document.getElementById('next-btn').addEventListener('click', nextQuestion);\n document.getElementById('play-again-btn').addEventListener('click', () => {\n showScreen('start-screen');\n document.getElementById('player-name').value = '';\n });\n \n \/\/ Enable start button when name is entered\n const nameInput = document.getElementById('player-name');\n const startBtn = document.getElementById('start-btn');\n nameInput.addEventListener('input', () => {\n startBtn.disabled = nameInput.value.trim().length === 0;\n });\n startBtn.disabled = true;\n }\n \n init();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9d20c0a5f4f0f976',t:'MTc3MTc4NzEwMS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Harry Potter Kv\u00edz Harry Potter Kv\u00edz V\u00edtejte v magick\u00e9m sv\u011bt\u011b Bradavic! Otestujte sv\u00e9 znalosti o postav\u00e1ch z filmov\u00e9 s\u00e9rie. \u26a1 Za\u010d\u00edt dobrodru\u017estv\u00ed \u26a1 \ud83c\udfc6 S\u00ed\u0148 sl\u00e1vy Ot\u00e1zka 1\/10 Sk\u00f3re: 0 \u26a1 Ot\u00e1zka se na\u010d\u00edt\u00e1… Dal\u0161\u00ed ot\u00e1zka \u2192 \ud83e\udd81 Gratulace! 0\/10 \u26a1 Hr\u00e1t znovu \u26a1<\/p>\n","protected":false},"author":72,"featured_media":43269,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"full-width","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"[\"content\",\"tags\"]","neve_meta_disable_header":"","neve_meta_disable_footer":"on","neve_meta_disable_title":"","footnotes":""},"categories":[450],"tags":[452],"class_list":["post-43282","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ozp-2026","tag-ozp-2026"],"_links":{"self":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts\/43282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/comments?post=43282"}],"version-history":[{"count":5,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts\/43282\/revisions"}],"predecessor-version":[{"id":44074,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts\/43282\/revisions\/44074"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/media\/43269"}],"wp:attachment":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/media?parent=43282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/categories?post=43282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/tags?post=43282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":43282,"date":"2026-02-22T20:38:55","date_gmt":"2026-02-22T19:38:55","guid":{"rendered":"https:\/\/zszelena42.eu\/2021\/?p=43282"},"modified":"2026-04-04T18:22:18","modified_gmt":"2026-04-04T17:22:18","slug":"kviz","status":"publish","type":"post","link":"https:\/\/zszelena42.eu\/2021\/2025-2026\/ozp-2026\/kviz\/","title":{"rendered":"Kv\u00edz"},"content":{"rendered":"\n\n\n \n \n \n Harry Potter Kv\u00edz<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\/3.4.17\"><\/script>\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\n <script src=\"\/_sdk\/data_sdk.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel+Decorative:wght@400;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap\" rel=\"stylesheet\">\n <style>\n .font-magic { font-family: 'Cinzel Decorative', cursive; }\n .font-body { font-family: 'Crimson Text', serif; }\n \n @keyframes float {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-20px) rotate(5deg); }\n }\n \n @keyframes sparkle {\n 0%, 100% { opacity: 0; transform: scale(0); }\n 50% { opacity: 1; transform: scale(1); }\n }\n \n @keyframes glow {\n 0%, 100% { box-shadow: 0 0 20px rgba(218, 165, 32, 0.3); }\n 50% { box-shadow: 0 0 40px rgba(218, 165, 32, 0.6); }\n }\n \n .float { animation: float 6s ease-in-out infinite; }\n .sparkle { animation: sparkle 2s ease-in-out infinite; }\n .glow { animation: glow 3s ease-in-out infinite; }\n \n .star {\n position: absolute;\n background: gold;\n border-radius: 50%;\n animation: sparkle 3s ease-in-out infinite;\n }\n \n .house-gryffindor { background: linear-gradient(135deg, #740001 0%, #ae0001 50%, #eeba30 100%); }\n .house-slytherin { background: linear-gradient(135deg, #1a472a 0%, #2a623d 50%, #5d5d5d 100%); }\n .house-ravenclaw { background: linear-gradient(135deg, #0e1a40 0%, #222f5b 50%, #946b2d 100%); }\n .house-hufflepuff { background: linear-gradient(135deg, #ecb939 0%, #f0c75e 50%, #372e29 100%); }\n \n .btn-magic {\n position: relative;\n overflow: hidden;\n transition: all 0.3s ease;\n }\n \n .btn-magic::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);\n transform: rotate(45deg);\n transition: all 0.5s ease;\n }\n \n .btn-magic:hover::before {\n left: 100%;\n }\n \n .answer-btn {\n transition: all 0.3s ease;\n border: 2px solid transparent;\n }\n \n .answer-btn:hover:not(:disabled) {\n transform: translateX(10px);\n border-color: #daa520;\n }\n \n .answer-btn.correct {\n background: linear-gradient(135deg, #2d5a27 0%, #4a7c43 100%) !important;\n border-color: #90ee90 !important;\n }\n \n .answer-btn.wrong {\n background: linear-gradient(135deg, #8b0000 0%, #b22222 100%) !important;\n border-color: #ff6b6b !important;\n }\n <\/style>\n <style>body { box-sizing: border-box; }<\/style>\n <\/head>\n <body class=\"h-full font-body\">\n <div id=\"app\" class=\"h-full w-full overflow-auto\" style=\"background: linear-gradient(180deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);\">\n \n <div id=\"stars\" class=\"fixed inset-0 pointer-events-none overflow-hidden\"><\/div>\n <div class=\"relative z-10 min-h-full flex flex-col items-center justify-center p-6\">\n \n <div id=\"start-screen\" class=\"text-center max-w-2xl mx-auto\">\n <div class=\"float mb-8\">\n <svg class=\"w-32 h-32 mx-auto text-yellow-500\" viewbox=\"0 0 100 100\" fill=\"currentColor\">\n <path d=\"M50 5 L53 35 L85 35 L58 55 L68 90 L50 70 L32 90 L42 55 L15 35 L47 35 Z\" \/>\n <\/svg>\n <\/div>\n <h1 id=\"game-title\" class=\"font-magic text-4xl md:text-6xl text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-yellow-200 to-yellow-400 mb-4 glow\">Harry Potter Kv\u00edz<\/h1>\n <p id=\"welcome-text\" class=\"text-xl text-gray-300 mb-8\">V\u00edtejte v magick\u00e9m sv\u011bt\u011b Bradavic! Otestujte sv\u00e9 znalosti o postav\u00e1ch z filmov\u00e9 s\u00e9rie.<\/p>\n <div class=\"mb-8\">\n <input type=\"text\" id=\"player-name\" placeholder=\"Zadejte sv\u00e9 jm\u00e9no, kouzeln\u00edku...\" class=\"w-full max-w-md px-6 py-4 bg-gray-900\/50 border-2 border-yellow-600\/50 rounded-lg text-white text-center text-lg focus:outline-none focus:border-yellow-400 placeholder-gray-500\">\n <\/div><button id=\"start-btn\" class=\"btn-magic px-12 py-4 bg-gradient-to-r from-yellow-700 via-yellow-600 to-yellow-700 text-white font-magic text-xl rounded-lg hover:from-yellow-600 hover:via-yellow-500 hover:to-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed\"> \u26a1 Za\u010d\u00edt dobrodru\u017estv\u00ed \u26a1 <\/button> \n <div id=\"leaderboard\" class=\"mt-12 hidden\">\n <h3 class=\"font-magic text-2xl text-yellow-400 mb-4\">\ud83c\udfc6 S\u00ed\u0148 sl\u00e1vy<\/h3>\n <div id=\"leaderboard-list\" class=\"bg-gray-900\/50 rounded-lg p-4 max-w-md mx-auto border border-yellow-600\/30\">\n <\/div>\n <\/div>\n <\/div>\n <div id=\"quiz-screen\" class=\"hidden w-full max-w-3xl mx-auto\">\n <div class=\"bg-gray-900\/70 backdrop-blur rounded-2xl p-8 border border-yellow-600\/30\">\n \n <div class=\"flex justify-between items-center mb-6\">\n <span id=\"question-counter\" class=\"font-magic text-yellow-400\">Ot\u00e1zka 1\/10<\/span> <span id=\"score-display\" class=\"font-magic text-yellow-400\">Sk\u00f3re: 0<\/span>\n <\/div>\n <div class=\"w-full bg-gray-800 rounded-full h-2 mb-8\">\n <div id=\"progress-bar\" class=\"bg-gradient-to-r from-yellow-600 to-yellow-400 h-2 rounded-full transition-all duration-500\" style=\"width: 10%\"><\/div>\n <\/div>\n <div id=\"character-display\" class=\"text-center mb-6\">\n <div class=\"w-32 h-32 mx-auto rounded-full bg-gradient-to-br from-yellow-600 to-yellow-800 flex items-center justify-center text-6xl mb-4 glow\">\n \u26a1\n <\/div>\n <\/div>\n <h2 id=\"question-text\" class=\"font-magic text-2xl md:text-3xl text-white text-center mb-8\">Ot\u00e1zka se na\u010d\u00edt\u00e1…<\/h2>\n <div id=\"answers-container\" class=\"space-y-4\">\n <\/div> <button id=\"next-btn\" class=\"hidden mt-8 w-full btn-magic px-8 py-4 bg-gradient-to-r from-yellow-700 via-yellow-600 to-yellow-700 text-white font-magic text-xl rounded-lg hover:from-yellow-600 hover:via-yellow-500 hover:to-yellow-600\"> Dal\u0161\u00ed ot\u00e1zka \u2192 <\/button>\n <\/div>\n <\/div>\n <div id=\"result-screen\" class=\"hidden text-center max-w-2xl mx-auto\">\n <div class=\"bg-gray-900\/70 backdrop-blur rounded-2xl p-8 border border-yellow-600\/30\">\n <div id=\"house-badge\" class=\"w-40 h-40 mx-auto rounded-full flex items-center justify-center text-7xl mb-6 glow house-gryffindor\">\n \ud83e\udd81\n <\/div>\n <h2 id=\"result-title\" class=\"font-magic text-4xl text-yellow-400 mb-4\">Gratulace!<\/h2>\n <p id=\"result-message\" class=\"text-xl text-gray-300 mb-4\"><\/p>\n <div id=\"final-score\" class=\"font-magic text-5xl text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-yellow-200 mb-8\">\n 0\/10\n <\/div>\n <p id=\"house-message\" class=\"text-lg text-gray-400 mb-8\"><\/p><button id=\"play-again-btn\" class=\"btn-magic px-12 py-4 bg-gradient-to-r from-yellow-700 via-yellow-600 to-yellow-700 text-white font-magic text-xl rounded-lg hover:from-yellow-600 hover:via-yellow-500 hover:to-yellow-600\"> \u26a1 Hr\u00e1t znovu \u26a1 <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n \/\/ Quiz questions about Harry Potter characters - improved Czech and visuals\n const questions = [\n {\n question: \"\ud83e\uddd9\u200d\u2642\ufe0f Kdo je \u0159editelem Bradavic na po\u010d\u00e1tku p\u0159\u00edb\u011bhu?\",\n answers: [\"Albus Brumb\u00e1l\", \"Severus Snape\", \"Minerva McGonagallov\u00e1\", \"Rubeus Hagrid\"],\n correct: 0,\n emoji: \"\ud83e\uddd9\u200d\u2642\ufe0f\"\n },\n {\n question: \"\u26a1 Jak\u00e9ho patrona, joko zv\u00ed\u0159e, si Harry Potter vytvo\u0159il?\",\n answers: [\"\u010cern\u00fd vlk\", \"St\u0159\u00edbrn\u00fd jelen\", \"Zlat\u00fd f\u00e9nix\", \"Jedovat\u00fd had\"],\n correct: 1,\n emoji: \"\ud83e\udd8c\"\n },\n {\n question: \"\ud83d\udc6b Kdo je nejlep\u0161\u00edm a nejloaj\u00e1ln\u011bj\u0161\u00edm p\u0159\u00edtelem Harryho Pottera?\",\n answers: [\"Draco Malfoy\", \"Neville Longbottom\", \"Ron Weasley\", \"Cedric Diggory\"],\n correct: 2,\n emoji: \"\ud83d\udc6b\"\n },\n {\n question: \"\ud83e\udddf Jak se jmenuje dom\u00e1c\u00ed sk\u0159\u00edtek, kter\u00fd se stane v\u011brn\u00fdm pomocn\u00edkem Harryho?\",\n answers: [\"Dobby\", \"Kr\u00e1tura\", \"Winky\", \"Hokey\"],\n correct: 0,\n emoji: \"\ud83e\udddf\"\n },\n {\n question: \"\u2694\ufe0f Ve kter\u00e9m filmu se Harry potk\u00e1 s Voldemortem v Bradavick\u00e9 arm\u00e1d\u011b?\",\n answers: [\"V\u011bze\u0148 z Azkabanu\", \"F\u00e9nix \u0159\u00e1du\", \"Princ dvoj\u00ed krve\", \"Relikvie smrti\"],\n correct: 3,\n emoji: \"\u2694\ufe0f\"\n },\n {\n question: \"\ud83d\udc9a Jakou barvu maj\u00ed o\u010di Harryho Pottera podle knihy ?\",\n answers: [\"Lesklou hn\u011bdou\", \"Nebeskou modrou\", \"Smaragdov\u011b zelenou\", \"Ledov\u011b \u0161edou\"],\n correct: 2,\n emoji: \"\ud83d\udc9a\"\n },\n {\n question: \"\ud83d\udc15 Kter\u00fd z t\u011bchto kouzeln\u00edk\u016f se pomoc\u00ed anim\u00e1gie m\u016f\u017ee m\u011bnit na \u010dern\u00e9ho psa?\",\n answers: [\"Remus Lupin\", \"Sirius Black\", \"Peter Pettigrew\", \"James Potter\"],\n correct: 1,\n emoji: \"\ud83d\udc15\"\n },\n {\n question: \"\ud83d\udd25 Jak se jmenuje v\u011brn\u00fd f\u00e9nix Albuse Brumb\u00e1la?\",\n answers: [\"Fawkes\", \"Fireheart\", \"Phoenix\", \"Inferno\"],\n correct: 0,\n emoji: \"\ud83d\udd25\"\n },\n {\n question: \"\ud83e\udea8 Kdo byl skute\u010dn\u00fdm tv\u016frcem legend\u00e1rn\u00edho Kamene mudrc\u016f?\",\n answers: [\"Albus Brumb\u00e1l\", \"Nicolas Flamel\", \"Salazar Zmijozel\", \"Godric Nebelv\u00edr\"],\n correct: 1,\n emoji: \"\ud83d\udc8e\"\n },\n {\n question: \"\ud83d\udc0d Jak\u00e9 je skute\u010dn\u00e9 a pln\u00e9 jm\u00e9no Lorda Voldemorta?\",\n answers: [\"Tomio Raddle\", \"Tom Marvolo Riddle\", \"Thomas Marvolo Riddlus\", \"Timothy Riddle\"],\n correct: 2,\n emoji: \"\ud83d\udc0d\"\n }\n ];\n\n \/\/ Game state\n let currentQuestion = 0;\n let score = 0;\n let playerName = '';\n let shuffledQuestions = [];\n let leaderboardData = [];\n\n \/\/ Default config\n const defaultConfig = {\n game_title: 'Harry Potter Kv\u00edz',\n welcome_text: 'V\u00edtejte v magick\u00e9m sv\u011bt\u011b Bradavic! Otestujte sv\u00e9 znalosti o postav\u00e1ch z filmov\u00e9 s\u00e9rie.',\n primary_color: '#daa520',\n secondary_color: '#1a1a2e',\n text_color: '#ffffff',\n accent_color: '#ffd700',\n button_color: '#b8860b',\n font_family: 'Cinzel Decorative',\n font_size: 16\n };\n\n \/\/ Create magical stars\n function createStars() {\n const starsContainer = document.getElementById('stars');\n starsContainer.innerHTML = '';\n for (let i = 0; i < 50; i++) {\n const star = document.createElement('div');\n star.className = 'star';\n star.style.left = Math.random() * 100 + '%';\n star.style.top = Math.random() * 100 + '%';\n star.style.width = Math.random() * 4 + 2 + 'px';\n star.style.height = star.style.width;\n star.style.animationDelay = Math.random() * 3 + 's';\n starsContainer.appendChild(star);\n }\n }\n\n \/\/ Shuffle array\n function shuffleArray(array) {\n const shuffled = [...array];\n for (let i = shuffled.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];\n }\n return shuffled;\n }\n\n \/\/ Show screen\n function showScreen(screenId) {\n document.querySelectorAll('#start-screen, #quiz-screen, #result-screen').forEach(el => {\n el.classList.add('hidden');\n });\n document.getElementById(screenId).classList.remove('hidden');\n }\n\n \/\/ Start game\n function startGame() {\n playerName = document.getElementById('player-name').value.trim() || 'Kouzeln\u00edk';\n currentQuestion = 0;\n score = 0;\n shuffledQuestions = shuffleArray(questions);\n showScreen('quiz-screen');\n showQuestion();\n }\n\n \/\/ Show question\n function showQuestion() {\n const q = shuffledQuestions[currentQuestion];\n document.getElementById('question-counter').textContent = `Ot\u00e1zka ${currentQuestion + 1}\/${shuffledQuestions.length}`;\n document.getElementById('score-display').textContent = `Sk\u00f3re: ${score}`;\n document.getElementById('progress-bar').style.width = ((currentQuestion + 1) \/ shuffledQuestions.length * 100) + '%';\n document.getElementById('question-text').textContent = q.question;\n document.getElementById('character-display').querySelector('div').textContent = q.emoji;\n \n const answersContainer = document.getElementById('answers-container');\n answersContainer.innerHTML = '';\n \n q.answers.forEach((answer, index) => {\n const btn = document.createElement('button');\n btn.className = 'answer-btn w-full p-4 bg-gray-800\/80 hover:bg-gray-700\/80 text-white text-lg text-left rounded-lg';\n btn.innerHTML = `<span class=\"font-magic text-yellow-400 mr-3\">${String.fromCharCode(65 + index)}.<\/span> ${answer}`;\n btn.onclick = () => selectAnswer(index);\n answersContainer.appendChild(btn);\n });\n \n document.getElementById('next-btn').classList.add('hidden');\n }\n\n \/\/ Select answer\n function selectAnswer(index) {\n const q = shuffledQuestions[currentQuestion];\n const buttons = document.querySelectorAll('.answer-btn');\n \n buttons.forEach((btn, i) => {\n btn.disabled = true;\n if (i === q.correct) {\n btn.classList.add('correct');\n } else if (i === index && index !== q.correct) {\n btn.classList.add('wrong');\n }\n });\n \n if (index === q.correct) {\n score++;\n document.getElementById('score-display').textContent = `Sk\u00f3re: ${score}`;\n }\n \n document.getElementById('next-btn').classList.remove('hidden');\n document.getElementById('next-btn').textContent = currentQuestion < shuffledQuestions.length - 1 ? 'Dal\u0161\u00ed ot\u00e1zka \u2192' : 'Zobrazit v\u00fdsledky \u2192';\n }\n\n \/\/ Next question\n function nextQuestion() {\n currentQuestion++;\n if (currentQuestion < shuffledQuestions.length) {\n showQuestion();\n } else {\n showResults();\n }\n }\n\n \/\/ Determine house\n function determineHouse(score) {\n const percentage = score \/ questions.length;\n if (percentage >= 0.9) return { name: 'Nebelv\u00edr', emoji: '\ud83e\udd81', class: 'house-gryffindor', message: 'Tv\u00e1 odvaha a znalosti jsou legend\u00e1rn\u00ed!' };\n if (percentage >= 0.7) return { name: 'Havrasp\u00e1r', emoji: '\ud83e\udd85', class: 'house-ravenclaw', message: 'Tv\u00e1 moudrost je obdivuhodn\u00e1!' };\n if (percentage >= 0.5) return { name: 'Mrzimor', emoji: '\ud83e\udda1', class: 'house-hufflepuff', message: 'Tv\u00e1 vytrvalost se vyplatila!' };\n return { name: 'Zmijozel', emoji: '\ud83d\udc0d', class: 'house-slytherin', message: 'M\u00e1\u0161 potenci\u00e1l, jen v\u00edc studuj!' };\n }\n\n \/\/ Show results\n async function showResults() {\n const house = determineHouse(score);\n \n document.getElementById('house-badge').className = `w-40 h-40 mx-auto rounded-full flex items-center justify-center text-7xl mb-6 glow ${house.class}`;\n document.getElementById('house-badge').textContent = house.emoji;\n document.getElementById('result-title').textContent = `${playerName}, jsi ${house.name}!`;\n document.getElementById('result-message').textContent = house.message;\n document.getElementById('final-score').textContent = `${score}\/${questions.length}`;\n document.getElementById('house-message').textContent = `Moudr\u00fd klobouk t\u011b za\u0159adil do koleje ${house.name} na z\u00e1klad\u011b tv\u00fdch znalost\u00ed.`;\n \n showScreen('result-screen');\n \n \/\/ Save score to Data SDK\n if (window.dataSdk) {\n if (leaderboardData.length >= 999) {\n console.warn('Leaderboard limit reached');\n } else {\n const result = await window.dataSdk.create({\n player_name: playerName,\n house: house.name,\n score: score,\n completed_at: new Date().toISOString()\n });\n if (!result.isOk) {\n console.error('Failed to save score');\n }\n }\n }\n }\n\n \/\/ Update leaderboard display\n function updateLeaderboard(data) {\n leaderboardData = data;\n const container = document.getElementById('leaderboard-list');\n const leaderboard = document.getElementById('leaderboard');\n \n if (data.length === 0) {\n leaderboard.classList.add('hidden');\n return;\n }\n \n leaderboard.classList.remove('hidden');\n \n const sorted = [...data].sort((a, b) => b.score - a.score).slice(0, 5);\n \n container.innerHTML = sorted.map((entry, index) => {\n const medals = ['\ud83e\udd47', '\ud83e\udd48', '\ud83e\udd49', '\u2728', '\u2b50'];\n return `\n <div class=\"flex justify-between items-center py-2 ${index < sorted.length - 1 ? 'border-b border-yellow-600\/20' : ''}\">\n <span class=\"text-yellow-400\">${medals[index] || '\u2b50'} ${entry.player_name}<\/span>\n <span class=\"text-gray-300\">${entry.score}\/10 (${entry.house})<\/span>\n <\/div>\n `;\n }).join('');\n }\n\n \/\/ Render function for config changes\n async function onConfigChange(config) {\n const title = config.game_title || defaultConfig.game_title;\n const welcome = config.welcome_text || defaultConfig.welcome_text;\n const primaryColor = config.primary_color || defaultConfig.primary_color;\n const textColor = config.text_color || defaultConfig.text_color;\n const fontFamily = config.font_family || defaultConfig.font_family;\n const fontSize = config.font_size || defaultConfig.font_size;\n \n const titleEl = document.getElementById('game-title');\n const welcomeEl = document.getElementById('welcome-text');\n \n if (titleEl) {\n titleEl.textContent = title;\n titleEl.style.fontFamily = `${fontFamily}, cursive`;\n titleEl.style.fontSize = `${fontSize * 2.5}px`;\n }\n \n if (welcomeEl) {\n welcomeEl.textContent = welcome;\n welcomeEl.style.fontSize = `${fontSize * 1.25}px`;\n welcomeEl.style.color = textColor;\n }\n \n document.querySelectorAll('.font-magic').forEach(el => {\n el.style.fontFamily = `${fontFamily}, cursive`;\n });\n }\n\n \/\/ Initialize\n async function init() {\n createStars();\n \n \/\/ Initialize Element SDK\n if (window.elementSdk) {\n window.elementSdk.init({\n defaultConfig,\n onConfigChange,\n mapToCapabilities: (config) => ({\n recolorables: [\n {\n get: () => config.primary_color || defaultConfig.primary_color,\n set: (v) => { config.primary_color = v; window.elementSdk.setConfig({ primary_color: v }); }\n },\n {\n get: () => config.secondary_color || defaultConfig.secondary_color,\n set: (v) => { config.secondary_color = v; window.elementSdk.setConfig({ secondary_color: v }); }\n },\n {\n get: () => config.text_color || defaultConfig.text_color,\n set: (v) => { config.text_color = v; window.elementSdk.setConfig({ text_color: v }); }\n },\n {\n get: () => config.accent_color || defaultConfig.accent_color,\n set: (v) => { config.accent_color = v; window.elementSdk.setConfig({ accent_color: v }); }\n },\n {\n get: () => config.button_color || defaultConfig.button_color,\n set: (v) => { config.button_color = v; window.elementSdk.setConfig({ button_color: v }); }\n }\n ],\n borderables: [],\n fontEditable: {\n get: () => config.font_family || defaultConfig.font_family,\n set: (v) => { config.font_family = v; window.elementSdk.setConfig({ font_family: v }); }\n },\n fontSizeable: {\n get: () => config.font_size || defaultConfig.font_size,\n set: (v) => { config.font_size = v; window.elementSdk.setConfig({ font_size: v }); }\n }\n }),\n mapToEditPanelValues: (config) => new Map([\n ['game_title', config.game_title || defaultConfig.game_title],\n ['welcome_text', config.welcome_text || defaultConfig.welcome_text]\n ])\n });\n }\n \n \/\/ Initialize Data SDK\n if (window.dataSdk) {\n const result = await window.dataSdk.init({\n onDataChanged: (data) => {\n updateLeaderboard(data);\n }\n });\n if (!result.isOk) {\n console.error('Failed to initialize Data SDK');\n }\n }\n \n \/\/ Event listeners\n document.getElementById('start-btn').addEventListener('click', startGame);\n document.getElementById('next-btn').addEventListener('click', nextQuestion);\n document.getElementById('play-again-btn').addEventListener('click', () => {\n showScreen('start-screen');\n document.getElementById('player-name').value = '';\n });\n \n \/\/ Enable start button when name is entered\n const nameInput = document.getElementById('player-name');\n const startBtn = document.getElementById('start-btn');\n nameInput.addEventListener('input', () => {\n startBtn.disabled = nameInput.value.trim().length === 0;\n });\n startBtn.disabled = true;\n }\n \n init();\n <\/script>\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9d20c0a5f4f0f976',t:'MTc3MTc4NzEwMS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Harry Potter Kv\u00edz Harry Potter Kv\u00edz V\u00edtejte v magick\u00e9m sv\u011bt\u011b Bradavic! Otestujte sv\u00e9 znalosti o postav\u00e1ch z filmov\u00e9 s\u00e9rie. \u26a1 Za\u010d\u00edt dobrodru\u017estv\u00ed \u26a1 \ud83c\udfc6 S\u00ed\u0148 sl\u00e1vy Ot\u00e1zka 1\/10 Sk\u00f3re: 0 \u26a1 Ot\u00e1zka se na\u010d\u00edt\u00e1… Dal\u0161\u00ed ot\u00e1zka \u2192 \ud83e\udd81 Gratulace! 0\/10 \u26a1 Hr\u00e1t znovu \u26a1<\/p>\n","protected":false},"author":72,"featured_media":43269,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"full-width","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"[\"content\",\"tags\"]","neve_meta_disable_header":"","neve_meta_disable_footer":"on","neve_meta_disable_title":"","footnotes":""},"categories":[450],"tags":[452],"class_list":["post-43282","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ozp-2026","tag-ozp-2026"],"_links":{"self":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts\/43282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/comments?post=43282"}],"version-history":[{"count":5,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts\/43282\/revisions"}],"predecessor-version":[{"id":44074,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/posts\/43282\/revisions\/44074"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/media\/43269"}],"wp:attachment":[{"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/media?parent=43282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/categories?post=43282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zszelena42.eu\/2021\/wp-json\/wp\/v2\/tags?post=43282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}