Skip to content

Instantly share code, notes, and snippets.

@gmoqa

gmoqa/presentation.html

Created April 10, 2026 19:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gmoqa/f88368aa6a1ac90a16b77a4599a4564e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gmoqa/f88368aa6a1ac90a16b77a4599a4564e to your computer and use it in GitHub Desktop.
Download ZIP
MentorIA - Objetos Web Interactivos
Raw
presentation.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MentorIA - Objetos Web Interactivos</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,sans-serif;color:#2d3436;background:#fff;line-height:1.7;font-size:15px}
.page{max-width:100%;margin:0 auto;padding:3rem 3rem}
h1{font-size:1.8rem;font-weight:300;margin-bottom:.3rem}
h1 strong{font-weight:700}
h2{font-size:1.4rem;margin-top:3rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #eee}
h3{font-size:1.1rem;margin-top:1.5rem;margin-bottom:.5rem;color:#0f3460}
p{margin-bottom:.8rem}
.subtitle{color:#636e72;font-size:.95rem;margin-bottom:2rem}
/* Categories */
.cat-header{display:flex;align-items:center;gap:.8rem;margin-top:3rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #eee}
.cat-header h2{margin:0;padding:0;border:none}
.cat-num{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem;flex-shrink:0}
.cat-num.c1{background:#2d6a4f}
.cat-num.c2{background:#7b2cbf}
.obj-card{background:#f8f9fa;border-radius:10px;padding:1.2rem 1.5rem;margin-bottom:1rem;border-left:4px solid #ddd}
.obj-card.c1{border-left-color:#2d6a4f}
.obj-card.c2{border-left-color:#7b2cbf}
.obj-card h4{font-size:1rem;margin-bottom:.3rem}
.obj-card p{font-size:.88rem;color:#555;margin-bottom:.3rem}
.obj-card .example{font-size:.82rem;color:#0f3460;font-style:italic;margin-top:.5rem}
/* Comparison table */
table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.88rem}
th,td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid #eee}
th{background:#f8f9fa;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;color:#636e72}
td:first-child{font-weight:600}
/* Flow */
.flow{display:flex;flex-direction:column;gap:0;margin:1.5rem 0}
.flow-step{display:flex;gap:1rem;align-items:flex-start}
.flow-line{display:flex;flex-direction:column;align-items:center}
.flow-dot{width:28px;height:28px;border-radius:50%;background:#0f3460;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;flex-shrink:0}
.flow-connector{width:2px;height:24px;background:#ddd}
.flow-step:last-child .flow-connector{display:none}
.flow-content{padding-bottom:1rem}
.flow-content h4{font-size:.9rem;margin-bottom:.2rem}
.flow-content p{font-size:.85rem;color:#636e72;margin:0}
.highlight{background:#f0f4ff;border:1px solid #d0daf0;border-radius:8px;padding:1rem 1.2rem;margin:1.5rem 0;font-size:.9rem}
.highlight strong{color:#0f3460}
.tag{display:inline-block;padding:.15rem .5rem;border-radius:4px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.tag.c1{background:#d8f3dc;color:#2d6a4f}
.tag.c2{background:#e8d5f5;color:#7b2cbf}
.tag.bloom{background:#fff3cd;color:#856404}
/* Accordion */
.acc{border:1px solid #e0e0e0;border-radius:8px;margin-top:.8rem;overflow:hidden}
.acc-btn{width:100%;padding:.7rem 1rem;background:#f8f9fa;border:none;text-align:left;font-size:.85rem;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#0f3460;transition:background .15s}
.acc-btn:hover{background:#eef1f5}
.acc-btn .arrow{transition:transform .2s;font-size:.75rem;color:#999}
.acc-btn.open .arrow{transform:rotate(90deg)}
.acc-body{display:none;border-top:1px solid #e0e0e0;padding:.5rem}
.acc-body.open{display:block}
@media(max-width:600px){
.page{padding:2rem 1rem}
h1{font-size:1.4rem}
}
</style>
</head>
<body>
<div class="page">
<!-- ==================== CATEGORY 1 ==================== -->
<div class="cat-header">
<span class="cat-num c1">C1</span>
<h2>Interactivos Guiados</h2>
</div>
<p>Contenido con navegación activa. Flujo lineal, sin ramificación. <span class="tag bloom">Comprensión y Aplicación</span></p>
<div class="obj-card c1">
<h4>Slideshow Interactivo</h4>
<p>Secuencia lineal de pantallas con texto, imagen, sonido o video y elementos clicables. Navegación anterior/siguiente, barra de progreso y evaluación al cierre.</p>
<div class="acc"><button class="acc-btn" onclick="toggleAcc(this)">Ver ejemplo visual <span class="arrow">▶</span></button><div class="acc-body">
<svg viewBox="0 0 700 320" xmlns="http://www.w3.org/2000/svg" style="width:100%;margin-top:.8rem;border-radius:8px;border:1px solid #e0e0e0;">
<rect width="700" height="320" fill="#fff"/>
<!-- Slide area -->
<rect x="20" y="16" width="660" height="252" rx="6" fill="#f8f8f8" stroke="#e0e0e0"/>
<!-- Title -->
<rect x="50" y="36" width="200" height="12" rx="2" fill="#999"/>
<rect x="50" y="56" width="160" height="7" rx="2" fill="#ccc"/>
<rect x="50" y="68" width="190" height="7" rx="2" fill="#ccc"/>
<rect x="50" y="80" width="140" height="7" rx="2" fill="#ccc"/>
<!-- Image placeholder -->
<rect x="400" y="32" width="250" height="120" rx="6" fill="#eee" stroke="#ddd"/>
<polygon points="440,130 485,80 510,105 550,70 620,130" fill="#ddd" stroke="#ccc" stroke-width="1" stroke-linejoin="round"/>
<circle cx="455" cy="65" r="10" fill="#e0e0e0"/>
<text x="525" y="145" text-anchor="middle" font-size="8" fill="#bbb">Imagen</text>
<!-- Accordion items -->
<rect x="50" y="100" width="280" height="26" rx="4" fill="#fff" stroke="#e0e0e0"/>
<text x="64" y="117" font-size="9" fill="#aaa">▶ Sección expandible</text>
<rect x="50" y="130" width="280" height="26" rx="4" fill="#fff" stroke="#e0e0e0"/>
<text x="64" y="147" font-size="9" fill="#aaa">▶ Sección expandible</text>
<rect x="50" y="160" width="280" height="38" rx="4" fill="#f5f5f5" stroke="#ccc"/>
<text x="64" y="176" font-size="9" fill="#888">▼ Sección expandida</text>
<rect x="64" y="184" width="200" height="5" rx="1" fill="#ddd"/>
<!-- Video placeholder -->
<rect x="400" y="164" width="250" height="90" rx="6" fill="#e8e8e8" stroke="#ddd"/>
<circle cx="525" cy="205" r="12" fill="none" stroke="#bbb" stroke-width="1.5"/><polygon points="521,198 521,212 532,205" fill="#bbb"/>
<rect x="416" y="240" width="218" height="3" rx="1.5" fill="#ddd"/>
<rect x="416" y="240" width="70" height="3" rx="1.5" fill="#aaa"/>
<text x="525" y="235" text-anchor="middle" font-size="7" fill="#ccc">Video</text>
<!-- Bottom bar -->
<rect x="20" y="276" width="660" height="32" rx="0 0 6 6" fill="#e8e8e8"/>
<text x="50" y="296" font-size="10" fill="#999">← Anterior</text>
<text x="620" y="296" font-size="10" fill="#999">Siguiente →</text>
<rect x="200" y="290" width="300" height="3" rx="1.5" fill="#ddd"/>
<rect x="200" y="290" width="120" height="3" rx="1.5" fill="#aaa"/>
<text x="350" y="298" text-anchor="middle" font-size="8" fill="#bbb">2 / 5</text>
</svg>
</div></div>
</div>
<div class="obj-card c1">
<h4>Infografía Clicable</h4>
<p>Una sola pantalla con zonas interactivas sobre imagen. Clic para revelar pop-ups con información adicional.</p>
<div class="acc"><button class="acc-btn" onclick="toggleAcc(this)">Ver ejemplo visual <span class="arrow">▶</span></button><div class="acc-body">
<svg viewBox="0 0 700 300" xmlns="http://www.w3.org/2000/svg" style="width:100%;margin-top:.8rem;border-radius:8px;border:1px solid #e0e0e0;">
<rect width="700" height="300" fill="#fff"/>
<!-- Image area -->
<rect x="20" y="16" width="660" height="240" rx="6" fill="#f5f5f5" stroke="#e0e0e0"/>
<!-- Simple scene in grays -->
<rect x="20" y="210" width="660" height="46" fill="#e8e8e8" rx="0 0 6 6"/>
<rect x="60" y="130" width="240" height="8" rx="2" fill="#d0d0d0"/>
<rect x="70" y="138" width="70" height="72" rx="3" fill="#ddd"/>
<rect x="160" y="138" width="70" height="72" rx="3" fill="#ddd"/>
<rect x="100" y="66" width="100" height="62" rx="4" fill="#e8e8e8" stroke="#ddd"/>
<rect x="140" y="128" width="16" height="8" fill="#ddd"/>
<rect x="380" y="56" width="180" height="6" rx="2" fill="#d0d0d0"/>
<rect x="400" y="28" width="28" height="28" rx="3" fill="#e8e8e8" stroke="#ddd"/>
<rect x="436" y="30" width="24" height="26" rx="3" fill="#eee" stroke="#ddd"/>
<rect x="468" y="26" width="30" height="30" rx="3" fill="#e8e8e8" stroke="#ddd"/>
<rect x="380" y="130" width="160" height="80" rx="4" fill="#ddd" stroke="#ccc"/>
<!-- Hotspots -->
<circle cx="140" cy="80" r="14" fill="#999" stroke="#fff" stroke-width="2.5"/><text x="140" y="84" text-anchor="middle" font-size="10" fill="#fff" font-weight="700">1</text>
<circle cx="390" cy="100" r="14" fill="#999" stroke="#fff" stroke-width="2.5"/><text x="390" y="104" text-anchor="middle" font-size="10" fill="#fff" font-weight="700">2</text>
<circle cx="530" cy="170" r="14" fill="#999" stroke="#fff" stroke-width="2.5"/><text x="530" y="174" text-anchor="middle" font-size="10" fill="#fff" font-weight="700">3</text>
<circle cx="240" cy="190" r="14" fill="#999" stroke="#fff" stroke-width="2.5"/><text x="240" y="194" text-anchor="middle" font-size="10" fill="#fff" font-weight="700">4</text>
<!-- Pop-up -->
<rect x="410" y="36" width="200" height="80" rx="8" fill="#fff" stroke="#ddd" filter="url(#shadow)"/>
<rect x="422" y="46" width="40" height="8" rx="2" fill="#e0e0e0"/>
<text x="422" y="68" font-size="10" fill="#888" font-weight="600">Título del punto</text>
<rect x="422" y="76" width="170" height="5" rx="1" fill="#e0e0e0"/>
<rect x="422" y="85" width="140" height="5" rx="1" fill="#e0e0e0"/>
<rect x="422" y="94" width="155" height="5" rx="1" fill="#e0e0e0"/>
<text x="600" y="48" font-size="12" fill="#ccc">×</text>
<defs><filter id="shadow"><feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity=".08"/></filter></defs>
<!-- Bottom bar -->
<rect x="20" y="264" width="660" height="26" rx="0 0 6 6" fill="#e8e8e8"/>
<text x="50" y="281" font-size="9" fill="#999">Explora cada zona</text>
<text x="600" y="281" font-size="9" fill="#999">2 / 4</text>
</svg>
</div></div>
</div>
<div class="obj-card c1">
<h4>Carrusel con Ejercicio</h4>
<p>Tarjetas navegables que alternan contenido con ejercicios de aplicación inmediata.</p>
<div class="acc"><button class="acc-btn" onclick="toggleAcc(this)">Ver ejemplo visual <span class="arrow">▶</span></button><div class="acc-body">
<svg viewBox="0 0 700 310" xmlns="http://www.w3.org/2000/svg" style="width:100%;margin-top:.8rem;border-radius:8px;border:1px solid #e0e0e0;">
<rect width="700" height="310" fill="#fff"/>
<!-- Card area -->
<rect x="20" y="16" width="660" height="250" rx="6" fill="#f8f8f8" stroke="#e0e0e0"/>
<!-- Type badge -->
<rect x="40" y="30" width="60" height="16" rx="3" fill="#eee" stroke="#ddd"/><text x="48" y="41" font-size="7" fill="#888" font-weight="700">EJERCICIO</text>
<!-- Title -->
<text x="40" y="66" font-size="12" fill="#666" font-weight="600">Ordena los pasos correctamente</text>
<rect x="40" y="74" width="240" height="5" rx="1" fill="#ddd"/>
<!-- Ordering items -->
<rect x="40" y="92" width="620" height="32" rx="6" fill="#fff" stroke="#e0e0e0"/>
<circle cx="62" cy="108" r="10" fill="#e0e0e0"/><text x="62" y="112" text-anchor="middle" font-size="8" fill="#aaa" font-weight="700">?</text>
<text x="82" y="112" font-size="9" fill="#999">Parafrasear lo que el cliente dijo</text>
<rect x="40" y="130" width="620" height="32" rx="6" fill="#f5f5f5" stroke="#ccc"/>
<circle cx="62" cy="146" r="10" fill="#aaa"/><text x="62" y="150" text-anchor="middle" font-size="8" fill="#fff" font-weight="700">1</text>
<text x="82" y="150" font-size="9" fill="#666">Saludar al cliente por su nombre</text>
<text x="636" y="150" font-size="9" fill="#aaa">✓</text>
<rect x="40" y="168" width="620" height="32" rx="6" fill="#f5f5f5" stroke="#ccc"/>
<circle cx="62" cy="184" r="10" fill="#aaa"/><text x="62" y="188" text-anchor="middle" font-size="8" fill="#fff" font-weight="700">2</text>
<text x="82" y="188" font-size="9" fill="#666">Escuchar la queja completa sin interrumpir</text>
<text x="636" y="188" font-size="9" fill="#aaa">✓</text>
<rect x="40" y="206" width="620" height="32" rx="6" fill="#fff" stroke="#e0e0e0"/>
<circle cx="62" cy="222" r="10" fill="#e0e0e0"/><text x="62" y="226" text-anchor="middle" font-size="8" fill="#aaa" font-weight="700">?</text>
<text x="82" y="226" font-size="9" fill="#999">Validar la emoción del cliente</text>
<!-- Bottom bar -->
<rect x="20" y="274" width="660" height="28" rx="0 0 6 6" fill="#e8e8e8"/>
<text x="50" y="292" font-size="10" fill="#999">← Anterior</text>
<text x="620" y="292" font-size="10" fill="#999">Siguiente →</text>
<rect x="200" y="286" width="300" height="3" rx="1.5" fill="#ddd"/>
<rect x="200" y="286" width="150" height="3" rx="1.5" fill="#aaa"/>
<text x="350" y="294" text-anchor="middle" font-size="8" fill="#bbb">2 / 4</text>
</svg>
</div></div>
</div>
<!-- ==================== CATEGORY 2 ==================== -->
<div class="cat-header">
<span class="cat-num c2">C2</span>
<h2>Simuladores de Escenario y Decisión</h2>
</div>
<p>Situaciones contextualizadas con decisiones y consecuencias. Flujo no-lineal. <span class="tag bloom">Aplicación y Análisis</span></p>
<div class="obj-card c2">
<h4>Estructura de cada simulador</h4>
<p>El alumno recorre un flujo de nodos multimedia. Cada nodo puede ser un <strong>video</strong>, un <strong>documento</strong>, una <strong>imagen</strong>, un <strong>test</strong> o una <strong>decisión</strong>. Las decisiones ramifican el camino. Al final, una evaluación basada en el recorrido.</p>
<!-- FLOW DIAGRAM -->
<div class="acc"><button class="acc-btn" onclick="toggleAcc(this)">Ver ejemplo de flujo <span class="arrow">▶</span></button><div class="acc-body">
<svg viewBox="0 0 600 580" xmlns="http://www.w3.org/2000/svg" style="width:100%;margin-top:1rem;border-radius:8px;border:1px solid #e0e0e0;">
<rect width="600" height="580" fill="#fff"/>
<!-- NODE 1 -->
<rect x="160" y="20" width="280" height="48" rx="8" fill="#f5f5f5" stroke="#ccc"/>
<polygon points="180,36 180,52 192,44" fill="#999"/>
<text x="204" y="42" font-size="10" fill="#666" font-weight="600">Video</text>
<text x="204" y="54" font-size="8" fill="#aaa">Contexto del escenario</text>
<line x1="300" y1="68" x2="300" y2="88" stroke="#ccc" stroke-width="1.5"/>
<polygon points="296,85 304,85 300,92" fill="#ccc"/>
<!-- NODE 2 -->
<rect x="160" y="94" width="280" height="48" rx="8" fill="#f5f5f5" stroke="#ccc"/>
<rect x="178" y="104" width="18" height="24" rx="2" fill="#ddd"/>
<rect x="182" y="108" width="10" height="2" rx="1" fill="#bbb"/><rect x="182" y="112" width="8" height="2" rx="1" fill="#bbb"/><rect x="182" y="116" width="10" height="2" rx="1" fill="#bbb"/>
<text x="204" y="116" font-size="10" fill="#666" font-weight="600">Documento</text>
<text x="204" y="128" font-size="8" fill="#aaa">Protocolo de actuación</text>
<line x1="300" y1="142" x2="300" y2="162" stroke="#ccc" stroke-width="1.5"/>
<polygon points="296,159 304,159 300,166" fill="#ccc"/>
<!-- NODE 3 -->
<rect x="160" y="168" width="280" height="48" rx="8" fill="#f5f5f5" stroke="#ccc"/>
<circle cx="186" cy="192" r="10" fill="none" stroke="#bbb" stroke-width="1.5"/>
<text x="183" y="196" font-size="8" fill="#bbb" font-weight="700">?</text>
<text x="204" y="190" font-size="10" fill="#666" font-weight="600">Test</text>
<text x="204" y="202" font-size="8" fill="#aaa">Verificación de comprensión</text>
<line x1="300" y1="216" x2="300" y2="236" stroke="#ccc" stroke-width="1.5"/>
<polygon points="296,233 304,233 300,240" fill="#ccc"/>
<!-- NODE 4 -->
<rect x="160" y="242" width="280" height="48" rx="8" fill="#f5f5f5" stroke="#ccc"/>
<polygon points="180,258 180,274 192,266" fill="#999"/>
<text x="204" y="264" font-size="10" fill="#666" font-weight="600">Video</text>
<text x="204" y="276" font-size="8" fill="#aaa">El personaje reacciona</text>
<!-- BRANCH SPLIT -->
<line x1="300" y1="290" x2="300" y2="310" stroke="#ccc" stroke-width="1.5"/>
<circle cx="300" cy="316" r="6" fill="#ccc"/>
<line x1="300" y1="316" x2="170" y2="346" stroke="#999" stroke-width="1.5"/>
<line x1="300" y1="316" x2="430" y2="346" stroke="#999" stroke-width="1.5"/>
<!-- DECISION A -->
<rect x="70" y="348" width="200" height="42" rx="8" fill="#f5f5f5" stroke="#999" stroke-dasharray="4"/>
<circle cx="94" cy="369" r="10" fill="#ddd"/><text x="94" y="373" text-anchor="middle" font-size="8" fill="#888" font-weight="700">A</text>
<text x="112" y="366" font-size="9" fill="#666" font-weight="600">Activar protocolo</text>
<text x="112" y="378" font-size="8" fill="#aaa">Decisión</text>
<!-- DECISION B -->
<rect x="330" y="348" width="200" height="42" rx="8" fill="#f5f5f5" stroke="#999" stroke-dasharray="4"/>
<circle cx="354" cy="369" r="10" fill="#ddd"/><text x="354" y="373" text-anchor="middle" font-size="8" fill="#888" font-weight="700">B</text>
<text x="372" y="366" font-size="9" fill="#666" font-weight="600">Hablar informalmente</text>
<text x="372" y="378" font-size="8" fill="#aaa">Decisión</text>
<!-- ARROWS DOWN -->
<line x1="170" y1="390" x2="170" y2="416" stroke="#ccc" stroke-width="1.5" stroke-dasharray="3"/>
<line x1="430" y1="390" x2="430" y2="416" stroke="#ccc" stroke-width="1.5" stroke-dasharray="3"/>
<!-- IMAGE A -->
<rect x="70" y="418" width="200" height="42" rx="8" fill="#f5f5f5" stroke="#ccc"/>
<rect x="86" y="426" width="22" height="22" rx="3" fill="#eee" stroke="#ddd"/>
<polygon points="90,444 97,432 104,444" fill="#ddd"/>
<text x="116" y="440" font-size="9" fill="#666" font-weight="600">Imagen</text>
<text x="116" y="452" font-size="8" fill="#aaa">Resultado visual</text>
<!-- IMAGE B -->
<rect x="330" y="418" width="200" height="42" rx="8" fill="#f5f5f5" stroke="#ccc"/>
<rect x="346" y="426" width="22" height="22" rx="3" fill="#eee" stroke="#ddd"/>
<polygon points="350,444 357,432 364,444" fill="#ddd"/>
<text x="376" y="440" font-size="9" fill="#666" font-weight="600">Imagen</text>
<text x="376" y="452" font-size="8" fill="#aaa">Resultado visual</text>
<!-- CONVERGE -->
<line x1="170" y1="460" x2="300" y2="490" stroke="#ccc" stroke-width="1.5"/>
<line x1="430" y1="460" x2="300" y2="490" stroke="#ccc" stroke-width="1.5"/>
<!-- END -->
<rect x="170" y="496" width="260" height="40" rx="8" fill="#e8e8e8" stroke="#ccc"/>
<text x="300" y="520" text-anchor="middle" font-size="10" fill="#666" font-weight="600">Evaluación Final</text>
<!-- Labels on the side -->
<text x="30" y="46" font-size="8" fill="#bbb" font-weight="600">1</text>
<text x="30" y="120" font-size="8" fill="#bbb" font-weight="600">2</text>
<text x="30" y="194" font-size="8" fill="#bbb" font-weight="600">3</text>
<text x="30" y="268" font-size="8" fill="#bbb" font-weight="600">4</text>
<text x="30" y="371" font-size="8" fill="#bbb" font-weight="600">5</text>
<text x="30" y="441" font-size="8" fill="#bbb" font-weight="600">6</text>
<text x="30" y="518" font-size="8" fill="#bbb" font-weight="600">7</text>
<line x1="44" y1="30" x2="44" y2="530" stroke="#eee" stroke-width="1"/>
</svg>
<p style="font-size:.82rem;color:#636e72;margin-top:.8rem;">Cada nodo del flujo puede ser de tipo diferente. Las <strong>decisiones</strong> ramifican el camino y determinan qué nodos siguen. El resultado final depende del recorrido completo del alumno.</p>
</div></div>
<!-- STEP SCREENS -->
<div class="acc" style="margin-top:.5rem;"><button class="acc-btn" onclick="toggleAcc(this)">Ver cómo luce cada paso para el alumno <span class="arrow">▶</span></button><div class="acc-body">
<p style="font-size:.8rem;color:#aaa;margin:.5rem 0 .8rem;text-align:center;">Lo que el alumno ve en cada momento del simulador.</p>
<!-- SCREEN 1: VIDEO -->
<p style="font-size:.75rem;font-weight:700;color:#888;margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.5px;">Paso 1 — Video de contexto</p>
<svg viewBox="0 0 700 300" xmlns="http://www.w3.org/2000/svg" style="width:100%;border-radius:8px;border:1px solid #e0e0e0;margin-bottom:1.2rem;">
<rect width="700" height="300" fill="#fff"/>
<rect width="700" height="28" rx="8 8 0 0" fill="#e0e0e0"/>
<text x="20" y="19" font-size="9" fill="#888" font-weight="600">Escenario — Contexto inicial</text>
<text x="630" y="19" font-size="8" fill="#bbb">Paso 1 de 7</text>
<rect x="20" y="38" width="660" height="220" rx="4" fill="#222"/>
<circle cx="350" cy="148" r="22" fill="rgba(255,255,255,.1)" stroke="rgba(255,255,255,.3)" stroke-width="1.5"/>
<polygon points="343,138 343,158 360,148" fill="rgba(255,255,255,.6)"/>
<rect x="200" y="210" width="280" height="16" rx="3" fill="rgba(0,0,0,.5)"/>
<rect x="210" y="214" width="200" height="6" rx="1" fill="rgba(255,255,255,.3)"/>
<rect x="40" y="236" width="620" height="3" rx="1.5" fill="rgba(255,255,255,.1)"/>
<rect x="40" y="236" width="160" height="3" rx="1.5" fill="rgba(255,255,255,.3)"/>
<rect x="20" y="268" width="660" height="26" rx="0 0 6 6" fill="#e8e8e8"/>
<text x="600" y="285" font-size="9" fill="#999">Continuar →</text>
</svg>
<!-- SCREEN 2: DOCUMENT -->
<p style="font-size:.75rem;font-weight:700;color:#888;margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.5px;">Paso 2 — Documento de referencia</p>
<svg viewBox="0 0 700 300" xmlns="http://www.w3.org/2000/svg" style="width:100%;border-radius:8px;border:1px solid #e0e0e0;margin-bottom:1.2rem;">
<rect width="700" height="300" fill="#fff"/>
<rect width="700" height="28" rx="8 8 0 0" fill="#e0e0e0"/>
<text x="20" y="19" font-size="9" fill="#888" font-weight="600">Documento — Protocolo de actuación</text>
<text x="630" y="19" font-size="8" fill="#bbb">Paso 2 de 7</text>
<rect x="120" y="42" width="460" height="220" rx="4" fill="#fff" stroke="#e0e0e0"/>
<rect x="140" y="58" width="180" height="10" rx="2" fill="#999"/>
<rect x="140" y="74" width="100" height="6" rx="1" fill="#ddd"/>
<line x1="140" y1="86" x2="540" y2="86" stroke="#eee"/>
<rect x="140" y="96" width="360" height="5" rx="1" fill="#e8e8e8"/>
<rect x="140" y="106" width="330" height="5" rx="1" fill="#e8e8e8"/>
<rect x="140" y="116" width="350" height="5" rx="1" fill="#e8e8e8"/>
<rect x="140" y="132" width="140" height="8" rx="2" fill="#bbb"/>
<rect x="140" y="148" width="370" height="5" rx="1" fill="#e8e8e8"/>
<rect x="140" y="158" width="340" height="5" rx="1" fill="#e8e8e8"/>
<rect x="140" y="174" width="380" height="34" rx="4" fill="#f5f5f5" stroke="#e0e0e0"/>
<rect x="152" y="182" width="80" height="6" rx="1" fill="#ccc"/>
<rect x="152" y="194" width="340" height="4" rx="1" fill="#e0e0e0"/>
<rect x="140" y="218" width="360" height="5" rx="1" fill="#e8e8e8"/>
<rect x="140" y="228" width="320" height="5" rx="1" fill="#e8e8e8"/>
<rect x="140" y="238" width="340" height="5" rx="1" fill="#e8e8e8"/>
<rect x="570" y="50" width="3" height="206" rx="1.5" fill="#f0f0f0"/>
<rect x="570" y="50" width="3" height="60" rx="1.5" fill="#ccc"/>
<rect x="20" y="270" width="660" height="26" rx="0 0 6 6" fill="#e8e8e8"/>
<text x="50" y="287" font-size="9" fill="#999">← Anterior</text>
<text x="600" y="287" font-size="9" fill="#999">Continuar →</text>
</svg>
<!-- SCREEN 3: TEST -->
<p style="font-size:.75rem;font-weight:700;color:#888;margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.5px;">Paso 3 — Test de verificación</p>
<svg viewBox="0 0 700 290" xmlns="http://www.w3.org/2000/svg" style="width:100%;border-radius:8px;border:1px solid #e0e0e0;margin-bottom:1.2rem;">
<rect width="700" height="290" fill="#fff"/>
<rect width="700" height="28" rx="8 8 0 0" fill="#e0e0e0"/>
<text x="20" y="19" font-size="9" fill="#888" font-weight="600">Verificación de comprensión</text>
<text x="630" y="19" font-size="8" fill="#bbb">Paso 3 de 7</text>
<text x="50" y="60" font-size="11" fill="#666" font-weight="600">¿Cuál es la primera acción al recibir una denuncia?</text>
<rect x="40" y="76" width="620" height="36" rx="6" fill="#fff" stroke="#e0e0e0"/>
<circle cx="64" cy="94" r="10" fill="#e8e8e8"/><text x="64" y="98" text-anchor="middle" font-size="8" fill="#aaa" font-weight="700">A</text>
<text x="84" y="98" font-size="9" fill="#999">Confrontar al acusado para escuchar su versión</text>
<rect x="40" y="118" width="620" height="36" rx="6" fill="#f5f5f5" stroke="#aaa" stroke-width="2"/>
<circle cx="64" cy="136" r="10" fill="#999"/><text x="64" y="140" text-anchor="middle" font-size="8" fill="#fff" font-weight="700">B</text>
<text x="84" y="140" font-size="9" fill="#666" font-weight="600">Escuchar al denunciante en un espacio privado</text>
<text x="634" y="140" font-size="9" fill="#999">✓</text>
<rect x="40" y="160" width="620" height="36" rx="6" fill="#fff" stroke="#e0e0e0" opacity=".6"/>
<circle cx="64" cy="178" r="10" fill="#e8e8e8"/><text x="64" y="182" text-anchor="middle" font-size="8" fill="#aaa" font-weight="700">C</text>
<text x="84" y="182" font-size="9" fill="#bbb">Pedir que lo documente por escrito</text>
<rect x="40" y="208" width="620" height="28" rx="6" fill="#f5f5f5" stroke="#ddd"/>
<text x="56" y="226" font-size="8" fill="#888">Correcto. La escucha privada y confidencial es el primer paso.</text>
<rect x="20" y="248" width="660" height="26" rx="0 0 6 6" fill="#e8e8e8"/>
<text x="600" y="265" font-size="9" fill="#999">Continuar →</text>
</svg>
<!-- SCREEN 4: DECISION -->
<p style="font-size:.75rem;font-weight:700;color:#888;margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.5px;">Paso 5 — Personaje + Decisión</p>
<svg viewBox="0 0 700 340" xmlns="http://www.w3.org/2000/svg" style="width:100%;border-radius:8px;border:1px solid #e0e0e0;margin-bottom:1.2rem;">
<rect width="700" height="340" fill="#fff"/>
<rect width="700" height="28" rx="8 8 0 0" fill="#e0e0e0"/>
<text x="20" y="19" font-size="9" fill="#888" font-weight="600">Escenario — Decisión</text>
<text x="630" y="19" font-size="8" fill="#bbb">Paso 5 de 7</text>
<!-- Breadcrumb -->
<rect x="0" y="28" width="700" height="20" fill="#f5f5f5"/>
<rect x="12" y="32" width="32" height="12" rx="6" fill="#999"/><text x="28" y="41" text-anchor="middle" font-size="6" fill="#fff" font-weight="600">Inicio</text>
<text x="48" y="41" font-size="7" fill="#ccc">→</text>
<rect x="54" y="32" width="44" height="12" rx="6" fill="#999"/><text x="76" y="41" text-anchor="middle" font-size="6" fill="#fff" font-weight="600">Escuchar</text>
<text x="102" y="41" font-size="7" fill="#ccc">→</text>
<rect x="108" y="32" width="28" height="12" rx="6" fill="#999"/><text x="122" y="41" text-anchor="middle" font-size="6" fill="#fff" font-weight="600">Test</text>
<text x="140" y="41" font-size="7" fill="#ccc">→</text>
<rect x="146" y="32" width="36" height="12" rx="6" fill="#999"/><text x="164" y="41" text-anchor="middle" font-size="6" fill="#fff" font-weight="600">Video</text>
<text x="186" y="41" font-size="7" fill="#ccc">→</text>
<rect x="192" y="32" width="12" height="12" rx="6" fill="#ddd"/><text x="198" y="41" text-anchor="middle" font-size="6" fill="#aaa">?</text>
<!-- Feedback -->
<rect x="30" y="60" width="640" height="26" rx="6" fill="#f5f5f5" stroke="#e0e0e0"/>
<rect x="42" y="68" width="500" height="5" rx="1" fill="#ddd"/>
<!-- Character -->
<circle cx="56" cy="120" r="20" fill="#ddd"/>
<rect x="86" y="102" width="540" height="48" rx="8" fill="#f5f5f5" stroke="#e0e0e0"/>
<polygon points="80,120 90,114 90,126" fill="#f5f5f5"/>
<text x="100" y="118" font-size="8" fill="#888" font-weight="700">Personaje (Nombre)</text>
<rect x="100" y="126" width="400" height="5" rx="1" fill="#ddd"/>
<rect x="100" y="136" width="340" height="5" rx="1" fill="#ddd"/>
<!-- Narrative -->
<rect x="30" y="164" width="440" height="5" rx="1" fill="#e0e0e0"/>
<!-- Decision A -->
<rect x="30" y="184" width="640" height="40" rx="8" fill="#fff" stroke="#e0e0e0"/>
<circle cx="54" cy="204" r="10" fill="#999"/><text x="54" y="208" text-anchor="middle" font-size="8" fill="#fff" font-weight="700">A</text>
<rect x="74" y="198" width="360" height="5" rx="1" fill="#ccc"/>
<rect x="74" y="208" width="280" height="5" rx="1" fill="#ddd"/>
<!-- Decision B -->
<rect x="30" y="232" width="640" height="40" rx="8" fill="#fff" stroke="#e0e0e0"/>
<circle cx="54" cy="252" r="10" fill="#999"/><text x="54" y="256" text-anchor="middle" font-size="8" fill="#fff" font-weight="700">B</text>
<rect x="74" y="246" width="320" height="5" rx="1" fill="#ccc"/>
<rect x="74" y="256" width="260" height="5" rx="1" fill="#ddd"/>
<!-- Bottom -->
<rect x="20" y="286" width="660" height="40" rx="0 0 6 6" fill="#e8e8e8"/>
<text x="350" y="306" text-anchor="middle" font-size="8" fill="#aaa">Tu decisión determina lo que sucede</text>
<text x="350" y="318" text-anchor="middle" font-size="8" fill="#bbb">Decisiones: 2 | Puntuación: 4 / 9</text>
</svg>
<!-- SCREEN 5: EVALUATION -->
<p style="font-size:.75rem;font-weight:700;color:#888;margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.5px;">Paso 7 — Evaluación final</p>
<svg viewBox="0 0 700 270" xmlns="http://www.w3.org/2000/svg" style="width:100%;border-radius:8px;border:1px solid #e0e0e0;margin-bottom:.5rem;">
<rect width="700" height="270" fill="#fff"/>
<rect width="700" height="28" rx="8 8 0 0" fill="#e0e0e0"/>
<text x="20" y="19" font-size="9" fill="#888" font-weight="600">Evaluación de desempeño</text>
<text x="630" y="19" font-size="8" fill="#bbb">Resultado</text>
<circle cx="350" cy="82" r="30" fill="#ccc"/>
<text x="350" y="90" text-anchor="middle" font-size="17" fill="#fff" font-weight="700">67%</text>
<text x="350" y="130" text-anchor="middle" font-size="12" fill="#666" font-weight="700">Resultado del desempeño</text>
<rect x="250" y="140" width="200" height="5" rx="1" fill="#ddd"/>
<rect x="140" y="160" width="420" height="70" rx="6" fill="#f8f8f8" stroke="#e0e0e0"/>
<text x="158" y="176" font-size="8" fill="#aaa" font-weight="600">APRENDIZAJES CLAVE:</text>
<rect x="158" y="184" width="300" height="4" rx="1" fill="#e0e0e0"/>
<rect x="158" y="194" width="280" height="4" rx="1" fill="#e0e0e0"/>
<rect x="158" y="204" width="320" height="4" rx="1" fill="#e0e0e0"/>
<rect x="158" y="214" width="260" height="4" rx="1" fill="#e0e0e0"/>
<rect x="290" y="242" width="120" height="22" rx="6" fill="#999"/>
<text x="350" y="257" text-anchor="middle" font-size="8" fill="#fff" font-weight="600">Reiniciar Escenario</text>
</svg>
</div></div>
</div>
<!-- ==================== COMPARISON ==================== -->
<h2>Diferencias entre Categoría 1 y Categoría 2</h2>
<table>
<thead>
<tr><th>Dimensión</th><th><span class="tag c1">Cat. 1</span> Interactivos Guiados</th><th><span class="tag c2">Cat. 2</span> Simuladores</th></tr>
</thead>
<tbody>
<tr><td>Propósito</td><td>Enseñar conceptos y procedimientos</td><td>Entrenar toma de decisiones en contexto</td></tr>
<tr><td>Flujo</td><td>Lineal — el alumno recorre todas las pantallas en orden</td><td>No-lineal — las decisiones del alumno determinan el camino</td></tr>
<tr><td>Rol del alumno</td><td>Explorador: lee, expande, responde</td><td>Protagonista: decide, actúa, enfrenta consecuencias</td></tr>
<tr><td>Retroalimentación</td><td>Inmediata por respuesta (correcto/incorrecto)</td><td>Contextual por decisión (consecuencias narrativas + evaluación al cierre)</td></tr>
<tr><td>Personajes</td><td>No hay personajes — es contenido expositivo</td><td>Hay un personaje que reacciona a las decisiones del alumno</td></tr>
<tr><td>Narrativa</td><td>No hay arco narrativo</td><td>Inicio, desarrollo y cierre con arco narrativo</td></tr>
<tr><td>Evaluación</td><td>Quiz al cierre: opción múltiple o palabras clave</td><td>Puntuación por camino: cada decisión suma o resta puntos</td></tr>
<tr><td>Bloom</td><td>Comprensión y aplicación básica</td><td>Aplicación y análisis</td></tr>
<tr><td>Complejidad de generación</td><td>Media — estructura predecible</td><td>Alta — requiere diseño de grafo de decisiones y coherencia narrativa</td></tr>
<tr><td>Casos de uso</td><td>Explicar procesos, protocolos, normativas, conceptos técnicos</td><td>Manejo de conflictos, atención al cliente, decisiones éticas, gestión de riesgo, cumplimiento normativo</td></tr>
</tbody>
</table>
</div>
<script>
function toggleAcc(btn){btn.classList.toggle('open');btn.nextElementSibling.classList.toggle('open');}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment