{"id":116,"date":"2025-10-21T01:40:13","date_gmt":"2025-10-21T01:40:13","guid":{"rendered":"https:\/\/avat.uprrp.edu\/cocreacion\/?p=116"},"modified":"2025-11-09T00:18:35","modified_gmt":"2025-11-09T00:18:35","slug":"plantilla-asignacion-cifi-3074","status":"publish","type":"post","link":"https:\/\/avat.uprrp.edu\/cocreacion\/2025\/10\/21\/plantilla-asignacion-cifi-3074\/","title":{"rendered":"Plantilla Asignacion CIFI 3074"},"content":{"rendered":"<p># Retry writing the HTML file for the introductory version<br \/>\nhtml = r&#8221;&#8221;&#8221;<\/p>\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-8\" class=\"h5p-iframe\" data-content-id=\"8\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"El Museo de los Colores\"><\/iframe><\/div>\n<style>\n  :root{<br \/>\n    --bg:#0b1220; --panel:#0f1b2d; --panel2:#12243a; --ink:#e6eef7; --muted:#9fb3c8;<br \/>\n    --accent:#22c55e; --accent2:#38bdf8; --warn:#f59e0b; --error:#ef4444; --ok:#22c55e;<br \/>\n  }<br \/>\n  html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55}<br \/>\n  header{padding:1.25rem 1rem;background:linear-gradient(90deg,#38bdf8,#22c55e);color:#07121e}<br \/>\n  header h1{margin:.25rem 0;font-size:1.6rem}<br \/>\n  header p{margin:0;opacity:.9}<br \/>\n  nav{display:flex;gap:.5rem;flex-wrap:wrap;padding:.6rem 1rem;background:#081627;border-bottom:1px solid #0a1b2e}<br \/>\n  nav a{color:#bfeaff;text-decoration:none;background:#0a1728;border:1px solid #0e2540;padding:.35rem .6rem;border-radius:.5rem;font-size:.9rem}<br \/>\n  main{max-width:980px;margin:0 auto;padding:1rem}<br \/>\n  section{background:var(--panel);border:1px solid #0a1b2e;border-radius:1rem;padding:1rem;margin:1rem 0;box-shadow:0 10px 30px rgba(0,0,0,.35)}<br \/>\n  h2{margin-top:0;font-size:1.25rem}<br \/>\n  h3{font-size:1.05rem;color:#a0e7ff}<br \/>\n  .meta{font-size:.95rem;color:var(--muted)}<br \/>\n  .box{background:var(--panel2);border:1px solid #13314f;border-radius:.75rem;padding:.8rem;margin:.75rem 0}<br \/>\n  .grid{display:grid;gap:1rem}<br \/>\n  @media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}<br \/>\n  .btn{background:var(--accent);color:#041018;border:none;border-radius:.55rem;padding:.55rem .9rem;font-weight:700;cursor:pointer}<br \/>\n  .btn.alt{background:var(--accent2);color:#06111a}<br \/>\n  .btn.ghost{background:transparent;border:1px solid #20405f;color:var(--ink)}<br \/>\n  .pill{display:inline-block;background:#0b1a2a;border:1px solid #183451;color:#c8d7e6;padding:.2rem .55rem;border-radius:999px;font-size:.85rem;margin:.15rem}<br \/>\n  .hotspots{position:relative;max-width:100%;border:1px solid #173757;border-radius:.6rem;overflow:hidden}<br \/>\n  .hotspots img{max-width:100%;display:block;opacity:.95}<br \/>\n  .hotspot{position:absolute;transform:translate(-50%,-50%);background:#38bdf8;color:#001423;border-radius:999px;padding:.35rem .5rem;font-size:.8rem;font-weight:800;cursor:pointer}<br \/>\n  .card{background:#0b1a2a;border:1px solid #183451;border-radius:.6rem;padding:.7rem}<br \/>\n  .quiz .opt{display:flex;gap:.5rem;align-items:center;background:#0b1a2a;border:1px solid #183451;border-radius:.55rem;padding:.45rem .6rem;margin:.35rem 0}<br \/>\n  .score{font-weight:800}<br \/>\n  .success{color:var(--ok)} .error{color:#ffb4a8}<br \/>\n  .target{min-height:48px;border:2px dashed #264a6e;border-radius:.6rem;padding:.4rem;margin:.25rem 0}<br \/>\n  .chip{display:inline-flex;align-items:center;gap:.4rem;background:#173b59;padding:.25rem .55rem;border-radius:999px;color:#d3e8ff;font-weight:700;margin:.2rem;cursor:grab;user-select:none}<br \/>\n  .row{display:flex;gap:.5rem;flex-wrap:wrap}<br \/>\n  textarea,input[type=\"text\"]{width:100%;background:#0b1a2a;border:1px solid #183451;border-radius:.55rem;color:var(--ink);padding:.6rem}<br \/>\n  .rubrica{width:100%;border-collapse:collapse;font-size:.95rem}<br \/>\n  .rubrica th,.rubrica td{border:1px solid #183451;padding:.5rem;text-align:left}<br \/>\n  .rubrica th{background:#0a1728}<br \/>\n  details{background:#0b1a2a;border:1px solid #183451;border-radius:.55rem;padding:.6rem}<br \/>\n  summary{cursor:pointer}<br \/>\n  footer{padding:2rem 1rem;color:var(--muted);text-align:center}<br \/>\n<\/style>\n<header>\n<h1>Museo de los Colores \u00b7 Versi\u00f3n Introductoria<\/h1>\n<p>Actividad para estudiantes de CIFI3074. Enfocada en habilidades de investigaci\u00f3n: observar, indagar, comparar y comunicar.<\/p>\n<\/header>\n<nav><a href=\"#bienvenida\">Inicio<\/a><br \/>\n<a href=\"#sala1\">Sala 1<\/a><br \/>\n<a href=\"#sala2\">Sala 2<\/a><br \/>\n<a href=\"#sala3\">Sala 3<\/a><br \/>\n<a href=\"#sala4\">Sala 4<\/a><br \/>\n<a href=\"#sala5\">Sala 5<\/a><br \/>\n<a href=\"#bitacora\">Bit\u00e1cora<\/a><br \/>\n<a href=\"#rubrica\">R\u00fabrica<\/a><\/nav>\n<section id=\"bienvenida\">\n<h2>\ud83d\udc4b <strong>Bienvenida y reglas de juego<\/strong><\/h2>\n<div class=\"box\">\n<p><strong>Meta:<\/strong> No buscamos memorizar f\u00f3rmulas. Queremos practicar <em>c\u00f3mo investigar<\/em>: mirar con atenci\u00f3n, hacer preguntas, buscar pistas y explicar con tus palabras.<\/p>\n<p><strong>Din\u00e1mica:<\/strong> Pueden trabajar en equipo (3\u20134 personas). Completen las salas en orden. En cada sala debes crear los materiales necesarios para que se pueda:<\/p>\n<ol>\n<li><strong>Observa<\/strong> la pieza (imagen, receta, historia).<\/li>\n<li><strong>Actuar<\/strong> (clics\/arrastres\/decisiones).<\/li>\n<li><strong>Anotar<\/strong> lo m\u00e1s importante en una <em>Bit\u00e1cora o libreta de investigaci\u00f3n<\/em>.<\/li>\n<\/ol>\n<p class=\"meta\">Consejo: si te atoras, formula una pregunta concreta (\u201c\u00bfQu\u00e9 hace el natr\u00f3n?\u201d) y busca la pista en la misma sala.<\/p>\n<\/div>\n<\/section>\n<p><!-- SALA 1 --><\/p>\n<section id=\"sala1\">\n<h2>\ud83e\udea8 Sala 1 \u00b7 La cueva y el fuego<\/h2>\n<p class=\"meta\">Objetivo de habilidad: <strong>observar<\/strong> y <strong>describir<\/strong> qu\u00e9 cambia cuando un material se calienta.<\/p>\n<div class=\"grid grid-2\">\n<div class=\"box\">\n<h3>1) Hotspots: \u00bfQu\u00e9 hace cada elemento?<\/h3>\n<div class=\"hotspots\"><img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/d\/d6\/Lascaux_painting.jpg\/640px-Lascaux_painting.jpg\" alt=\"Pintura rupestre (imagen de ejemplo)\" \/><br \/>\n<button class=\"hotspot\" style=\"left: 25%; top: 40%;\" data-info=\"Hematita: polvo rojizo para tonos rojos.\">Hematita<\/button><br \/>\n<button class=\"hotspot\" style=\"left: 62%; top: 30%;\" data-info=\"Carb\u00f3n: contorno\/negro; producto de combusti\u00f3n.\">Carb\u00f3n<\/button><br \/>\n<button class=\"hotspot\" style=\"left: 40%; top: 70%;\" data-info=\"Grasa\/aceite: act\u00faa como pegamento (ligante).\">Ligante<\/button><br \/>\n<button class=\"hotspot\" style=\"left: 78%; top: 62%;\" data-info=\"Fuego: transforma algunos minerales y cambia el color.\">Fuego<\/button><\/div>\n<\/div>\n<div class=\"box\">\n<h3>2) Pregunta clave (selecci\u00f3n \u00fanica) Puedes a\u00f1adir alternativas adicionales, o crear tus propias preguntas<\/h3>\n<div id=\"quiz1\" class=\"quiz\">\n<div class=\"opt\"><input id=\"q1a\" name=\"q1\" type=\"radio\" value=\"no\" \/><label for=\"q1a\">El fuego no cambia nada; solo ilumina.<\/label><\/div>\n<div class=\"opt\"><input id=\"q1b\" name=\"q1\" type=\"radio\" value=\"ok\" \/><label for=\"q1b\">El calor puede cambiar el color de un mineral y su textura.<\/label><\/div>\n<div class=\"opt\"><input id=\"q1c\" name=\"q1\" type=\"radio\" value=\"no\" \/><label for=\"q1c\">El color depende solo del artista, no de los materiales.<\/label><\/div>\n<p><button class=\"btn\">Comprobar<\/button><\/p>\n<div id=\"score1\" class=\"score\">\u2014<\/div>\n<\/div>\n<\/div>\n<\/div>\n<details class=\"box\">\n<summary>\ud83d\udca1 Pista r\u00e1pida<\/summary>\n<p>El calentamiento puede oscurecer o enrojecer minerales y hacer que se adhieran mejor a la pared.<\/p>\n<\/details>\n<\/section>\n<p><!-- SALA 2 --><\/p>\n<section id=\"sala2\">\n<h2>\ud83c\udffa Sala 2 \u00b7 Egipto: receta sencilla del azul<\/h2>\n<p class=\"meta\">Objetivo de habilidad: <strong>ordenar pasos<\/strong> y <strong>explicar en lenguaje claro<\/strong>.<\/p>\n<div class=\"grid grid-2\">\n<div class=\"box\">\n<h3>1) Crear Actividad de Arrastrar en orden (4 pasos)<\/h3>\n<p>Arrastra cada tarjeta al recuadro de \u201cPaso 1 \u2192 Paso 4\u201d.<\/p>\n<div id=\"chips-orden\" class=\"row\">\n<div class=\"chip\" draggable=\"true\" data-step=\"1\">Mezclar arena (s\u00edlice) + cobre + caliza + natr\u00f3n<\/div>\n<div class=\"chip\" draggable=\"true\" data-step=\"2\">Colocar en horno caliente (\u2248900\u20131000\u00b0C)<\/div>\n<div class=\"chip\" draggable=\"true\" data-step=\"3\">Dejar que se forme masa azul (con cristales)<\/div>\n<div class=\"chip\" draggable=\"true\" data-step=\"4\">Moler suave y aplicar en capa delgada<\/div>\n<\/div>\n<div class=\"target\" data-step=\"1\">Paso 1<\/div>\n<div class=\"target\" data-step=\"2\">Paso 2<\/div>\n<div class=\"target\" data-step=\"3\">Paso 3<\/div>\n<div class=\"target\" data-step=\"4\">Paso 4<\/div>\n<div class=\"row\" style=\"margin-top: .5rem;\"><button class=\"btn alt\">Revisar<\/button><br \/>\n<button class=\"btn ghost\">Reiniciar<\/button><br \/>\n<span id=\"order-msg\" class=\"score\">\u2014<\/span><\/div>\n<\/div>\n<div class=\"box\">\n<h3>2) Explicar con tus palabras<\/h3>\n<p>Activiedad que permita En 2\u20133 frases, explicar c\u00f3mo los egipcios lograban el color azul.<\/p>\n<\/div>\n<\/div>\n<details class=\"box\">\n<summary>\ud83d\udca1 Pista r\u00e1pida<\/summary>\n<p>No es magia: mezclar materiales + calor controlado = pigmento azul estable.<\/p>\n<\/details>\n<\/section>\n<p><!-- SALA 3 --><\/p>\n<section id=\"sala3\">\n<h2>\ud83c\udf3f Sala 3 \u00b7 Naturaleza que ti\u00f1e<\/h2>\n<p class=\"meta\">Objetivo de habilidad: <strong>emparejar<\/strong> y <strong>comparar<\/strong> origen\u2013color.<\/p>\n<div class=\"grid grid-2\">\n<div class=\"box\">\n<h3>1) Empareja origen \u2194 color<\/h3>\n<div id=\"chips-pares\" class=\"row\">\n<div class=\"chip\" draggable=\"true\" data-pair=\"azul\">\u00cdndigo (planta)<\/div>\n<div class=\"chip\" draggable=\"true\" data-pair=\"rojo\">Cochinilla (insecto)<\/div>\n<div class=\"chip\" draggable=\"true\" data-pair=\"rojo\">Granza (ra\u00edz)<\/div>\n<\/div>\n<div class=\"grid grid-2\">\n<div class=\"card\"><strong>Rojo<\/strong><\/p>\n<div class=\"target\" data-pair=\"rojo\"><\/div>\n<\/div>\n<div class=\"card\"><strong>Azul<\/strong><\/p>\n<div class=\"target\" data-pair=\"azul\"><\/div>\n<\/div>\n<\/div>\n<div class=\"row\" style=\"margin-top: .5rem;\"><button class=\"btn alt\">Revisar<\/button><br \/>\n<button class=\"btn ghost\">Reiniciar<\/button><br \/>\n<span id=\"pair-msg\" class=\"score\">\u2014<\/span><\/div>\n<\/div>\n<div class=\"box\">\n<h3>2) Mini reflexi\u00f3n<\/h3>\n<p>\u00bfQu\u00e9 ventajas ves en usar colores de plantas\/insectos frente a comprarlos en una tienda?<\/p>\n<\/div>\n<\/div>\n<\/section>\n<p><!-- SALA 4 --><\/p>\n<section id=\"sala4\">\n<h2>\u2697\ufe0f Sala 4 \u00b7 Un error que cambi\u00f3 la historia<\/h2>\n<p class=\"meta\">Objetivo de habilidad: <strong>comprender causa\u2013efecto<\/strong> y <strong>tomar decisiones simples<\/strong>.<\/p>\n<div class=\"grid grid-2\">\n<div class=\"box\">\n<h3>1) Mini-ramificaci\u00f3n<\/h3>\n<p>Perkin quer\u00eda hacer un medicamento (quinina), pero obtuvo un tinte violeta. Elige:<\/p>\n<div class=\"row\"><button class=\"btn ghost\">Sigo buscando la medicina<\/button><br \/>\n<button class=\"btn ghost\">Pruebo el color en tela<\/button><\/div>\n<div id=\"branch-out\" class=\"card\" style=\"margin-top: .6rem;\">Tu decisi\u00f3n mostrar\u00e1 un resultado aqu\u00ed\u2026<\/div>\n<\/div>\n<div class=\"box\">\n<h3>2) Pregunta r\u00e1pida<\/h3>\n<div id=\"quiz4\" class=\"quiz\">\n<div class=\"opt\"><input id=\"q4a\" name=\"q4\" type=\"radio\" value=\"ok\" \/><label for=\"q4a\">Un \u201cerror\u201d puede llevar a un descubrimiento \u00fatil.<\/label><\/div>\n<div class=\"opt\"><input id=\"q4b\" name=\"q4\" type=\"radio\" value=\"no\" \/><label for=\"q4b\">Si algo sale mal, siempre se bota.<\/label><\/div>\n<p><button class=\"btn\">Comprobar<\/button><\/p>\n<div id=\"score4\" class=\"score\">\u2014<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<p><!-- SALA 5 --><\/p>\n<section id=\"sala5\">\n<h2>\ud83e\uddec Sala 5 \u00b7 Color hoy y ma\u00f1ana<\/h2>\n<p class=\"meta\">Objetivo de habilidad: <strong>expresar opini\u00f3n<\/strong> y <strong>sintetizar<\/strong> en pocas palabras.<\/p>\n<div class=\"box\">\n<h3>1) Opini\u00f3n en una frase<\/h3>\n<p>\u00bfQu\u00e9 te parece m\u00e1s importante: colores muy brillantes o cuidar el ambiente? Explica en 1\u20132 frases.<\/p>\n<\/div>\n<div class=\"box\">\n<h3>2) L\u00ednea de tiempo m\u00ednima (rellena)<\/h3>\n<p>Escribe una palabra en cada casilla (Paleol\u00edtico \u2192 Egipto \u2192 Naturales \u2192 Sint\u00e9ticos \u2192 Hoy).<\/p>\n<div class=\"grid grid-2\"><input type=\"text\" placeholder=\"Paleol\u00edtico: ____\" aria-label=\"Paleol\u00edtico\" \/><br \/>\n<input type=\"text\" placeholder=\"Egipto: ____\" aria-label=\"Egipto\" \/><br \/>\n<input type=\"text\" placeholder=\"Naturales: ____\" aria-label=\"Naturales\" \/><br \/>\n<input type=\"text\" placeholder=\"Sint\u00e9ticos: ____\" aria-label=\"Sint\u00e9ticos\" \/><br \/>\n<input type=\"text\" placeholder=\"Hoy: ____\" aria-label=\"Hoy\" \/><\/div>\n<\/div>\n<\/section>\n<p><!-- BIT\u00c1CORA --><\/p>\n<section id=\"bitacora\">\n<h2>\ud83d\udcd2 Bit\u00e1cora de investigaci\u00f3n (entregable)<\/h2>\n<div class=\"box\">\n<ol>\n<li><strong>Pregunta inicial:<\/strong> \u00bfQu\u00e9 quieres averiguar sobre el color?<\/li>\n<li><strong>Pistas encontradas:<\/strong> escribe 3 pistas por sala.<\/li>\n<li><strong>Conclusi\u00f3n breve:<\/strong> escribe 2\u20133 frases que conecten tu idea inicial con lo aprendido.<\/li>\n<li><strong>Fuentes usadas:<\/strong> anota t\u00edtulos\/im\u00e1genes que consultaste en las salas.<\/li>\n<\/ol>\n<p class=\"meta\">Formato libre: texto, audio corto o foto de tus notas.<\/p>\n<\/div>\n<\/section>\n<p><!-- R\u00daBRICA --><\/p>\n<section id=\"rubrica\">\n<h2>\ud83d\udccf R\u00fabrica simple (formativa)<\/h2>\n<table class=\"rubrica\" role=\"table\">\n<thead>\n<tr>\n<th>Criterio<\/th>\n<th>Excelente<\/th>\n<th>Adecuado<\/th>\n<th>En proceso<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Observaci\u00f3n<\/td>\n<td>Identifica materiales y cambios con ejemplos.<\/td>\n<td>Identifica al menos 2 elementos.<\/td>\n<td>Descripci\u00f3n vaga o incompleta.<\/td>\n<\/tr>\n<tr>\n<td>Indagaci\u00f3n<\/td>\n<td>Formula 2\u20133 preguntas \u00fatiles por sala.<\/td>\n<td>Formula al menos 1 pregunta.<\/td>\n<td>No formula preguntas.<\/td>\n<\/tr>\n<tr>\n<td>Comparaci\u00f3n<\/td>\n<td>Explica una diferencia clave (p. ej., natural vs sint\u00e9tico).<\/td>\n<td>Menciona una diferencia.<\/td>\n<td>No compara.<\/td>\n<\/tr>\n<tr>\n<td>Comunicaci\u00f3n<\/td>\n<td>Explica con sus palabras de forma clara.<\/td>\n<td>Explica con ayuda de pistas.<\/td>\n<td>Copias literales o ideas confusas.<\/td>\n<\/tr>\n<tr>\n<td>Participaci\u00f3n<\/td>\n<td>Contribuye y escucha a su equipo.<\/td>\n<td>Participa de forma b\u00e1sica.<\/td>\n<td>Participaci\u00f3n m\u00ednima.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/section>\n<footer>Museo de los Colores \u00b7 Versi\u00f3n Introductoria \u2014 Plantilla HTML lista para portar a H5P (Image Hotspots, Drag &amp; Drop, Branching, Quiz).<\/footer>\n<p><script><br \/>\n\/\/ Hotspots: mostrar info<br \/>\ndocument.querySelectorAll('.hotspot').forEach(btn => {<br \/>\n  btn.addEventListener('click', () => alert(btn.dataset.info));<br \/>\n});<\/p>\n<p>\/\/ Quiz sencillo<br \/>\nfunction grade(containerId, outId){<br \/>\n  const c = document.getElementById(containerId);<br \/>\n  const out = document.getElementById(outId);<br \/>\n  const ok = c.querySelector('input[type=\"radio\"][value=\"ok\"]:checked');<br \/>\n  out.textContent = ok ? \"\u2705 Bien visto\" : \"\u274c Intenta de nuevo\";<br \/>\n  out.className = \"score \" + (ok ? \"success\" : \"error\");<br \/>\n}<\/p>\n<p>\/\/ Drag & Drop (orden)<br \/>\nlet dragSrc=null;<br \/>\ndocument.addEventListener('dragstart', e=>{<br \/>\n  const t = e.target;<br \/>\n  if(t.classList.contains('chip')){<br \/>\n    dragSrc = t; t.style.opacity=.6;<br \/>\n    e.dataTransfer.setData('text\/plain', t.textContent.trim());<br \/>\n  }<br \/>\n});<br \/>\ndocument.addEventListener('dragend', e=>{ if(e.target.classList.contains('chip')) e.target.style.opacity=1; });<br \/>\ndocument.addEventListener('dragover', e=>{ if(e.target.classList.contains('target')) e.preventDefault(); });<br \/>\ndocument.addEventListener('drop', e=>{<br \/>\n  const targ=e.target;<br \/>\n  if(targ.classList.contains('target') && dragSrc){ e.preventDefault(); targ.appendChild(dragSrc); }<br \/>\n});<\/p>\n<p>function checkOrder(){<br \/>\n  const targets = document.querySelectorAll('.target[data-step]');<br \/>\n  let ok=0, total=targets.length;<br \/>\n  targets.forEach(t=>{<br \/>\n    const chip = t.querySelector('.chip');<br \/>\n    if(chip && chip.dataset.step === t.dataset.step) ok++;<br \/>\n  });<br \/>\n  const msg = document.getElementById('order-msg');<br \/>\n  msg.textContent = ok===total ? \"\u2705 Orden correcto\" : \"\u26a0\ufe0f \"+ok+\"\/\"+total+\" en orden\";<br \/>\n  msg.className = \"score \" + (ok===total ? \"success\" : \"error\");<br \/>\n}<br \/>\nfunction resetOrder(){<br \/>\n  const pool = document.getElementById('chips-orden');<br \/>\n  document.querySelectorAll('.target[data-step] .chip').forEach(ch => pool.appendChild(ch));<br \/>\n  const msg = document.getElementById('order-msg'); msg.textContent=\"\u2014\"; msg.className=\"score\";<br \/>\n}<\/p>\n<p>\/\/ Drag & Drop (pares)<br \/>\nfunction checkPairs(){<br \/>\n  const zones = document.querySelectorAll('.target[data-pair]');<br \/>\n  let ok=0, total=zones.length;<br \/>\n  zones.forEach(z=>{<br \/>\n    const chip=z.querySelector('.chip');<br \/>\n    if(chip && chip.dataset.pair === z.dataset.pair) ok++;<br \/>\n  });<br \/>\n  const msg = document.getElementById('pair-msg');<br \/>\n  msg.textContent = ok===total ? \"\u2705 \u00a1Bien!\" : \"\u26a0\ufe0f \"+ok+\"\/\"+total+\" correctos\";<br \/>\n  msg.className = \"score \" + (ok===total ? \"success\" : \"error\");<br \/>\n}<br \/>\nfunction resetPairs(){<br \/>\n  const pool = document.getElementById('chips-pares');<br \/>\n  document.querySelectorAll('.target[data-pair] .chip').forEach(ch => pool.appendChild(ch));<br \/>\n  const msg = document.getElementById('pair-msg'); msg.textContent=\"\u2014\"; msg.className=\"score\";<br \/>\n}<\/p>\n<p>\/\/ Mini branching<br \/>\nfunction branch(choice){<br \/>\n  const out = document.getElementById('branch-out');<br \/>\n  if(choice==='probar-tela'){<br \/>\n    out.innerHTML = \"\ud83e\uddea Pruebas la sustancia en tela \u2192 \u00a1Funciona! Nace un <strong>tinte violeta<\/strong> muy popular. Concluyes: un error puede convertirse en oportunidad.\";<br \/>\n  }else{<br \/>\n    out.innerHTML = \"\ud83d\udd0e Sigues buscando la medicina. Tardas m\u00e1s, pero aprendes: una idea clara gu\u00eda tu investigaci\u00f3n. <em>Conclusi\u00f3n:<\/em> las decisiones afectan el camino, no solo el resultado.\";<br \/>\n  }<br \/>\n}<br \/>\n<\/script><\/p>\n<p>&#8220;&#8221;&#8221;<br \/>\npath = &#8220;\/mnt\/data\/museo-colores-intro.html&#8221;<br \/>\nwith open(path, &#8220;w&#8221;, encoding=&#8221;utf-8&#8243;) as f:<br \/>\nf.write(html)<br \/>\npath<\/p>\n","protected":false},"excerpt":{"rendered":"<p># Retry writing the HTML file for the introductory version html = r&#8221;&#8221;&#8221; Museo de los Colores \u00b7 Versi\u00f3n Introductoria [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":150,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/posts\/116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":4,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/posts\/116\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/posts\/116\/revisions\/123"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/media\/150"}],"wp:attachment":[{"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/media?parent=116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/categories?post=116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avat.uprrp.edu\/cocreacion\/wp-json\/wp\/v2\/tags?post=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}