// 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();
// Inicializar render(); </script> </body> </html>
/* Panel de preguntas */ .question-panel padding: 25px 30px 20px; test de que personaje de fnaf sister location eres
text: "¿Qué rol prefieres en un equipo?", options: [ "El líder que da órdenes (aunque a veces parezca rudo).", "El que observa desde las sombras y sabe secretos.", "El que entretiene y hace reír a los demás.", "El técnico meticuloso que arregla todo." ] ,
text: "Si tuvieras que elegir una herramienta o habilidad especial...", options: [ "Una garra afilada y fuerza bruta.", "Una voz encantadora y capacidad de persuasión.", "Un gancho o mecanismo sorpresa para desaparecer.", "Un diseño modular para adaptarme a cualquier situación." ] , // Renderizado según estado function render() // Verificar
.character-desc font-size: 1.1rem; line-height: 1.5; color: #cbdbe6;
.restart-btn background: #4d2f5e; border: none; padding: 14px 30px; border-radius: 60px; font-size: 1rem; font-weight: bold; color: #f2e9ff; margin-top: 20px; cursor: pointer; transition: 0.2s; 'disabled' : ''>$isLast
.nav-btn.primary background: #1e4a76; color: white; box-shadow: 0 2px 5px #0a1c2c;
.option-prefix font-weight: bold; background: #1f2e3f; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 30px; color: #8db5e3;
.options display: flex; flex-direction: column; gap: 14px;
You can copy and paste this code into an .html file and open it in any browser.