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 `
-