HTML Editor

Edita código
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ballenas</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
            background-color: #f0f8ff;
        }
        #player-container {
            width: 100%;
            max-width: 800px;
            aspect-ratio: 16 / 9;
            position: relative;
            overflow: hidden;
            background-color: #000;
        }
        #player {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #time-display {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
            color: #90EE90; /* Verde claro */
            text-shadow: 2px 2px 4px black;
            z-index: 10;
        }
        #quiz-container {
            position: absolute;
            top: 50%;
            left: 60%;
			width:70%;
            transform: translate(-60%, -50%);
            background-color: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            text-align: center;
            z-index: 10;
        }
        #timeline {
            width: 100%;
            max-width: 800px;
            height: 20px;
            background-color: #ddd;
            position: relative;
            margin-top: 20px;
        }
        #progress {
            width: 0;
            height: 100%;
            background-color: #4CAF50;
            position: absolute;
            top: 0;
            left: 0;
        }
        .marker {
            position: absolute;
            width: 2px;
            height: 20px;
            background-color: #FF5722;
            z-index: 2;
        }
        button {
            margin: 5px;
            padding: 10px;
            cursor: pointer;
            background-color: #008CBA;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #005f7f;
        }
        #feedback {
            margin-top: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="player-container">
        <div id="player"></div>
        <div id="time-display"></div> <div id="quiz-container" style="display: none;">
            <h2 id="question"></h2>
            <div id="options"></div>
            <p id="feedback"></p>
        </div>
    </div>
    <div id="timeline">
        <div id="progress"></div>
    </div>

    <script>
        let player;
        let currentQuestion = 0;
        const questions = [
            {
                time: 10,
                text: "Las ballenas son mamíferos que respiran aire y dan a luz crías vivas.",
                type: "trueFalse",
                options: ["Verdadero", "Falso"],
                correctAnswer: 0
            },
            {
                time: 25,
                text: "¿Cuál es la especie de ballena más grande del mundo?",
                type: "multipleChoice",
                options: ["Ballena jorobada", "Ballena azul", "Orca", "Ballena gris"],
                correctAnswer: 1
            },
            {
                time: 38,
                text: "¿Qué comen las ballenas barbadas?",
                type: "multipleChoice",
                options: ["Pequeños peces y calamares", "Plancton y krill", "Algas marinas", "Medusas%"],
                correctAnswer: 1
            }
        ];

        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                videoId: '-X31wyIVoyc',
                playerVars: {
                    'controls': 0,
                    'disablekb': 1,
                    'modestbranding': 1,
                    'rel': 0,
                    'showinfo': 0,
					'autoplay': 0
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        function onPlayerReady(event) {
            setMarkers();
        }

        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING) {
                checkTime();
                updateProgress();
                updateTimeDisplay();
            }
        }

        function setMarkers() {
            const timeline = document.getElementById('timeline');
            const duration = player.getDuration();

            questions.forEach(question => {
                const marker = document.createElement('div');
                marker.className = 'marker';
                const position = (question.time / duration) * 100;
                marker.style.left = `${position}%`;
                timeline.appendChild(marker);
            });
        }

        function checkTime() {
            const currentTime = Math.floor(player.getCurrentTime());
            if (currentQuestion < questions.length && currentTime === questions[currentQuestion].time) {
                player.pauseVideo();
                showQuestion(currentQuestion);
            } else {
                setTimeout(checkTime, 1000);
            }
        }

        function updateProgress() {
            const currentTime = player.getCurrentTime();
            const duration = player.getDuration();
            const progress = (currentTime / duration) * 100;
            document.getElementById('progress').style.width = `${progress}%`;
            
            if (player.getPlayerState() === YT.PlayerState.PLAYING) {
                requestAnimationFrame(updateProgress);
            }
        }

        function updateTimeDisplay() {
            const currentTime = player.getCurrentTime();
            const duration = player.getDuration();
            const timeDisplay = document.getElementById('time-display');
            const formattedCurrentTime = formatTime(currentTime);
            const formattedDuration = formatTime(duration);
            timeDisplay.textContent = `${formattedCurrentTime}/${formattedDuration}`;

            if (player.getPlayerState() === YT.PlayerState.PLAYING) {
                requestAnimationFrame(updateTimeDisplay);
            }
        }

        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = Math.floor(seconds % 60);
            const formattedTime = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
            return formattedTime;
        }

        function showQuestion(index) {
            const quizContainer = document.getElementById('quiz-container');
            const questionEl = document.getElementById('question');
            const optionsEl = document.getElementById('options');
            const feedbackEl = document.getElementById('feedback');

            quizContainer.style.display = 'block';
            questionEl.textContent = questions[index].text;
            optionsEl.innerHTML = '';
            feedbackEl.textContent = '';

            questions[index].options.forEach((option, i) => {
                const button = document.createElement('button');
                button.textContent = option;
                button.onclick = () => checkAnswer(index, i);
                optionsEl.appendChild(button);
            });
        }

        function checkAnswer(questionIndex, answerIndex) {
            const feedbackEl = document.getElementById('feedback');
            
            if (answerIndex === questions[questionIndex].correctAnswer) {
                feedbackEl.textContent = 'Â¡Respuesta correcta!';
                feedbackEl.style.color = 'green';
                setTimeout(() => {
                    const quizContainer = document.getElementById('quiz-container');
                    quizContainer.style.display = 'none';
                    currentQuestion++;
                    player.playVideo();
                    checkTime();
                }, 1500);
            } else {
                feedbackEl.textContent = 'Respuesta incorrecta. Inténtalo de nuevo.';
                feedbackEl.style.color = 'red';
            }
        }
    </script>
    <script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>