diff --git a/404.html b/404.html index 83a5138..5fcfc4a 100644 --- a/404.html +++ b/404.html @@ -19,7 +19,7 @@ +
diff --git a/README.md b/README.md index 6a66758..fddcddf 100644 --- a/README.md +++ b/README.md @@ -19,8 +19,10 @@ Este proyecto es un quiz interactivo implementado con HTML, CSS y JavaScript pur ## Uso rápido 1. Clona el repositorio y abre `index.html` en un navegador web moderno. -2. El quiz cargará por defecto el archivo `questions.csv` incluido en el repositorio. -3. Utiliza los botones de la parte superior para: +2. Al iniciar se muestra una pantalla de inicio accesible también en `/home` con las colecciones disponibles. + Tanto en esta pantalla como en el selector de colecciones se muestra la materia asociada a cada una. +3. El quiz cargará por defecto el archivo `questions.csv` incluido en el repositorio. +4. Utiliza los botones de la parte superior para: - Guardar o cargar el progreso (archivo JSON). - Cargar un CSV diferente con tus propias preguntas. - Reiniciar el avance actual. @@ -32,7 +34,7 @@ Si se desea utilizar un CSV propio, consulta `doc/prompt.md` para conocer el for ## Estructura del repositorio -- `index.html` – vista principal del quiz. +- `index.html` – página principal que muestra el home y el quiz. - `script.js` – lógica de funcionamiento y manejo de estado. - `styles.css` – estilos de la interfaz. - `questions.csv` – ejemplo de preguntas en formato CSV. diff --git a/index.html b/index.html index 83a5138..5fcfc4a 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@ +
diff --git a/script.js b/script.js index ebf004b..157ce3e 100644 --- a/script.js +++ b/script.js @@ -38,6 +38,8 @@ let quizContainerDiv = null; // <-- NUEVO: Referencia al contenedor principal let timeProgressDiv = null; let timeBarDiv = null; let timeRemainingSpan = null; +let homeContainer = null; +let homeCarousel = null; let sidebar = null; let openSidebarButton = null; let closeSidebarButton = null; @@ -73,6 +75,46 @@ function updateUrlForCollection(id, replace = false) { } } +function isHomePath() { + const path = window.location.pathname.replace(/\/+$/, ''); + return path === '' || path === '/home'; +} + +function showHome() { + homeContainer?.classList.remove('hidden'); + quizContainerDiv?.classList.add('hidden'); + timeProgressDiv?.classList.add('hidden'); +} + +function showQuiz() { + homeContainer?.classList.add('hidden'); + quizContainerDiv?.classList.remove('hidden'); + timeProgressDiv?.classList.remove('hidden'); +} + +function populateHomeCarousel() { + if (!homeCarousel) return; + homeCarousel.innerHTML = ''; + availableCollections.forEach(col => { + const card = document.createElement('div'); + card.className = 'collection-card'; + card.innerHTML = ` + ${col.materia || ''} +

${col.nombre}

+

${col.descripcion || ''}

