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>