HTML Editor

Edita código
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cuestionario de Animales: Verdadero o Falso</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f0f0;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
        }
        #quiz-container {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        .true {
            background-color: #2ecc71;
            color: white;
        }
        .false {
            background-color: #e74c3c;
            color: white;
        }
        .next {
            background-color: #3498db;
            color: white;
        }
        .true:hover, .false:hover, .next:hover {
            opacity: 0.8;
        }
        .feedback {
            margin-top: 10px;
            font-weight: bold;
        }
        .correct {
            color: #2ecc71;
        }
        .incorrect {
            color: #e74c3c;
        }
        .explanation {
            margin-top: 5px;
            font-style: italic;
        }
        #result {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Cuestionario de Animales: Verdadero o Falso</h1>
    <div id="quiz-container"></div>
    <div id="result"></div>

    <script>
        const questions = [
            {
                question: "Los delfines son peces.",
                answer: false,
                explanation: "Los delfines son mamíferos marinos, no peces."
            },
            {
                question: "Las jirafas tienen el cuello largo para alcanzar las hojas altas de los árboles.",
                answer: true,
                explanation: "La longitud del cuello de las jirafas es una adaptación para alcanzar alimento en lo alto de los árboles."
            },
            {
                question: "Los murciélagos son ciegos.",
                answer: false,
                explanation: "Los murciélagos pueden ver, aunque muchas especies dependen más de la ecolocalización."
            },
            {
                question: "Los camaleones cambian de color para camuflarse.",
                answer: true,
                explanation: "Los camaleones pueden cambiar de color para camuflarse, regular su temperatura y comunicarse."
            },
            {
                question: "Todos los pájaros pueden volar.",
                answer: false,
                explanation: "Algunas especies de pájaros, como los pingüinos y avestruces, no pueden volar."
            },
            {
                question: "Los cocodrilos pueden vivir más de 100 años.",
                answer: true,
                explanation: "Algunos cocodrilos pueden vivir más de un siglo en condiciones favorables."
            },
            {
                question: "Las serpientes son viscosas al tacto.",
                answer: false,
                explanation: "Las serpientes tienen escamas secas, no son viscosas."
            },
            {
                question: "Los elefantes son los únicos mamíferos que no pueden saltar.",
                answer: false,
                explanation: "Los elefantes no son los únicos; los perezosos y los rinocerontes tampoco pueden saltar."
            },
            {
                question: "Los gatos siempre caen de pie.",
                answer: true,
                explanation: "Los gatos tienen un reflejo que les permite girar en el aire y caer sobre sus patas."
            },
            {
                question: "Las abejas mueren después de picar.",
                answer: true,
                explanation: "Las abejas melíferas mueren después de picar a mamíferos debido a que su aguijón queda atrapado."
            }
        ];

        let currentQuestion = 0;
        let score = 0;
        const quizContainer = document.getElementById('quiz-container');
        const resultContainer = document.getElementById('result');

        function displayQuestion() {
            if (currentQuestion < questions.length) {
                const q = questions[currentQuestion];
                quizContainer.innerHTML = `
                    <h2>Pregunta ${currentQuestion + 1} de ${questions.length}</h2>
                    <p>${q.question}</p>
                    <div class="buttons">
                        <button class="true" onclick="checkAnswer(true)">Verdadero</button>
                        <button class="false" onclick="checkAnswer(false)">Falso</button>
                    </div>
                    <div id="feedback" class="feedback"></div>
                    <div id="explanation" class="explanation"></div>
                `;
            } else {
                showResult();
            }
        }

        function checkAnswer(userAnswer) {
            const q = questions[currentQuestion];
            const feedbackDiv = document.getElementById('feedback');
            const explanationDiv = document.getElementById('explanation');
            const buttons = document.querySelectorAll('.true, .false');

            if (userAnswer === q.answer) {
                feedbackDiv.textContent = "¡Correcto!";
                feedbackDiv.className = "feedback correct";
                score++;
            } else {
                feedbackDiv.textContent = "Incorrecto";
                feedbackDiv.className = "feedback incorrect";
            }

            explanationDiv.textContent = q.explanation;

            buttons.forEach(button => button.disabled = true);

            quizContainer.innerHTML += `
                <p style="text-align: center"><button class="next" onclick="nextQuestion()">Siguiente</button></p>
            `;
        }

        function nextQuestion() {
            currentQuestion++;
            displayQuestion();
        }

        function showResult() {
            quizContainer.style.display = 'none';
            resultContainer.innerHTML = `
                <h2>Resultado Final</h2>
                <p>Has acertado ${score} de ${questions.length} preguntas.</p>
                <p>Puntuación: ${(score / questions.length * 100).toFixed(0)}%</p>
            `;
        }

        displayQuestion();
    </script>
</body>
</html>