Mejoras en la visualizacion de los cuestionarios
This commit is contained in:
Tatiana Villa
parent
d5bb7f40f9
commit
6f8223270a
|
|
@ -245,4 +245,9 @@ a:focus-visible {
|
|||
ol li {
|
||||
margin-bottom: 1rem; /* Más separación entre temas para poder pulsar bien */
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color-texto);
|
||||
transition: color 0.25s ease;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -157,6 +157,59 @@ button#aleatoria {
|
|||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.supuesto-container {
|
||||
max-height: 200px; /* Para que no ocupe toda la pantalla */
|
||||
overflow-y: auto; /* Si es muy largo, sale scroll */
|
||||
border-radius: 4px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Contenedor de la pregunta */
|
||||
.pregunta {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 400px; /* Tamaño mínimo para que no salte el contenido */
|
||||
padding-bottom: 80px; /* Espacio para que los botones no tapen el texto */
|
||||
}
|
||||
|
||||
/* Contenedor de los botones */
|
||||
.acciones-quiz {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
right: 20px; /* Al darle left y right, el contenedor ocupa todo el ancho de la tarjeta */
|
||||
display: flex;
|
||||
justify-content: space-between; /* ¡ESTA ES LA MAGIA! Uno a cada punta */
|
||||
align-items: center;
|
||||
gap: 0; /* Ya no necesitamos gap fijo */
|
||||
}
|
||||
|
||||
/* Estilo de los botones (limpiamos el left/right manual que tenías) */
|
||||
.btn-principal {
|
||||
background-color: var(--titulos-color);
|
||||
color: white;
|
||||
padding: 12px 25px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-principal:hover {
|
||||
background-color: var(--hover-bg);
|
||||
}
|
||||
|
||||
.btn-secundario {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.btn-secundario:hover {
|
||||
background-color: var(--hover-bg);
|
||||
}
|
||||
|
||||
|
||||
/* --- AJUSTES PARA MÓVIL --- */
|
||||
@media (max-width: 600px) {
|
||||
body {
|
||||
|
|
@ -192,4 +245,15 @@ button#aleatoria {
|
|||
.nota-actual strong {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.acciones-quiz {
|
||||
width: calc(100% - 40px); /* Ocupa todo el ancho menos el padding */
|
||||
left: 20px;
|
||||
justify-content: space-between; /* Uno a cada lado */
|
||||
bottop: 10px; /* Para que no se quede pegado al fondo */
|
||||
}
|
||||
|
||||
.pregunta {
|
||||
min-height: 450px;
|
||||
}
|
||||
}
|
||||
|
|
@ -44,22 +44,42 @@ function mostrarSiguientePregunta() {
|
|||
const p = preguntasCargadas[estado.indiceActual];
|
||||
actualizarMarcador();
|
||||
|
||||
// Lógica para mostrar el supuesto si existe
|
||||
let htmlContexto = "";
|
||||
if (p.contexto) {
|
||||
htmlContexto = `
|
||||
<div class="supuesto-container" style="background: #2d2d2d; border-left: 5px solid var(--accent-color); padding: 15px; margin-bottom: 20px; font-size: 0.9rem; border-radius: 4px;">
|
||||
<h3 style="color: var(--accent-color); margin-top: 0;">📋 ${p.contexto.supuesto}</h3>
|
||||
<p><em>${p.contexto.descripcion}</em></p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
preguntaActualContenedor.innerHTML = `
|
||||
<div class="pregunta">
|
||||
${htmlContexto}
|
||||
<p><strong>Pregunta ${estado.indiceActual + 1} de ${preguntasCargadas.length}</strong></p>
|
||||
<p>${p.pregunta}</p>
|
||||
${Object.entries(p.opciones).map(([letra, texto]) => `
|
||||
<label class="opcion">
|
||||
<input type="radio" name="respuesta" value="${letra}">
|
||||
${letra}) ${texto}
|
||||
${letra}) ${texto.replace(/</g, "<").replace(/>/g, ">")}
|
||||
</label>
|
||||
`).join("")}
|
||||
<br>
|
||||
<button id="comprobar">Comprobar y Siguiente</button>
|
||||
<div class="acciones-quiz">
|
||||
<button id="comprobar" class="btn-principal">Comprobar</button>
|
||||
<button id="saltar" class="btn-secundario">Saltar Pregunta</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById("comprobar").onclick = () => validarRespuesta(p);
|
||||
document.getElementById("saltar").onclick = () => saltarPregunta();
|
||||
}
|
||||
function saltarPregunta() {
|
||||
estado.indiceActual++;
|
||||
mostrarSiguientePregunta();
|
||||
}
|
||||
|
||||
function validarRespuesta(p) {
|
||||
|
|
@ -84,28 +104,18 @@ function validarRespuesta(p) {
|
|||
}
|
||||
|
||||
function actualizarMarcador() {
|
||||
const contestadas = estado.indiceActual; // Preguntas que ya pasaron
|
||||
// Fórmula oficial TAI: (Aciertos - (Fallos / 3)) / TotalPreguntas * 10
|
||||
const puntosNetos = estado.aciertos - (estado.fallos / 3);
|
||||
let notaSobreDiez = (puntosNetos / preguntasCargadas.length) * 10;
|
||||
|
||||
// Si aún no hemos contestado ninguna, la nota es 0.00
|
||||
let notaSobreDiez = 0;
|
||||
|
||||
if (contestadas > 0) {
|
||||
// Fórmula de puntos netos (AGE): Aciertos - (Fallos / 3)
|
||||
const puntosNetos = estado.aciertos - (estado.fallos / 3);
|
||||
|
||||
// Calculamos la nota sobre 10 basada SOLO en las contestadas hasta ahora
|
||||
notaSobreDiez = (puntosNetos / contestadas) * 10;
|
||||
|
||||
// Evitamos notas negativas si hay muchísimos fallos
|
||||
if (notaSobreDiez < 0) notaSobreDiez = 0;
|
||||
}
|
||||
if (notaSobreDiez < 0) notaSobreDiez = 0;
|
||||
|
||||
resultado.innerHTML = `
|
||||
<div class="marcador-container">
|
||||
<div class="stat">Aciertos: <span class="verde">${estado.aciertos}</span></div>
|
||||
<div class="stat">Fallos: <span class="rojo">${estado.fallos}</span></div>
|
||||
<div class="stat">Progreso: <span>${contestadas} / ${preguntasCargadas.length}</span></div>
|
||||
<div class="nota-actual">Nota actual: <strong>${notaSobreDiez.toFixed(2)}</strong></div>
|
||||
<div class="stat">En blanco: <span>${estado.indiceActual - (estado.aciertos + estado.fallos)}</span></div>
|
||||
<div class="nota-actual">Nota proyectada: <strong>${notaSobreDiez.toFixed(2)}</strong></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue