Spaces:
Running
Running
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cacau Adventure - Jogo de Treinamento</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| overflow-x: hidden; | |
| background-color: #f5f5f5; | |
| } | |
| .game-container { | |
| position: relative; | |
| height: 100vh; | |
| width: 100%; | |
| overflow: hidden; | |
| background: linear-gradient(to bottom, #FFF3E0, #FFE0B2); | |
| } | |
| .platform { | |
| position: absolute; | |
| background: linear-gradient(to right, #5D4037, #8D6E63); | |
| border-radius: 10px; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.3); | |
| } | |
| .character { | |
| position: absolute; | |
| width: 60px; | |
| height: 80px; | |
| transition: all 0.3s ease; | |
| z-index: 10; | |
| } | |
| .chocolate { | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| background: linear-gradient(to bottom, #5D4037, #3E2723); | |
| border-radius: 5px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.3); | |
| z-index: 5; | |
| } | |
| .customer { | |
| position: absolute; | |
| width: 40px; | |
| height: 60px; | |
| background: linear-gradient(to bottom, #4FC3F7, #0288D1); | |
| border-radius: 5px 5px 0 0; | |
| z-index: 5; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .customer:after { | |
| content: ""; | |
| position: absolute; | |
| top: -10px; | |
| width: 20px; | |
| height: 10px; | |
| background: #FFCDD2; | |
| border-radius: 50% 50% 0 0; | |
| } | |
| .checkpoint { | |
| position: absolute; | |
| width: 40px; | |
| height: 40px; | |
| background: radial-gradient(circle, #FFD700, #FFC400); | |
| border-radius: 50%; | |
| box-shadow: 0 0 10px #FFD700; | |
| z-index: 5; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: bold; | |
| } | |
| .level-indicator { | |
| position: fixed; | |
| top: 20px; | |
| left: 20px; | |
| background: rgba(255, 255, 255, 0.9); | |
| padding: 10px 15px; | |
| border-radius: 20px; | |
| font-weight: bold; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.2); | |
| z-index: 100; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .progress-container { | |
| position: fixed; | |
| top: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 60%; | |
| background: rgba(255, 255, 255, 0.9); | |
| padding: 8px 15px; | |
| border-radius: 20px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.2); | |
| z-index: 100; | |
| } | |
| .progress-bar { | |
| height: 10px; | |
| background: #E0E0E0; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| margin-top: 5px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(to right, #FF9800, #F57C00); | |
| transition: width 0.3s ease; | |
| } | |
| .challenge-popup { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: white; | |
| padding: 20px; | |
| border-radius: 15px; | |
| box-shadow: 0 8px 30px rgba(0,0,0,0.2); | |
| z-index: 200; | |
| width: 90%; | |
| max-width: 500px; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| .customer-popup { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: white; | |
| padding: 15px; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.2); | |
| z-index: 100; | |
| max-width: 90%; | |
| text-align: center; | |
| animation: slideUp 0.3s ease-out; | |
| } | |
| @keyframes slideUp { | |
| from { transform: translate(-50%, 100px); opacity: 0; } | |
| to { transform: translate(-50%, 0); opacity: 1; } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translate(-50%, -40%); } | |
| to { opacity: 1; transform: translate(-50%, -50%); } | |
| } | |
| .jump-animation { | |
| animation: jump 0.5s ease; | |
| } | |
| @keyframes jump { | |
| 0% { transform: translateY(0); } | |
| 50% { transform: translateY(-50px); } | |
| 100% { transform: translateY(0); } | |
| } | |
| .collect-animation { | |
| animation: collect 0.5s ease forwards; | |
| } | |
| @keyframes collect { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.5); } | |
| 100% { transform: scale(0); opacity: 0; } | |
| } | |
| .completed-level { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(76, 175, 80, 0.9); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| color: white; | |
| z-index: 150; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| .feedback-form { | |
| background: white; | |
| padding: 20px; | |
| border-radius: 10px; | |
| width: 90%; | |
| max-width: 500px; | |
| margin-top: 20px; | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| .shake { | |
| animation: shake 0.5s; | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } | |
| 20%, 40%, 60%, 80% { transform: translateX(5px); } | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="game-container" id="gameContainer"> | |
| <div class="level-indicator"> | |
| <i class="fas fa-star mr-2 text-yellow-500"></i> | |
| <span>Nível: <span id="currentLevel">1</span> - <span id="levelName">Loja de Chocolate</span></span> | |
| </div> | |
| <div class="progress-container"> | |
| <div class="flex justify-between text-sm font-medium"> | |
| <span>Progresso: <span id="collectedItems">0</span>/<span id="totalItems">0</span></span> | |
| <span>Pontos: <span id="points">0</span></span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <!-- Character --> | |
| <div class="character" id="character"> | |
| <img src="https://i.imgur.com/JQl5bYt.png" alt="Cacau Show Mascote" style="width:100%;height:100%;object-fit:contain;"> | |
| </div> | |
| <!-- Platforms, items and customers will be added dynamically --> | |
| </div> | |
| <!-- Challenge Popup --> | |
| <div class="challenge-popup hidden" id="challengePopup"> | |
| <h3 class="font-bold text-xl mb-3 text-center" id="challengeTitle">Desafio do Chocolate</h3> | |
| <p class="text-sm mb-4 text-center text-gray-600" id="challengeDescription">Responda corretamente para continuar!</p> | |
| <div id="challengeContent" class="mb-4"></div> | |
| <div class="flex justify-center"> | |
| <button onclick="completeChallenge()" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-full text-sm"> | |
| <i class="fas fa-check mr-2"></i>Confirmar Resposta | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Customer Interaction Popup --> | |
| <div class="customer-popup hidden" id="customerPopup"> | |
| <h3 class="font-bold text-lg mb-2" id="customerTitle">Atendimento ao Cliente</h3> | |
| <p class="text-sm mb-3" id="customerQuestion">Como posso ajudar?</p> | |
| <div id="customerOptions" class="space-y-2"></div> | |
| </div> | |
| <!-- Feedback Form --> | |
| <div class="challenge-popup hidden" id="feedbackPopup"> | |
| <h3 class="font-bold text-xl mb-3 text-center">Feedback do Treinamento</h3> | |
| <p class="text-sm mb-4 text-center text-gray-600">Ajude-nos a melhorar sua experiência!</p> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Como você avalia este treinamento?</label> | |
| <div class="flex justify-between text-2xl"> | |
| <i class="fas fa-star text-gray-300 hover:text-yellow-400 cursor-pointer" data-rating="1"></i> | |
| <i class="fas fa-star text-gray-300 hover:text-yellow-400 cursor-pointer" data-rating="2"></i> | |
| <i class="fas fa-star text-gray-300 hover:text-yellow-400 cursor-pointer" data-rating="3"></i> | |
| <i class="fas fa-star text-gray-300 hover:text-yellow-400 cursor-pointer" data-rating="4"></i> | |
| <i class="fas fa-star text-gray-300 hover:text-yellow-400 cursor-pointer" data-rating="5"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="feedbackText" class="block text-sm font-medium text-gray-700 mb-1">Comentários ou sugestões:</label> | |
| <textarea id="feedbackText" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button onclick="submitFeedback()" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-6 rounded-full text-sm"> | |
| <i class="fas fa-paper-plane mr-2"></i>Enviar Feedback | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Game variables | |
| let currentLevel = 1; | |
| let characterPosition = { x: 50, y: 100 }; | |
| let gameSpeed = 5; | |
| let scrollPosition = 0; | |
| let maxScroll = 3000; | |
| let collectedItems = 0; | |
| let totalItems = 0; | |
| let points = 0; | |
| let currentChallenge = null; | |
| let currentCustomer = null; | |
| let gameRunning = true; | |
| let selectedRating = 0; | |
| // Level data - focused on Cacau Show training | |
| const levels = [ | |
| { | |
| name: "Loja de Chocolate", | |
| platforms: [ | |
| { x: 0, y: 150, width: 300, height: 20 }, | |
| { x: 350, y: 250, width: 200, height: 20 }, | |
| { x: 100, y: 400, width: 250, height: 20 }, | |
| { x: 400, y: 550, width: 200, height: 20 } | |
| ], | |
| chocolates: [ | |
| { x: 50, y: 110, type: "product", name: "Bombom Trufado" }, | |
| { x: 200, y: 210, type: "product", name: "Ovo de Páscoa" }, | |
| { x: 150, y: 360, type: "product", name: "Barra 70%" }, | |
| { x: 450, y: 510, type: "product", name: "Brigadeiro" } | |
| ], | |
| customers: [ | |
| { | |
| x: 450, y: 190, | |
| question: "Qual o produto mais vendido da Cacau Show?", | |
| options: [ | |
| { text: "Bombom Trufado", correct: true, points: 20 }, | |
| { text: "Ovo de Páscoa", correct: false, points: 5 }, | |
| { text: "Barra de Chocolate", correct: false, points: 5 } | |
| ] | |
| } | |
| ], | |
| checkpoints: [ | |
| { | |
| x: 450, y: 530, | |
| challenge: { | |
| title: "Conhecimento Básico", | |
| description: "Qual o principal ingrediente do chocolate?", | |
| type: "quiz", | |
| options: ["Açúcar", "Leite", "Cacau", "Fermento"], | |
| answer: 2, | |
| points: 30 | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| name: "Atendimento ao Cliente", | |
| platforms: [ | |
| { x: 50, y: 750, width: 200, height: 20 }, | |
| { x: 300, y: 900, width: 200, height: 20 }, | |
| { x: 100, y: 1050, width: 250, height: 20 }, | |
| { x: 350, y: 1200, width: 200, height: 20 } | |
| ], | |
| chocolates: [ | |
| { x: 100, y: 710, type: "knowledge", name: "Temperatura" }, | |
| { x: 350, y: 860, type: "knowledge", name: "Validade" }, | |
| { x: 200, y: 1010, type: "knowledge", name: "Ingredientes" }, | |
| { x: 400, y: 1160, type: "knowledge", name: "Armazenamento" } | |
| ], | |
| customers: [ | |
| { | |
| x: 150, y: 730, | |
| question: "Um cliente pergunta sobre produtos sem lactose. O que fazer?", | |
| options: [ | |
| { text: "Indicar apenas produtos com selo 'Sem Lactose'", correct: true, points: 25 }, | |
| { text: "Dizer que todos os produtos são seguros", correct: false, points: 0 }, | |
| { text: "Recomendar produtos ao leite", correct: false, points: 0 } | |
| ] | |
| }, | |
| { | |
| x: 400, y: 880, | |
| question: "Como lidar com um cliente insatisfeito?", | |
| options: [ | |
| { text: "Ouvir atentamente e oferecer solução", correct: true, points: 30 }, | |
| { text: "Chamar o gerente imediatamente", correct: false, points: 10 }, | |
| { text: "Ignorar e continuar atendendo", correct: false, points: 0 } | |
| ] | |
| } | |
| ], | |
| checkpoints: [ | |
| { | |
| x: 400, y: 1180, | |
| challenge: { | |
| title: "Temperatura Ideal", | |
| description: "Qual a temperatura ideal para armazenar chocolate?", | |
| type: "quiz", | |
| options: ["10-15°C", "18-22°C", "25-30°C", "Não importa"], | |
| answer: 1, | |
| points: 40 | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| name: "Promoções e Vendas", | |
| platforms: [ | |
| { x: 0, y: 1500, width: 300, height: 20 }, | |
| { x: 350, y: 1650, width: 200, height: 20 }, | |
| { x: 100, y: 1800, width: 250, height: 20 }, | |
| { x: 400, y: 1950, width: 200, height: 20 } | |
| ], | |
| chocolates: [ | |
| { x: 50, y: 1460, type: "promo", name: "Páscoa" }, | |
| { x: 200, y: 1610, type: "promo", name: "Dia dos Namorados" }, | |
| { x: 150, y: 1760, type: "promo", name: "Natal" }, | |
| { x: 450, y: 1910, type: "promo", name: "Aniversário" } | |
| ], | |
| customers: [ | |
| { | |
| x: 250, y: 1480, | |
| question: "Como aumentar o ticket médio das vendas?", | |
| options: [ | |
| { text: "Sugerir combos e produtos complementares", correct: true, points: 35 }, | |
| { text: "Vender apenas o que o cliente pede", correct: false, points: 5 }, | |
| { text: "Oferecer desconto em tudo", correct: false, points: 10 } | |
| ] | |
| }, | |
| { | |
| x: 450, y: 1660, | |
| question: "Qual a melhor abordagem para vender na Páscoa?", | |
| options: [ | |
| { text: "Destacar os ovos premium e kits presentes", correct: true, points: 40 }, | |
| { text: "Esperar o cliente escolher sozinho", correct: false, points: 5 }, | |
| { text: "Focar apenas nos produtos mais baratos", correct: false, points: 5 } | |
| ] | |
| } | |
| ], | |
| checkpoints: [ | |
| { | |
| x: 450, y: 1930, | |
| challenge: { | |
| title: "Diferenciais Cacau Show", | |
| description: "Qual desses é um diferencial da Cacau Show?", | |
| type: "quiz", | |
| options: [ | |
| "Chocolates artesanais", | |
| "Ingredientes premium", | |
| "Processo próprio de fabricação", | |
| "Todas as alternativas" | |
| ], | |
| answer: 3, | |
| points: 50 | |
| } | |
| } | |
| ] | |
| } | |
| ]; | |
| // Initialize the game | |
| function initGame() { | |
| const gameContainer = document.getElementById('gameContainer'); | |
| // Clear previous level elements | |
| gameContainer.querySelectorAll('.platform, .chocolate, .customer, .checkpoint, .completed-level').forEach(el => el.remove()); | |
| // Load current level | |
| const level = levels[currentLevel - 1]; | |
| document.getElementById('currentLevel').textContent = currentLevel; | |
| document.getElementById('levelName').textContent = level.name; | |
| // Create platforms | |
| level.platforms.forEach(platform => { | |
| const platformElement = document.createElement('div'); | |
| platformElement.className = 'platform'; | |
| platformElement.style.left = `${platform.x}px`; | |
| platformElement.style.top = `${platform.y}px`; | |
| platformElement.style.width = `${platform.width}px`; | |
| platformElement.style.height = `${platform.height}px`; | |
| gameContainer.appendChild(platformElement); | |
| }); | |
| // Create chocolates/knowledge items | |
| totalItems = level.chocolates.length + level.customers.length; | |
| collectedItems = 0; | |
| updateProgress(); | |
| level.chocolates.forEach(item => { | |
| const itemElement = document.createElement('div'); | |
| itemElement.className = 'chocolate floating'; | |
| itemElement.style.left = `${item.x}px`; | |
| itemElement.style.top = `${item.y}px`; | |
| itemElement.dataset.type = item.type; | |
| itemElement.dataset.name = item.name; | |
| gameContainer.appendChild(itemElement); | |
| }); | |
| // Create customers | |
| level.customers.forEach(customer => { | |
| const customerElement = document.createElement('div'); | |
| customerElement.className = 'customer'; | |
| customerElement.style.left = `${customer.x}px`; | |
| customerElement.style.top = `${customer.y}px`; | |
| customerElement.dataset.question = customer.question; | |
| customerElement.dataset.options = JSON.stringify(customer.options); | |
| gameContainer.appendChild(customerElement); | |
| }); | |
| // Create checkpoints | |
| level.checkpoints.forEach(check => { | |
| const checkElement = document.createElement('div'); | |
| checkElement.className = 'checkpoint floating'; | |
| checkElement.style.left = `${check.x}px`; | |
| checkElement.style.top = `${check.y}px`; | |
| checkElement.dataset.challenge = JSON.stringify(check.challenge); | |
| gameContainer.appendChild(checkElement); | |
| }); | |
| // Reset character position | |
| characterPosition = { x: 50, y: 100 }; | |
| updateCharacterPosition(); | |
| // Reset scroll | |
| scrollPosition = 0; | |
| gameContainer.scrollTop = 0; | |
| // Start game loop | |
| gameRunning = true; | |
| requestAnimationFrame(gameLoop); | |
| } | |
| // Game loop | |
| function gameLoop() { | |
| if (!gameRunning) return; | |
| const gameContainer = document.getElementById('gameContainer'); | |
| const character = document.getElementById('character'); | |
| // Auto-scroll down | |
| scrollPosition += gameSpeed; | |
| gameContainer.scrollTop = scrollPosition; | |
| // Check if level completed | |
| if (scrollPosition >= maxScroll) { | |
| completeLevel(); | |
| return; | |
| } | |
| // Check collisions | |
| checkCollisions(); | |
| // Continue loop | |
| requestAnimationFrame(gameLoop); | |
| } | |
| // Update character position | |
| function updateCharacterPosition() { | |
| const character = document.getElementById('character'); | |
| character.style.left = `${characterPosition.x}px`; | |
| character.style.top = `${characterPosition.y}px`; | |
| } | |
| // Handle keyboard controls | |
| document.addEventListener('keydown', (e) => { | |
| if (!gameRunning) return; | |
| const moveAmount = 20; | |
| switch(e.key) { | |
| case 'ArrowLeft': | |
| characterPosition.x = Math.max(0, characterPosition.x - moveAmount); | |
| character.style.transform = 'scaleX(-1)'; | |
| break; | |
| case 'ArrowRight': | |
| characterPosition.x = Math.min(window.innerWidth - 60, characterPosition.x + moveAmount); | |
| character.style.transform = 'scaleX(1)'; | |
| break; | |
| case 'ArrowUp': | |
| // Jump animation | |
| character.classList.add('jump-animation'); | |
| setTimeout(() => { | |
| character.classList.remove('jump-animation'); | |
| }, 500); | |
| break; | |
| } | |
| updateCharacterPosition(); | |
| }); | |
| // Check collisions with items | |
| function checkCollisions() { | |
| const character = document.getElementById('character'); | |
| const charRect = character.getBoundingClientRect(); | |
| // Check chocolates/knowledge items | |
| document.querySelectorAll('.chocolate:not(.collect-animation)').forEach(item => { | |
| const itemRect = item.getBoundingClientRect(); | |
| if (isColliding(charRect, itemRect)) { | |
| // Collect item | |
| item.classList.add('collect-animation'); | |
| collectedItems++; | |
| // Add points based on item type | |
| const itemType = item.dataset.type; | |
| const pointsToAdd = itemType === 'product' ? 10 : | |
| itemType === 'knowledge' ? 15 : | |
| itemType === 'promo' ? 20 : 10; | |
| addPoints(pointsToAdd); | |
| updateProgress(); | |
| // Remove item after animation | |
| setTimeout(() => { | |
| item.remove(); | |
| }, 500); | |
| } | |
| }); | |
| // Check customers | |
| document.querySelectorAll('.customer').forEach(customer => { | |
| const customerRect = customer.getBoundingClientRect(); | |
| if (isColliding(charRect, customerRect) && !currentCustomer && !currentChallenge) { | |
| // Found customer - show interaction | |
| showCustomerInteraction({ | |
| question: customer.dataset.question, | |
| options: JSON.parse(customer.dataset.options) | |
| }); | |
| // Mark customer as interacted | |
| currentCustomer = customer; | |
| customer.style.background = 'linear-gradient(to bottom, #81C784, #4CAF50)'; | |
| } | |
| }); | |
| // Check checkpoints | |
| document.querySelectorAll('.checkpoint').forEach(check => { | |
| const checkRect = check.getBoundingClientRect(); | |
| if (isColliding(charRect, checkRect) && !currentChallenge && !currentCustomer) { | |
| // Found checkpoint - show challenge | |
| showChallenge(JSON.parse(check.dataset.challenge)); | |
| } | |
| }); | |
| } | |
| // Check if two elements are colliding | |
| function isColliding(rect1, rect2) { | |
| return !( | |
| rect1.right < rect2.left || | |
| rect1.left > rect2.right || | |
| rect1.bottom < rect2.top || | |
| rect1.top > rect2.bottom | |
| ); | |
| } | |
| // Show challenge popup | |
| function showChallenge(challenge) { | |
| currentChallenge = challenge; | |
| gameRunning = false; | |
| const popup = document.getElementById('challengePopup'); | |
| const content = document.getElementById('challengeContent'); | |
| document.getElementById('challengeTitle').textContent = challenge.title; | |
| document.getElementById('challengeDescription').textContent = challenge.description; | |
| // Create challenge content based on type | |
| content.innerHTML = ''; | |
| if (challenge.type === 'quiz') { | |
| challenge.options.forEach((option, index) => { | |
| const optionEl = document.createElement('div'); | |
| optionEl.className = 'p-3 mb-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition'; | |
| optionEl.textContent = option; | |
| optionEl.onclick = function() { | |
| selectAnswer(index); | |
| }; | |
| content.appendChild(optionEl); | |
| }); | |
| } | |
| popup.classList.remove('hidden'); | |
| } | |
| // Show customer interaction | |
| function showCustomerInteraction(customer) { | |
| gameRunning = false; | |
| const popup = document.getElementById('customerPopup'); | |
| const options = document.getElementById('customerOptions'); | |
| document.getElementById('customerTitle').textContent = "Atendimento ao Cliente"; | |
| document.getElementById('customerQuestion').textContent = customer.question; | |
| // Create options | |
| options.innerHTML = ''; | |
| customer.options.forEach((option, index) => { | |
| const optionEl = document.createElement('div'); | |
| optionEl.className = 'p-2 bg-amber-50 rounded cursor-pointer hover:bg-amber-100 border border-amber-100'; | |
| optionEl.textContent = option.text; | |
| optionEl.onclick = function() { | |
| completeCustomerInteraction(index, customer.options); | |
| }; | |
| options.appendChild(optionEl); | |
| }); | |
| popup.classList.remove('hidden'); | |
| } | |
| // Complete customer interaction | |
| function completeCustomerInteraction(selectedIndex, options) { | |
| const popup = document.getElementById('customerPopup'); | |
| popup.classList.add('hidden'); | |
| const selectedOption = options[selectedIndex]; | |
| // Add points based on answer | |
| addPoints(selectedOption.correct ? selectedOption.points : Math.floor(selectedOption.points/2)); | |
| // Mark item as collected | |
| collectedItems++; | |
| updateProgress(); | |
| // Remove customer | |
| if (currentCustomer) { | |
| currentCustomer.remove(); | |
| currentCustomer = null; | |
| } | |
| gameRunning = true; | |
| requestAnimationFrame(gameLoop); | |
| } | |
| // Select answer in quiz | |
| function selectAnswer(index) { | |
| document.querySelectorAll('#challengeContent div').forEach((el, i) => { | |
| if (i === index) { | |
| el.classList.add('bg-amber-500', 'text-white', 'font-medium'); | |
| el.classList.remove('bg-gray-100', 'hover:bg-gray-200'); | |
| } else { | |
| el.classList.remove('bg-amber-500', 'text-white', 'font-medium'); | |
| el.classList.add('bg-gray-100', 'hover:bg-gray-200'); | |
| } | |
| }); | |
| currentChallenge.selectedAnswer = index; | |
| } | |
| // Complete challenge | |
| function completeChallenge() { | |
| const popup = document.getElementById('challengePopup'); | |
| popup.classList.add('hidden'); | |
| // Check if answer is selected | |
| if (currentChallenge.selectedAnswer === undefined) { | |
| alert("Por favor, selecione uma resposta antes de continuar!"); | |
| return; | |
| } | |
| // Check if answer is correct | |
| const isCorrect = currentChallenge.selectedAnswer === currentChallenge.answer; | |
| // Add points based on answer | |
| addPoints(isCorrect ? currentChallenge.points : Math.floor(currentChallenge.points/3)); | |
| // Mark item as collected | |
| collectedItems++; | |
| updateProgress(); | |
| // Visual feedback | |
| const character = document.getElementById('character'); | |
| if (!isCorrect) { | |
| character.classList.add('shake'); | |
| setTimeout(() => { | |
| character.classList.remove('shake'); | |
| }, 500); | |
| } | |
| currentChallenge = null; | |
| gameRunning = true; | |
| requestAnimationFrame(gameLoop); | |
| } | |
| // Add points to score | |
| function addPoints(amount) { | |
| points += amount; | |
| document.getElementById('points').textContent = points; | |
| // Visual feedback | |
| const pointsElement = document.getElementById('points'); | |
| pointsElement.classList.add('text-green-500', 'scale-110'); | |
| setTimeout(() => { | |
| pointsElement.classList.remove('text-green-500', 'scale-110'); | |
| }, 300); | |
| } | |
| // Update progress bar | |
| function updateProgress() { | |
| const progress = (collectedItems / totalItems) * 100; | |
| document.getElementById('collectedItems').textContent = collectedItems; | |
| document.getElementById('totalItems').textContent = totalItems; | |
| document.getElementById('progressFill').style.width = `${progress}%`; | |
| } | |
| // Complete level | |
| function completeLevel() { | |
| gameRunning = false; | |
| const gameContainer = document.getElementById('gameContainer'); | |
| const completedScreen = document.createElement('div'); | |
| completedScreen.className = 'completed-level'; | |
| completedScreen.innerHTML = ` | |
| <h2 class="text-3xl font-bold mb-4">Nível ${currentLevel} Completo!</h2> | |
| <p class="text-xl mb-2">Você coletou ${collectedItems} de ${totalItems} itens</p> | |
| <p class="text-xl mb-6">Pontuação: ${points} pontos</p> | |
| <button onclick="nextLevel()" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full text-lg mb-4"> | |
| <i class="fas fa-arrow-right mr-2"></i>Próximo Nível | |
| </button> | |
| `; | |
| gameContainer.appendChild(completedScreen); | |
| } | |
| // Go to next level | |
| function nextLevel() { | |
| currentLevel++; | |
| if (currentLevel <= levels.length) { | |
| initGame(); | |
| } else { | |
| // Game completed - show feedback form | |
| showFeedbackForm(); | |
| } | |
| } | |
| // Show feedback form | |
| function showFeedbackForm() { | |
| const gameContainer = document.getElementById('gameContainer'); | |
| const completedScreen = document.createElement('div'); | |
| completedScreen.className = 'completed-level'; | |
| completedScreen.innerHTML = ` | |
| <h2 class="text-3xl font-bold mb-4">Parabéns!</h2> | |
| <p class="text-xl mb-6">Você completou todos os níveis de treinamento!</p> | |
| <p class="mb-6 text-lg">Pontuação final: ${points} pontos</p> | |
| `; | |
| gameContainer.appendChild(completedScreen); | |
| // Show feedback popup after delay | |
| setTimeout(() => { | |
| document.getElementById('feedbackPopup').classList.remove('hidden'); | |
| }, 1000); | |
| } | |
| // Select rating for feedback | |
| document.querySelectorAll('#feedbackPopup .fa-star').forEach(star => { | |
| star.addEventListener('click', function() { | |
| const rating = parseInt(this.dataset.rating); | |
| selectedRating = rating; | |
| // Update stars display | |
| document.querySelectorAll('#feedbackPopup .fa-star').forEach((s, i) => { | |
| if (i < rating) { | |
| s.classList.add('text-yellow-400'); | |
| s.classList.remove('text-gray-300'); | |
| } else { | |
| s.classList.remove('text-yellow-400'); | |
| s.classList.add('text-gray-300'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Submit feedback | |
| function submitFeedback() { | |
| const feedbackText = document.getElementById('feedbackText').value; | |
| // Here you would typically send this data to your server | |
| console.log("Feedback submitted:", { | |
| rating: selectedRating, | |
| comments: feedbackText, | |
| points: points, | |
| level: currentLevel - 1 | |
| }); | |
| // Show confirmation | |
| alert("Obrigado pelo seu feedback! Ele nos ajuda a melhorar o treinamento."); | |
| // Restart game | |
| restartGame(); | |
| } | |
| // Restart game | |
| function restartGame() { | |
| currentLevel = 1; | |
| points = 0; | |
| document.getElementById('feedbackPopup').classList.add('hidden'); | |
| initGame(); | |
| } | |
| // Start the game | |
| initGame(); | |
| </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=Marquesduque/eng" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |