Este es el código de la página web:
|
<body> <div class="quiz-container"> <h1>Ejemplo de test</h1> <div class="question"> <p id="question-text">Question 1: ¿Cuál es la capital de Francia?</p> <div class="choices"> <button class="choice" onclick="checkAnswer(0)">Londres</button> <button class="choice" onclick="checkAnswer(1)">París</button> <button class="choice" onclick="checkAnswer(2)">Roma</button> </div> <p id="feedback"></p> </div> </div> <script src="index.js"></script> </body> |
Este es el código de la hoja de estilos:
|
body { background-color: #d5d5d5; } .quiz-container { box-sizing: border-box; width: 100%; max-width: 600px; margin: 0 auto; padding: 2em; background-color: white; border-radius: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .choices { display: flex; } .choice { font-size: 1em; display: block; margin: 5px 5px; padding: .5em .75em; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; } .choice:hover { background-color: #2980b9; } |
Este es el código del archivo javascript:
|
const questions = [ { question: "¿Cuál es la capital de Francia?", choices: ["Londres", "París", "Roma"], correct: 1 }, { question: "¿Cuántos días tiene el mes de febrero si es bisiesto?", choices: ["30", "28", "29"], correct: 2 }, { question: "¿Cuál es el planeta más cercano al sol?", choices: ["La Tierra", "Mercurio", "Saturno"], correct: 1 }, // Puedes añadir más preguntas aquí... ]; let currentQuestion = 0; let correctAnswers = 0; function showQuestion() { const questionText = document.getElementById("question-text"); questionText.textContent = questions[currentQuestion].question; const choices = document.querySelectorAll(".choice"); choices.forEach((choice, index) => { choice.textContent = questions[currentQuestion].choices[index]; }); const feedback = document.getElementById("feedback"); feedback.textContent = ""; } function checkAnswer(selected) { const feedback = document.getElementById("feedback"); if (selected === questions[currentQuestion].correct) { feedback.textContent = "¡Correcto!"; correctAnswers++; } else { feedback.textContent = "¡Incorrecto!"; } setTimeout(() => { currentQuestion++; if (currentQuestion < questions.length) { showQuestion(); } else { const quizContainer = document.querySelector(".quiz-container"); quizContainer.innerHTML = `<p>Acertaste ${correctAnswers} de las ${questions.length} preguntas.</p>`; } }, 2000); } showQuestion(); |
Obtenido de aquí: https://webdesign.tutsplus.com/multiple-choice-quiz-app-with-javascript--cms-107756t
No hay comentarios:
Publicar un comentario