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>Juego de Cuestionario sobre Grandes Felinos</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
        body {
            font-family: 'Roboto', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
			margin-top: -30px;
        }
        .quiz-container {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-top: 20px;
        }
        h1, h2 {
            color: #2c3e50;
        }
        .btn {
            display: block;
            width: 100%;
            padding: 15px;
            margin: 10px 0;
            background-color: #3498db;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #2980b9;
        }
        .btn:disabled {
            background-color: #bdc3c7;
            cursor: not-allowed;
        }
        .correct {
            background-color: #2ecc71 !important;
        }
        .incorrect {
            background-color: #e74c3c !important;
        }
        .explanation {
            background-color: #ecf0f1;
            border-left: 5px solid #3498db;
            padding: 10px;
            margin-top: 20px;
        }
        .score {
            font-size: 18px;
            font-weight: bold;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center; color: #3498e1; text-shadow: 1px 1px black; line-height: 1.2em">Evaluación acumulativa</h1>
    <div id="quiz-container" class="quiz-container">
        <h2 style="line-height: 1.2em; font-size:20px" id="question"></h2>
        <div id="answers"></div>
        <div id="explanation" class="explanation" style="display: none;"></div>
        <button id="next-btn" class="btn" style="display: none;">Siguiente Pregunta</button>
        <div id="score" class="score"></div>
    </div>

    <script>
        const questions = [
    {
        "question": "¿Qué es la inteligencia artificial?",
        "options": ["Un campo de estudio", "Una herramienta de programación", "Un tipo de software", "Un sistema operativo"],
        "correctAnswer": 0,
        "explanation": "La inteligencia artificial es un campo de estudio que busca crear sistemas capaces de realizar tareas que requieren inteligencia humana.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Cuál es una aplicación del Machine Learning?",
        "options": ["Reconocimiento facial", "Edición de video", "Creación de música", "Diseño gráfico"],
        "correctAnswer": 0,
        "explanation": "El reconocimiento facial es una de las aplicaciones del Machine Learning, que permite a las computadoras identificar rostros en imágenes.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Qué tipo de IA está diseñada para tareas específicas?",
        "options": ["IA fuerte", "IA débil", "IA general", "IA autónoma"],
        "correctAnswer": 1,
        "explanation": "La IA débil está diseñada para realizar tareas específicas, como la detección de fraudes o el diagnóstico médico.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Qué es el Deep Learning?",
        "options": ["Un tipo de IA", "Un modelo de negocio", "Una técnica de programación", "Un sistema operativo"],
        "correctAnswer": 0,
        "explanation": "El Deep Learning es una técnica de Machine Learning que utiliza redes neuronales profundas para aprender y mejorar el rendimiento en tareas específicas.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Cuál es un desafío ético de la IA?",
        "options": ["Velocidad de procesamiento", "Privacidad", "Costo de implementación", "Facilidad de uso"],
        "correctAnswer": 1,
        "explanation": "La privacidad es un desafío ético importante relacionado con el uso de la inteligencia artificial en la sociedad.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Qué es el aprendizaje automático?",
        "options": ["Un tipo de IA", "Una técnica de programación", "Un sistema de hardware", "Un lenguaje de programación"],
        "correctAnswer": 0,
        "explanation": "El aprendizaje automático es un área de la IA que se basa en métodos estadísticos para derivar modelos a partir de datos.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Qué modelo es conocido por generar texto coherente?",
        "options": ["GPT-3", "BERT", "DALL-E", "Stable Diffusion"],
        "correctAnswer": 0,
        "explanation": "GPT-3 es un modelo de inteligencia artificial desarrollado por OpenAI que es conocido por su capacidad de generar texto coherente.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Qué es una IA fuerte?",
        "options": ["IA que realiza tareas específicas", "IA que imita la inteligencia humana", "IA que no requiere datos", "IA que es más rápida que la humana"],
        "correctAnswer": 1,
        "explanation": "Una IA fuerte es aquella que posee una inteligencia general comparable a la humana y puede realizar una amplia variedad de tareas.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Cuál es un uso común de la IA en la medicina?",
        "options": ["Reconocimiento de voz", "Diagnóstico médico", "Edición de imágenes", "Creación de música"],
        "correctAnswer": 1,
        "explanation": "La IA se utiliza en la medicina para ayudar en el diagnóstico médico, analizando grandes volúmenes de datos clínicos.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Qué es un modelo de aprendizaje por refuerzo?",
        "options": ["Un tipo de IA", "Un método de programación", "Un algoritmo de búsqueda", "Un sistema de base de datos"],
        "correctAnswer": 0,
        "explanation": "El aprendizaje por refuerzo es un tipo de modelo en Machine Learning que se basa en la recompensa y el castigo para aprender.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Qué es la automatización mejorada con IA?",
        "options": ["Uso de robots", "Mejora de procesos", "Reducción de costos", "Aumento de empleo"],
        "correctAnswer": 1,
        "explanation": "La automatización mejorada con IA se refiere a la optimización de procesos mediante el uso de inteligencia artificial.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Qué modelo se utiliza para la detección de objetos?",
        "options": ["CNN", "RNN", "LSTM", "SVM"],
        "correctAnswer": 0,
        "explanation": "Las redes neuronales convolucionales (CNN) son comúnmente utilizadas para la detección de objetos en imágenes.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Qué es el procesamiento del lenguaje natural?",
        "options": ["Una técnica de programación", "Un tipo de IA", "Un sistema operativo", "Un modelo de negocio"],
        "correctAnswer": 1,
        "explanation": "El procesamiento del lenguaje natural (NLP) es un área de la IA que permite a las computadoras entender y procesar el lenguaje humano.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Cuál es un ejemplo de IA generativa de imagen?",
        "options": ["DALL-E", "GPT-3", "BERT", "ChatGPT"],
        "correctAnswer": 0,
        "explanation": "DALL-E es un modelo de IA generativa diseñado para crear imágenes a partir de descripciones textuales.",
        "citation": "IA generativas - 2a Edición"
    },
    {
        "question": "¿Qué se busca con la inteligencia artificial?",
        "options": ["Imitar la inteligencia humana", "Crear software", "Reducir costos", "Aumentar la velocidad"],
        "correctAnswer": 0,
        "explanation": "El objetivo de la inteligencia artificial es crear sistemas que imiten la capacidad de aprendizaje y razonamiento humano.",
        "citation": "IA generativas - 2a Edición"
    }
]


        // Función para mezclar el orden de las preguntas
        function shuffle(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }

        // Mezclar las preguntas al cargar la página
        shuffle(questions);

        let currentQuestion = 0;
        let score = 0;
        let answeredCorrectly = false;

        const quizContainer = document.getElementById('quiz-container');
        let questionElement = document.getElementById('question');
        let answersElement = document.getElementById('answers');
        let explanationElement = document.getElementById('explanation');
        let nextButton = document.getElementById('next-btn');
        let scoreElement = document.getElementById('score');

        function loadQuestion() {
            if (currentQuestion >= questions.length) {
                showFinalScore();
                return;
            }

            const question = questions[currentQuestion];
            // Agregar el número de pregunta al texto
            questionElement.textContent = `${currentQuestion + 1}. ${question.question}`;
            answersElement.innerHTML = '';
            explanationElement.style.display = 'none';
            nextButton.style.display = 'none';
            answeredCorrectly = false;

            question.options.forEach((option, index) => {
                const button = document.createElement('button');
                button.textContent = option;
                button.classList.add('btn');
                button.addEventListener('click', () => selectAnswer(index));
                answersElement.appendChild(button);
            });

            updateScore();
        }
function selectAnswer(index) {
            if (answeredCorrectly) return;

            const question = questions[currentQuestion];
            const buttons = answersElement.getElementsByTagName('button');

            for (let i = 0; i < buttons.length; i++) {
                buttons[i].disabled = true;
                if (i === question.correctAnswer) {
                    buttons[i].classList.add('correct');
                } else if (i === index) {
                    buttons[i].classList.add('incorrect');
                }
            }

            if (index === question.correctAnswer) {
                score++;
                answeredCorrectly = true;
            }

            explanationElement.innerHTML = `
                <p><strong>Explicación:</strong> ${question.explanation}</p>
                <p><strong>Cita:</strong> "${question.citation}"</p>
            `;
            explanationElement.style.display = 'block';
            nextButton.style.display = 'block';
            updateScore();
        }

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

        function showFinalScore() {
            quizContainer.innerHTML = `
                <h2>Juego terminado</h2>
                <p>Tu puntuación final es: ${score} / ${questions.length}</p>
                <button class="btn" onclick="restartQuiz()">Jugar de nuevo</button>
            `;
        }

        function restartQuiz() {
            currentQuestion = 0;
            score = 0;
            answeredCorrectly = false;
            quizContainer.innerHTML = `
                <h2 id="question"></h2>
                <div id="answers"></div>
                <div id="explanation" class="explanation" style="display: none;"></div>
                <button id="next-btn" class="btn" style="display: none;">Siguiente Pregunta</button>
                <div id="score" class="score"></div>
            `;
            // Reasignar elementos del DOM después de reconstruir el contenido
            questionElement = document.getElementById('question');
            answersElement = document.getElementById('answers');
            explanationElement = document.getElementById('explanation');
            nextButton = document.getElementById('next-btn');
            scoreElement = document.getElementById('score');
            
            setupEventListeners();
            loadQuestion();
        }

        function updateScore() {
            if (scoreElement) {
                scoreElement.textContent = `Puntuación: ${score} / ${questions.length}`;
            }
        }

        function setupEventListeners() {
            if (nextButton) {
                nextButton.addEventListener('click', nextQuestion);
            }
        }

        // Inicialización
        setupEventListeners();
        loadQuestion();
    </script>
</body>
</html>