diff --git a/404.html b/404.html index 83a5138..d7cc2e2 100644 --- a/404.html +++ b/404.html @@ -13,13 +13,13 @@
- Colección + Colección
+
diff --git a/README.md b/README.md index 6a66758..56f9bba 100644 --- a/README.md +++ b/README.md @@ -15,12 +15,14 @@ Este proyecto es un quiz interactivo implementado con HTML, CSS y JavaScript pur - **Modo claro u oscuro** seleccionable desde la configuración. - **Texto de botones negro** para asegurar contraste en ambos temas. - **Banner de error en preguntas múltiples** que resalta aciertos parciales en amarillo. +- **Las colecciones muestran también su materia** tanto en el encabezado como en la lista de selección. ## 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. +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..d7cc2e2 100644 --- a/index.html +++ b/index.html @@ -13,13 +13,13 @@
- Colección + Colección
+
diff --git a/script.js b/script.js index ebf004b..5b750bf 100644 --- a/script.js +++ b/script.js @@ -38,10 +38,14 @@ 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; let collectionTitleSpan = null; +let collectionSubjectSpan = null; +let collectionNameSpan = null; let initialTotalRepetitions = 0; let questionStartTime = null; @@ -73,6 +77,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 +129,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'); @@ -95,6 +141,8 @@ document.addEventListener('DOMContentLoaded', function() { openSidebarButton = document.getElementById('open-sidebar'); closeSidebarButton = document.getElementById('close-sidebar'); collectionTitleSpan = document.getElementById('collection-title'); + collectionSubjectSpan = document.getElementById('collection-subject'); + collectionNameSpan = document.getElementById('collection-name'); // Referencias para el modal de configuración configButton = document.getElementById('config-button'); @@ -112,7 +160,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 || !collectionSubjectSpan || !collectionNameSpan || !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 +176,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 +262,7 @@ async function loadCollections() { availableCollections.forEach(c => { const opt = document.createElement('option'); opt.value = c.id; - opt.textContent = c.nombre; + opt.textContent = c.materia ? `${c.materia} | ${c.nombre}` : c.nombre; collectionSelect.appendChild(opt); }); customOption = document.createElement('option'); @@ -216,6 +271,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(); @@ -334,12 +396,19 @@ function handleDocumentClick(event) { } function updateCollectionTitleById(id) { - if (!collectionTitleSpan) return; + if (!collectionSubjectSpan || !collectionNameSpan) return; if (id === 'custom') { - collectionTitleSpan.textContent = 'Personalizado'; + collectionSubjectSpan.textContent = ''; + collectionNameSpan.textContent = 'Personalizado'; } else { const col = availableCollections.find(c => c.id === id); - collectionTitleSpan.textContent = col ? col.nombre : 'Colección'; + if (col) { + collectionSubjectSpan.textContent = col.materia ? col.materia : ''; + collectionNameSpan.textContent = col.nombre; + } else { + collectionSubjectSpan.textContent = ''; + collectionNameSpan.textContent = 'Colección'; + } } } diff --git a/styles.css b/styles.css index 6db5ddd..16b39da 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,47 @@ 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; +} + +.collection-subject-header { + font-weight: bold; + color: var(--subject-color); + margin-right: 0.25rem; +}