{"id":80928,"date":"2026-03-04T18:16:16","date_gmt":"2026-03-04T23:16:16","guid":{"rendered":"https:\/\/niixer.com\/?p=80928"},"modified":"2026-03-04T19:15:51","modified_gmt":"2026-03-05T00:15:51","slug":"bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/","title":{"rendered":"Bubbly English: Ingl\u00e9s Interactivo con IA"},"content":{"rendered":"\n

Introducci\u00f3n<\/h2>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

El aprendizaje del ingl\u00e9s desde una edad temprana ofrece importantes beneficios tanto cognitivos como sociales. Los estudios pedag\u00f3gicos a nivel internacional indican que los ni\u00f1os de entre 5 y 8 a\u00f1os est\u00e1n en una etapa crucial para el desarrollo del lenguaje, donde la incorporaci\u00f3n de un segundo idioma ocurre de manera natural, intuitiva y perdurable.
En este marco, Bubbly English aparece como una soluci\u00f3n innovadora ante la demanda de recursos digitales educativos que sean accesibles, motivadores y con un enfoque pedag\u00f3gico s\u00f3lido. Este juego utiliza el poder del aprendizaje a trav\u00e9s del juego (Game-Based Learning, GBL) para ense\u00f1ar vocabulario b\u00e1sico del ingl\u00e9s en el nivel A1, conforme al Marco Com\u00fan Europeo de Referencia para las Lenguas (MCER).<\/p>\n\n\n\n

Descripci\u00f3n del juego<\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Bubbly English es un juego<\/strong> educativo interactivo creado completamente con<\/strong> HTML5, CSS3 y JavaScript puro, que no necesita ser instalado<\/strong> ni tener acceso<\/strong> a internet para operar<\/strong>. Su dise\u00f1o incluye<\/strong> burbujas flotantes y colores pastel vibrantes<\/strong>, con el objetivo de crear<\/strong> un entorno divertido<\/strong>, seguro y motivador<\/strong> para ni\u00f1os en edad preescolar y de educaci\u00f3n primaria<\/strong>.<\/p>\n\n\n\n

    \n
  • Mascota Gu\u00eda<\/strong>: Blinky el B\u00faho: Este juego presenta una mascota animada llamada Blinky, que es un b\u00faho que acompa\u00f1a al ni\u00f1o durante toda la experiencia de juego. Blinky parpadea, se mueve suavemente de lado a lado y ofrece mensajes de aliento en ingl\u00e9s que cambian autom\u00e1ticamente cada 7 segundos. La funci\u00f3n de esta mascota es educativa y esencial: alivia la ansiedad, genera un v\u00ednculo emocional con el alumno y refuerza la inmersi\u00f3n en el idioma ingl\u00e9s.<\/li>\n\n\n\n
  • Contenidos Tem\u00e1tico:<\/strong> El juego clasifica el vocabulario en cinco grupos o temas, con entre 6 y 10 palabras cuidadosamente elegidas seg\u00fan su uso frecuente y su importancia en la vida diaria del ni\u00f1o.<\/li>\n\n\n\n
  • Al comenzar cada secci\u00f3n, el videojuego exhibe los tres tipos de juego en un orden progresivo. El sistema de estrellas funciona como un incentivo: cada respuesta correcta otorga una estrella que se almacena autom\u00e1ticamente en el navegador a trav\u00e9s de localStorage, asegurando que el avance se mantenga entre sesiones. Al finalizar cada ronda, se presenta una pantalla de celebraci\u00f3n con confeti animado y un mensaje que refleja el rendimiento alcanzado.<\/li>\n<\/ul>\n\n\n\n

    Habilidades que puede llegar a desarrollar el ni\u00f1o<\/strong><\/h2>\n\n\n\n
      \n
    1. Asociaci\u00f3n Palabra-Imagen<\/strong>: Reconocimiento de palabras escritas en ingl\u00e9s, asociaci\u00f3n sem\u00e1ntica palabra-imagen, Discriminaci\u00f3n visual entre opciones, Atenci\u00f3n sostenida<\/li>\n\n\n\n
    2. Comprensi\u00f3n Auditiva<\/strong>: Discriminaci\u00f3n auditiva de sonidos del ingl\u00e9s, Comprensi\u00f3n oral sin apoyo escrito, Memoria auditiva de corto plazo, Pronunciaci\u00f3n impl\u00edcita por imitaci\u00f3n<\/li>\n\n\n\n
    3. Arrastrar y Soltar<\/strong>: Coordinaci\u00f3n visomotora y motricidad fina, Relaci\u00f3n graf\u00eda-imagen en contexto activo, Planificaci\u00f3n y toma de decisiones, Persistencia ante el error<\/li>\n<\/ol>\n\n\n\n

      Prompt en Claude<\/strong><\/h2>\n\n\n\n

      Crea un videojuego educativo interactivo para ni\u00f1os de 5 a 8 a\u00f1os que ense\u00f1e ingl\u00e9s b\u00e1sico. Puede desarrollarse en HTML, CSS y JavaScript o en el motor que prefieras.<\/p>\n\n\n\n

      \ud83c\udfaf Contenido a ense\u00f1ar:<\/p>\n\n\n\n

        \n
      • Colores (red, blue, green, yellow)<\/li>\n\n\n\n
      • N\u00fameros del 1 al 10<\/li>\n\n\n\n
      • Animales (dog, cat, bird, fish)<\/li>\n\n\n\n
      • Objetos b\u00e1sicos (apple, ball, car)<\/li>\n\n\n\n
      • Saludos simples (hello, goodbye)<\/li>\n<\/ul>\n\n\n\n

        \ud83d\udd79\ufe0f Mec\u00e1nica:<\/p>\n\n\n\n

        Incluye 2 o 3 mini-juegos simples como:<\/p>\n\n\n\n

          \n
        • Elegir la imagen correcta seg\u00fan la palabra.<\/li>\n\n\n\n
        • Escuchar una palabra y seleccionar la imagen.<\/li>\n\n\n\n
        • Arrastrar la palabra hacia la imagen correcta.<\/li>\n<\/ul>\n\n\n\n

          Debe dar retroalimentaci\u00f3n inmediata (sonido o animaci\u00f3n) cuando el ni\u00f1o acierte o se equivoque.<\/p>\n\n\n\n

          \ud83c\udf08 Dise\u00f1o:<\/p>\n\n\n\n

            \n
          • Colores llamativos.<\/li>\n\n\n\n
          • Botones grandes y f\u00e1ciles de usar.<\/li>\n\n\n\n
          • Personaje gu\u00eda animado.<\/li>\n\n\n\n
          • Interfaz simple e intuitiva.<\/li>\n<\/ul>\n\n\n\n

            \u2b50 Extras opcionales:<\/p>\n\n\n\n

              \n
            • Sistema de puntos o estrellas.<\/li>\n\n\n\n
            • Niveles cortos (5\u201310 minutos).<\/li>\n\n\n\n
            • Mensaje de felicitaci\u00f3n al completar.<\/li>\n<\/ul>\n\n\n\n

              Entrega el c\u00f3digo funcional, organizado y con breve explicaci\u00f3n de c\u00f3mo ejecutarlo HAZLO EN HTML<\/p>\n\n\n\n\n\n\n\n\n\ud83e\udee7 Bubbly English \u2013 Learn & Play!<\/title>\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FONTS & ROOT VARIABLES\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Baloo+2:wght@400;600;700;800&family=Bubblegum+Sans&display=swap');\n\n:root {\n --bg-top: #ffd6e7;\n --bg-bot: #c8f0ff;\n --bubble1: rgba(255,255,255,0.55);\n --card: #fffef5;\n --accent1: #ff6fb0;\n --accent2: #5bc8f5;\n --accent3: #ffe066;\n --accent4: #7ee8a2;\n --correct: #48c78e;\n --wrong: #f06f6f;\n --text-dark: #3a2d5c;\n --text-mid: #6b5fa0;\n --shadow-card: 0 8px 32px rgba(100,80,160,0.13);\n --radius-lg: 28px;\n --radius-md: 18px;\n --font-display: 'Bubblegum Sans', cursive;\n --font-body: 'Baloo 2', sans-serif;\n}\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\nhtml, body {\n min-height: 100%;\n font-family: var(--font-body);\n background: linear-gradient(160deg, var(--bg-top) 0%, #fff5c8 48%, var(--bg-bot) 100%);\n background-attachment: fixed;\n color: var(--text-dark);\n overflow-x: hidden;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FLOATING BUBBLES (background)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.bubbles-bg {\n position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;\n}\n.bub {\n position: absolute;\n border-radius: 50%;\n background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.7), rgba(255,255,255,0.1));\n border: 2px solid rgba(255,255,255,0.55);\n animation: bubbleRise linear infinite;\n}\n@keyframes bubbleRise {\n 0% { transform: translateY(0) scale(1); opacity: 0.7; }\n 50% { transform: translateY(-40vh) scale(1.05); opacity: 0.5; }\n 100% { transform: translateY(-95vh) scale(0.9); opacity: 0; }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCREENS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.screen {\n position: relative; z-index: 1;\n min-height: 100vh;\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n padding: 20px 16px;\n gap: 18px;\n}\n.screen.hidden { display: none !important; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MASCOT \u2014 BLINKY THE OWL\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#mascot-wrap {\n display: flex; align-items: flex-end; gap: 12px;\n margin-bottom: 4px;\n}\n.owl {\n width: 80px; height: 80px;\n position: relative;\n animation: owlBob 2.4s ease-in-out infinite;\n flex-shrink: 0;\n}\n.owl-body {\n position: absolute; inset: 0;\n font-size: 72px; line-height: 1;\n display: flex; align-items: center; justify-content: center;\n filter: drop-shadow(0 6px 10px rgba(100,80,160,0.25));\n}\n.owl-blink {\n position: absolute;\n width: 100%; text-align: center;\n font-size: 72px; top: 0; left: 0;\n opacity: 0;\n animation: owlBlink 4s ease-in-out infinite;\n}\n@keyframes owlBob { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-7px) rotate(2deg)} }\n@keyframes owlBlink { 0%,88%,92%,100%{opacity:0} 90%{opacity:1} }\n\n.speech-bubble {\n background: white;\n border-radius: 20px 20px 20px 4px;\n padding: 10px 18px;\n font-size: 0.95rem;\n font-weight: 700;\n color: var(--text-dark);\n box-shadow: 0 4px 16px rgba(100,80,160,0.15);\n max-width: 220px;\n line-height: 1.4;\n position: relative;\n animation: bubblePop 0.35s cubic-bezier(0.175,0.885,0.32,1.275) both;\n}\n@keyframes bubblePop { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HOME SCREEN\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.home-title {\n font-family: var(--font-display);\n font-size: clamp(2rem, 8vw, 3.6rem);\n color: var(--accent1);\n text-shadow: 3px 5px 0 rgba(255,111,176,0.22);\n text-align: center;\n line-height: 1.05;\n}\n.home-tagline {\n font-size: clamp(0.85rem, 2.5vw, 1rem);\n font-weight: 700;\n color: var(--text-mid);\n text-align: center;\n letter-spacing: 0.06em;\n}\n\n\/* TOPIC CARDS *\/\n.topics-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 14px;\n width: 100%;\n max-width: 460px;\n}\n.topic-card {\n border: none; cursor: pointer;\n border-radius: var(--radius-lg);\n padding: 20px 12px 16px;\n display: flex; flex-direction: column; align-items: center; gap: 8px;\n font-family: var(--font-display);\n font-size: clamp(1rem, 3vw, 1.15rem);\n color: white;\n text-shadow: 0 2px 6px rgba(0,0,0,0.18);\n transition: transform 0.15s, box-shadow 0.15s;\n box-shadow: 0 6px 0 rgba(0,0,0,0.15), var(--shadow-card);\n position: relative; overflow: hidden;\n}\n.topic-card::after {\n content: '';\n position: absolute; inset: 0;\n background: rgba(255,255,255,0.12);\n border-radius: inherit;\n}\n.topic-card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 rgba(0,0,0,0.12), var(--shadow-card); }\n.topic-card:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,0.15); }\n.topic-card .t-icon { font-size: clamp(2.4rem, 8vw, 3.2rem); }\n.tc-colors { background: linear-gradient(140deg, #f093fb, #f5576c); }\n.tc-numbers { background: linear-gradient(140deg, #4facfe, #00f2fe); }\n.tc-animals { background: linear-gradient(140deg, #43e97b, #38f9d7); }\n.tc-objects { background: linear-gradient(140deg, #f6d365, #fda085); }\n.tc-greetings { grid-column: span 2; background: linear-gradient(140deg, #a18cd1, #fbc2eb); }\n\n.stars-banner {\n display: flex; align-items: center; gap: 8px;\n background: white;\n border-radius: 50px;\n padding: 8px 22px;\n font-weight: 800; font-size: 1rem;\n color: var(--text-mid);\n box-shadow: 0 3px 12px rgba(100,80,160,0.12);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n GAME SCREEN\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.topbar {\n display: flex; align-items: center; gap: 10px;\n width: 100%; max-width: 520px;\n padding: 10px 14px;\n background: rgba(255,255,255,0.72);\n backdrop-filter: blur(10px);\n border-radius: 50px;\n box-shadow: 0 3px 12px rgba(100,80,160,0.1);\n}\n.btn-back {\n border: none; cursor: pointer;\n background: var(--wrong);\n color: white; font-family: var(--font-body); font-weight: 800;\n font-size: 0.9rem; padding: 8px 16px;\n border-radius: 50px;\n box-shadow: 0 3px 0 rgba(0,0,0,0.15);\n transition: transform 0.1s;\n}\n.btn-back:active { transform: scale(0.95); }\n.topbar-stars {\n font-weight: 800; font-size: 1rem; color: var(--text-dark);\n display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center;\n}\n.progress-track {\n width: 90px; height: 10px;\n background: rgba(0,0,0,0.08); border-radius: 99px; overflow: hidden;\n}\n.progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #ffe066, #ff6fb0);\n border-radius: 99px;\n transition: width 0.5s cubic-bezier(0.4,0,0.2,1);\n}\n\n\/* GAME CARD *\/\n.game-card {\n background: var(--card);\n border-radius: var(--radius-lg);\n padding: 26px 22px 22px;\n width: 100%; max-width: 520px;\n box-shadow: var(--shadow-card), 0 2px 0 rgba(255,255,255,0.9) inset;\n}\n.game-instruction {\n font-size: clamp(0.85rem, 2.8vw, 1rem);\n font-weight: 700;\n color: var(--text-mid);\n text-align: center;\n margin-bottom: 10px;\n letter-spacing: 0.03em;\n}\n.word-hero {\n font-family: var(--font-display);\n font-size: clamp(2.2rem, 9vw, 3.8rem);\n text-align: center;\n color: var(--text-dark);\n margin-bottom: 18px;\n display: flex; align-items: center; justify-content: center; gap: 12px;\n min-height: 64px;\n}\n.btn-speak {\n border: none; cursor: pointer;\n background: linear-gradient(135deg, var(--accent2), #2980b9);\n border-radius: 50%;\n width: 50px; height: 50px;\n font-size: 1.5rem;\n box-shadow: 0 4px 0 rgba(0,0,0,0.18);\n transition: transform 0.12s;\n flex-shrink: 0;\n}\n.btn-speak:active { transform: scale(0.88); }\n.btn-speak.pulsing { animation: speakPulse 0.7s ease-in-out infinite alternate; }\n@keyframes speakPulse { from{box-shadow:0 4px 0 rgba(0,0,0,0.18)} to{box-shadow:0 4px 20px rgba(91,200,245,0.7)} }\n\n\/* CHOICE GRID *\/\n.choice-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n}\n.choice-tile {\n border: 3px solid #ede8ff;\n border-radius: var(--radius-md);\n background: white;\n cursor: pointer;\n padding: 14px 8px 10px;\n display: flex; flex-direction: column; align-items: center; gap: 6px;\n font-family: var(--font-body); font-weight: 800; font-size: 0.88rem;\n color: var(--text-dark);\n transition: transform 0.14s, border-color 0.14s, box-shadow 0.14s;\n box-shadow: 0 4px 0 #ede8ff;\n}\n.choice-tile .tile-emoji { font-size: clamp(2.6rem, 9vw, 3.8rem); line-height: 1; }\n.choice-tile:hover:not(:disabled) { transform: translateY(-4px); box-shadow: 0 8px 0 #ede8ff; border-color: var(--accent2); }\n.choice-tile:active:not(:disabled) { transform: scale(0.96); }\n.choice-tile.state-correct { border-color: var(--correct); background: #f0fff8; box-shadow: 0 4px 0 #9ee8c8; animation: tileCorrect 0.5s ease; }\n.choice-tile.state-wrong { border-color: var(--wrong); background: #fff4f4; box-shadow: 0 4px 0 #f9c6c6; animation: tileWrong 0.45s ease; }\n.choice-tile:disabled { cursor: default; }\n@keyframes tileCorrect { 0%{transform:scale(1)} 40%{transform:scale(1.1) rotate(3deg)} 70%{transform:scale(0.97)} 100%{transform:scale(1)} }\n@keyframes tileWrong { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 60%{transform:translateX(9px)} 80%{transform:translateX(-4px)} }\n\n\/* AUDIO MODE HINT *\/\n.audio-play-area {\n display: flex; flex-direction: column; align-items: center; gap: 12px;\n padding: 16px 0 20px;\n}\n.big-speaker {\n border: none; cursor: pointer;\n width: 90px; height: 90px;\n border-radius: 50%;\n font-size: 3rem;\n background: linear-gradient(135deg, #a18cd1, #fbc2eb);\n box-shadow: 0 6px 0 rgba(0,0,0,0.15), 0 0 0 0 rgba(161,140,209,0.5);\n transition: transform 0.12s;\n animation: speakerIdle 2s ease-in-out infinite;\n}\n@keyframes speakerIdle {\n 0%,100%{box-shadow:0 6px 0 rgba(0,0,0,0.15), 0 0 0 0 rgba(161,140,209,0.4)}\n 50%{box-shadow:0 6px 0 rgba(0,0,0,0.15), 0 0 0 16px rgba(161,140,209,0)}\n}\n.big-speaker:active { transform: scale(0.92); }\n.audio-prompt { font-weight: 700; color: var(--text-mid); font-size: 0.9rem; }\n\n\/* DRAG & DROP *\/\n.drag-zone {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n margin-bottom: 16px;\n}\n.drop-target {\n border: 3px dashed #c5b8f0;\n border-radius: var(--radius-md);\n min-height: 105px;\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n gap: 6px; padding: 10px 8px;\n transition: border-color 0.2s, background 0.2s;\n font-size: clamp(2rem, 7vw, 2.8rem);\n}\n.drop-target .drop-label {\n font-size: 0.7rem; font-weight: 700;\n color: #b0a0d8; letter-spacing: 0.08em; text-transform: uppercase;\n}\n.drop-target.drag-hover { border-color: var(--accent2); background: rgba(91,200,245,0.08); }\n.drop-target.matched { border-style: solid; border-color: var(--correct); background: rgba(72,199,142,0.1); }\n.word-bank {\n display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;\n}\n.word-chip {\n background: linear-gradient(135deg, #a18cd1, #6c5ce7);\n color: white; font-family: var(--font-display); font-size: 1.1rem;\n padding: 10px 22px; border-radius: 50px;\n cursor: grab; user-select: none; -webkit-user-select: none;\n box-shadow: 0 5px 0 rgba(0,0,0,0.18);\n transition: transform 0.12s, opacity 0.2s;\n}\n.word-chip:active { cursor: grabbing; transform: scale(1.08) rotate(2deg); }\n.word-chip.used { opacity: 0.28; pointer-events: none; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FLASH FEEDBACK (full-screen instant)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#flash {\n position: fixed; inset: 0; z-index: 200;\n display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;\n opacity: 0; pointer-events: none;\n transition: opacity 0.18s;\n}\n#flash.show { opacity: 1; pointer-events: all; }\n#flash.correct-flash { background: rgba(72,199,142,0.22); }\n#flash.wrong-flash { background: rgba(240,111,111,0.18); }\n.flash-icon { font-size: 5.5rem; animation: flashPop 0.4s cubic-bezier(0.175,0.885,0.32,1.275); }\n.flash-msg {\n font-family: var(--font-display);\n font-size: 2rem;\n padding: 10px 30px;\n border-radius: 50px;\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n}\n.flash-msg.good { background: var(--correct); color: white; }\n.flash-msg.bad { background: var(--wrong); color: white; }\n.flash-hint { font-weight: 700; color: #555; font-size: 1rem; }\n.flash-stars-row { font-size: 2rem; letter-spacing: 6px; }\n.flash-next-btn {\n border: none; cursor: pointer;\n background: var(--text-dark); color: white;\n font-family: var(--font-body); font-weight: 800; font-size: 1.1rem;\n padding: 14px 38px; border-radius: 50px;\n box-shadow: 0 5px 0 rgba(0,0,0,0.2);\n transition: transform 0.1s;\n margin-top: 8px;\n}\n.flash-next-btn:active { transform: scale(0.96); }\n@keyframes flashPop { from{transform:scale(0.4) rotate(-10deg);opacity:0} to{transform:scale(1) rotate(0deg);opacity:1} }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n LEVEL COMPLETE SCREEN\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#screen-win { gap: 16px; }\n.win-card {\n background: var(--card);\n border-radius: var(--radius-lg);\n padding: 36px 28px;\n text-align: center;\n max-width: 420px; width: 100%;\n box-shadow: var(--shadow-card);\n animation: winEntrance 0.65s cubic-bezier(0.175,0.885,0.32,1.275);\n}\n@keyframes winEntrance { from{transform:scale(0.6) rotate(-5deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }\n.win-trophy { font-size: 5.5rem; display: block; animation: trophySpin 0.8s ease-out; }\n@keyframes trophySpin { from{transform:rotate(-25deg) scale(0.7)} to{transform:rotate(0) scale(1)} }\n.win-title {\n font-family: var(--font-display);\n font-size: clamp(1.8rem,7vw,2.8rem);\n color: var(--accent1);\n margin: 10px 0 6px;\n}\n.win-stars { font-size: 2.6rem; letter-spacing: 7px; margin: 8px 0; }\n.win-info { font-weight: 700; color: var(--text-mid); font-size: 0.95rem; margin-bottom: 24px; }\n.win-btns { display: flex; flex-direction: column; gap: 10px; }\n.win-btn {\n border: none; cursor: pointer;\n border-radius: 50px; padding: 15px 24px;\n font-family: var(--font-body); font-weight: 800; font-size: 1.05rem;\n color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.18);\n box-shadow: 0 5px 0 rgba(0,0,0,0.18);\n transition: transform 0.12s;\n}\n.win-btn:hover { transform: translateY(-3px); }\n.win-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.18); }\n.wb1 { background: linear-gradient(135deg,#f6d365,#fda085); }\n.wb2 { background: linear-gradient(135deg,#4facfe,#00f2fe); }\n.wb3 { background: linear-gradient(135deg,#a18cd1,#fbc2eb); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CONFETTI\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.conf {\n position: fixed; pointer-events: none; z-index: 300;\n width: 11px; height: 11px; border-radius: 3px;\n animation: confDrop 2.8s ease-in forwards;\n}\n@keyframes confDrop {\n 0% { transform: translateY(-30px) rotate(0deg); opacity: 1; }\n 100%{ transform: translateY(105vh) rotate(600deg); opacity: 0; }\n}\n\n\/* RESPONSIVE *\/\n@media (max-width:380px) {\n .topics-grid { grid-template-columns: repeat(2,1fr); }\n .game-card { padding: 16px 12px; }\n .win-card { padding: 24px 14px; }\n}\n<\/style>\n<\/head>\n<body data-rsssl=1>\n\n<!-- Background bubbles -->\n<div class=\"bubbles-bg\" id=\"bubbles-bg\"><\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \ud83c\udfe0 HOME SCREEN\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"screen\" id=\"screen-home\">\n <div id=\"mascot-wrap\">\n <div class=\"owl\">\n <div class=\"owl-body\">\ud83e\udd89<\/div>\n <div class=\"owl-blink\">\ud83d\ude0a<\/div>\n <\/div>\n <div class=\"speech-bubble\" id=\"mascot-txt\">Hi! I’m Blinky! \ud83d\udc4b<br>Pick a topic to start!<\/div>\n <\/div>\n\n <h1 class=\"home-title\">Bubbly<br>English<\/h1>\n <p class=\"home-tagline\">\ud83e\udee7 Learn \u2022 Play \u2022 Grow \ud83e\udee7<\/p>\n\n <div class=\"topics-grid\">\n <button class=\"topic-card tc-colors\" onclick=\"startGame('colors')\" >\n <span class=\"t-icon\">\ud83c\udfa8<\/span> Colors\n <\/button>\n <button class=\"topic-card tc-numbers\" onclick=\"startGame('numbers')\" >\n <span class=\"t-icon\">\ud83d\udd22<\/span> Numbers\n <\/button>\n <button class=\"topic-card tc-animals\" onclick=\"startGame('animals')\" >\n <span class=\"t-icon\">\ud83d\udc3e<\/span> Animals\n <\/button>\n <button class=\"topic-card tc-objects\" onclick=\"startGame('objects')\" >\n <span class=\"t-icon\">\ud83c\udf81<\/span> Objects\n <\/button>\n <button class=\"topic-card tc-greetings\" onclick=\"startGame('greetings')\">\n <span class=\"t-icon\">\ud83d\udc4b<\/span> Greetings\n <\/button>\n <\/div>\n\n <div class=\"stars-banner\">\n \u2b50 Total stars: <span id=\"home-stars\">0<\/span>\n <\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \ud83c\udfae GAME SCREEN\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"screen hidden\" id=\"screen-game\">\n <div class=\"topbar\">\n <button class=\"btn-back\" onclick=\"goHome()\">\u2190 Back<\/button>\n <div class=\"topbar-stars\">\u2b50 <span id=\"bar-stars\">0<\/span><\/div>\n <div class=\"progress-track\">\n <div class=\"progress-fill\" id=\"prog\" style=\"width:0%\"><\/div>\n <\/div>\n <\/div>\n <div id=\"game-area\" style=\"width:100%;max-width:520px;\"><\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \ud83c\udfc6 WIN SCREEN\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"screen hidden\" id=\"screen-win\">\n <div class=\"win-card\">\n <span class=\"win-trophy\">\ud83c\udfc6<\/span>\n <h2 class=\"win-title\" id=\"win-title\">Brilliant!<\/h2>\n <div class=\"win-stars\" id=\"win-stars\">\u2b50\u2b50\u2b50<\/div>\n <p class=\"win-info\" id=\"win-info\">You got 6 of 6 right!<\/p>\n <div class=\"win-btns\">\n <button class=\"win-btn wb1\" onclick=\"replayTopic()\">\ud83d\udd04 Play Again<\/button>\n <button class=\"win-btn wb2\" onclick=\"nextMode()\">\u23ed\ufe0f Next Game Mode<\/button>\n <button class=\"win-btn wb3\" onclick=\"goHome()\">\ud83c\udfe0 Choose Topic<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \u26a1 FLASH FEEDBACK (instant pop-up)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div id=\"flash\">\n <div class=\"flash-icon\" id=\"flash-icon\">\ud83c\udf89<\/div>\n <div class=\"flash-msg\" id=\"flash-msg\">Correct!<\/div>\n <div class=\"flash-hint\" id=\"flash-hint\"><\/div>\n <div class=\"flash-stars-row\" id=\"flash-stars\"><\/div>\n <button class=\"flash-next-btn\" onclick=\"closeFlash()\">Next \u27a1\ufe0f<\/button>\n<\/div>\n\n<script>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DATA BANK\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst BANK = {\n colors: [\n {w:'Red', e:'\ud83d\udfe5', h:'Like strawberries! \ud83c\udf53'},\n {w:'Blue', e:'\ud83d\udfe6', h:'Like the ocean! \ud83c\udf0a'},\n {w:'Green', e:'\ud83d\udfe9', h:'Like a tree! \ud83c\udf33'},\n {w:'Yellow', e:'\ud83d\udfe8', h:'Like a banana! \ud83c\udf4c'},\n {w:'Orange', e:'\ud83d\udfe7', h:'Like a pumpkin! \ud83c\udf83'},\n {w:'Purple', e:'\ud83d\udfea', h:'Like lavender! \ud83d\udc9c'},\n ],\n numbers: [\n {w:'One', e:'1\ufe0f\u20e3', h:'Hold up 1 finger! \u261d\ufe0f'},\n {w:'Two', e:'2\ufe0f\u20e3', h:'You have 2 eyes! \ud83d\udc40'},\n {w:'Three', e:'3\ufe0f\u20e3', h:'A triangle has 3 sides! \ud83d\udd3a'},\n {w:'Four', e:'4\ufe0f\u20e3', h:'A cat has 4 legs! \ud83d\udc31'},\n {w:'Five', e:'5\ufe0f\u20e3', h:'High five! \ud83d\udd90\ufe0f'},\n {w:'Six', e:'6\ufe0f\u20e3', h:'6 sides on a dice! \ud83c\udfb2'},\n {w:'Seven', e:'7\ufe0f\u20e3', h:'7 colors in a rainbow! \ud83c\udf08'},\n {w:'Eight', e:'8\ufe0f\u20e3', h:'A spider has 8 legs! \ud83d\udd77\ufe0f'},\n {w:'Nine', e:'9\ufe0f\u20e3', h:'9 lives of a cat! \ud83d\udc08'},\n {w:'Ten', e:'\ud83d\udd1f', h:'You have 10 fingers! \ud83d\ude4c'},\n ],\n animals: [\n {w:'Dog', e:'\ud83d\udc36', h:'Woof! Dogs are loyal! \ud83e\uddb4'},\n {w:'Cat', e:'\ud83d\udc31', h:'Purr! Cats love to sleep! \ud83d\ude34'},\n {w:'Bird', e:'\ud83d\udc26', h:'Tweet tweet! Birds can fly! \ud83d\udd4a\ufe0f'},\n {w:'Fish', e:'\ud83d\udc1f', h:'Splash! Fish swim in water! \ud83d\udca7'},\n {w:'Rabbit', e:'\ud83d\udc30', h:'Hop hop hop! \ud83e\udd55'},\n {w:'Elephant', e:'\ud83d\udc18', h:'The biggest land animal! \ud83c\udf0d'},\n ],\n objects: [\n {w:'Apple', e:'\ud83c\udf4e', h:'An apple a day keeps the doctor away! \ud83d\udc68\u200d\u2695\ufe0f'},\n {w:'Ball', e:'\u26bd', h:'Let\\'s kick it! \u26bd'},\n {w:'Car', e:'\ud83d\ude97', h:'Vroom vroom! \ud83c\udfc1'},\n {w:'House', e:'\ud83c\udfe0', h:'Home sweet home! \ud83c\udf38'},\n {w:'Book', e:'\ud83d\udcda', h:'Reading is power! \ud83d\udca1'},\n {w:'Star', e:'\u2b50', h:'Shine bright! \u2728'},\n ],\n greetings: [\n {w:'Hello', e:'\ud83d\udc4b', h:'Say hi to everyone!'},\n {w:'Goodbye', e:'\ud83d\ude4b', h:'See you later!'},\n {w:'Thank you', e:'\ud83d\ude4f', h:'Always be polite!'},\n {w:'Please', e:'\ud83d\ude0a', h:'The magic word!'},\n {w:'Yes', e:'\u2705', h:'That\\'s right!'},\n {w:'No', e:'\u274c', h:'Not this one!'},\n ],\n};\n\nconst TOPICS = Object.keys(BANK);\nconst MODES = ['choice', 'audio', 'drag'];\n\nconst CORRECT_MSGS = ['Amazing! \ud83c\udf89','Correct! \ud83c\udf1f','Super! \u2728','Brilliant! \ud83c\udfc6','Perfect! \ud83d\udc8e','Great job! \ud83d\udc4f'];\nconst WRONG_MSGS = ['Try again! \ud83d\udcaa','Oops! \ud83d\ude05','Almost! \ud83e\udd14','Not quite! \ud83d\ude48'];\nconst MASCOT_LINES = [\n \"You got this! \ud83c\udf1f\",\"Let's go! \ud83d\ude80\",\"You're so smart! \ud83e\udde0\",\n \"Keep trying! \ud83d\udcaa\",\"Amazing work! \ud83c\udf89\",\"I believe in you! \u2764\ufe0f\",\n];\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n STATE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nlet S = {\n topic: 'colors',\n modeIdx: 0,\n mode: 'choice',\n queue: [],\n cur: null,\n correct: 0,\n total: 0,\n stars: +localStorage.getItem('bub_stars') || 0,\n dragData: null,\n touchWord: null,\n touchGhost: null,\n};\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n UTILS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst $ = id => document.getElementById(id);\nconst shuffle = a => [...a].sort(() => Math.random() - 0.5);\nconst pick = (a,n) => shuffle(a).slice(0,n);\nconst rand = a => a[Math.floor(Math.random() * a.length)];\n\nfunction speak(txt) {\n if (!window.speechSynthesis) return;\n window.speechSynthesis.cancel();\n const u = new SpeechSynthesisUtterance(txt);\n u.lang = 'en-US'; u.rate = 0.78; u.pitch = 1.15;\n speechSynthesis.speak(u);\n}\n\nfunction chime(type) {\n try {\n const ac = new (window.AudioContext || window.webkitAudioContext)();\n const o = ac.createOscillator();\n const g = ac.createGain();\n o.connect(g); g.connect(ac.destination);\n if (type === 'good') {\n o.frequency.setValueAtTime(523.25, ac.currentTime);\n o.frequency.setValueAtTime(659.25, ac.currentTime + 0.12);\n o.frequency.setValueAtTime(783.99, ac.currentTime + 0.24);\n g.gain.setValueAtTime(0.2, ac.currentTime);\n g.gain.exponentialRampToValueAtTime(0.001, ac.currentTime + 0.6);\n o.start(); o.stop(ac.currentTime + 0.6);\n } else {\n o.type = 'sawtooth';\n o.frequency.setValueAtTime(250, ac.currentTime);\n o.frequency.setValueAtTime(160, ac.currentTime + 0.18);\n g.gain.setValueAtTime(0.15, ac.currentTime);\n g.gain.exponentialRampToValueAtTime(0.001, ac.currentTime + 0.35);\n o.start(); o.stop(ac.currentTime + 0.35);\n }\n } catch(e) {}\n}\n\nfunction saveStars() {\n localStorage.setItem('bub_stars', S.stars);\n $('home-stars').textContent = S.stars;\n $('bar-stars').textContent = S.stars;\n}\n\nfunction setMascot(txt) {\n const el = $('mascot-txt');\n if (!el) return;\n el.style.animation = 'none';\n void el.offsetWidth;\n el.innerHTML = txt;\n el.style.animation = '';\n}\n\nfunction showScreen(id) {\n document.querySelectorAll('.screen').forEach(s => s.classList.add('hidden'));\n $(id).classList.remove('hidden');\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n BACKGROUND BUBBLES (generates randomly)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n(function initBubbles() {\n const bg = $('bubbles-bg');\n for (let i = 0; i < 18; i++) {\n const b = document.createElement('div');\n b.className = 'bub';\n const sz = 30 + Math.random() * 80;\n b.style.width = sz + 'px';\n b.style.height = sz + 'px';\n b.style.left = Math.random() * 100 + 'vw';\n b.style.bottom = -sz + 'px';\n b.style.animationDuration = 12 + Math.random() * 18 + 's';\n b.style.animationDelay = Math.random() * 14 + 's';\n b.style.animationTimingFunction = 'linear';\n bg.appendChild(b);\n }\n})();\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVIGATION\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nfunction goHome() {\n speechSynthesis && speechSynthesis.cancel();\n $('home-stars').textContent = S.stars;\n setMascot('Hi! I\\'m Blinky! \ud83d\udc4b<br>Pick a topic to start!');\n showScreen('screen-home');\n}\n\nfunction startGame(topic) {\n S.topic = topic;\n S.modeIdx = 0;\n S.correct = 0;\n launchMode();\n}\n\nfunction launchMode() {\n S.mode = MODES[S.modeIdx % MODES.length];\n const items = BANK[S.topic];\n S.queue = shuffle(items).slice(0, Math.min(6, items.length));\n S.total = S.queue.length;\n S.correct = 0;\n updateProg();\n $('bar-stars').textContent = S.stars;\n showScreen('screen-game');\n S.mode === 'drag' ? renderDrag() : nextQ();\n}\n\nfunction replayTopic() { S.modeIdx = 0; startGame(S.topic); }\nfunction nextMode() { S.modeIdx++; launchMode(); }\n\nfunction updateProg() {\n $('prog').style.width = (S.correct \/ S.total * 100) + '%';\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MODE 1 \u2014 PICTURE CHOICE\n MODE 2 \u2014 AUDIO LISTEN\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nfunction nextQ() {\n if (!S.queue.length) { endRound(); return; }\n S.cur = S.queue.shift();\n\n const pool = BANK[S.topic];\n const wrongs = pick(pool.filter(x => x.w !== S.cur.w), 3);\n const options = shuffle([S.cur, ...wrongs]);\n const isAudio = S.mode === 'audio';\n\n const wordLine = isAudio\n ? `<div class=\"audio-play-area\">\n <button class=\"big-speaker\" onclick=\"speak('${S.cur.w}')\" id=\"big-spk\">\ud83d\udd0a<\/button>\n <div class=\"audio-prompt\">Tap \ud83d\udd0a then pick the right picture!<\/div>\n <\/div>`\n : `<div class=\"word-hero\">\n <span>${S.cur.w}<\/span>\n <button class=\"btn-speak\" onclick=\"speak('${S.cur.w}')\">\ud83d\udd0a<\/button>\n <\/div>`;\n\n const inst = isAudio\n ? '\ud83d\udc42 Listen and tap the correct picture!'\n : '\ud83d\udc46 Tap the picture that matches the word!';\n\n $('game-area').innerHTML = `\n <div class=\"game-card\">\n <p class=\"game-instruction\">${inst}<\/p>\n ${wordLine}\n <div class=\"choice-grid\" id=\"cg\">\n ${options.map(o => `\n <button class=\"choice-tile\"\n data-word=\"${o.w}\"\n onclick=\"checkChoice(this,'${o.w}','${S.cur.w}')\">\n <span class=\"tile-emoji\">${o.e}<\/span>\n <span>${isAudio ? '' : o.w}<\/span>\n <\/button>`).join('')}\n <\/div>\n <\/div>`;\n\n if (isAudio) setTimeout(() => speak(S.cur.w), 500);\n}\n\nfunction checkChoice(btn, chosen, correct) {\n const tiles = document.querySelectorAll('.choice-tile');\n tiles.forEach(t => t.disabled = true);\n\n if (chosen === correct) {\n btn.classList.add('state-correct');\n chime('good');\n S.correct++; S.stars++;\n saveStars(); updateProg();\n flashFeedback(true, correct, 1);\n } else {\n btn.classList.add('state-wrong');\n chime('bad');\n \/\/ Reveal correct\n tiles.forEach(t => { if (t.dataset.word === correct) t.classList.add('state-correct'); });\n flashFeedback(false, correct, 0, S.cur.h);\n }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MODE 3 \u2014 DRAG & DROP\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nlet matched = 0;\n\nfunction renderDrag() {\n const items = pick(BANK[S.topic], Math.min(4, BANK[S.topic].length));\n S.dragData = items;\n matched = 0;\n S.total = items.length;\n S.correct = 0;\n\n $('game-area').innerHTML = `\n <div class=\"game-card\">\n <p class=\"game-instruction\">\ud83d\udd90\ufe0f Drag the word onto the matching picture!<\/p>\n <div class=\"drag-zone\" id=\"dz\">\n ${items.map(it => `\n <div class=\"drop-target\" id=\"dt-${it.w}\" data-word=\"${it.w}\"\n ondragover=\"ev.preventDefault()\" ondrop=\"onDrop(event,'${it.w}')\"\n ontouchend=\"onTouchDrop(event,'${it.w}')\">\n <span>${it.e}<\/span>\n <span class=\"drop-label\">drop here<\/span>\n <\/div>`).join('')}\n <\/div>\n <div class=\"word-bank\" id=\"wb\">\n ${shuffle(items).map(it => `\n <div class=\"word-chip\" id=\"wc-${it.w}\" draggable=\"true\" data-word=\"${it.w}\"\n ondragstart=\"onDragStart(event)\"\n ontouchstart=\"onTouchStart(event)\"\n ontouchmove=\"onTouchMove(event)\">\n ${it.w}\n <\/div>`).join('')}\n <\/div>\n <\/div>`;\n $('bar-stars').textContent = S.stars;\n updateProg();\n}\n\nlet dragWord = null;\nfunction onDragStart(e) { dragWord = e.currentTarget.dataset.word; }\nfunction onDrop(e, target) {\n e.preventDefault();\n if (!dragWord) return;\n handleMatch(dragWord, target);\n dragWord = null;\n}\n\n\/\/ TOUCH DRAG\nlet tchEl = null, tchGhost = null;\nfunction onTouchStart(e) {\n tchEl = e.currentTarget;\n const t = e.touches[0];\n tchGhost = tchEl.cloneNode(true);\n tchGhost.style.cssText = `position:fixed;z-index:999;opacity:0.88;pointer-events:none;\n padding:10px 22px;background:linear-gradient(135deg,#a18cd1,#6c5ce7);color:white;\n font-family:'Bubblegum Sans',cursive;font-size:1.1rem;border-radius:50px;\n left:${t.clientX - 50}px;top:${t.clientY - 24}px;`;\n document.body.appendChild(tchGhost);\n}\nfunction onTouchMove(e) {\n if (!tchGhost) return;\n e.preventDefault();\n const t = e.touches[0];\n tchGhost.style.left = (t.clientX - 50) + 'px';\n tchGhost.style.top = (t.clientY - 24) + 'px';\n}\nfunction onTouchDrop(e, target) {\n if (tchGhost) { tchGhost.remove(); tchGhost = null; }\n if (!tchEl) return;\n const w = tchEl.dataset.word;\n tchEl = null;\n handleMatch(w, target);\n}\n\nfunction handleMatch(word, target) {\n const isMatch = word === target;\n const dt = $('dt-' + target);\n const wc = $('wc-' + word);\n if (isMatch) {\n dt.classList.add('matched');\n dt.querySelector('.drop-label').textContent = '\u2705 ' + word;\n if (wc) wc.classList.add('used');\n chime('good');\n speak(word + '! Correct!');\n matched++; S.correct++; S.stars++;\n saveStars(); updateProg();\n if (matched === S.dragData.length) setTimeout(endRound, 600);\n } else {\n chime('bad');\n dt.style.animation = 'tileWrong 0.45s ease';\n setTimeout(() => dt.style.animation = '', 500);\n }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FLASH FEEDBACK\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nlet afterFlash = null;\n\nfunction flashFeedback(ok, word, stars, hint='') {\n const fl = $('flash');\n $('flash-icon').textContent = ok\n ? rand(['\ud83c\udf89','\ud83c\udf1f','\ud83e\udd73','\u2728','\ud83c\udfc6','\ud83d\udc8e'])\n : rand(['\ud83d\ude05','\ud83d\ude2e','\ud83e\udd14','\ud83d\udcad']);\n $('flash-msg').textContent = ok ? rand(CORRECT_MSGS) : rand(WRONG_MSGS);\n $('flash-msg').className = 'flash-msg ' + (ok ? 'good' : 'bad');\n $('flash-hint').textContent = ok ? '' : ('Hint: ' + hint);\n $('flash-stars').textContent= ok ? '\u2b50' : '';\n fl.className = 'show ' + (ok ? 'correct-flash' : 'wrong-flash');\n if (ok) speak(rand(['Great job!', 'Brilliant!', 'Amazing!', 'Super!']) + ' ' + word);\n else speak('The answer is ' + word + '. ' + hint);\n afterFlash = () => { if(S.mode !== 'drag') nextQ(); };\n}\n\nfunction closeFlash() {\n $('flash').className = '';\n if (afterFlash) { afterFlash(); afterFlash = null; }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n END OF ROUND\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nfunction endRound() {\n const pct = S.correct \/ S.total;\n const earned = pct >= 0.9 ? 3 : pct >= 0.6 ? 2 : pct >= 0.3 ? 1 : 0;\n const titles = {3:'Superstar! \ud83c\udf1f',2:'Great job! \ud83c\udf89',1:'Good try! \ud83d\ude0a',0:'Practice more! \ud83d\udcaa'};\n $('win-title').textContent = titles[earned];\n $('win-stars').textContent = '\u2b50'.repeat(earned) + '\u2606'.repeat(3-earned);\n $('win-info').textContent = `You got ${S.correct} of ${S.total} correct!`;\n if (earned >= 2) speak('Congratulations! You did amazing!');\n else speak('Good effort! Keep practicing and you will be a star!');\n fireworks();\n showScreen('screen-win');\n S.modeIdx++;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FIREWORKS \/ CONFETTI\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nfunction fireworks() {\n const cols = ['#ff6fb0','#ffe066','#5bc8f5','#7ee8a2','#a18cd1','#fda085'];\n for (let i = 0; i < 55; i++) {\n const c = document.createElement('div');\n c.className = 'conf';\n c.style.left = Math.random() * 100 + 'vw';\n c.style.top = '-16px';\n c.style.background = rand(cols);\n c.style.animationDelay = Math.random() * 1.8 + 's';\n c.style.transform = `rotate(${Math.random()*360}deg)`;\n c.style.borderRadius = Math.random() > 0.5 ? '50%' : '3px';\n document.body.appendChild(c);\n setTimeout(() => c.remove(), 3800);\n }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MASCOT ROTATION\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nsetInterval(() => {\n setMascot(rand(MASCOT_LINES));\n}, 7000);\n\n\/\/ Init display\n$('home-stars').textContent = S.stars;\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Hice un JUEGO en MINUTOS con CLAUDE IMAGINE\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/wyXTJmkPh9E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Cr\u00e9ditos:<\/p>\n\n\n\n<p><strong>Autores:<\/strong> <a href=\"https:\/\/niixer.com\/?s=Laura+Valentina+Rodriguez+Lopez\">Laura Valentina Rodriguez Lopez<\/a> \u2013 <a href=\"https:\/\/niixer.com\/?s=Kevin+David+Castillo+Mu%C3%B1oz\">Kevin David Castillo Mu\u00f1oz<\/a><\/p>\n\n\n\n<p><strong>Editores:<\/strong> <a href=\"https:\/\/niixer.com\/?s=Alejandro+Rodriguez\">Alejandro Rodriguez<\/a> \u2013 <a href=\"https:\/\/niixer.com\/?s=Brayan+Miranda\">Brayan Miranda<\/a> \u2013 <a href=\"https:\/\/niixer.com\/?s=Carlos+Iv%C3%A1n+Pinz%C3%B3n+Romero\">Carlos Iv\u00e1n Pinz\u00f3n Romero<\/a><\/p>\n\n\n\n<p><strong>C\u00f3digo:<\/strong> <a href=\"https:\/\/niixer.com\/?s=UCIA1G-8\">UCIA1G-8<\/a><\/p>\n\n\n\n<p><strong>Universidad:<\/strong> <a href=\"https:\/\/www.ucentral.edu.co\/\">Universidad Central<\/a><\/p>\n\n\n\n<p>Fuentes:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><br>Consejo de Europa. (2001). Marco Com\u00fan Europeo de Referencia para las Lenguas: aprendizaje, ense\u00f1anza, evaluaci\u00f3n (MCER). Estrasburgo: Divisi\u00f3n de Pol\u00edticas Ling\u00fc\u00edsticas.<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">Krashen, S. D. (1982). Principles and Practice in Second Language Acquisition. Oxford: Pergamon Press.<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">Prensky, M. (2001). Digital Game-Based Learning. New York: McGraw-Hill.<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n El aprendizaje del ingl\u00e9s desde una edad temprana ofrece importantes beneficios tanto cognitivos como sociales. Los estudios pedag\u00f3gicos a nivel internacional indican que los ni\u00f1os de entre 5 y 8 a\u00f1os est\u00e1n en una etapa crucial para el desarrollo del lenguaje, donde la incorporaci\u00f3n de un segundo idioma ocurre de manera natural, intuitiva y perdurable.En este marco, Bubbly English aparece como una soluci\u00f3n innovadora ante la demanda de recursos digitales educativos que sean accesibles, motivadores y con un enfoque pedag\u00f3gico s\u00f3lido. Este juego utiliza el poder delSeguir Leyendo<\/p>\n","protected":false},"author":1154,"featured_media":77227,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[30,77],"tags":[1058,4102,4114,31,66],"class_list":["post-80928","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-niixer","category-videojuegos","tag-educacion-2","tag-ingles","tag-ninos","tag-tecnologia","tag-videojuegos"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bubbly English: Ingl\u00e9s Interactivo con IA – Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos<\/title>\n<meta name=\"description\" content=\"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Bubbly English: Ingl\u00e9s Interactivo con IA\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bubbly English: Ingl\u00e9s Interactivo con IA – Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos\" \/>\n<meta property=\"og:description\" content=\"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Bubbly English: Ingl\u00e9s Interactivo con IA\" \/>\n<meta property=\"og:url\" content=\"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/niixer\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-04T23:16:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-05T00:15:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/02\/Claude-1-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Laura Valentina Rodriguez Lopez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Laura Valentina Rodriguez Lopez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bubbly English: Ingl\u00e9s Interactivo con IA – Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","description":"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Bubbly English: Ingl\u00e9s Interactivo con IA","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/","og_locale":"es_ES","og_type":"article","og_title":"Bubbly English: Ingl\u00e9s Interactivo con IA – Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","og_description":"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Bubbly English: Ingl\u00e9s Interactivo con IA","og_url":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/","og_site_name":"Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","article_publisher":"https:\/\/www.facebook.com\/niixer\/","article_published_time":"2026-03-04T23:16:16+00:00","article_modified_time":"2026-03-05T00:15:51+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/02\/Claude-1-1.webp","type":"image\/webp"}],"author":"Laura Valentina Rodriguez Lopez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Laura Valentina Rodriguez Lopez","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/#article","isPartOf":{"@id":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/"},"author":{"name":"Laura Valentina Rodriguez Lopez","@id":"https:\/\/niixer.com\/#\/schema\/person\/2d54972feb3d249cfd5f2170c787c44e"},"headline":"Bubbly English: Ingl\u00e9s Interactivo con IA","datePublished":"2026-03-04T23:16:16+00:00","dateModified":"2026-03-05T00:15:51+00:00","mainEntityOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/"},"wordCount":866,"publisher":{"@id":"https:\/\/niixer.com\/#organization"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/02\/Claude-1-1.webp","keywords":["Educacion","Ingles","Ni\u00f1os","tecnolog\u00eda","Videojuegos"],"articleSection":["Niixer","Videojuegos"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/","url":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/","name":"Bubbly English: Ingl\u00e9s Interactivo con IA – Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos","isPartOf":{"@id":"https:\/\/niixer.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/#primaryimage"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/02\/Claude-1-1.webp","datePublished":"2026-03-04T23:16:16+00:00","dateModified":"2026-03-05T00:15:51+00:00","description":"En Portal de noticias de tecnolog\u00eda, Realidad Virtual, Aumentada y Mixta, Videojuegos encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Bubbly English: Ingl\u00e9s Interactivo con IA","breadcrumb":{"@id":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/#primaryimage","url":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/02\/Claude-1-1.webp","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/02\/Claude-1-1.webp","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/niixer.com\/index.php\/2026\/03\/04\/bubbly-english-videojuego-educativo-interactivo-desarrollado-en-claude-para-el-aprendizaje-del-ingles-en-ninos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/niixer.com\/"},{"@type":"ListItem","position":2,"name":"Bubbly English: Ingl\u00e9s Interactivo con IA"}]},{"@type":"WebSite","@id":"https:\/\/niixer.com\/#website","url":"https:\/\/niixer.com\/","name":"Portal de noticias de tecnolog\u00eda, ciencia, Android, iOS, Realidad Virtual, Aumentada y Mixta, Videojuegos, computadores, todo lo mas reciente en tecnolog\u00eda","description":"Portal de noticias de tecnolog\u00eda","publisher":{"@id":"https:\/\/niixer.com\/#organization"},"alternateName":"Niixer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/niixer.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/niixer.com\/#organization","name":"Niixer","alternateName":"Niixer.com","url":"https:\/\/niixer.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/","url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","width":140,"height":140,"caption":"Niixer"},"image":{"@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/niixer\/","https:\/\/www.instagram.com\/niixer.tecnologia\/"]},{"@type":"Person","@id":"https:\/\/niixer.com\/#\/schema\/person\/2d54972feb3d249cfd5f2170c787c44e","name":"Laura Valentina Rodriguez Lopez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/435c770ee8664b07e3f8b71ecf6d6832a81f3b759426bf6752a56f85db0ca960?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/435c770ee8664b07e3f8b71ecf6d6832a81f3b759426bf6752a56f85db0ca960?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/435c770ee8664b07e3f8b71ecf6d6832a81f3b759426bf6752a56f85db0ca960?s=96&d=mm&r=g","caption":"Laura Valentina Rodriguez Lopez"},"sameAs":["http:\/\/www.niixer.com"],"url":"https:\/\/niixer.com\/index.php\/author\/lrodriguezl7\/"}]}},"jetpack_featured_media_url":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/02\/Claude-1-1.webp","_links":{"self":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/80928","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/users\/1154"}],"replies":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/comments?post=80928"}],"version-history":[{"count":6,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/80928\/revisions"}],"predecessor-version":[{"id":82397,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/80928\/revisions\/82397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media\/77227"}],"wp:attachment":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media?parent=80928"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/categories?post=80928"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/tags?post=80928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}