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>