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>Selección múltiple</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .quiz-container {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            max-width: 800px;
            width: 100%;
        }
        h1 {
            text-align: center;
            color: #3498e1;
            text-shadow: 1px 1px black;
            line-height: 1.2em;
        }
        #question {
            line-height: 1.2em;
            font-size: 20px;
            margin-bottom: 15px;
        }
        .question-content {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }
        .question-media {
            width: 50%;
            padding-right: 20px;
			padding-top: 5px;
        }
        .question-media img, .question-media video {
            max-width: 100%;
            height: auto;
        }
		
        .question-text {
            width: 50%;
        }
        .answer {
            display: block;
            width: 100%;
            padding: 10px;
            margin-top: 10px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .answer:hover {
            background-color: #34495e;
        }
        .answer.correct {
            background-color: #27ae60;
        }
        .answer.incorrect {
            background-color: #e74c3c;
        }
        button {
            display: block;
            width: 100%;
            padding: 10px;
            margin-top: 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #2980b9;
        }
        .explanation {
            margin-top: 20px;
            padding: 10px;
            background-color: #e8f4f8;
            border-radius: 5px;
        }
        .score {
            text-align: center;
            font-weight: bold;
            margin-top: 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div id="quiz-container" class="quiz-container">
        <h1>Evaluación olímpica</h1>
        <div class="question-content">
            <div class="question-media" id="questionMedia">
                <!-- Media content will be inserted here -->
            </div>
            <div class="question-text">
                <div id="question"></div>
                <div id="answers"></div>
            </div>
        </div>
        <div id="explanation" class="explanation" style="display: none;"></div>
        <button id="nextButton" style="display: none;" onclick="nextQuestion()">Siguiente Pregunta</button>
        <div id="score" class="score"></div>
    </div>

    <script>
        const questions = [
            {
                question: "¿Cuándo se introdujo la categoría femenina de fútbol en el programa olímpico?",
                media: {
                    type: "image",
                    src: "./images/1.jpg"
                },
                answers: ["Atenas 2004", "Barcelona 1992", "Atlanta 1996", "Sidney 2000"],
                correct: 2,
                explanation: "En Atlanta se inicia el fútbol femenino en una olimpiada."
            },
            {
                question: "¿Cuál de estos aparatos no se utiliza en la categoría femenina de gimnasia artística?",
                media: {
                    type: "video",
                    src: "./images/video.mp4"
                },
                answers: ["Barra de equilibrio", "Barras paralelas", "Suelo", "Barras asimétrica"],
                correct: 1,
                explanation: "Las barras paralelas se usan en las competiciones masculinas."
            },
            {
                question: "¿Cuántos jugadores mayores de 23 años pueden seleccionar los equipos de fútbol de la categoría masculina?",
                media: {
                    type: "image",
                    src: "./images/2.jpg"
                },
                answers: ["Cuatro", "Uno", "Tres", "Dos"],
                correct: 2,
                explanation: "El máximo de jugadores mayores de 23 son tres."
            },
			{
                question: "¿En cuál de los siguientes emblemáticos estadios franceses se celebrará el partido de fútbol por la medalla de oro en París 2024?",
                media: {
                    type: "image",
                    src: "./images/3.jpg"
                },
                answers: ["Estadio de Niza", "Parque de los Príncipes", "Estadio de Lyon", "Estadio de Marsella"],
                correct: 1,
                explanation: "En el Parque de los Príncipes se jugará la final."
            },
			{
                question: "¿Cómo se llama la carrera de las Grandes Vueltas en la que el líder lleva el maillot amarillo?",
                media: {
                    type: "image",
                    src: "./images/4.jpg"
                },
                answers: ["Giro de Italia", "Vuelta a Gran Bretaña", "Tour de Francia", "Vuelta a España"],
                correct: 2,
                explanation: "En la vuelta de Francia, el líder se viste a amarillo."
            },
			{
                question: "¿En qué Juegos Olímpicos hizo su debut el BMX freestyle?",
                media: {
                    type: "image",
                    src: "./images/5.jpg"
                },
                answers: ["Londres 2012", "París 2024", "Tokyo 2020", "Río 2016"],
                correct: 2,
                explanation: "En Tokyo 2020 debuta el BMX freestyle."
            },
			{
                question: "¿Cómo se llama el lugar donde se disputará el ciclismo de montaña en los Juegos Olímpicos París 2024?",
                media: {
                    type: "image",
                    src: "./images/6.jpg"
                },
                answers: ["Parque Musashinonomori", "Colina de Elancourt", "Colina de Box", "Fuerte de Copacabana"],
                correct: 1,
                explanation: "En la Colina de Elancourt se disputará el ciclismo de montaña."
            },
			{
                question: "En Tokyo 2020, el equipo de Estados Unidos de baloncesto se llevó a casa el oro ¿Contra qué País se enfrentaron en la final?",
                media: {
                    type: "image",
                    src: "./images/7.jpg"
                },
                answers: ["Francia", "Australia", "Eslovenia", "Alemania"],
                correct: 0,
                explanation: "Francia se llevó la medalla de plata."
            },
			{
                question: "¿Quién ostenta el récord de mayor cantidad de puntos totales anotados en la historia del baloncesto olímpico?",
                media: {
                    type: "image",
                    src: "./images/9.jpg"
                },
                answers: ["Oscar Schmidt de Brasil", "Pau Casol de España", "Andrew Caze de Australia", "Luis Scola de Argentina"],
                correct: 0,
                explanation: "Oscar Schmidt de Brasil ostenta ese récord."
            },
			{
                question: "¿De qué emblemático monumento contienen metal las medallas de París?",
                media: {
                    type: "image",
                    src: "./images/10.jpg"
                },
                answers: ["La Torre de Tokyo", "La Torre Eiffel", "El Atomium", "La Estatua de la Libertad"],
                correct: 1,
                explanation: "Cada medalla olímpica y paralímpica está engastada con una pieza de hierro original del la Torre Eiffel, construida entre 1887 y 1889."
            },
			{
                question: "¿De qué metal está hecha la Torre Eiffel?",
                media: {
                    type: "image",
                    src: "./images/11.jpg"
                },
                answers: ["Platino", "Hierro", "Acero inoxidable", "Cobre"],
                correct: 1,
                explanation: "El hierro pudelado que compone la estructuta de la Torre Eiffel procede de las forjas de Pompey (situada al este de Francia)."
            },
			{
                question: "¿Cuánto pesan las medalla de oro de París 2024?",
                media: {
                    type: "image",
                    src: "./images/12.jpg"
                },
                answers: ["1000 gramos", "100 gramos", "529 gramos", "303 gramos"],
                correct: 2,
                explanation: "529 gramos pesa una medalla de oro en París 2024."
            },
			{
                question: "¿De qué país es el equipo campeón olímpico actual de voleibol masculino que defiende el título?",
                media: {
                    type: "image",
                    src: "./images/14.jpg"
                },
                answers: ["Japón", "Brasil", "Cuba", "Francia"],
                correct: 3,
                explanation: "Francia es el campeón defensor."
            },
			{
                question: "¿Cuál es el único país, en pruebas masculinas y femeninas de voleibol, que ha ganado tres títulos olímpicos consecutivos?",
                media: {
                    type: "image",
                    src: "./images/15.jpg"
                },
                answers: ["Cuba", "Estados Unidos", "Brasil", "Serbia"],
                correct: 0,
                explanation: "Cuba ostenta ese récord."
            },
			{
                question: "¿Qué color NO forma parte del símbolo olímpico?",
                media: {
                    type: "image",
                    src: "./images/16.jpg"
                },
                answers: ["Verde", "Azul", "Morado", "Rojo"],
                correct: 2,
                explanation: "Cada anillo tiene un color especial: azul, negro, amarillo, verde y rojo."
            },
			{
                question: "Los cinco anillos olímpicos representan la unión de cinco...",
                media: {
                    type: "image",
                    src: "./images/17.jpg"
                },
                answers: ["Colores", "Credos", "Países", "Continentes"],
                correct: 3,
                explanation: "Cada anillo representa un continente."
            },
			{
                question: "¿Cuándo se produjo el debut oficial del símbolo en los Juegos Olímpicos?",
                media: {
                    type: "image",
                    src: "./images/18.jpg"
                },
                answers: ["1920", "1957", "1913", "1924"],
                correct: 0,
                explanation: "En los congresos de 1914, celebrado con motivo del vigésimo aniversario de la restauración de los juegos, el emblema fue adoptado como símbolo olímpico y convertido en la bandera oficial del Movimiento Olímpico, estrenados en los Juegos Olímpicos de Amberes 1920."
            },
			{
                question: "¿De qué son las pistas de tenis de París 2020?",
                media: {
                    type: "image",
                    src: "./images/19.jpg"
                },
                answers: ["Hormigón", "Tierra batida", "Material duro", "Césped"],
                correct: 1,
                explanation: "Las pistas son de tierra batida."
            },
			{
                question: "¿Quién fue Roland Garros?",
                media: {
                    type: "image",
                    src: "./images/20.jpg"
                },
                answers: ["Un jugador de tenis francés", "Un científico francés", "Un piloto francés", "Un explorador francés"],
                correct: 2,
                explanation: "Roland Garros fue un piloto francés."
            },
			{
                question: "¿Cómo se enciende la llama olímpica?",
                media: {
                    type: "image",
                    src: "./images/21.jpg"
                },
                answers: ["Con el sol/espejo parabólico", "Con un mechero", "Con el fuego de los pasados juegos", "Con una hoguera ceremonial"],
                correct: 0,
                explanation: "En la antigüedad, para garantizar su pureza, la llama se encendía utilizando los rayos del sol captados en el centro de un recipiente llamado skaphia."
            }
			
        ];

        let currentQuestion = 0;
        let score = 0;

        function loadQuestion() {
            const question = questions[currentQuestion];
            const mediaContainer = document.getElementById("questionMedia");
            
            // Clear previous media
            mediaContainer.innerHTML = "";
            
            // Load new media based on type
            if (question.media.type === "image") {
                const img = document.createElement("img");
                img.src = question.media.src;
                img.alt = "Imagen de la pregunta";
                mediaContainer.appendChild(img);
            } else if (question.media.type === "video") {
                const video = document.createElement("video");
                video.src = question.media.src;
                video.controls = true;
                video.muted = true;
                mediaContainer.appendChild(video);
            }

            document.getElementById("question").textContent = question.question;
            const answersDiv = document.getElementById("answers");
            answersDiv.innerHTML = "";
            question.answers.forEach((answer, index) => {
                const button = document.createElement("button");
                button.textContent = answer;
                button.className = "answer";
                button.onclick = () => selectAnswer(index);
                answersDiv.appendChild(button);
            });
            document.getElementById("explanation").style.display = "none";
            document.getElementById("nextButton").style.display = "none";
        }

        function selectAnswer(index) {
            const question = questions[currentQuestion];
            const answers = document.querySelectorAll(".answer");
            answers.forEach((btn, i) => {
                btn.classList.remove("correct", "incorrect");
                btn.disabled = true;
                if (i === question.correct) {
                    btn.classList.add("correct");
                } else if (i === index && i !== question.correct) {
                    btn.classList.add("incorrect");
                }
            });

            const explanation = document.getElementById("explanation");
            explanation.textContent = question.explanation;
            explanation.style.display = "block";

            document.getElementById("nextButton").style.display = "block";

            if (index === question.correct) {
                score++;
            }
        }

        function nextQuestion() {
            currentQuestion++;
            if (currentQuestion < questions.length) {
                loadQuestion();
            } else {
                finishQuiz();
            }
        }

        function finishQuiz() {
            const quizContainer = document.getElementById("quiz-container");
            quizContainer.innerHTML = `
                <h1>Evaluación completada</h1>
                <p>Tu puntuación final es: ${score} de ${questions.length}</p>
                <button onclick="restartQuiz()">Reiniciar Quiz</button>
            `;
        }

        function restartQuiz() {
            currentQuestion = 0;
            score = 0;
            const quizContainer = document.getElementById("quiz-container");
            quizContainer.innerHTML = `
                <h1>Evaluación acumulativa</h1>
                <div class="question-content">
                    <div class="question-media" id="questionMedia">
                        <!-- Media content will be inserted here -->
                    </div>
                    <div class="question-text">
                        <div id="question"></div>
                        <div id="answers"></div>
                    </div>
                </div>
                <div id="explanation" class="explanation" style="display: none;"></div>
                <button id="nextButton" style="display: none;" onclick="nextQuestion()">Siguiente Pregunta</button>
                <div id="score" class="score"></div>
            `;
            loadQuestion();
        }

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