{"id":331,"date":"2026-08-17T22:31:53","date_gmt":"2026-08-17T22:31:53","guid":{"rendered":"https:\/\/eppaltamirano.com.mx\/?p=331"},"modified":"2026-08-18T10:37:38","modified_gmt":"2026-08-18T10:37:38","slug":"juego-1-primaria-ingles","status":"publish","type":"post","link":"https:\/\/eppaltamirano.com.mx\/index.php\/2026\/08\/17\/juego-1-primaria-ingles\/","title":{"rendered":"Juego 1\u00b0 Primaria | Ingles | El Arco\u00edris M\u00e1gico"},"content":{"rendered":"<h1 class=\"has-text-align-center has-link-color wp-elements-d6703031af5a64327806478c49ae42a3 wp-block-site-title has-text-color has-pale-cyan-blue-color\"><a href=\"https:\/\/eppaltamirano.com.mx\" target=\"_self\" rel=\"home\">Escuela Primaria Ignacio Altamirano<\/a><\/h1>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\">\u00a1Bienvenidos al Abecedario M\u00e1gico! Un juego divertido donde los ni\u00f1os de primer grado pueden practicar el abecedario arrastrando las letras a su lugar correcto. Ideal para reforzar el aprendizaje de la lectoescritura en casa o en la escuela.<\/p>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:120px\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<!-- ============================================================\n     EL ARCO\u00cdRIS M\u00c1GICO \u2014 Escuela Ignacio Altamirano\n     Juego de colores en ingl\u00e9s para 1.\u00ba de Primaria (6 a\u00f1os)\n     INSTRUCCIONES: pega este bloque completo dentro de un bloque\n     [HTML personalizado] de Gutenberg. No requiere subir archivos\n     ni usar iframe. Todo el CSS y JS est\u00e1 encapsulado dentro de\n     #arcoiris-magico-widget para no afectar el resto del sitio.\n     ============================================================ -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Baloo+2:wght@500;700;800&#038;family=Nunito:wght@600;700;800&#038;display=swap\" rel=\"stylesheet\">\n\n<div id=\"arcoiris-magico-widget\">\n\n<style>\n  #arcoiris-magico-widget{\n    --sky-light:#eaf6ff;\n    --sky-blue:#bfe4ff;\n    --cloud-white:#ffffff;\n    --text-dark:#2b3a55;\n    --am-red:#ff5d5d;\n    --am-orange:#ff9d3d;\n    --am-yellow:#ffd23f;\n    --am-green:#3ee68f;\n    --am-blue:#4d9dff;\n    --am-purple:#b06bef;\n    --card-radius:28px;\n\n    position:relative;\n    max-width:600px;\n    margin:0 auto;\n    padding:24px;\n    border-radius:32px;\n    background:linear-gradient(180deg, var(--sky-light), var(--sky-blue));\n    font-family:'Nunito', sans-serif;\n    color:var(--text-dark);\n    overflow:hidden;\n    box-sizing:border-box;\n  }\n  #arcoiris-magico-widget *{box-sizing:border-box;}\n  #arcoiris-magico-widget h1,\n  #arcoiris-magico-widget p,\n  #arcoiris-magico-widget ul,\n  #arcoiris-magico-widget li{margin:0; padding:0;}\n\n  #arcoiris-magico-widget .am-clouds{\n    position:absolute;\n    inset:0;\n    z-index:0;\n    pointer-events:none;\n    border-radius:32px;\n    overflow:hidden;\n  }\n  #arcoiris-magico-widget .am-cloud{\n    position:absolute;\n    font-size:2.2rem;\n    opacity:.55;\n    animation:am-drift 18s linear infinite;\n  }\n  @keyframes am-drift{\n    from{transform:translateX(-10%);}\n    to{transform:translateX(110%);}\n  }\n\n  #arcoiris-magico-widget .am-screen{\n    position:relative;\n    z-index:1;\n    width:100%;\n    background:rgba(255,255,255,0.65);\n    border:2px solid rgba(255,255,255,0.9);\n    border-radius:24px;\n    padding:32px 24px;\n    text-align:center;\n    box-shadow:0 20px 50px rgba(80,110,160,0.25);\n    animation:am-fadeUp .5s ease;\n    backdrop-filter:blur(3px);\n  }\n  @keyframes am-fadeUp{\n    from{opacity:0; transform:translateY(18px);}\n    to{opacity:1; transform:translateY(0);}\n  }\n\n  #arcoiris-magico-widget .am-hidden{display:none !important;}\n\n  #arcoiris-magico-widget .am-header-badge{\n    display:inline-flex;\n    flex-direction:column;\n    align-items:center;\n    gap:6px;\n    margin-bottom:16px;\n  }\n  #arcoiris-magico-widget .am-school-name{\n    font-family:'Baloo 2', sans-serif;\n    font-size:0.95rem;\n    font-weight:700;\n    background:rgba(43,58,85,0.08);\n    color:var(--text-dark);\n    padding:6px 16px;\n    border-radius:14px;\n  }\n  #arcoiris-magico-widget .am-grade-age{\n    font-size:0.85rem;\n    background:rgba(43,58,85,0.06);\n    padding:4px 14px;\n    border-radius:12px;\n    opacity:0.85;\n  }\n  #arcoiris-magico-widget .am-creator{\n    font-size:0.8rem;\n    opacity:0.65;\n  }\n\n  #arcoiris-magico-widget h1.am-title{\n    font-family:'Baloo 2', sans-serif;\n    font-size:2rem;\n    margin:0 0 6px;\n    color:#e0762a;\n    text-shadow:0 2px 0 rgba(255,255,255,0.6);\n    line-height:1.2;\n  }\n\n  #arcoiris-magico-widget .am-subtitle{\n    font-size:1.05rem;\n    opacity:.85;\n    margin-bottom:22px;\n    line-height:1.5;\n  }\n\n  #arcoiris-magico-widget .am-rainbow-emoji{\n    font-size:5rem;\n    display:block;\n    margin:6px 0 14px;\n    animation:am-float 3s ease-in-out infinite;\n  }\n  @keyframes am-float{\n    0%,100%{transform:translateY(0) rotate(-3deg);}\n    50%{transform:translateY(-12px) rotate(3deg);}\n  }\n\n  #arcoiris-magico-widget input[type=\"text\"]{\n    width:100%;\n    font-family:'Nunito', sans-serif;\n    font-size:1.2rem;\n    padding:14px 18px;\n    border-radius:18px;\n    border:2px solid rgba(43,58,85,0.15);\n    outline:none;\n    margin-bottom:18px;\n    text-align:center;\n    background:var(--cloud-white);\n    color:var(--text-dark);\n    font-weight:700;\n  }\n\n  #arcoiris-magico-widget .am-btn{\n    font-family:'Baloo 2', sans-serif;\n    font-size:1.15rem;\n    font-weight:700;\n    padding:16px 28px;\n    border:none;\n    border-radius:22px;\n    background:linear-gradient(135deg, var(--am-orange), var(--am-red));\n    color:#fff;\n    cursor:pointer;\n    box-shadow:0 8px 0 rgba(180,70,30,0.35);\n    transition:transform .12s ease, box-shadow .12s ease;\n    min-width:200px;\n  }\n  #arcoiris-magico-widget .am-btn:active{\n    transform:translateY(6px);\n    box-shadow:0 2px 0 rgba(180,70,30,0.35);\n  }\n  #arcoiris-magico-widget .am-btn:hover{filter:brightness(1.05);}\n  #arcoiris-magico-widget .am-btn:disabled{opacity:.5; cursor:not-allowed;}\n\n  #arcoiris-magico-widget .am-rules-list{\n    text-align:left;\n    list-style:none;\n    display:flex;\n    flex-direction:column;\n    gap:10px;\n    margin-bottom:22px;\n  }\n  #arcoiris-magico-widget .am-rules-list li{\n    background:rgba(43,58,85,0.06);\n    padding:12px 16px;\n    border-radius:16px;\n    font-size:1.02rem;\n  }\n\n  #arcoiris-magico-widget .am-hud{\n    display:flex;\n    justify-content:space-between;\n    align-items:center;\n    margin-bottom:18px;\n    font-family:'Baloo 2', sans-serif;\n    font-size:1.1rem;\n  }\n  #arcoiris-magico-widget .am-hud-item{\n    display:flex;\n    align-items:center;\n    gap:6px;\n    background:rgba(43,58,85,0.07);\n    padding:8px 14px;\n    border-radius:16px;\n  }\n\n  #arcoiris-magico-widget .am-progress-track{\n    width:100%;\n    height:16px;\n    background:rgba(43,58,85,0.1);\n    border-radius:10px;\n    margin-bottom:26px;\n    overflow:hidden;\n    display:flex;\n  }\n  #arcoiris-magico-widget .am-progress-fill{\n    height:100%;\n    background:linear-gradient(90deg, var(--am-red), var(--am-orange), var(--am-yellow), var(--am-green), var(--am-blue), var(--am-purple));\n    border-radius:10px;\n    transition:width .4s ease;\n  }\n\n  #arcoiris-magico-widget .am-level-badge{\n    font-size:2.6rem;\n    display:block;\n    margin-bottom:6px;\n  }\n\n  #arcoiris-magico-widget .am-question-card{\n    background:rgba(43,58,85,0.05);\n    border-radius:22px;\n    padding:24px 18px;\n    margin-bottom:22px;\n  }\n\n  #arcoiris-magico-widget .am-object-visual{\n    font-size:4rem;\n    margin-bottom:10px;\n  }\n\n  #arcoiris-magico-widget .am-question-text{\n    font-family:'Baloo 2', sans-serif;\n    font-size:1.4rem;\n    font-weight:700;\n    color:var(--text-dark);\n  }\n\n  #arcoiris-magico-widget .am-options{\n    display:grid;\n    grid-template-columns:repeat(3, 1fr);\n    gap:14px;\n    margin-bottom:8px;\n  }\n\n  #arcoiris-magico-widget .am-option-btn{\n    font-family:'Baloo 2', sans-serif;\n    font-size:1.15rem;\n    font-weight:700;\n    padding:16px 6px;\n    border:none;\n    border-radius:18px;\n    background:rgba(43,58,85,0.08);\n    color:var(--text-dark);\n    cursor:pointer;\n    transition:transform .12s ease, background .2s ease;\n  }\n  #arcoiris-magico-widget .am-option-btn:hover{transform:translateY(-3px); background:rgba(43,58,85,0.16);}\n  #arcoiris-magico-widget .am-option-btn.am-correct{background:var(--am-green); color:#fff;}\n  #arcoiris-magico-widget .am-option-btn.am-incorrect{background:var(--am-red); color:#fff;}\n\n  #arcoiris-magico-widget .am-feedback{\n    min-height:34px;\n    font-family:'Baloo 2', sans-serif;\n    font-size:1.2rem;\n    margin-bottom:6px;\n    color:var(--text-dark);\n  }\n  #arcoiris-magico-widget .am-feedback.am-ok{color:#1e9d63;}\n  #arcoiris-magico-widget .am-feedback.am-bad{color:#d94141;}\n\n  #arcoiris-magico-widget .am-final-stars{\n    font-size:2rem;\n    margin:10px 0;\n    font-family:'Baloo 2', sans-serif;\n  }\n\n  #arcoiris-magico-widget .am-badge-final{\n    font-size:4.5rem;\n    display:block;\n    margin:12px 0;\n    animation:am-float 3s ease-in-out infinite;\n  }\n\n  #arcoiris-magico-widget .am-confetti-piece{\n    position:absolute;\n    width:10px;\n    height:10px;\n    top:-10px;\n    border-radius:2px;\n    animation:am-fall linear forwards;\n    z-index:5;\n  }\n  @keyframes am-fall{\n    to{ transform:translateY(500px) rotate(360deg); opacity:0.3;}\n  }\n\n  @media (max-width:420px){\n    #arcoiris-magico-widget .am-screen{padding:26px 18px;}\n    #arcoiris-magico-widget h1.am-title{font-size:1.6rem;}\n    #arcoiris-magico-widget .am-question-text{font-size:1.15rem;}\n    #arcoiris-magico-widget .am-option-btn{font-size:1rem;}\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    #arcoiris-magico-widget *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}\n  }\n<\/style>\n\n<div class=\"am-clouds\" id=\"am-clouds\"><\/div>\n\n<!-- PORTADA -->\n<div class=\"am-screen\" id=\"am-screen-welcome\">\n  <div class=\"am-header-badge\">\n    <span class=\"am-school-name\">\ud83c\udfeb Escuela Ignacio Altamirano<\/span>\n    <span class=\"am-grade-age\">1.\u00ba de Primaria \u00b7 6 a\u00f1os<\/span>\n    <span class=\"am-creator\">Creaci\u00f3n: Hector G. S\u00e1nchez<\/span>\n  <\/div>\n  <span class=\"am-rainbow-emoji\">\ud83c\udf08<\/span>\n  <h1 class=\"am-title\">El Arco\u00edris M\u00e1gico<\/h1>\n  <p class=\"am-subtitle\">\ud83d\udc4b Hello! Bienvenido(a)!<br>Vamos a jugar y aprender los colores en ingl\u00e9s.<\/p>\n  <p class=\"am-subtitle\" style=\"margin-bottom:8px;\">\u00bfC\u00f3mo te llamas?<\/p>\n  <input type=\"text\" id=\"am-input-name\" placeholder=\"Escribe tu nombre\" maxlength=\"20\">\n  <br>\n  <button class=\"am-btn\" id=\"am-btn-continuar\">CONTINUAR \ud83c\udf08<\/button>\n<\/div>\n\n<!-- PRESENTACION PERSONALIZADA -->\n<div class=\"am-screen am-hidden\" id=\"am-screen-presentacion\">\n  <span class=\"am-rainbow-emoji\">\u2601\ufe0f<\/span>\n  <h1 class=\"am-title\" id=\"am-saludo-nombre\">\u00a1Muy bien!<\/h1>\n  <p class=\"am-subtitle\">\u00a1Qu\u00e9 gusto jugar contigo!<br>Ahora te voy a explicar c\u00f3mo jugar.<\/p>\n  <button class=\"am-btn\" id=\"am-btn-a-reglas\">SIGUIENTE<\/button>\n<\/div>\n\n<!-- REGLAS -->\n<div class=\"am-screen am-hidden\" id=\"am-screen-reglas\">\n  <h1 class=\"am-title\">\ud83d\udcda How to play?<\/h1>\n  <ul class=\"am-rules-list\">\n    <li>1\ufe0f\u20e3 Observa el objeto con atenci\u00f3n.<\/li>\n    <li>2\ufe0f\u20e3 Elige el nombre correcto del color en ingl\u00e9s.<\/li>\n    <li>3\ufe0f\u20e3 Cada acierto pinta una franja del arco\u00edris \ud83c\udf08<\/li>\n    <li>4\ufe0f\u20e3 Completa los 3 niveles para ganar tu insignia \u00abAmigo del Arco\u00edris\u00bb \ud83c\udfc5<\/li>\n  <\/ul>\n  <p class=\"am-subtitle\">Are you ready?<\/p>\n  <button class=\"am-btn\" id=\"am-btn-empezar\">\u00a1EMPEZAR A JUGAR! \ud83c\udf08<\/button>\n<\/div>\n\n<!-- TRANSICION DE NIVEL -->\n<div class=\"am-screen am-hidden\" id=\"am-screen-nivel-intro\">\n  <span class=\"am-level-badge\" id=\"am-nivel-emoji\">\ud83c\udfa8<\/span>\n  <h1 class=\"am-title\" id=\"am-nivel-titulo\">Nivel 1<\/h1>\n  <p class=\"am-subtitle\" id=\"am-nivel-desc\">Colores primarios<\/p>\n  <button class=\"am-btn\" id=\"am-btn-jugar-nivel\">\u00a1A JUGAR! \ud83c\udf08<\/button>\n<\/div>\n\n<!-- JUEGO -->\n<div class=\"am-screen am-hidden\" id=\"am-screen-juego\">\n  <div class=\"am-hud\">\n    <div class=\"am-hud-item\">\ud83c\udf08 <span id=\"am-hud-puntos\">0<\/span><\/div>\n    <div class=\"am-hud-item\" id=\"am-hud-vidas\">\u2600\ufe0f\u2600\ufe0f\u2600\ufe0f<\/div>\n  <\/div>\n  <div class=\"am-progress-track\">\n    <div class=\"am-progress-fill\" id=\"am-progress-fill\" style=\"width:0%;\"><\/div>\n  <\/div>\n  <span class=\"am-level-badge\" id=\"am-juego-nivel-emoji\">\ud83c\udfa8<\/span>\n  <div class=\"am-question-card\">\n    <div class=\"am-object-visual\" id=\"am-object-visual\"><\/div>\n    <div class=\"am-question-text\" id=\"am-question-text\">What color is this?<\/div>\n  <\/div>\n  <div class=\"am-feedback\" id=\"am-feedback\"><\/div>\n  <div class=\"am-options\" id=\"am-options\"><\/div>\n<\/div>\n\n<!-- RESULTADO FINAL -->\n<div class=\"am-screen am-hidden\" id=\"am-screen-final\">\n  <h1 class=\"am-title\">\ud83c\udf89 \u00a1Arco\u00edris completado!<\/h1>\n  <span class=\"am-badge-final\">\ud83c\udfc5<\/span>\n  <p class=\"am-subtitle\" id=\"am-final-mensaje\"><\/p>\n  <div class=\"am-final-stars\">\ud83c\udf08 <span id=\"am-final-puntos\">0<\/span> puntos<\/div>\n  <button class=\"am-btn\" id=\"am-btn-reiniciar\">JUGAR OTRA VEZ \ud83d\udd04<\/button>\n<\/div>\n\n<\/div>\n\n<script>\n(function(){\n\n  const root = document.getElementById('arcoiris-magico-widget');\n  if(!root) return;\n\n  \/\/ ---------- Nubes decorativas ----------\n  const cloudsContainer = root.querySelector('#am-clouds');\n  const CLOUD_COUNT = 5;\n  for(let i=0;i<CLOUD_COUNT;i++){\n    const c = document.createElement('div');\n    c.className = 'am-cloud';\n    c.textContent = '\u2601\ufe0f';\n    c.style.top = (Math.random()*70)+'%';\n    c.style.left = (Math.random()*20)+'%';\n    c.style.animationDelay = (Math.random()*10)+'s';\n    c.style.animationDuration = (14 + Math.random()*10)+'s';\n    cloudsContainer.appendChild(c);\n  }\n\n  \/\/ ---------- Estado del juego ----------\n  const state = {\n    name: '',\n    points: 0,\n    lives: 3,\n    levelIndex: 0,\n    questionIndex: 0,\n    questionsPerLevel: 4\n  };\n\n  \/\/ Cada color: nombre en ingl\u00e9s + emoji(s) de objetos de ese color\n  const colorBank = {\n    Red:    { hex:'#ff5d5d', objects:['\ud83c\udf4e','\ud83c\udf53','\ud83c\udf39'] },\n    Blue:   { hex:'#4d9dff', objects:['\ud83e\uded0','\ud83d\udd35','\ud83d\udc99'] },\n    Yellow: { hex:'#ffd23f', objects:['\ud83c\udf4c','\u2b50','\ud83c\udf3b'] },\n    Green:  { hex:'#3ee68f', objects:['\ud83c\udf43','\ud83e\udd66','\ud83d\udc22'] },\n    Orange: { hex:'#ff9d3d', objects:['\ud83c\udf4a','\ud83e\udd55','\ud83e\udd8a'] },\n    Purple: { hex:'#b06bef', objects:['\ud83c\udf47','\ud83c\udf46','\ud83d\udd2e'] }\n  };\n\n  const levels = [\n    { title:'Nivel 1', emoji:'\ud83c\udfa8', desc:'Colores primarios: Red, Blue, Yellow', colors:['Red','Blue','Yellow'] },\n    { title:'Nivel 2', emoji:'\ud83d\udd8c\ufe0f', desc:'Colores secundarios: Green, Orange, Purple', colors:['Green','Orange','Purple'] },\n    { title:'Nivel 3', emoji:'\ud83c\udf08', desc:'\u00a1Todos los colores mezclados!', colors:['Red','Blue','Yellow','Green','Orange','Purple'] }\n  ];\n\n  \/\/ ---------- Elementos (escopados dentro de root) ----------\n  const screens = {\n    welcome: root.querySelector('#am-screen-welcome'),\n    presentacion: root.querySelector('#am-screen-presentacion'),\n    reglas: root.querySelector('#am-screen-reglas'),\n    nivelIntro: root.querySelector('#am-screen-nivel-intro'),\n    juego: root.querySelector('#am-screen-juego'),\n    final: root.querySelector('#am-screen-final')\n  };\n\n  function showScreen(name){\n    Object.values(screens).forEach(s => s.classList.add('am-hidden'));\n    screens[name].classList.remove('am-hidden');\n  }\n\n  \/\/ ---------- Pantalla 0: Bienvenida ----------\n  root.querySelector('#am-btn-continuar').addEventListener('click', () => {\n    const val = root.querySelector('#am-input-name').value.trim();\n    state.name = val || 'Explorador';\n    root.querySelector('#am-saludo-nombre').textContent = `\u2b50 \u00a1Muy bien, ${state.name}!`;\n    showScreen('presentacion');\n  });\n\n  root.querySelector('#am-input-name').addEventListener('keydown', (e) => {\n    if(e.key === 'Enter'){ root.querySelector('#am-btn-continuar').click(); }\n  });\n\n  root.querySelector('#am-btn-a-reglas').addEventListener('click', () => {\n    showScreen('reglas');\n  });\n\n  root.querySelector('#am-btn-empezar').addEventListener('click', () => {\n    startLevel(0);\n  });\n\n  root.querySelector('#am-btn-jugar-nivel').addEventListener('click', () => {\n    state.questionIndex = 0;\n    showScreen('juego');\n    renderQuestion();\n  });\n\n  root.querySelector('#am-btn-reiniciar').addEventListener('click', () => {\n    state.points = 0;\n    state.lives = 3;\n    state.levelIndex = 0;\n    state.questionIndex = 0;\n    showScreen('welcome');\n    root.querySelector('#am-input-name').value = '';\n  });\n\n  \/\/ ---------- Niveles ----------\n  function startLevel(index){\n    state.levelIndex = index;\n    const lvl = levels[index];\n    root.querySelector('#am-nivel-emoji').textContent = lvl.emoji;\n    root.querySelector('#am-nivel-titulo').textContent = lvl.title;\n    root.querySelector('#am-nivel-desc').textContent = lvl.desc;\n    showScreen('nivelIntro');\n  }\n\n  \/\/ ---------- Generaci\u00f3n de preguntas ----------\n  function generateQuestion(levelColors){\n    const correctColor = levelColors[Math.floor(Math.random()*levelColors.length)];\n    const objects = colorBank[correctColor].objects;\n    const object = objects[Math.floor(Math.random()*objects.length)];\n\n    const optionsSet = new Set([correctColor]);\n    const allColors = Object.keys(colorBank);\n    while(optionsSet.size < 3){\n      const candidate = allColors[Math.floor(Math.random()*allColors.length)];\n      optionsSet.add(candidate);\n    }\n    const optsArr = Array.from(optionsSet).sort(() => Math.random()-0.5);\n    return { correctColor, object, options: optsArr };\n  }\n\n  let currentQuestion = null;\n\n  function renderQuestion(){\n    const lvl = levels[state.levelIndex];\n    root.querySelector('#am-juego-nivel-emoji').textContent = lvl.emoji;\n    updateHUD();\n\n    const totalProgress = ((state.levelIndex * state.questionsPerLevel) + state.questionIndex) \/\n                           (levels.length * state.questionsPerLevel) * 100;\n    root.querySelector('#am-progress-fill').style.width = totalProgress + '%';\n\n    currentQuestion = generateQuestion(lvl.colors);\n\n    root.querySelector('#am-object-visual').textContent = currentQuestion.object;\n    root.querySelector('#am-question-text').textContent = 'What color is this?';\n\n    const fb = root.querySelector('#am-feedback');\n    fb.textContent = '';\n    fb.className = 'am-feedback';\n\n    const optionsDiv = root.querySelector('#am-options');\n    optionsDiv.innerHTML = '';\n    currentQuestion.options.forEach(opt => {\n      const btn = document.createElement('button');\n      btn.className = 'am-option-btn';\n      btn.textContent = opt;\n      btn.addEventListener('click', () => handleAnswer(opt, btn));\n      optionsDiv.appendChild(btn);\n    });\n  }\n\n  function updateHUD(){\n    root.querySelector('#am-hud-puntos').textContent = state.points;\n    root.querySelector('#am-hud-vidas').textContent = '\u2600\ufe0f'.repeat(state.lives) + '\u2601\ufe0f'.repeat(3-state.lives);\n  }\n\n  function handleAnswer(selected, btnEl){\n    const buttons = root.querySelectorAll('.am-option-btn');\n    buttons.forEach(b => b.disabled = true);\n\n    const feedbackEl = root.querySelector('#am-feedback');\n\n    if(selected === currentQuestion.correctColor){\n      btnEl.classList.add('am-correct');\n      state.points += 10;\n      feedbackEl.textContent = 'Correct! \ud83c\udf08';\n      feedbackEl.className = 'am-feedback am-ok';\n    } else {\n      btnEl.classList.add('am-incorrect');\n      state.lives -= 1;\n      feedbackEl.textContent = '\u00a1Casi! Era ' + currentQuestion.correctColor;\n      feedbackEl.className = 'am-feedback am-bad';\n      buttons.forEach(b => {\n        if(b.textContent === currentQuestion.correctColor){\n          b.classList.add('am-correct');\n        }\n      });\n    }\n\n    updateHUD();\n\n    setTimeout(() => {\n      if(state.lives <= 0){\n        endGame(false);\n        return;\n      }\n      state.questionIndex += 1;\n      if(state.questionIndex >= state.questionsPerLevel){\n        if(state.levelIndex + 1 < levels.length){\n          startLevel(state.levelIndex + 1);\n        } else {\n          endGame(true);\n        }\n      } else {\n        renderQuestion();\n      }\n    }, 1200);\n  }\n\n  function endGame(success){\n    showScreen('final');\n    root.querySelector('#am-final-puntos').textContent = state.points;\n    const msgEl = root.querySelector('#am-final-mensaje');\n    if(success){\n      msgEl.textContent = `\u00a1Excelente trabajo, ${state.name}! Completaste el arco\u00edris y ganaste tu insignia de Amigo del Arco\u00edris.`;\n      launchConfetti();\n    } else {\n      msgEl.textContent = `\u00a1Buen intento, ${state.name}! Ganaste ${state.points} puntos. \u00bfQuieres volver a intentarlo?`;\n    }\n  }\n\n  function launchConfetti(){\n    const colors = ['#ff5d5d','#ff9d3d','#ffd23f','#3ee68f','#4d9dff','#b06bef'];\n    for(let i=0;i<40;i++){\n      const piece = document.createElement('div');\n      piece.className = 'am-confetti-piece';\n      piece.style.left = Math.random()*100+'%';\n      piece.style.background = colors[Math.floor(Math.random()*colors.length)];\n      piece.style.animationDuration = (2 + Math.random()*2)+'s';\n      piece.style.animationDelay = (Math.random()*0.5)+'s';\n      root.appendChild(piece);\n      setTimeout(() => piece.remove(), 4500);\n    }\n  }\n\n})();\n<\/script>\n\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:120px\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><br>Juego Arcoiris M\u00e1gico: Aprende los Colores en Ingl\u00e9s<\/h2>\n\n\n\n<p>\u00bfQuieres que tu hijo de 6 a\u00f1os aprenda los colores en ingl\u00e9s de forma divertida? El <strong>Juego Arcoiris M\u00e1gico<\/strong> es la actividad perfecta. Con un arco\u00edris lleno de colores y palabras en ingl\u00e9s, los ni\u00f1os de primer grado descubren red, blue, yellow, green y m\u00e1s mientras juegan.<\/p>\n\n\n\n<p>Este juego educativo combina diversi\u00f3n y aprendizaje. Ayuda a los peque\u00f1os a memorizar el vocabulario de colores de manera natural y alegre. Ideal para usar en casa o en el sal\u00f3n de clases de la Escuela Ignacio Altamirano.<\/p>\n\n\n\n<p>Solo necesitas seguir las instrucciones sencillas y \u00a1listo! En pocos minutos tu hijo estar\u00e1 nombrando los colores en ingl\u00e9s con confianza y sonrisas. \u00a1Empieza a jugar hoy y ve c\u00f3mo el ingl\u00e9s se vuelve m\u00e1gico!<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\"><br><strong>SECCI\u00d3N \u201c\u00bfQU\u00c9 APRENDER\u00c1S?\u201d<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Los nombres de los colores principales en ingl\u00e9s (red, blue, yellow, green, orange, purple, pink, brown, black, white)<\/li>\n\n\n\n<li>C\u00f3mo pronunciar correctamente cada color<\/li>\n\n\n\n<li>Asociar el color con su palabra en ingl\u00e9s<\/li>\n\n\n\n<li>Ampliar el vocabulario b\u00e1sico de ingl\u00e9s<\/li>\n\n\n\n<li>Mejorar la memoria y atenci\u00f3n mientras juegas<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\"><br><strong>SECCI\u00d3N \u201cC\u00d3MO JUGAR\u201d:<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Mira el arco\u00edris m\u00e1gico en la pantalla.<\/li>\n\n\n\n<li>Lee el nombre del color en ingl\u00e9s.<\/li>\n\n\n\n<li>Se\u00f1ala o elige el color correcto.<\/li>\n\n\n\n<li>\u00a1Repite y divi\u00e9rtete hasta aprenderlos todos!<\/li>\n\n\n\n<li>Puedes jugar solo o con pap\u00e1, mam\u00e1 o un amigo.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a1Bienvenidos al Abecedario M\u00e1gico! Un juego divertido donde los ni\u00f1os de primer grado pueden practicar el abecedario arrastrando las letras &hellip; <\/p>\n","protected":false},"author":1,"featured_media":349,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[6,7],"tags":[],"class_list":["post-331","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-juegos","category-primero-de-primaria"],"_links":{"self":[{"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/posts\/331"}],"collection":[{"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/comments?post=331"}],"version-history":[{"count":6,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/posts\/331\/revisions"}],"predecessor-version":[{"id":351,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/posts\/331\/revisions\/351"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/media\/349"}],"wp:attachment":[{"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/media?parent=331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/categories?post=331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/tags?post=331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}