diff --git a/assets/static/euskaditech-css/simple.css b/assets/static/euskaditech-css/simple.css index 39495ad..b2b6226 100644 --- a/assets/static/euskaditech-css/simple.css +++ b/assets/static/euskaditech-css/simple.css @@ -430,7 +430,7 @@ pre { font-size: 15px; } .picto { - height: 125px; + min-height: 125px; width: 100px; border: 2.5px solid black; border-radius: 5px; @@ -443,4 +443,12 @@ pre { .picto b { padding-top: 40px; display: inline-block; +} + +.panel-option input { + display: none; +} +.panel-option:has(input:checked) { + background-color: #ccc; + outline: 5px solid blue; } \ No newline at end of file diff --git a/src/app_modules.js b/src/app_modules.js index 07323e8..a91fc82 100644 --- a/src/app_modules.js +++ b/src/app_modules.js @@ -225,6 +225,12 @@ function TS_renderPictoPreview(previewEl, value) { target.appendChild(text); } } +function makePictoStatic(picto) { + var element = document.createElement('div'); + element.className = 'picto'; + TS_renderPictoPreview(element, picto); + return element.outerHTML; +} function TS_applyPictoValue(pictoEl, value) { if (typeof pictoEl === 'string') { diff --git a/src/page/index.js b/src/page/index.js index e297024..90ee77f 100644 --- a/src/page/index.js +++ b/src/page/index.js @@ -12,7 +12,6 @@ PAGES.index = { Utiliza el menú superior para abrir un modulo

-

`; }, diff --git a/src/page/panel.js b/src/page/panel.js index ff643d2..e71a417 100644 --- a/src/page/panel.js +++ b/src/page/panel.js @@ -115,14 +115,42 @@ PAGES.panel = { fecha: CurrentISODate(), comedor: { primero: (comedor.Primero || '').trim(), + primeroPicto: comedor.Primero_Picto || '', segundo: (comedor.Segundo || '').trim(), + segundoPicto: comedor.Segundo_Picto || '', postre: (comedor.Postre || '').trim(), + postrePicto: comedor.Postre_Picto || '', tipo: (comedor.Tipo || '').trim(), }, planHoy: planHoy, }; }, + __hasPictoData: function (picto) { + return !!( + picto && + typeof picto === 'object' && + ((picto.text || '').trim() !== '' || (picto.arasaacId || '').trim() !== '') + ); + }, + + __getOptionPicto: function (question, option) { + if (!question || !question.optionPictos) return ''; + return question.optionPictos[String(option || '').trim()] || ''; + }, + + __renderOptionContent: function (question, option) { + var picto = PAGES.panel.__getOptionPicto(question, option); + var withPicto = typeof makePictoStatic === 'function' && PAGES.panel.__hasPictoData(picto); + if (!withPicto) return `${option}`; + return ` + + ${makePictoStatic(picto)} + ${option} + + `; + }, + __pickDistractors: function (correct, pool, count) { var options = []; var seen = {}; @@ -161,6 +189,10 @@ PAGES.panel = { __buildQuestions: function (ctx) { var c = ctx.comedor || {}; var poolComedor = [c.primero, c.segundo, c.postre, 'No hay menú registrado']; + var comedorPictosByText = {}; + if (c.primero) comedorPictosByText[c.primero] = c.primeroPicto || ''; + if (c.segundo) comedorPictosByText[c.segundo] = c.segundoPicto || ''; + if (c.postre) comedorPictosByText[c.postre] = c.postrePicto || ''; var questions = []; if (c.primero) { @@ -169,6 +201,7 @@ PAGES.panel = { id: 'q-comida-primero', text: '¿Qué hay de comer hoy de primero?', options: PAGES.panel.__shuffle(opts1), + optionPictos: comedorPictosByText, correct: c.primero, ok: '¡Correcto! Ya sabes el primer plato de hoy.', bad: 'Repasa el menú del día para anticipar la comida.', @@ -181,6 +214,7 @@ PAGES.panel = { id: 'q-comida-segundo', text: '¿Y de segundo, qué toca?', options: PAGES.panel.__shuffle(opts2), + optionPictos: comedorPictosByText, correct: c.segundo, ok: '¡Bien! Segundo identificado.', bad: 'Casi. Mira el módulo Comedor para recordar el segundo plato.', @@ -193,6 +227,7 @@ PAGES.panel = { id: 'q-comida-postre', text: '¿Cuál es el postre de hoy?', options: PAGES.panel.__shuffle(opts3), + optionPictos: comedorPictosByText, correct: c.postre, ok: '¡Perfecto! Postre acertado.', bad: 'No pasa nada, revisa el postre en el menú diario.', @@ -264,10 +299,11 @@ PAGES.panel = { .map((option, i) => { var oid = safeuuid(); var checked = selected === option ? 'checked' : ''; + var optionContent = PAGES.panel.__renderOptionContent(q, option); return ` -