File: //var/www/aspa/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script type="importmap">
{
"imports": {
"three": "./three/Three.js"
}
}
</script>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body {
margin: 0;
overflow: hidden; /* Previene desbordamiento si el canvas es más grande que la ventana */
}
canvas {
display: block; /* Elimina cualquier margen por defecto */
position: absolute;
top: 0;
left: 0;
}
.hud {
display: block;
position: fixed; /* Mantiene el botón sobre el contenido y fijo en el viewport */
top: 70%; /* Posiciona el botón en el centro verticalmente */
left: 50%; /* Posiciona el botón en el centro horizontalmente */
transform: translate(-50%, -50%); /* Ajusta la posición exacta al centro */
background: rgb(255, 255, 255, 0.7);
color: #e61972;
width: 50vw;
border: none;
border-radius: 1em;
text-align: center;
font-family: sans-serif;
font-size: 10vw;
padding: 20px;
z-index: 100; /* Asegura que el botón esté encima de otros elementos */
}
.hud:hover {
cursor: pointer;
border: solid 1px #000000;
color: white;
background: rgb(230, 25, 114);
}
#iconopreguntas {
display: none;
width: max-content; /* Ajusta el ancho automáticamente según el contenido */
max-width: 60%; /* Máximo porcentaje del ancho de la ventana */
position: fixed;
top: 10px; /* Espacio desde la parte superior */
left: 50%; /* Centrado horizontalmente */
transform: translateX(-50%); /* Alineación horizontal */
background-color: #0e86c8; /* Un fondo ligeramente gris para el contraste */
color: #343a40; /* Color de texto oscuro para legibilidad */
padding: 10px 10px; /* Padding horizontal y vertical */
border-radius: 5px; /* Bordes redondea dos */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
text-align: center; /* Centra el contenido */
font-size: 5vw;
z-index: 100; /* Asegura que esté por encima de otros elementos */
}
#iconopreguntas:hover {
background-color: #007bff; /* Color de fondo al hacer hover */
color: #fff; /* Color de texto al hacer hover */
font-size: 5vw;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al hacer hover */
}
#questionContainer {
position: fixed;
top: 50%;
font-family: sans-serif;
left: 50%;
color: white;
transform: translate(-50%, -50%);
background: rgb(22, 46, 84);
border-radius: 20px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 1);
z-index: 101;
display: none; /* Usa flexbox */
flex-direction: column; /* Apila los elementos en columna */
align-items: center; /* Centra los elementos en la dirección cruzada (horizontalmente en este caso) */
justify-content: center; /* Centra los elementos en la dirección principal (verticalmente en este caso) */
}
.btn {
color: #ffffff;
background: #0e86c8;
width: 60%; /* Asegúrate de que el 60% es el ancho que deseas para tus botones */
padding: 10px;
margin: 5px auto; /* El auto adicional centra los márgenes horizontalmente */
cursor: pointer;
}
.btn:hover {
color: #0e86c8;
background: #ffffff;
}
#restartContainer {
width: 100%; /* Asumiendo que quieres que ocupe todo el ancho disponible */
height: auto; /* O puedes especificar una altura fija si es necesario */
position: fixed; /* O absolute, dependiendo de tu estructura actual */
top: 70%; /* Ajusta según la posición del contenedor de preguntas */
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
display: none; /* Comienza oculto */
z-index: 104; /* Asegúrate de que esté por encima de otros elementos si es necesario */
}
#restartButton {
position: fixed; /* Mantiene el botón sobre el contenido y fijo en el viewport */
top: 70%; /* Posiciona el botón en el centro verticalmente */
left: 50%; /* Posiciona el botón en el centro horizontalmente */
transform: translate(-50%, -50%); /* Ajusta la posición exacta al centro */
background: rgb(255, 255, 255,0.7);
color: #e61972;
width: 50vw;
border: none;
border-radius: 1em;
text-align: center;
font-family: sans-serif;
font-size: 5vw;
padding: 20px;
}
#restartButton:hover{
cursor: pointer;
border: solid 1px #000000;
color: white;
background: rgb(230, 25, 114);
}
#imagenlogo {
content: "";
position: fixed;
right: -4%;
bottom: -10%;
width: 70%; /* Ancho ajustado para dispositivos más grandes */
height: 30%;
background: url('LOGO_SGIS.svg') no-repeat;
background-size: contain;
opacity: 0.7;
z-index: 50;
}
@keyframes parpadeo {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
#imagen-error {
content: url("imagen_error.jpeg"); /* No es necesario para la imagen de fondo, se puede omitir */
position: fixed; /* Fija el elemento en relación con la ventana del navegador */
bottom: 10%;
left: 10%;
display: none;
animation: parpadeo 0.3s infinite;
width: 20vw; /* Ancho fijo del logo */
height: 20vw ; /* Altura fija del logo */
background-size: contain;
background-repeat: no-repeat; /* Evita que la imagen se repita */
opacity: 1; /* Ajusta la opacidad si necesitas que la imagen sea semi-transparente */
z-index: 51; /* Asegura que el logo esté por encima de otros elementos de contenido, ajusta según sea necesario */
}
@media (max-width: 1500px) {
.hud {
font-size: 7vw; /* Muy pequeño para teléfonos en orientación vertical */
}
#imagenlogo {
right: -5%;
bottom: -20%;
width: 1000px;
height: 1000px;
}
#iconopreguntas{
font-size: 10vw;
}
#imagen-error {
bottom: 15%;
}
#restartButton {
font-size: 7vw;
}
#questionContainer {
font-size: 3.5vw;
padding: 5px;
}
}
</style>
</head>
<body>
<script type="module" src="./main.js"></script>
<canvas id="canvasResultado" style="display:none;"></canvas>
<button class="hud" id="1"><b>Iniciar</b></button>
<div id="imagenlogo"></div>
<div id="imagen-error"></div>
<div id="overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:99;"></div>
<div id="iconopreguntas">
<div id="contadorPreguntas" style="text-align: center; margin-top: 20px;"></div>
</div>
<div id="questionContainer">
<div class="contenedor">
<div class="cuadrito">
<div class="pregunta" id="Pregunta"></div>
<div class="btn" id="btn1">Opcion</div>
<div class="btn" id="btn2">Opcion 2</div>
<div class="btn" id="btn3">Opcion 3</div>
<div class="btn" id="btn4">Opcion 4</div>
<div id="resultContainer" style="display: none;"></div>
</div>
</div>
</div>
</div>
<div id="restartContainer" style="Display: none">
<button id="restartButton"></button></div>
<script>
let base_preguntas = readText("base-preguntas.json");
let interprete_preguntas = JSON.parse(base_preguntas);
// Llama a la función aleatorizar al cargar la página
window.onload = function() {
aleatorizar();
};
let preguntasMostradas = [];
function aleatorizar() {
if (preguntasMostradas.length === interprete_preguntas.length) {
console.log("Todas las preguntas han sido mostradas.");
// Aquí puedes manejar el fin del cuestionario, por ejemplo, ocultando el contenedor de preguntas
// y mostrando un mensaje final o el botón de reiniciar.
document.getElementById("questionContainer").style.display = "none";
document.getElementById("restartContainer").style.display = "block";
return;
}
let n;
do {
n = Math.floor(Math.random() * interprete_preguntas.length);
} while (preguntasMostradas.includes(n));
preguntasMostradas.push(n);
preguntaActualIndex = n;
pregunta(n); // Asume que esta es tu función para mostrar la pregunta actual
}
function pregunta(n) {
let preguntaActual = interprete_preguntas[n]; // Corregido: usa una variable diferente para la pregunta actual
document.getElementById("Pregunta").innerHTML = preguntaActual.Pregunta;
// Combina las respuestas en un arreglo, incluyendo un indicador de si es correcta
let respuestas = [
{ texto: preguntaActual.RespuestaC, correcta: 'true' },
{ texto: preguntaActual.Incorrecta1, correcta: 'false' },
{ texto: preguntaActual.Incorrecta2, correcta: 'false' },
{ texto: preguntaActual.Incorrecta3, correcta: 'false' }
];
// Aleatoriza el arreglo de respuestas
respuestas = respuestas.sort(() => 0.5 - Math.random());
// Asigna las respuestas aleatorizadas a los botones
respuestas.forEach((respuesta, index) => {
const btn = document.getElementById(`btn${index + 1}`);
btn.innerHTML = respuesta.texto;
btn.setAttribute('data-correct', respuesta.correcta);
// Reinicia el evento onclick para evitar duplicaciones
btn.onclick = () => { submitAnswer(btn.getAttribute('data-correct') === 'true'); };
});
actualizarContadorVisual(n);
}
function readText(ruta_local) {
var texto = null;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", ruta_local, false);
xmlhttp.send();
if (xmlhttp.status == 200) {
texto = xmlhttp.responseText;
}
return texto;
}
let estadoPreguntas = interprete_preguntas.map(() => '❔');
function manejarRespuesta(esCorrecta, preguntaIndex) {
estadoPreguntas[preguntaIndex] = esCorrecta ? '✅' : '❌';
actualizarContadorVisual();
}
function actualizarContadorVisual() {
let contadorHTML = "";
for (let estado of estadoPreguntas) {
contadorHTML += `${estado} `;
}
document.getElementById("contadorPreguntas").innerHTML = contadorHTML;
}
</script>
</body>
</html>