Spaces:
Running
Running
| <html lang="cs"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hodnocení Výuky - Hra</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'accent': '#7c3aed', | |
| 'accent-light': '#8b5cf6', | |
| 'dark': '#1e1b4b', | |
| 'light': '#f5f3ff', | |
| 'fun-blue': '#3b82f6', | |
| 'fun-pink': '#ec4899', | |
| 'fun-green': '#10b981' | |
| }, | |
| fontFamily: { | |
| 'display': ['"Fredoka"', 'sans-serif'], | |
| 'sans': ['"Inter"', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Inter:wght@400;500;600&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: radial-gradient(circle at 10% 20%, rgba(237, 233, 254, 0.5) 0%, rgba(221, 214, 254, 0.5) 90%); | |
| } | |
| .progress-bar { | |
| height: 12px; | |
| border-radius: 6px; | |
| background-size: 200% 100%; | |
| background-image: linear-gradient(90deg, #ec4899 0%, #7c3aed 50%, #3b82f6 100%); | |
| animation: shimmer 2s infinite linear; | |
| transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1); | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| .badge-unlocked { | |
| transform: scale(0); | |
| animation: badgePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; | |
| } | |
| @keyframes badgePop { | |
| 0% { transform: scale(0); opacity: 0; } | |
| 80% { transform: scale(1.1); } | |
| 100% { transform: scale(1); opacity: 1; } | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .option-card { | |
| transition: all 0.2s ease; | |
| } | |
| .option-card:hover { | |
| transform: translateY(-2px); | |
| } | |
| .option-card.selected { | |
| border-color: #7c3aed; | |
| background-color: #f5f3ff; | |
| box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2); | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-12px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .confetti { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #f472b6; | |
| opacity: 0; | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } | |
| 20%, 40%, 60%, 80% { transform: translateX(5px); } | |
| } | |
| .emoji-option { | |
| font-size: 1.5rem; | |
| margin-right: 8px; | |
| } | |
| .fun-border { | |
| border: 3px dashed rgba(59, 130, 246, 0.3); | |
| } | |
| .fun-bg { | |
| background: linear-gradient(45deg, #f5f3ff, #e0e7ff, #ede9fe); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen py-8"> | |
| <div class="container mx-auto px-4 max-w-md"> | |
| <!-- Header with XP Bar --> | |
| <div class="bg-white rounded-2xl shadow-sm p-6 mb-6 card-hover fun-border fun-bg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <h1 class="text-2xl font-display font-bold text-transparent bg-clip-text bg-gradient-to-r from-fun-pink to-fun-blue">Hodnocení Výuky</h1> | |
| <p class="text-sm text-gray-500">Pomoz nám vylepšit výuku!</p> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-sm font-medium text-dark">Level <span id="level" class="text-fun-blue">1</span></div> | |
| <div class="text-xs text-gray-500">XP: <span id="currentXP">0</span>/<span id="maxXP">100</span></div> | |
| </div> | |
| </div> | |
| <div class="w-full bg-gray-100 rounded-full h-3 mb-1 overflow-hidden"> | |
| <div id="xpBar" class="progress-bar h-3" style="width: 0%"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 text-right">+5 XP za každou otázku</p> | |
| </div> | |
| <!-- Survey Container --> | |
| <div id="surveyContainer" class="bg-white rounded-2xl shadow-sm p-6 mb-6 card-hover fun-bg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div> | |
| <h2 class="text-xl font-display font-semibold text-transparent bg-clip-text bg-gradient-to-r from-fun-blue to-fun-green">Dnešní Hodnocení</h2> | |
| <p class="text-sm text-gray-500">Tvůj názor je důležitý!</p> | |
| </div> | |
| <div class="bg-gradient-to-r from-fun-blue to-fun-green text-white text-sm font-medium py-1 px-3 rounded-full"> | |
| <span id="currentQuestion">1</span>/<span id="totalQuestions">5</span> | |
| </div> | |
| </div> | |
| <!-- Question 1 --> | |
| <div id="q1" class="question"> | |
| <p class="text-lg font-medium mb-4 text-dark">Jak moc tě dnešní hodina bavila?</p> | |
| <div class="space-y-3"> | |
| <label for="q1-1" class="block"> | |
| <div class="option-card border border-gray-200 rounded-xl p-4 cursor-pointer hover:bg-fun-pink/10"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q1-1" name="q1" value="5" class="h-5 w-5 text-accent focus:ring-accent-light"> | |
| <span class="ml-3 block text-gray-700"><span class="emoji-option">🤩</span> Úplně nejvíc!</span> | |
| </div> | |
| </div> | |
| </label> | |
| <label for="q1-2" class="block"> | |
| <div class="option-card border border-gray-200 rounded-xl p-4 cursor-pointer hover:bg-fun-blue/10"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q1-2" name="q1" value="4" class="h-5 w-5 text-accent focus:ring-accent-light"> | |
| <span class="ml-3 block text-gray-700"><span class="emoji-option">😎</span> Docela dobrý</span> | |
| </div> | |
| </div> | |
| </label> | |
| <label for="q1-3" class="block"> | |
| <div class="option-card border border-gray-200 rounded-xl p-4 cursor-pointer hover:bg-fun-green/10"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q1-3" name="q1" value="3" class="h-5 w-5 text-accent focus:ring-accent-light"> | |
| <span class="ml-3 block text-gray-700"><span class="emoji-option">😐</span> Ušlo by</span> | |
| </div> | |
| </div> | |
| </label> | |
| <label for="q1-4" class="block"> | |
| <div class="option-card border border-gray-200 rounded-xl p-4 cursor-pointer hover:bg-yellow-100/10"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q1-4" name="q1" value="2" class="h-5 w-5 text-accent focus:ring-accent-light"> | |
| <span class="ml-3 block text-gray-700"><span class="emoji-option">🙄</span> Trochu nuda</span> | |
| </div> | |
| </div> | |
| </label> | |
| <label for="q1-5" class="block"> | |
| <div class="option-card border border-gray-200 rounded-xl p-4 cursor-pointer hover:bg-red-100/10"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q1-5" name="q1" value="1" class="h-5 w-5 text-accent focus:ring-accent-light"> | |
| <span class="ml-3 block text-gray-700"><span class="emoji-option">😴</span> Strašná nuda</span> | |
| </div> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Question 2 --> | |
| <div id="q2" class="question hidden"> | |
| <p class="text-lg font-medium mb-4 text-dark">Jak dobře jsi látce rozuměl/a?</p> | |
| <div class="space-y-3"> | |
| <label for="q2-1" class="block"> | |
| <div class="option-card border border-gray-200 rounded-xl p-4 cursor-pointer hover:bg-fun-pink/10"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q2-1" name="q2" value="5" class="h-5 w-5 text-accent focus:ring-accent-light"> | |
| <span class="ml-3 block text-gray-700"><span class="emoji-option">🧠</span> Všechno chápu!</span> | |
| </div> | |
| </div> | |
| </label> | |
| <label for="q2-2" class="block"> | |
| <div class="option-card border border-gray-200 rounded-xl p-4 cursor-pointer hover:bg-fun-blue/10"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q2-2" name="q2" value="4" class="h-5 w-5 text-accent focus:ring-accent-light"> | |
| <span class="ml-3 block text-gray-700"><span class="emoji-option">💡</span> Skoro všechno</span> | |
| </div> | |
| </div> | |
| </label> | |
| <label for="q2-3" class="block"> | |
| <div class="option-card border border-gray-200 rounded-xl p-4 cursor-pointer hover:bg-fun-green/10"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q2-3" name="q2" value="3" class="h-5 w-5 text-accent focus:ring-accent-light"> | |
| <span class="ml-3 block text-gray-700"><span class="emoji-option">🤔</span> Něco chápu</span> | |
| </div> | |
| </div> | |
| </label> | |
| <label for="q2-4" class="block"> | |
| <div class="option-card border border-gray-200 rounded-xl p-4 cursor-pointer hover:bg-yellow-100/10"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q2-4" name="q2" value="2" class="h-5 w-5 text-accent focus:ring-accent-light"> | |
| <span class="ml-3 block text-gray-700"><span class="emoji-option">❓</span> Málo chápu</span> | |
| </div> | |
| </div> | |
| </label> | |
| <label for="q2-5" class="block"> | |
| <div class="option-card border border-gray-200 rounded-xl p-4 cursor-pointer hover:bg-red-100/10"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="q2-5" name="q2" value="1" class="h-5 w-5 text-accent focus:ring-accent-light"> | |
| <span class="ml-3 block text-gray-700"><span class="emoji-option">😵</span> Nerozumím vůbec</span> | |
| </div> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Question 3 --> | |
| <div id="q3" class="question hidden"> | |
| <p class="text-lg font-medium mb-4 text-dark">Co by hodinu vylepšilo?</p> | |
| <div class="relative"> | |
| <textarea id="q3-text" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-light focus:border-transparent" rows="4" placeholder="Tvoje nápady..."></textarea> | |
| <div class="absolute bottom-3 right-3 text-gray-400 text-sm"> | |
| <i class="fas fa-pen-fancy mr-1"></i> | |
| <span id="charCount">0/200</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Question 4 --> | |
| <div id="q4" class="question hidden"> | |
| <p class="text-lg font-medium mb-4 text-dark">Jaké bylo tempo hodiny?</p> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm text-gray-600">Pomalé</span> | |
| <span class="text-sm text-gray-600">Akorát</span> | |
| <span class="text-sm text-gray-600">Rychlé</span> | |
| </div> | |
| <input type="range" id="q4-range" min="1" max="5" value="3" class="w-full h-2 bg-gray-200 rounded-full appearance-none cursor-pointer accent-fun-blue"> | |
| <div class="flex justify-between mt-1"> | |
| <span class="text-xs text-gray-500">1</span> | |
| <span class="text-xs text-gray-500">2</span> | |
| <span class="text-xs text-gray-500">3</span> | |
| <span class="text-xs text-gray-500">4</span> | |
| <span class="text-xs text-gray-500">5</span> | |
| </div> | |
| </div> | |
| <!-- Question 5 --> | |
| <div id="q5" class="question hidden"> | |
| <p class="text-lg font-medium mb-4 text-dark">Doporučil/a bys tuto hodinu spolužákům?</p> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button onclick="selectRecommendation('yes')" class="flex flex-col items-center justify-center py-4 px-2 bg-green-50 hover:bg-green-100 border border-green-100 rounded-xl transition option-card"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="emoji-option">👍</span> | |
| </div> | |
| <span class="text-sm font-medium text-green-800">Ano</span> | |
| </button> | |
| <button onclick="selectRecommendation('neutral')" class="flex flex-col items-center justify-center py-4 px-2 bg-yellow-50 hover:bg-yellow-100 border border-yellow-100 rounded-xl transition option-card"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="emoji-option">🤷</span> | |
| </div> | |
| <span class="text-sm font-medium text-yellow-800">Možná</span> | |
| </button> | |
| <button onclick="selectRecommendation('no')" class="flex flex-col items-center justify-center py-4 px-2 bg-red-50 hover:bg-red-100 border border-red-100 rounded-xl transition option-card"> | |
| <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mb-2"> | |
| <span class="emoji-option">👎</span> | |
| </div> | |
| <span class="text-sm font-medium text-red-800">Ne</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Navigation Buttons --> | |
| <div class="flex justify-between mt-8"> | |
| <button id="prevBtn" class="py-2.5 px-5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl transition font-medium hidden"> | |
| <i class="fas fa-arrow-left mr-2"></i> Zpět | |
| </button> | |
| <button id="nextBtn" class="py-2.5 px-6 bg-gradient-to-r from-fun-blue to-fun-green hover:from-fun-blue/90 hover:to-fun-green/90 text-white rounded-xl transition font-medium ml-auto shadow-sm shadow-blue-500/30"> | |
| Pokračovat <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <button id="submitBtn" class="py-2.5 px-6 bg-gradient-to-r from-fun-pink to-fun-blue hover:from-fun-pink/90 hover:to-fun-blue/90 text-white rounded-xl transition font-medium hidden shadow-sm shadow-pink-500/30"> | |
| Odeslat <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Badges Section --> | |
| <div class="bg-white rounded-2xl shadow-sm p-6 card-hover fun-bg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-display font-semibold text-transparent bg-clip-text bg-gradient-to-r from-fun-pink to-fun-blue">Tvoje Odznaky</h2> | |
| <span class="text-xs bg-gradient-to-r from-fun-blue to-fun-green text-white font-medium py-1 px-2 rounded-full">3 k získání</span> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div id="feedbackExplorer" class="badge text-center opacity-40"> | |
| <div class="mx-auto bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mb-2"> | |
| <span class="emoji-option">🗺️</span> | |
| </div> | |
| <p class="text-xs font-medium text-gray-500">Průzkumník</p> | |
| </div> | |
| <div id="classArbiter" class="badge text-center opacity-40"> | |
| <div class="mx-auto bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mb-2"> | |
| <span class="emoji-option">🏆</span> | |
| </div> | |
| <p class="text-xs font-medium text-gray-500">Hodnotitel</p> | |
| </div> | |
| <div id="feedbackMaster" class="badge text-center opacity-40"> | |
| <div class="mx-auto bg-gray-100 rounded-full w-16 h-16 flex items-center justify-center mb-2"> | |
| <span class="emoji-option">👑</span> | |
| </div> | |
| <p class="text-xs font-medium text-gray-500">Mistr</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Completion Modal --> | |
| <div id="completionModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 hidden z-50"> | |
| <div class="bg-white rounded-2xl p-8 max-w-sm w-full text-center relative overflow-hidden"> | |
| <!-- Confetti elements --> | |
| <div id="confetti-container" class="absolute inset-0 overflow-hidden pointer-events-none"></div> | |
| <div class="relative z-10"> | |
| <div class="absolute -top-12 left-1/2 transform -translate-x-1/2"> | |
| <div class="w-20 h-20 bg-gradient-to-br from-yellow-400 to-yellow-500 rounded-full flex items-center justify-center shadow-lg floating"> | |
| <span class="emoji-option">🏆</span> | |
| </div> | |
| </div> | |
| <div class="pt-12"> | |
| <h2 class="text-2xl font-display font-bold text-dark mt-6 mb-3">Hotovo!</h2> | |
| <p class="text-gray-600 mb-4">Získal jsi <span class="font-bold text-fun-blue">25 XP</span> a nový odznak!</p> | |
| <div id="earnedBadge" class="mx-auto bg-gradient-to-br from-purple-500 to-accent rounded-full w-24 h-24 flex items-center justify-center mb-4 relative"> | |
| <div class="absolute inset-0 rounded-full bg-white/10 backdrop-blur-sm"></div> | |
| <span class="emoji-option">🏆</span> | |
| </div> | |
| <p class="font-display font-medium text-dark mb-1">Hodnotitel</p> | |
| <p class="text-sm text-gray-500 mb-6">Ocenění za dokončení prvního hodnocení!</p> | |
| <button onclick="closeModal()" class="w-full py-3 px-6 bg-gradient-to-r from-fun-blue to-fun-green hover:from-fun-blue/90 hover:to-fun-green/90 text-white rounded-xl transition font-medium shadow-sm shadow-blue-500/30"> | |
| Skvělý! <i class="fas fa-check ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Survey state | |
| let currentQuestion = 1; | |
| const totalQuestions = 5; | |
| let xp = 0; | |
| let level = 1; | |
| let maxXP = 100; | |
| // DOM elements | |
| const questions = document.querySelectorAll('.question'); | |
| const prevBtn = document.getElementById('prevBtn'); | |
| const nextBtn = document.getElementById('nextBtn'); | |
| const submitBtn = document.getElementById('submitBtn'); | |
| const currentQuestionDisplay = document.getElementById('currentQuestion'); | |
| const totalQuestionsDisplay = document.getElementById('totalQuestions'); | |
| const xpBar = document.getElementById('xpBar'); | |
| const currentXPDisplay = document.getElementById('currentXP'); | |
| const maxXPDisplay = document.getElementById('maxXP'); | |
| const levelDisplay = document.getElementById('level'); | |
| const completionModal = document.getElementById('completionModal'); | |
| const q3Text = document.getElementById('q3-text'); | |
| const charCount = document.getElementById('charCount'); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| totalQuestionsDisplay.textContent = totalQuestions; | |
| updateXPBar(); | |
| // Set up event listeners | |
| nextBtn.addEventListener('click', nextQuestion); | |
| prevBtn.addEventListener('click', prevQuestion); | |
| submitBtn.addEventListener('click', completeSurvey); | |
| // Set up option card selection | |
| document.querySelectorAll('.option-card').forEach(card => { | |
| card.addEventListener('click', function() { | |
| const input = this.querySelector('input'); | |
| if (input) { | |
| input.checked = true; | |
| document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected')); | |
| this.classList.add('selected'); | |
| } | |
| }); | |
| }); | |
| // Set up textarea character count | |
| q3Text.addEventListener('input', function() { | |
| const count = this.value.length; | |
| charCount.textContent = `${count}/200`; | |
| if (count >= 190) { | |
| charCount.classList.add('text-red-500'); | |
| } else { | |
| charCount.classList.remove('text-red-500'); | |
| } | |
| }); | |
| }); | |
| // Navigation functions | |
| function nextQuestion() { | |
| // Validate current question | |
| if (!validateQuestion(currentQuestion)) { | |
| showValidationError(); | |
| return; | |
| } | |
| // Hide current question | |
| document.getElementById(`q${currentQuestion}`).classList.add('hidden'); | |
| // Move to next question | |
| currentQuestion++; | |
| currentQuestionDisplay.textContent = currentQuestion; | |
| // Show next question | |
| document.getElementById(`q${currentQuestion}`).classList.remove('hidden'); | |
| // Update button visibility | |
| updateButtonVisibility(); | |
| // Award XP for answering | |
| if (currentQuestion > 1) { | |
| addXP(5); | |
| } | |
| // Scroll to top of question | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| } | |
| function prevQuestion() { | |
| // Hide current question | |
| document.getElementById(`q${currentQuestion}`).classList.add('hidden'); | |
| // Move to previous question | |
| currentQuestion--; | |
| currentQuestionDisplay.textContent = currentQuestion; | |
| // Show previous question | |
| document.getElementById(`q${currentQuestion}`).classList.remove('hidden'); | |
| // Update button visibility | |
| updateButtonVisibility(); | |
| // Scroll to top of question | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| } | |
| function updateButtonVisibility() { | |
| // Show/hide previous button | |
| if (currentQuestion > 1) { | |
| prevBtn.classList.remove('hidden'); | |
| } else { | |
| prevBtn.classList.add('hidden'); | |
| } | |
| // Show/hide next/submit button | |
| if (currentQuestion < totalQuestions) { | |
| nextBtn.classList.remove('hidden'); | |
| submitBtn.classList.add('hidden'); | |
| } else { | |
| nextBtn.classList.add('hidden'); | |
| submitBtn.classList.remove('hidden'); | |
| } | |
| } | |
| // Validation | |
| function validateQuestion(qNum) { | |
| switch(qNum) { | |
| case 1: | |
| case 2: | |
| return document.querySelector(`input[name="q${qNum}"]:checked`) !== null; | |
| case 3: | |
| return q3Text.value.trim() !== '' && q3Text.value.length <= 200; | |
| case 4: | |
| return true; // Range always has a value | |
| case 5: | |
| return document.querySelector('#q5 button.bg-green-100, #q5 button.bg-yellow-100, #q5 button.bg-red-100') !== null; | |
| default: | |
| return false; | |
| } | |
| } | |
| function showValidationError() { | |
| const currentQ = document.getElementById(`q${currentQuestion}`); | |
| const errorEl = document.createElement('div'); | |
| errorEl.className = 'text-red-500 text-sm mt-2 flex items-center'; | |
| errorEl.innerHTML = '<i class="fas fa-exclamation-circle mr-1"></i> Prosím odpověz na otázku'; | |
| // Remove any existing error messages | |
| const existingError = currentQ.querySelector('.text-red-500'); | |
| if (existingError) existingError.remove(); | |
| currentQ.appendChild(errorEl); | |
| // Shake animation | |
| currentQ.style.animation = 'none'; | |
| setTimeout(() => { | |
| currentQ.style.animation = 'shake 0.5s cubic-bezier(.36,.07,.19,.97) both'; | |
| }, 10); | |
| // Scroll to error | |
| window.scrollTo({ top: currentQ.offsetTop - 20, behavior: 'smooth' }); | |
| } | |
| // Recommendation selection | |
| function selectRecommendation(choice) { | |
| // Reset all buttons | |
| document.querySelectorAll('#q5 button').forEach(btn => { | |
| btn.classList.remove('bg-green-100', 'bg-yellow-100', 'bg-red-100'); | |
| btn.classList.remove('border-green-200', 'border-yellow-200', 'border-red-200'); | |
| btn.querySelector('div').classList.remove('bg-green-200', 'bg-yellow-200', 'bg-red-200'); | |
| const baseClass = choice === 'yes' ? 'green' : choice === 'neutral' ? 'yellow' : 'red'; | |
| btn.classList.add(`bg-${baseClass}-50`, `border-${baseClass}-100`); | |
| btn.querySelector('div').classList.add(`bg-${baseClass}-100`); | |
| }); | |
| // Highlight selected button | |
| const selectedBtn = document.querySelector( | |
| choice === 'yes' ? '#q5 button:first-child' : | |
| choice === 'neutral' ? '#q5 button:nth-child(2)' : '#q5 button:last-child' | |
| ); | |
| selectedBtn.classList.remove('bg-green-50', 'bg-yellow-50', 'bg-red-50'); | |
| selectedBtn.classList.add( | |
| choice === 'yes' ? 'bg-green-100' : | |
| choice === 'neutral' ? 'bg-yellow-100' : 'bg-red-100' | |
| ); | |
| selectedBtn.classList.add( | |
| choice === 'yes' ? 'border-green-200' : | |
| choice === 'neutral' ? 'border-yellow-200' : 'border-red-200' | |
| ); | |
| selectedBtn.querySelector('div').classList.remove('bg-green-100', 'bg-yellow-100', 'bg-red-100'); | |
| selectedBtn.querySelector('div').classList.add( | |
| choice === 'yes' ? 'bg-green-200' : | |
| choice === 'neutral' ? 'bg-yellow-200' : 'bg-red-200' | |
| ); | |
| } | |
| // XP and leveling | |
| function addXP(amount) { | |
| xp += amount; | |
| // Check for level up | |
| if (xp >= maxXP) { | |
| level++; | |
| xp = xp - maxXP; | |
| maxXP = Math.floor(maxXP * 1.5); | |
| levelDisplay.textContent = level; | |
| maxXPDisplay.textContent = maxXP; | |
| // Show level up animation | |
| showLevelUp(); | |
| } | |
| currentXPDisplay.textContent = xp; | |
| updateXPBar(); | |
| } | |
| function updateXPBar() { | |
| const percentage = (xp / maxXP) * 100; | |
| xpBar.style.width = `${percentage}%`; | |
| } | |
| function showLevelUp() { | |
| const levelUpEl = document.createElement('div'); | |
| levelUpEl.className = 'fixed inset-0 flex items-center justify-center z-50 bg-black/50'; | |
| levelUpEl.innerHTML = ` | |
| <div class="bg-white rounded-2xl p-8 max-w-sm text-center relative overflow-hidden"> | |
| <div class="absolute -top-12 left-1/2 transform -translate-x-1/2"> | |
| <div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-full flex items-center justify-center shadow-lg"> | |
| <span class="emoji-option">🎮</span> | |
| </div> | |
| </div> | |
| <h2 class="text-2xl font-display font-bold text-dark mt-8 mb-2">Level Up!</h2> | |
| <p class="text-gray-600 mb-6">Dosáhl jsi levelu <span class="font-bold text-fun-blue">${level}</span>!</p> | |
| <button onclick="this.parentElement.parentElement.remove()" class="w-full py-3 px-6 bg-gradient-to-r from-fun-blue to-fun-green hover:from-fun-blue/90 hover:to-fun-green/90 text-white rounded-xl transition font-medium"> | |
| Pokračovat <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| `; | |
| document.body.appendChild(levelUpEl); | |
| } | |
| // Survey completion | |
| function completeSurvey() { | |
| if (!validateQuestion(currentQuestion)) { | |
| showValidationError(); | |
| return; | |
| } | |
| // Award final XP | |
| addXP(20); | |
| // Unlock first badge | |
| unlockBadge('feedbackExplorer', 'from-blue-400 to-cyan-400'); | |
| // Unlock Class Arbiter badge | |
| setTimeout(() => { | |
| unlockBadge('classArbiter', 'from-purple-500 to-accent'); | |
| }, 300); | |
| // Show completion modal | |
| setTimeout(() => { | |
| completionModal.classList.remove('hidden'); | |
| createConfetti(); | |
| }, 800); | |
| } | |
| function unlockBadge(badgeId, gradient) { | |
| const badge = document.getElementById(badgeId); | |
| badge.classList.remove('opacity-40'); | |
| badge.classList.add('badge-unlocked'); | |
| const icon = badge.querySelector('div'); | |
| icon.classList.remove('bg-gray-100'); | |
| icon.classList.add(`bg-gradient-to-r`, ...gradient.split(' ')); | |
| badge.querySelector('.emoji-option').classList.add('text-2xl'); | |
| badge.querySelector('p').classList.remove('text-gray-500'); | |
| badge.querySelector('p').classList.add('text-dark'); | |
| } | |
| function createConfetti() { | |
| const container = document.getElementById('confetti-container'); | |
| container.innerHTML = ''; | |
| for (let i = 0; i < 50; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'confetti'; | |
| // Random position | |
| const xPos = Math.random() * 100; | |
| const delay = Math.random() * 3; | |
| const duration = 2 + Math.random() * 3; | |
| const size = 5 + Math.random() * 5; | |
| // Random color | |
| const colors = ['#f472b6', '#60a5fa', '#34d399', '#fbbf24', '#a78bfa']; | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| confetti.style.left = `${xPos}%`; | |
| confetti.style.top = '-10px'; | |
| confetti.style.width = `${size}px`; | |
| confetti.style.height = `${size}px`; | |
| confetti.style.backgroundColor = color; | |
| confetti.style.animation = `fall ${duration}s ease-in ${delay}s forwards`; | |
| container.appendChild(confetti); | |
| } | |
| // Add fall animation | |
| const style = document.createElement('style'); | |
| style.innerHTML = ` | |
| @keyframes fall { | |
| 0% { transform: translateY(0) rotate(0deg); opacity: 0; } | |
| 10% { opacity: 1; } | |
| 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } | |
| } | |
| `; | |
| document.head.appendChild(style); | |
| } | |
| function closeModal() { | |
| completionModal.classList.add('hidden'); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/class-feedback-quest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |