.restart-btn:hover background: #6f4588; transform: scale(1.02);

.nav-btn:disabled opacity: 0.4; cursor: not-allowed;

.options display: flex; flex-direction: column; gap: 14px;

.header h1 margin: 0; font-size: 1.8rem; letter-spacing: 2px; color: #e0f2fe; text-shadow: 0 0 6px #00a6ff; font-weight: 700;

// Renderizado según estado function render() // Verificar si todas las preguntas tienen respuesta const allAnswered = userAnswers.every(idx => idx !== -1); if (allAnswered && currentQuestion === QUESTIONS.length) // Mostrar resultado final const resultChar = computeResult(userAnswers); dynamicDiv.innerHTML = ` <div class="result-container"> <div class="character-card"> <div class="character-name">$resultChar.name</div> <div class="character-desc">$resultChar.desc</div> </div> <button class="restart-btn" id="restartTestBtn">🔄 Volver a empezar 🔄</button> </div> `; const restartBtn = document.getElementById("restartTestBtn"); if (restartBtn) restartBtn.addEventListener("click", () => resetQuiz()); return; // Si no estamos en resultados, mostrar pregunta actual if (currentQuestion < QUESTIONS.length) const qData = QUESTIONS[currentQuestion]; const selectedIdx = userAnswers[currentQuestion]; let optionsHtml = ""; const letters = ["A", "B", "C", "D"]; qData.options.forEach((opt, idx) => const isSelected = (selectedIdx === idx); const selectedClass = isSelected ? 'style="background:#2a4c6e; border-color:#8ac4ff; color:white;"' : ''; optionsHtml += ` <div class="option-btn" data-opt-index="$idx" $selectedClass> <span class="option-prefix">$letters[idx]</span> <span>$opt</span> </div> `; ); const progressPercent = ((currentQuestion + 1) / QUESTIONS.length) * 100; const isFirst = currentQuestion === 0; const isLast = currentQuestion === QUESTIONS.length - 1; const nextDisabled = userAnswers[currentQuestion] === -1; dynamicDiv.innerHTML = ` <div class="question-panel"> <div class="progress"><div class="progress-fill" style="width: $progressPercent%;"></div></div> <div class="question-text">❓ $qData.text</div> <div class="options" id="optionsList"> $optionsHtml </div> <div class="nav-buttons"> <button class="nav-btn" id="prevBtn" $isFirst ? 'disabled' : ''>◀ Anterior</button> <button class="nav-btn primary" id="nextBtn" $nextDisabled ? 'disabled' : ''>$isLast ? 'Ver resultado' : 'Siguiente ▶'</button> </div> </div> `; // Eventos de opciones const optButtons = document.querySelectorAll('.option-btn'); optButtons.forEach(btn => btn.addEventListener('click', (e) => const idx = parseInt(btn.dataset.optIndex); if (!isNaN(idx)) // Guardar respuesta userAnswers[currentQuestion] = idx; // Re-renderizar para actualizar estilo y habilitar botón siguiente render(); ); ); // Botón anterior const prevBtn = document.getElementById('prevBtn'); if (prevBtn) prevBtn.addEventListener('click', () => if (currentQuestion > 0) currentQuestion--; render(); ); // Botón siguiente / finalizar const nextBtn = document.getElementById('nextBtn'); if (nextBtn) nextBtn.addEventListener('click', () => if (userAnswers[currentQuestion] !== -1) if (isLast) // vamos a resultado final currentQuestion = QUESTIONS.length; render(); else currentQuestion++; render(); ); else // fallback por si acaso render();

// Elementos del DOM const appContainer = document.getElementById("quizApp"); const dynamicDiv = document.getElementById("dynamicContent");

// Inicializar render(); </script> </body> </html>

text: "¿Cuál es tu mayor defecto?", options: [ "Soy demasiado controlador y me cuesta confiar.", "Soy demasiado orgulloso/a y necesito aprobación.", "Miento para protegerme o para conseguir lo que quiero.", "A veces soy demasiado inocente y confiado." ] ,

text: "En una situación de emergencia en Circus Baby's, tú...", options: [ "Analizo el problema fríamente y busco la salida lógica.", "Intento manipular a otros para que resuelvan el problema por mí.", "Me lanzo a ayudar aunque me ponga en riesgo.", "Oculto mis errores y finjo que todo está bien." ] ,

/* Navegación */ .nav-buttons display: flex; justify-content: space-between; margin-top: 35px; gap: 15px;