<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Activa tu Pensamiento</title>
  	<link rel="stylesheet" href="style_quiz.css" type="text/css">
  
</head>

<body>
    <div class="container">
       
        <div class="score-board">
            <div class="timer-container" style="margin-top:140px; margin-right:220px">
                <svg class="timer-icon" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M12 20c4.4 0 8-3.6 8-8s-3.6-8-8-8s-8 3.6-8 8s3.6 8 8 8m0-18c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 			12S6.5 2 12 2m5 11.5V13h-6V7h1.5v4.5H17z"/>
                </svg>
                <span class="timer-text" id="globalTimer"></span>
            </div>
            <div class="score-subtitle">Marte: El planeta rojo 🔴</div>
            
			<div id="userNameDisplay" class="user-name">
                👨‍🚀<span id="displayName"></span>
            </div>
            
			<div class="score-note" id="scoreNote"><b>Puntaje: 0.0 / 5</b></div>
            <div class="score-counters">
                <div>Aciertos: <span id="correct">0</span></div>
                <div>Fallos: <span id="incorrect">0</span></div>
            </div>
        </div>

        <div id="quiz-container" style="font-size:15px";>
            <!-- Preguntas generadas dinámicamente -->
        </div>

        <div class="results-screen" id="results">
            <h2>Resultado Final</h2>
            <div class="final-name">
                👨‍🚀<strong id="finalName"></strong>
            </div>
            <p>Aciertos: <span id="final-correct">0</span></p>
            <p>Fallos: <span id="final-incorrect">0</span></p>
            <p>Puntaje obtenido: <span id="finalNote">0.0</span> / 5</p>
            <p id="timeDisplay" style="margin-top:15px;font-weight:bold;"></p>
            
			<input  type="button" class="btn pint" value="Reiniciar" onclick="document.location.reload();">
			
        </div>
    </div>

	 

    <div class="converter-icon" onclick="toggleConverter()">
        <img src="images/unidad.png" style="float:left; width:40px; margin-right:10px; margin-top:-10px; border: 1px solid #ccc; border-radius: 10px; 	box-shadow: 0 0 10px #ccc;" border="0"/>
    </div>

    <div class="converter-modal" id="converter">
        <h3>📏 Conversones Métricas</h3>
        <div class="converter-controls">
            <select id="fromUnit" class="converter-select">
                <option value="au">Unidades Astronómicas (AU)</option>
                <option value="km">Kilómetros (km)</option>
                <option value="ly">Años Luz (ly)</option>
                <option value="pc">Pársec (pc)</option>
            </select>
            <input type="number" class="converter-input" id="inputValue" placeholder="Valor">
            <select id="toUnit" class="converter-select">
                <option value="km">Kilómetros (km)</option>
                <option value="au">Unidades Astronómicas (AU)</option>
                <option value="ly">Años Luz (ly)</option>
                <option value="pc">Pársec (pc)</option>
            </select>
            <button onclick="convertUnits()" class="nav-button">Convertir</button>
        </div>
        <div id="conversionResult" class="result-display"></div>
    </div>

    <div class="feedback-modal" id="feedbackModal">
        <span class="feedback-close" onclick="closeFeedback()">&times;</span>
        <h4>¡Respuesta Correcta!</h4>
        <p id="correctAnswerText"></p>
    </div>

    <div class="config-screen" id="configScreen">
        <div class="config-content">
            <h2 style="text-shadow: 2px 2px #000099;">Cuestionario</h2>
			<h3 style="text-shadow: 2px 2px #000099;">Marte: El planeta rojo 🔴</h3>
            <label>Nombre del usuario:</label>
            <input type="text" id="userName" placeholder="Ingresa tu nombre" style="width: 200px;">
            <label>Cantidad de preguntas <br>(Min.5 - Max.30):</label>
            <input type="number" id="numQuestions" min="5" max="30" value="10">
            <div style="margin: 15px 0;">
                
                <label for="enableTimer">Activar tiempo</label>
				<input type="checkbox" id="enableTimer"> 
            </div>
            <button onclick="startQuiz()">Iniciar Cuestionario</button>
        </div>
    </div>



 <p style="padding-left:15px; text-align:center;"><font size="1">Los números del sistema solar, Carlos Alberto Rojas Hincapié, <br>con licencia <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank"><font size="1">CC by-nc-sa</font></a>. Fecha, hora :
	<script> // create a new `Date` object
		var today = new Date();
			// get the date and time
		var now = today.toLocaleString();
		document.write(now);
	</script></font></p>

    <script>
        let currentQuestion = 0;
        let correctAnswers = 0;
        let incorrectAnswers = 0;
        let selectedAnswer = null;
        let currentQuestions = [];
        let totalQuestions = 10;
        let userName = '';
        let timerEnabled = false;
        let totalTime = 0;
        let remainingTime = 0;
        let timerInterval = null;

       const questions = [
  {
    question: "¿Qué planeta es conocido como el 'Planeta Rojo'?",
    options: [
      "Venus",
      "Marte",
      "Júpiter",
      "Mercurio"
    ],
    correct: 1
  },
  {
    question: "¿Qué misiones lograron los primeros aterrizajes exitosos en Marte?",
    options: [
      "Mariner 4 y Mariner 9",
      "Mars 2 y Mars 3",
      "Viking 1 y Viking 2",
      "Curiosity y Perseverance"
    ],
    correct: 2
  },
  {
    question: "¿Cuál fue la primera sonda en enviar imágenes de Marte?",
    options: [
      "Mars 2",
      "Mariner 4",
      "Viking 1",
      "Pathfinder"
    ],
    correct: 1
  },
  {
    question: "¿Cuál es el volcán más grande del sistema solar?",
    options: [
      "Monte Olimpo",
      "Valles Marineris",
      "Hellas Planitia",
      "Monte Everest"
    ],
    correct: 0
  },
  {
    question: "¿Cómo se llama el sistema de cañones más grande de Marte?",
    options: [
      "Hellas Planitia",
      "Valles Marineris",
      "Utopia Planitia",
      "Elysium Planitia"
    ],
    correct: 1
  },
  {
    question: "¿Qué porcentaje de la gravedad terrestre tiene Marte?",
    options: [
      "50%",
      "25%",
      "37%",
      "70%"
    ],
    correct: 2
  },
  {
    question: "¿Cuál fue el primer rover en recorrer la superficie de Marte?",
    options: [
      "Spirit",
      "Opportunity",
      "Sojourner",
      "Curiosity"
    ],
    correct: 2
  },
  {
    question: "¿Qué misión confirmó la presencia de agua congelada en el suelo marciano?",
    options: [
      "Curiosity",
      "Phoenix Lander",
      "Viking 1",
      "Perseverance"
    ],
    correct: 1
  },
  {
    question: "¿Cuál es el componente principal de la atmósfera de Marte?",
    options: [
      "Nitrógeno",
      "Oxígeno",
      "Dióxido de carbono",
      "Argón"
    ],
    correct: 2
  },
  {
    question: "¿Qué distancia media separa a Marte del Sol?",
    options: [
      "108 millones de km",
      "150 millones de km",
      "227,9 millones de km",
      "778 millones de km"
    ],
    correct: 2
  },
  {
    question: "¿Qué misión fue la primera en registrar sonidos reales en Marte?",
    options: [
      "Pathfinder",
      "Perseverance",
      "Viking 2",
      "Curiosity"
    ],
    correct: 1
  },
  {
    question: "¿Cómo se llama el pequeño helicóptero que voló en Marte?",
    options: [
      "Dragonfly",
      "Ingenuity",
      "Eagle",
      "Spirit"
    ],
    correct: 1
  },
  {
    question: "¿Cuál es la duración aproximada de un año en Marte?",
    options: [
      "365 días",
      "430 días",
      "500 días",
      "687 días"
    ],
    correct: 3
  },
  {
    question: "¿Qué elemento da a Marte su característico color rojizo?",
    options: [
      "Óxido de aluminio",
      "Óxido de silicio",
      "Óxido de hierro",
      "Óxido de titanio"
    ],
    correct: 2
  },
  {
    question: "¿Cómo se llama la primera misión china que aterrizó un rover en Marte?",
    options: [
      "Hope Probe",
      "Tianwen-1",
      "Zhurong",
      "Mariner 9"
    ],
    correct: 1
  },
{
    question: "¿Cómo se llama el rover que utilizó energía nuclear para explorar Marte?",
    options: [
      "Spirit",
      "Curiosity",
      "Sojourner",
      "Opportunity"
    ],
    correct: 1
  },
  {
    question: "¿Cuál fue la primera misión de los Emiratos Árabes Unidos a Marte?",
    options: [
      "Tianwen-1",
      "Hope Probe",
      "Perseverance",
      "Ingenuity"
    ],
    correct: 1
  },
  {
    question: "¿Qué porcentaje de dióxido de carbono compone la atmósfera de Marte?",
    options: [
      "22,7%",
      "78%",
      "95,3%",
      "1,6%"
    ],
    correct: 2
  },
  {
    question: "¿Qué planeta tiene un núcleo compuesto de hierro, níquel y azufre?",
    options: [
      "Venus",
      "Júpiter",
      "Tierra",
      "Marte"
    ],
    correct: 3
  },
  {
    question: "¿Qué misión detectó actividad sísmica en Marte?",
    options: [
      "InSight",
      "Pathfinder",
      "Phoenix",
      "Viking 2"
    ],
    correct: 0
  },
  {
    question: "¿Qué fenómenos pueden cubrir a Marte con polvo durante semanas?",
    options: [
      "Erupciones volcánicas",
      "Tormentas de polvo",
      "Avalanchas",
      "Huracanes de hielo"
    ],
    correct: 1
  },
  {
    question: "¿Cuál es el valor de la gravedad en Marte?",
    options: [
      "9,8 m/s²",
      "3,71 m/s²",
      "1,62 m/s²",
      "6,67 m/s²"
    ],
    correct: 1
  },
  {
    question: "¿Cómo se llama la región donde aterrizó el rover Zhurong?",
    options: [
      "Elysium Planitia",
      "Utopia Planitia",
      "Valles Marineris",
      "Hellas Planitia"
    ],
    correct: 1
  },
  {
    question: "¿Cuál es la principal causa del color rojizo de Marte?",
    options: [
      "Dióxido de carbono",
      "Óxidos de hierro",
      "Óxidos de silicio",
      "Óxidos de magnesio"
    ],
    correct: 1
  },
  {
    question: "¿Qué porcentaje de la masa de la Tierra corresponde a Marte?",
    options: [
      "50%",
      "25%",
      "10%",
      "75%"
    ],
    correct: 2
  },
  {
    question: "¿Qué instrumento permite a los rovers estudiar el interior de las rocas marcianas?",
    options: [
      "Un taladro",
      "Un microscopio óptico",
      "Un radar de penetración",
      "Un generador de imágenes térmicas"
    ],
    correct: 0
  },
  {
    question: "¿Qué característica tiene el cráter Hellas Planitia?",
    options: [
      "Es el volcán más grande",
      "Es el sistema de cañones más largo",
      "Es uno de los cráteres de impacto más grandes",
      "Es la región más fría de Marte"
    ],
    correct: 2
  },
  {
    question: "¿Qué velocidad promedio tiene Marte en su órbita?",
    options: [
      "24,1 km/s",
      "29,8 km/s",
      "11,2 km/s",
      "36,5 km/s"
    ],
    correct: 0
  },
  {
    question: "¿Qué porcentaje de la superficie de Marte fue mapeado por las misiones Viking?",
    options: [
      "100%",
      "97%",
      "80%",
      "50%"
    ],
    correct: 1
  },
  {
    question: "¿Qué fenómeno ayuda a explicar la pérdida de la atmósfera marciana?",
    options: [
      "Erosión eólica",
      "Falta de campo magnético",
      "Tormentas eléctricas",
      "Actividad tectónica"
    ],
    correct: 1
  }
];

        function shuffleArray(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;
        }

        function initQuiz(numQuestions = 10) {
            const container = document.getElementById('quiz-container');
            container.innerHTML = '';
            
            const selectedQuestions = shuffleArray([...questions]).slice(0, numQuestions)
                .map(q => {
                    const shuffledOptions = shuffleArray([...q.options]);
                    return {
                        question: q.question,
                        options: shuffledOptions,
                        correct: shuffledOptions.indexOf(q.options[q.correct])
                    };
                });
            
            currentQuestions = selectedQuestions;
            
            currentQuestions.forEach((q, index) => {
                const div = document.createElement('div');
                div.className = 'question-container';
                div.innerHTML = `
                    <div class="question">${index + 1}. ${q.question}</div>
                    ${q.options.map((o, i) => `
                        <div class="option" onclick="selectAnswer(${index}, ${i})">${o}</div>
                    `).join('')}
                    <div class="nav-buttons">
                        <button class="nav-button" id="verify-${index}" onclick="checkAnswer(${index})">Verificar</button>
                        <button class="nav-button" id="next-${index}" onclick="nextQuestion()" style="display: none;">Siguiente</button>
                    </div>
                `;
                container.appendChild(div);
            });
            showQuestion(0);
        }

        function showQuestion(index) {
            document.querySelectorAll('.question-container').forEach((el, i) => {
                el.style.display = i === index ? 'block' : 'none';
            });
        }

        function selectAnswer(questionIndex, optionIndex) {
            const container = document.querySelectorAll('.question-container')[questionIndex];
            container.querySelectorAll('.option').forEach(opt => opt.classList.remove('selected'));
            event.target.classList.add('selected');
            selectedAnswer = optionIndex;
        }

        function checkAnswer(questionIndex) {
            if (selectedAnswer === null) return;
            
            const question = currentQuestions[questionIndex];
            const container = document.querySelectorAll('.question-container')[questionIndex];
            const options = container.querySelectorAll('.option');
            
            options.forEach((opt, index) => {
                if (index === question.correct) {
                    opt.classList.add('correct-answer');
                } else if (index === selectedAnswer) {
                    opt.classList.add('incorrect-answer');
                }
            });

            if (selectedAnswer === question.correct) {
                correctAnswers++;
            } else {
                incorrectAnswers++;
                document.getElementById('correctAnswerText').textContent = 
                    `${question.options[question.correct]}`;
                document.getElementById('feedbackModal').style.display = 'block';
            }

            updateScores();
            container.querySelector(`#verify-${questionIndex}`).style.display = 'none';
            container.querySelector(`#next-${questionIndex}`).style.display = 'block';
            selectedAnswer = null;
        }

        function nextQuestion() {
            if (currentQuestion < currentQuestions.length - 1) {
                currentQuestion++;
                showQuestion(currentQuestion);
            } else {
                showResults(false);
            }
        }

        function updateScores() {
            document.getElementById('correct').textContent = correctAnswers;
            document.getElementById('incorrect').textContent = incorrectAnswers;
            const note = (5 / totalQuestions * correctAnswers).toFixed(1);
            document.getElementById('scoreNote').textContent = `Puntaje: ${note}/5`;
        }

        function showResults(timeExpired = false) {
            document.getElementById('quiz-container').style.display = 'none';
            document.getElementById('results').style.display = 'block';
            document.getElementById('final-correct').textContent = correctAnswers;
            document.getElementById('final-incorrect').textContent = incorrectAnswers;
            document.getElementById('finalName').textContent = userName;
            document.getElementById('finalNote').textContent = (5 / totalQuestions * correctAnswers).toFixed(1);
            
            const timeDisplay = document.getElementById('timeDisplay');
            if (timerEnabled) {
                clearInterval(timerInterval);
                if (timeExpired) {
                    timeDisplay.textContent = "⏱️ ¡Tiempo agotado!";
                    timeDisplay.style.color = '#e74c3c';
                } else {
                    const timeTaken = totalTime - remainingTime;
                    const mins = Math.floor(timeTaken / 60);
                    const secs = timeTaken % 60;
                    timeDisplay.textContent = `⏱️ Tiempo empleado: ${mins}:${secs.toString().padStart(2, '0')}`;
                    timeDisplay.style.color = '#4ecdc4';
                }
                timeDisplay.style.display = 'block';
            } else {
                timeDisplay.style.display = 'none';
            }
        }

        function startGlobalTimer() {
            timerInterval = setInterval(() => {
                remainingTime--;
                document.getElementById('globalTimer').textContent = formatTime(remainingTime);
                
                if (remainingTime <= 10) {
                    document.getElementById('globalTimer').classList.add('time-warning');
                }
                
                if (remainingTime <= 0) {
                    clearInterval(timerInterval);
                    timeExpired();
                }
            }, 1000);
        }

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

        function timeExpired() {
            document.querySelectorAll('.question-container').forEach(container => {
                container.querySelectorAll('.option').forEach(opt => opt.style.pointerEvents = 'none');
            });
            showResults(true);
        }

        function restartQuiz() {
            document.getElementById('configScreen').style.display = 'block';
            document.getElementById('quiz-container').style.display = 'none';
            document.getElementById('results').style.display = 'none';
            document.getElementById('displayName').textContent = '';
            currentQuestion = 0;
            correctAnswers = 0;
            incorrectAnswers = 0;
            selectedAnswer = null;
            document.getElementById('quiz-container').innerHTML = '';
            updateScores();
            document.getElementById('globalTimer').classList.remove('time-warning');
            document.getElementById('globalTimer').textContent = '';
            clearInterval(timerInterval);
            closeFeedback();
        }

        function closeFeedback() {
            document.getElementById('feedbackModal').style.display = 'none';
        }

        function toggleConverter() {
            const modal = document.getElementById('converter');
            modal.style.display = modal.style.display === 'block' ? 'none' : 'block';
        }

        const conversionFactors = {
            au: { km: 1.496e8, ly: 1.58125e-5, pc: 4.84814e-6 },
            km: { au: 1/1.496e8, ly: 1/9.461e12, pc: 1/3.086e13 },
            ly: { au: 1/1.58125e-5, km: 9.461e12, pc: 0.306601 },
            pc: { au: 1/4.84814e-6, km: 3.086e13, ly: 1/0.306601 }
        };

        function convertUnits() {
            const from = document.getElementById('fromUnit').value;
            const to = document.getElementById('toUnit').value;
            const value = parseFloat(document.getElementById('inputValue').value);
            
            if(isNaN(value)) {
                document.getElementById('conversionResult').textContent = "Ingrese un valor numérico válido";
                return;
            }

            const result = value * conversionFactors[from][to];
            document.getElementById('conversionResult').textContent = 
                `${value} ${from} = ${result.toExponential(2)} ${to}`;
        }

        // Starfield animation
        function createStarfield() {
            const canvas = document.getElementById('starCanvas');
            const ctx = canvas.getContext('2d');
            
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            
            window.addEventListener('resize', resizeCanvas);
            resizeCanvas();

            class Star {
                constructor() {
                    this.reset();
                    this.z = Math.random() * 0.5 + 0.5;
                }
                
                reset() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.size = Math.random() * 2 + 1;
                    this.opacity = Math.random();
                    this.speed = Math.random() * 0.004 + 0.002;
                }
                
                update() {
                    this.opacity += this.speed;
                    if(this.opacity > 1 || this.opacity < 0) {
                        this.speed = -this.speed;
                    }
                }
                
                draw() {
                    ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity * this.z})`;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size * 0.5, 0, Math.PI * 2);
                    ctx.fill();
                }
            }

            const stars = Array(150).fill().map(() => new Star());
            
            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                stars.forEach(star => {
                    star.update();
                    star.draw();
                });
                requestAnimationFrame(animate);
            }
            
            animate();
        }

        // Initialize starfield when page loads
        window.addEventListener('load', createStarfield);

        function startQuiz() {
            userName = document.getElementById('userName').value.trim() || 'Anónimo';
            const numQuestions = parseInt(document.getElementById('numQuestions').value);
            timerEnabled = document.getElementById('enableTimer').checked;
            totalQuestions = numQuestions;
            
            if (numQuestions < 5 || numQuestions > 30 || isNaN(numQuestions)) {
                alert('Por favor ingrese un número válido entre 5 y 30');
                return;
            }
            
            document.getElementById('displayName').textContent = userName;
            document.getElementById('configScreen').style.display = 'none';
            totalTime = numQuestions * 60;
            remainingTime = totalTime;
            
            if (timerEnabled) {
                startGlobalTimer();
                document.getElementById('globalTimer').textContent = formatTime(remainingTime);
            }
            initQuiz(numQuestions);
        }
    </script>
</body>
</html>