+ `; + card.addEventListener('click', () => { + showQuiz(); + updateUrlForCollection(col.id); + collectionSelect.value = col.id; + localStorage.setItem(COLLECTION_STORAGE_KEY, col.id); + loadQuestionsFromCollection(col.id); + updateCollectionTitleById(col.id); + }); + homeCarousel.appendChild(card); + }); +} + // --- Inicialización --- document.addEventListener('DOMContentLoaded', function() { @@ -85,6 +127,8 @@ document.addEventListener('DOMContentLoaded', function() { timeProgressDiv = document.getElementById('time-progress'); timeBarDiv = document.getElementById('time-bar'); timeRemainingSpan = document.getElementById('time-remaining'); + homeContainer = document.getElementById('home-container'); + homeCarousel = document.getElementById('home-carousel'); collectionSelect = document.getElementById('collection-select'); changeCollectionButton = document.getElementById('change-collection-button'); collectionModalOverlay = document.getElementById('collection-modal-overlay'); @@ -112,7 +156,7 @@ document.addEventListener('DOMContentLoaded', function() { !changeCollectionButton || !collectionModalOverlay || !collectionModal || !confirmCollectionButton || !configButton || !configModalOverlay || !configModal || !configRepsOnErrorInput || !configInitialRepsInput || !configThemeSelect || !saveConfigButton || !closeModalButton || !closeModalXButton || - !sidebar || !openSidebarButton || !closeSidebarButton || !collectionTitleSpan) { + !sidebar || !openSidebarButton || !closeSidebarButton || !collectionTitleSpan || !homeContainer || !homeCarousel) { console.error("Error: No se encontraron elementos esenciales del DOM (quiz, status, inputs, o elementos del modal)."); if(quizDiv) quizDiv.innerHTML = "

Error crítico: Faltan elementos HTML esenciales para el quiz o la configuración.

"; return; @@ -128,6 +172,13 @@ document.addEventListener('DOMContentLoaded', function() { window.addEventListener('beforeunload', saveState); document.addEventListener('visibilitychange', handleVisibilityChange); autosaveIntervalId = setInterval(saveState, 10000); + window.addEventListener('popstate', () => { + if (isHomePath()) { + showHome(); + } else { + showQuiz(); + } + }); }); function setupEventListeners() { @@ -207,7 +258,8 @@ async function loadCollections() { availableCollections.forEach(c => { const opt = document.createElement('option'); opt.value = c.id; - opt.textContent = c.nombre; + const name = c.materia ? `${c.materia} - ${c.nombre}` : c.nombre; + opt.textContent = name; collectionSelect.appendChild(opt); }); customOption = document.createElement('option'); @@ -216,6 +268,13 @@ async function loadCollections() { customOption.disabled = true; collectionSelect.appendChild(customOption); + populateHomeCarousel(); + + if (isHomePath()) { + showHome(); + return; + } + const saved = localStorage.getItem(COLLECTION_STORAGE_KEY); const pathId = getCollectionIdFromPath(); @@ -339,7 +398,12 @@ function updateCollectionTitleById(id) { collectionTitleSpan.textContent = 'Personalizado'; } else { const col = availableCollections.find(c => c.id === id); - collectionTitleSpan.textContent = col ? col.nombre : 'Colección'; + if (col) { + const title = col.materia ? `${col.materia} - ${col.nombre}` : col.nombre; + collectionTitleSpan.innerHTML = title; + } else { + collectionTitleSpan.textContent = 'Colección'; + } } } diff --git a/styles.css b/styles.css index 6db5ddd..459ff34 100644 --- a/styles.css +++ b/styles.css @@ -38,6 +38,7 @@ --status-error-bg: #f8d7da; --status-error-color: #721c24; --status-error-border: #f5c6cb; + --subject-color: #d63384; --modal-bg: #fff; } @@ -81,6 +82,7 @@ body.dark-mode { --partial-selection-color: #fff2b3; --partial-selection-border: #b1922c; --modal-bg: #2a2a2a; + --subject-color: #e670a5; } html { @@ -765,3 +767,41 @@ body.sidebar-open #open-sidebar { border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } + +/* --- Estilos para la pantalla de inicio --- */ +.home-container { + width: 90%; + max-width: 1000px; + margin: 2rem auto; + text-align: center; +} + +.home-carousel { + display: flex; + overflow-x: auto; + gap: 1rem; + padding: 1rem 0; +} + +.collection-card { + flex: 0 0 auto; + background-color: var(--container-bg); + border-radius: 8px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + padding: 1rem; + width: 220px; + cursor: pointer; + border: 2px solid transparent; + transition: border-color 0.3s ease; +} + +.collection-card:hover { + border-color: var(--option-selected-border); +} + +.collection-subject { + font-weight: bold; + color: var(--subject-color); + display: block; + margin-bottom: 0.5rem; +}