Rompecabezas B\u00edblico para Ni\u00f1os<\/title>\n\n<style>\n\n*{\n box-sizing:border-box;\n}\n\nbody{\n margin:0;\n min-height:100vh;\n font-family:\"Trebuchet MS\", Arial, sans-serif;\n background:linear-gradient(#9ee7ff,#fff5b8);\n text-align:center;\n color:#40345f;\n transition:background .5s;\n}\n\nheader{\n padding:22px 15px 10px;\n}\n\nh1{\n margin:0;\n color:#6b3fa0;\n font-size:2rem;\n}\n\n.subtitle{\n margin-top:8px;\n font-size:1.05rem;\n}\n\n\/* =========================\n PROGRESO\n========================= *\/\n\n.progress-box{\n max-width:600px;\n margin:15px auto;\n background:white;\n border-radius:20px;\n padding:12px 18px;\n box-shadow:0 5px 0 #d9c4f7;\n}\n\n.level-text{\n font-weight:bold;\n margin-bottom:8px;\n}\n\n.progress-bar{\n width:100%;\n height:16px;\n border-radius:20px;\n overflow:hidden;\n background:#ece4ff;\n}\n\n.progress{\n height:100%;\n width:16.6%;\n border-radius:20px;\n background:linear-gradient(\n 90deg,\n #ff82aa,\n #ffcc54,\n #62d989\n );\n transition:width .5s;\n}\n\n\/* =========================\n JUEGO\n========================= *\/\n\n.game{\n max-width:900px;\n margin:auto;\n padding:15px 20px 40px;\n}\n\n\/* PERSONAJE *\/\n\n.character{\n background:white;\n max-width:540px;\n margin:0 auto 25px;\n border-radius:28px;\n padding:18px;\n box-shadow:0 8px 0 #d6b7ff;\n}\n\n.character-face{\n font-size:58px;\n animation:float 2s infinite ease-in-out;\n}\n\n@keyframes float{\n 0%,100%{\n transform:translateY(0);\n }\n\n 50%{\n transform:translateY(-6px);\n }\n}\n\n.character-message{\n font-weight:bold;\n font-size:1.08rem;\n}\n\n.hint{\n background:#fff2a8;\n border:3px dashed #ffad42;\n border-radius:16px;\n padding:12px;\n margin-top:12px;\n font-weight:bold;\n}\n\n\/* =========================\n TABLERO\n========================= *\/\n\n.board{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:14px;\n margin-bottom:30px;\n}\n\n.slot{\n min-height:120px;\n border:4px dashed #b38ddd;\n border-radius:22px;\n background:rgba(255,255,255,.68);\n display:flex;\n justify-content:center;\n align-items:center;\n flex-direction:column;\n transition:.25s;\n}\n\n.slot:hover{\n background:rgba(255,255,255,.9);\n}\n\n.slot-icon{\n font-size:34px;\n opacity:.4;\n}\n\n.slot-number{\n font-size:.85rem;\n opacity:.6;\n margin-top:5px;\n}\n\n.slot.correct{\n border-style:solid;\n border-color:#65c466;\n background:#dcffd7;\n}\n\n\/* =========================\n PIEZAS\n========================= *\/\n\n.pieces-title{\n font-size:1.1rem;\n font-weight:bold;\n margin-bottom:12px;\n}\n\n.pieces{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:14px;\n}\n\n.piece{\n min-height:110px;\n border-radius:22px;\n padding:12px;\n display:flex;\n align-items:center;\n justify-content:center;\n flex-direction:column;\n font-size:1.05rem;\n font-weight:bold;\n cursor:grab;\n user-select:none;\n box-shadow:0 6px 0 rgba(0,0,0,.15);\n transition:.2s;\n}\n\n.piece:hover{\n transform:translateY(-4px);\n}\n\n.piece.selected{\n outline:5px solid white;\n transform:scale(1.05);\n}\n\n.piece-icon{\n font-size:32px;\n margin-bottom:7px;\n}\n\n.color1{\n background:#ff9ca8;\n}\n\n.color2{\n background:#ffd76a;\n}\n\n.color3{\n background:#93e8b4;\n}\n\n.color4{\n background:#8ed8ff;\n}\n\n.color5{\n background:#c5a5ff;\n}\n\n.color6{\n background:#ffb5e5;\n}\n\n\/* =========================\n MENSAJES\n========================= *\/\n\n#message{\n min-height:45px;\n margin-top:20px;\n font-size:1.4rem;\n font-weight:bold;\n}\n\n.verse-box{\n display:none;\n max-width:620px;\n margin:22px auto;\n padding:22px;\n background:white;\n border-radius:24px;\n box-shadow:0 7px 0 rgba(0,0,0,.1);\n font-size:1.2rem;\n}\n\n.verse-reference{\n color:#7545b5;\n font-size:1.3rem;\n}\n\n.full-verse{\n line-height:1.6;\n margin:15px 0;\n}\n\n.translation{\n font-size:.8rem;\n color:#777;\n}\n\n\/* =========================\n ESTRELLAS\n========================= *\/\n\n.stars{\n font-size:1.7rem;\n margin:10px 0;\n min-height:40px;\n}\n\n.star{\n display:inline-block;\n animation:starPop .5s ease;\n}\n\n@keyframes starPop{\n 0%{\n transform:scale(0);\n }\n\n 70%{\n transform:scale(1.4);\n }\n\n 100%{\n transform:scale(1);\n }\n}\n\n\/* =========================\n BOTONES\n========================= *\/\n\n.buttons{\n margin-top:15px;\n}\n\nbutton{\n border:none;\n border-radius:22px;\n padding:13px 24px;\n margin:7px;\n font-size:1rem;\n font-weight:bold;\n cursor:pointer;\n color:white;\n background:#744bc4;\n box-shadow:0 5px 0 #4f2b93;\n transition:.2s;\n}\n\nbutton:hover{\n transform:translateY(-2px);\n background:#6039aa;\n}\n\nbutton:active{\n transform:translateY(2px);\n box-shadow:0 2px 0 #4f2b93;\n}\n\n.next-button{\n display:none;\n background:#32ad68;\n box-shadow:0 5px 0 #208049;\n}\n\n.next-button:hover{\n background:#28965a;\n}\n\n.restart-button{\n background:#ee6d8a;\n box-shadow:0 5px 0 #b84360;\n}\n\n\/* =========================\n CELEBRACI\u00d3N\n========================= *\/\n\n.celebration{\n animation:celebrate .6s ease;\n}\n\n@keyframes celebrate{\n\n 0%{\n transform:scale(.7);\n }\n\n 60%{\n transform:scale(1.12);\n }\n\n 100%{\n transform:scale(1);\n }\n\n}\n\n\/* =========================\n CELULARES\n========================= *\/\n\n@media(max-width:650px){\n\n .board,\n .pieces{\n grid-template-columns:repeat(2,1fr);\n }\n\n h1{\n font-size:1.55rem;\n }\n\n .game{\n padding:12px;\n }\n\n .piece{\n min-height:100px;\n font-size:.95rem;\n }\n\n .slot{\n min-height:105px;\n }\n\n button{\n width:90%;\n max-width:320px;\n }\n\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n<header>\n\n <h1>\n \ud83c\udf08 Camino de la Palabra \ud83e\udde9\n <\/h1>\n\n <div class=\"subtitle\">\n \u00a1Completa los vers\u00edculos y gana estrellas! \u2b50\n <\/div>\n\n<\/header>\n\n\n\n\n<div class=\"progress-box\">\n\n <div class=\"level-text\" id=\"levelText\">\n Nivel 1 de 6\n <\/div>\n\n <div class=\"progress-bar\">\n <div class=\"progress\" id=\"progress\"><\/div>\n <\/div>\n\n<\/div>\n\n\n<div class=\"game\">\n\n\n \n\n <div class=\"character\">\n\n <div class=\"character-face\" id=\"characterFace\">\n \ud83d\udc67\ud83d\udcd6\n <\/div>\n\n <div class=\"character-message\" id=\"characterMessage\">\n \u00a1Hola! Ay\u00fadame a completar el vers\u00edculo.\n <\/div>\n\n <div class=\"hint\" id=\"hint\">\n \ud83d\udca1 Observa los dibujos para encontrar la primera pieza.\n <\/div>\n\n <\/div>\n\n\n \n\n <div class=\"stars\" id=\"stars\"><\/div>\n\n\n \n\n <div class=\"board\" id=\"board\"><\/div>\n\n\n \n\n <div class=\"pieces-title\">\n \ud83e\udde9 Tus piezas\n <\/div>\n\n <div class=\"pieces\" id=\"pieces\"><\/div>\n\n\n \n\n <div id=\"message\"><\/div>\n\n\n \n\n <div class=\"verse-box\" id=\"verseBox\">\n\n <div class=\"verse-reference\" id=\"verseReference\">\n <\/div>\n\n <div class=\"full-verse\" id=\"fullVerse\">\n <\/div>\n\n <div class=\"translation\">\n Reina-Valera 1960\n <\/div>\n\n <\/div>\n\n\n \n\n <div class=\"buttons\">\n\n <button onclick=\"giveHint()\">\n \ud83d\udca1 Dame una pista\n <\/button>\n\n <button onclick=\"restartLevel()\">\n \ud83d\udd04 Repetir nivel\n <\/button>\n\n <button\n class=\"next-button\"\n id=\"nextButton\"\n onclick=\"nextLevel()\">\n \ud83d\ude80 Siguiente nivel\n <\/button>\n\n <\/div>\n\n<\/div>\n\n\n<script>\n\n\/* ==================================\n NIVELES\n================================== *\/\n\nconst levels = [\n\n \/* NIVEL 1 *\/\n\n {\n reference:\"Salmo 119:105\",\n\n verse:\n \"L\u00e1mpara es a mis pies tu palabra, y lumbrera a mi camino.\",\n\n character:\"\ud83d\udc67\ud83d\udcd6\",\n\n pieces:[\n\n {\n text:\"L\u00e1mpara\",\n icon:\"\ud83e\ude94\"\n },\n\n {\n text:\"es a mis pies\",\n icon:\"\ud83d\udc63\"\n },\n\n {\n text:\"tu palabra,\",\n icon:\"\ud83d\udcd6\"\n },\n\n {\n text:\"y lumbrera\",\n icon:\"\u2728\"\n },\n\n {\n text:\"a mi\",\n icon:\"\ud83d\ude4b\"\n },\n\n {\n text:\"camino.\",\n icon:\"\ud83d\udee4\ufe0f\"\n }\n\n ]\n\n },\n\n\n \/* NIVEL 2 *\/\n\n {\n reference:\"Filipenses 4:13\",\n\n verse:\n \"Todo lo puedo en Cristo que me fortalece.\",\n\n character:\"\ud83d\udc66\ud83d\udcaa\",\n\n pieces:[\n\n {\n text:\"Todo\",\n icon:\"\ud83c\udf0e\"\n },\n\n {\n text:\"lo puedo\",\n icon:\"\ud83d\udcaa\"\n },\n\n {\n text:\"en\",\n icon:\"\u27a1\ufe0f\"\n },\n\n {\n text:\"Cristo\",\n icon:\"\u271d\ufe0f\"\n },\n\n {\n text:\"que me\",\n icon:\"\ud83d\ude4b\"\n },\n\n {\n text:\"fortalece.\",\n icon:\"\ud83d\udee1\ufe0f\"\n }\n\n ]\n\n },\n\n\n \/* NIVEL 3 *\/\n\n {\n reference:\"Salmo 23:1\",\n\n verse:\n \"Jehov\u00e1 es mi pastor; nada me faltar\u00e1.\",\n\n character:\"\ud83d\udc11\ud83d\udc66\",\n\n pieces:[\n\n {\n text:\"Jehov\u00e1\",\n icon:\"\u2600\ufe0f\"\n },\n\n {\n text:\"es\",\n icon:\"\u27a1\ufe0f\"\n },\n\n {\n text:\"mi\",\n icon:\"\ud83d\ude4b\"\n },\n\n {\n text:\"pastor;\",\n icon:\"\ud83d\udc11\"\n },\n\n {\n text:\"nada me\",\n icon:\"\ud83c\udf81\"\n },\n\n {\n text:\"faltar\u00e1.\",\n icon:\"\u2764\ufe0f\"\n }\n\n ]\n\n },\n\n\n \/* NIVEL 4 *\/\n\n {\n reference:\"Salmo 56:3\",\n\n verse:\n \"En el d\u00eda que temo, yo en ti conf\u00edo.\",\n\n character:\"\ud83d\udc67\ud83d\udee1\ufe0f\",\n\n pieces:[\n\n {\n text:\"En\",\n icon:\"\ud83c\udf24\ufe0f\"\n },\n\n {\n text:\"el d\u00eda\",\n icon:\"\u2600\ufe0f\"\n },\n\n {\n text:\"que temo,\",\n icon:\"\ud83d\ude1f\"\n },\n\n {\n text:\"yo\",\n icon:\"\ud83d\ude4b\"\n },\n\n {\n text:\"en ti\",\n icon:\"\u261d\ufe0f\"\n },\n\n {\n text:\"conf\u00edo.\",\n icon:\"\u2764\ufe0f\"\n }\n\n ]\n\n },\n\n\n \/* NIVEL 5 *\/\n\n {\n reference:\"1 Juan 4:8\",\n\n verse:\n \"El que no ama, no ha conocido a Dios; porque Dios es amor.\",\n\n character:\"\ud83d\udc67\u2764\ufe0f\ud83d\udc66\",\n\n pieces:[\n\n {\n text:\"El que\",\n icon:\"\ud83d\udc66\"\n },\n\n {\n text:\"no ama,\",\n icon:\"\ud83d\udc94\"\n },\n\n {\n text:\"no ha conocido\",\n icon:\"\ud83e\udd14\"\n },\n\n {\n text:\"a Dios;\",\n icon:\"\u261d\ufe0f\"\n },\n\n {\n text:\"porque Dios\",\n icon:\"\u2764\ufe0f\"\n },\n\n {\n text:\"es amor.\",\n icon:\"\ud83d\udc95\"\n }\n\n ]\n\n },\n\n\n \/* NIVEL 6 *\/\n\n {\n reference:\"Proverbios 3:5\",\n\n verse:\n \"F\u00edate de Jehov\u00e1 de todo tu coraz\u00f3n, y no te apoyes en tu propia prudencia.\",\n\n character:\"\ud83d\udc66\u2764\ufe0f\ud83d\ude4f\",\n\n pieces:[\n\n {\n text:\"F\u00edate\",\n icon:\"\ud83e\udd1d\"\n },\n\n {\n text:\"de Jehov\u00e1\",\n icon:\"\u261d\ufe0f\"\n },\n\n {\n text:\"de todo\",\n icon:\"\ud83c\udf1f\"\n },\n\n {\n text:\"tu coraz\u00f3n,\",\n icon:\"\u2764\ufe0f\"\n },\n\n {\n text:\"y no te apoyes\",\n icon:\"\ud83d\udeab\"\n },\n\n {\n text:\"en tu propia prudencia.\",\n icon:\"\ud83e\udde0\"\n }\n\n ]\n\n }\n\n];\n\n\n\/* ==================================\n VARIABLES DEL JUEGO\n================================== *\/\n\nlet currentLevel = 0;\n\nlet completedPieces = 0;\n\nlet completedLevels = 0;\n\nlet selectedPiece = null;\n\nlet draggedPiece = null;\n\nlet levelFinished = false;\n\n\n\/* ==================================\n ELEMENTOS\n================================== *\/\n\nconst board =\ndocument.getElementById(\"board\");\n\nconst piecesContainer =\ndocument.getElementById(\"pieces\");\n\nconst message =\ndocument.getElementById(\"message\");\n\nconst hint =\ndocument.getElementById(\"hint\");\n\nconst verseBox =\ndocument.getElementById(\"verseBox\");\n\nconst verseReference =\ndocument.getElementById(\"verseReference\");\n\nconst fullVerse =\ndocument.getElementById(\"fullVerse\");\n\nconst nextButton =\ndocument.getElementById(\"nextButton\");\n\nconst levelText =\ndocument.getElementById(\"levelText\");\n\nconst progress =\ndocument.getElementById(\"progress\");\n\nconst stars =\ndocument.getElementById(\"stars\");\n\nconst characterFace =\ndocument.getElementById(\"characterFace\");\n\nconst characterMessage =\ndocument.getElementById(\"characterMessage\");\n\n\n\/* ==================================\n MEZCLAR\n================================== *\/\n\nfunction shuffle(array){\n\n const newArray =\n [...array];\n\n for(\n let i = newArray.length - 1;\n i > 0;\n i--\n ){\n\n const j =\n Math.floor(\n Math.random() * (i + 1)\n );\n\n [\n newArray[i],\n newArray[j]\n ]\n =\n [\n newArray[j],\n newArray[i]\n ];\n\n }\n\n return newArray;\n\n}\n\n\n\/* ==================================\n CARGAR NIVEL\n================================== *\/\n\nfunction loadLevel(){\n\n const level =\n levels[currentLevel];\n\n completedPieces = 0;\n\n selectedPiece = null;\n\n draggedPiece = null;\n\n levelFinished = false;\n\n\n \/* Limpiar *\/\n\n board.innerHTML = \"\";\n\n piecesContainer.innerHTML = \"\";\n\n message.innerHTML = \"\";\n\n verseBox.style.display = \"none\";\n\n verseBox.classList.remove(\n \"celebration\"\n );\n\n nextButton.style.display = \"none\";\n\n\n \/* Fondo *\/\n\n document.body.style.background =\n \"linear-gradient(#9ee7ff,#fff5b8)\";\n\n\n \/* Informaci\u00f3n nivel *\/\n\n levelText.innerHTML =\n `\ud83c\udfae Nivel ${currentLevel + 1} de ${levels.length}`;\n\n progress.style.width =\n `${((currentLevel + 1) \/ levels.length) * 100}%`;\n\n\n \/* Personaje *\/\n\n characterFace.innerHTML =\n level.character;\n\n characterMessage.innerHTML =\n \"\u00a1Completemos juntos este vers\u00edculo!\";\n\n\n \/* Pista *\/\n\n hint.innerHTML =\n `\ud83d\udca1 Busca primero el dibujo ${level.pieces[0].icon}`;\n\n\n \/* Crear espacios *\/\n\n level.pieces.forEach(\n (piece,index)=>{\n\n const slot =\n document.createElement(\"div\");\n\n slot.className =\n \"slot\";\n\n slot.dataset.answer =\n index;\n\n slot.innerHTML = `\n\n <div class=\"slot-icon\">\n ${piece.icon}\n <\/div>\n\n <div class=\"slot-number\">\n Pieza ${index + 1}\n <\/div>\n\n `;\n\n\n \/* DROP *\/\n\n slot.addEventListener(\n \"dragover\",\n event => {\n\n event.preventDefault();\n\n }\n );\n\n\n slot.addEventListener(\n \"drop\",\n ()=>{\n\n if(draggedPiece){\n\n checkPiece(\n draggedPiece,\n slot\n );\n\n }\n\n }\n );\n\n\n \/* TOCAR *\/\n\n slot.addEventListener(\n \"click\",\n ()=>{\n\n if(selectedPiece){\n\n checkPiece(\n selectedPiece,\n slot\n );\n\n }\n\n }\n );\n\n\n board.appendChild(slot);\n\n }\n );\n\n\n \/* Crear piezas mezcladas *\/\n\n const shuffledPieces =\n shuffle(\n level.pieces.map(\n (piece,index)=>({\n ...piece,\n originalIndex:index\n })\n )\n );\n\n\n shuffledPieces.forEach(\n pieceData => {\n\n createPiece(\n pieceData\n );\n\n }\n );\n\n}\n\n\n\/* ==================================\n CREAR UNA PIEZA\n================================== *\/\n\nfunction createPiece(pieceData){\n\n const piece =\n document.createElement(\"div\");\n\n const colorNumber =\n (pieceData.originalIndex % 6) + 1;\n\n piece.className =\n `piece color${colorNumber}`;\n\n piece.dataset.piece =\n pieceData.originalIndex;\n\n piece.draggable =\n true;\n\n piece.innerHTML = `\n\n <div class=\"piece-icon\">\n ${pieceData.icon}\n <\/div>\n\n <div>\n ${pieceData.text}\n <\/div>\n\n `;\n\n\n \/* Arrastrar *\/\n\n piece.addEventListener(\n \"dragstart\",\n ()=>{\n\n if(levelFinished){\n return;\n }\n\n draggedPiece =\n piece;\n\n }\n );\n\n\n piece.addEventListener(\n \"dragend\",\n ()=>{\n\n draggedPiece =\n null;\n\n }\n );\n\n\n \/* Tocar *\/\n\n piece.addEventListener(\n \"click\",\n ()=>{\n\n if(levelFinished){\n return;\n }\n\n if(\n piece.parentElement.classList.contains(\n \"slot\"\n )\n ){\n return;\n }\n\n document\n .querySelectorAll(\".piece\")\n .forEach(p=>{\n\n p.classList.remove(\n \"selected\"\n );\n\n });\n\n\n selectedPiece =\n piece;\n\n piece.classList.add(\n \"selected\"\n );\n\n message.innerHTML =\n \"\ud83d\udc46 \u00a1Muy bien! Ahora toca el espacio donde crees que va.\";\n\n }\n );\n\n\n piecesContainer.appendChild(\n piece\n );\n\n}\n\n\n\/* ==================================\n COMPROBAR PIEZA\n================================== *\/\n\nfunction checkPiece(piece,slot){\n\n if(\n levelFinished ||\n slot.classList.contains(\"correct\")\n ){\n return;\n }\n\n\n const pieceNumber =\n Number(\n piece.dataset.piece\n );\n\n const answerNumber =\n Number(\n slot.dataset.answer\n );\n\n\n \/* CORRECTA *\/\n\n if(\n pieceNumber ===\n answerNumber\n ){\n\n slot.innerHTML = \"\";\n\n slot.appendChild(\n piece\n );\n\n slot.classList.add(\n \"correct\"\n );\n\n piece.draggable =\n false;\n\n piece.style.cursor =\n \"default\";\n\n piece.classList.remove(\n \"selected\"\n );\n\n\n completedPieces++;\n\n\n message.innerHTML =\n randomSuccessMessage();\n\n\n selectedPiece =\n null;\n\n draggedPiece =\n null;\n\n\n updateHint();\n\n\n if(\n completedPieces === 6\n ){\n\n finishLevel();\n\n }\n\n }\n\n\n \/* INCORRECTA *\/\n\n else{\n\n message.innerHTML =\n randomTryAgainMessage();\n\n slot.style.transform =\n \"scale(.94)\";\n\n setTimeout(\n ()=>{\n\n slot.style.transform =\n \"scale(1)\";\n\n },\n 250\n );\n\n }\n\n}\n\n\n\/* ==================================\n MENSAJES PARA NI\u00d1OS\n================================== *\/\n\nfunction randomSuccessMessage(){\n\n const messages = [\n\n \"\ud83c\udf89 \u00a1Excelente! Esa pieza est\u00e1 perfecta.\",\n\n \"\u2b50 \u00a1Muy bien! Sigue as\u00ed.\",\n\n \"\ud83c\udf08 \u00a1Correcto! Vas genial.\",\n\n \"\ud83d\udc4f \u00a1Lo encontraste!\",\n\n \"\ud83d\ude0a \u00a1S\u00ed! Esa pieza va ah\u00ed.\",\n\n \"\ud83d\udc9b \u00a1Buen trabajo!\"\n\n ];\n\n return messages[\n Math.floor(\n Math.random() *\n messages.length\n )\n ];\n\n}\n\n\nfunction randomTryAgainMessage(){\n\n const messages = [\n\n \"\ud83d\ude0a Casi... int\u00e9ntalo otra vez.\",\n\n \"\ud83e\udde9 Mira bien el dibujo.\",\n\n \"\ud83d\udca1 Esa pieza tiene otro lugar.\",\n\n \"\ud83c\udf1f \u00a1Sigue intentando!\",\n\n \"\ud83d\udc40 Observa la figura y prueba otra vez.\"\n\n ];\n\n return messages[\n Math.floor(\n Math.random() *\n messages.length\n )\n ];\n\n}\n\n\n\/* ==================================\n ACTUALIZAR PISTA\n================================== *\/\n\nfunction updateHint(){\n\n const level =\n levels[currentLevel];\n\n if(\n completedPieces < 6\n ){\n\n const slots =\n [...board.querySelectorAll(\n \".slot\"\n )];\n\n const nextEmpty =\n slots.find(\n slot =>\n !slot.classList.contains(\n \"correct\"\n )\n );\n\n\n if(nextEmpty){\n\n const number =\n Number(\n nextEmpty.dataset.answer\n );\n\n hint.innerHTML =\n `\ud83d\udca1 Busca la pieza con ${level.pieces[number].icon}`;\n\n }\n\n }\n\n}\n\n\n\/* ==================================\n BOT\u00d3N PISTA\n================================== *\/\n\nfunction giveHint(){\n\n if(levelFinished){\n\n hint.innerHTML =\n \"\u2b50 \u00a1Ya completaste este nivel!\";\n\n return;\n\n }\n\n\n const emptySlot =\n [...board.querySelectorAll(\n \".slot\"\n )]\n .find(\n slot =>\n !slot.classList.contains(\n \"correct\"\n )\n );\n\n\n if(!emptySlot){\n return;\n }\n\n\n const number =\n Number(\n emptySlot.dataset.answer\n );\n\n const level =\n levels[currentLevel];\n\n\n hint.innerHTML =\n `\ud83d\udca1 Busca esta figura: ${level.pieces[number].icon}`;\n\n\n emptySlot.style.background =\n \"#fff0a5\";\n\n emptySlot.style.transform =\n \"scale(1.05)\";\n\n\n setTimeout(\n ()=>{\n\n if(\n !emptySlot.classList.contains(\n \"correct\"\n )\n ){\n\n emptySlot.style.background =\n \"\";\n\n emptySlot.style.transform =\n \"\";\n\n }\n\n },\n 1100\n );\n\n}\n\n\n\/* ==================================\n TERMINAR NIVEL\n================================== *\/\n\nfunction finishLevel(){\n\n levelFinished =\n true;\n\n\n const level =\n levels[currentLevel];\n\n\n message.innerHTML =\n \"\ud83c\udf1f \u00a1LO LOGRASTE! \ud83c\udf1f<br>\u00a1Completaste el vers\u00edculo!\";\n\n\n verseReference.innerHTML =\n `\u2b50 ${level.reference}`;\n\n fullVerse.innerHTML =\n `\u201c${level.verse}\u201d`;\n\n\n verseBox.style.display =\n \"block\";\n\n verseBox.classList.add(\n \"celebration\"\n );\n\n\n hint.innerHTML =\n \"\u2764\ufe0f \u00a1Qu\u00e9 bonito es aprender la Palabra de Dios!\";\n\n\n document.body.style.background =\n \"linear-gradient(135deg,#ffd6e7,#fff0a8,#b7f5cb,#a8e1ff)\";\n\n\n \/* A\u00f1adir estrella *\/\n\n if(\n completedLevels <\n currentLevel + 1\n ){\n\n completedLevels =\n currentLevel + 1;\n\n }\n\n updateStars();\n\n\n \/* \u00daltimo nivel *\/\n\n if(\n currentLevel ===\n levels.length - 1\n ){\n\n nextButton.innerHTML =\n \"\ud83c\udfc6 Jugar desde el principio\";\n\n }\n\n else{\n\n nextButton.innerHTML =\n \"\ud83d\ude80 Siguiente nivel\";\n\n }\n\n\n nextButton.style.display =\n \"inline-block\";\n\n}\n\n\n\/* ==================================\n ESTRELLAS\n================================== *\/\n\nfunction updateStars(){\n\n stars.innerHTML = \"\";\n\n for(\n let i = 0;\n i < levels.length;\n i++\n ){\n\n const star =\n document.createElement(\n \"span\"\n );\n\n star.className =\n \"star\";\n\n if(\n i < completedLevels\n ){\n\n star.innerHTML =\n \"\u2b50\";\n\n }\n\n else{\n\n star.innerHTML =\n \"\u2606\";\n\n }\n\n stars.appendChild(\n star\n );\n\n }\n\n}\n\n\n\/* ==================================\n SIGUIENTE NIVEL\n================================== *\/\n\nfunction nextLevel(){\n\n if(\n currentLevel <\n levels.length - 1\n ){\n\n currentLevel++;\n\n }\n\n else{\n\n currentLevel = 0;\n\n completedLevels = 0;\n\n updateStars();\n\n }\n\n\n loadLevel();\n\n\n window.scrollTo({\n top:0,\n behavior:\"smooth\"\n });\n\n}\n\n\n\/* ==================================\n REPETIR NIVEL\n================================== *\/\n\nfunction restartLevel(){\n\n loadLevel();\n\n}\n\n\n\/* ==================================\n INICIAR JUEGO\n================================== *\/\n\nupdateStars();\n\nloadLevel();\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Rompecabezas B\u00edblico para Ni\u00f1os \ud83c\udf08 Camino de la Palabra \ud83e\udde9 \u00a1Completa los vers\u00edculos y gana estrellas! \u2b50 Nivel 1 de 6 \ud83d\udc67\ud83d\udcd6 \u00a1Hola! Ay\u00fadame a completar el vers\u00edculo. \ud83d\udca1 Observa los dibujos para encontrar la primera pieza. \ud83e\udde9 Tus piezas Reina-Valera 1960 \ud83d\udca1 Dame una pista \ud83d\udd04 Repetir nivel \ud83d\ude80 Siguiente nivel<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","slim_seo":{"title":"Promesas - NCP","description":"Rompecabezas B\u00edblico para Ni\u00f1os \ud83c\udf08 Camino de la Palabra \ud83e\udde9 \u00a1Completa los vers\u00edculos y gana estrellas! \u2b50 Nivel 1 de 6 \ud83d\udc67\ud83d\udcd6 \u00a1Hola! Ay\u00fadame a completar el vers\u00edculo. \ud83d\udca1"},"iawp_total_views":9,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"_slim_seo_primary_term_category":0,"_slim_seo_primary_term_post_tag":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3772","post","type-post","status-publish","format-standard","hentry","category-todos-los-articulos","entry"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/posts\/3772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/comments?post=3772"}],"version-history":[{"count":1,"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/posts\/3772\/revisions"}],"predecessor-version":[{"id":3773,"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/posts\/3772\/revisions\/3773"}],"wp:attachment":[{"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/media?parent=3772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/categories?post=3772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/tags?post=3772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3772,"date":"2026-09-01T21:46:59","date_gmt":"2026-09-02T01:46:59","guid":{"rendered":"https:\/\/notasconproposito.com\/?p=3772"},"modified":"2026-09-01T21:47:01","modified_gmt":"2026-09-02T01:47:01","slug":"promesas","status":"publish","type":"post","link":"https:\/\/notasconproposito.com\/index.php\/2026\/09\/01\/promesas\/","title":{"rendered":"Promesas"},"content":{"rendered":"\n\n\n\n\n\n\nRompecabezas B\u00edblico para Ni\u00f1os<\/title>\n\n<style>\n\n*{\n box-sizing:border-box;\n}\n\nbody{\n margin:0;\n min-height:100vh;\n font-family:\"Trebuchet MS\", Arial, sans-serif;\n background:linear-gradient(#9ee7ff,#fff5b8);\n text-align:center;\n color:#40345f;\n transition:background .5s;\n}\n\nheader{\n padding:22px 15px 10px;\n}\n\nh1{\n margin:0;\n color:#6b3fa0;\n font-size:2rem;\n}\n\n.subtitle{\n margin-top:8px;\n font-size:1.05rem;\n}\n\n\/* =========================\n PROGRESO\n========================= *\/\n\n.progress-box{\n max-width:600px;\n margin:15px auto;\n background:white;\n border-radius:20px;\n padding:12px 18px;\n box-shadow:0 5px 0 #d9c4f7;\n}\n\n.level-text{\n font-weight:bold;\n margin-bottom:8px;\n}\n\n.progress-bar{\n width:100%;\n height:16px;\n border-radius:20px;\n overflow:hidden;\n background:#ece4ff;\n}\n\n.progress{\n height:100%;\n width:16.6%;\n border-radius:20px;\n background:linear-gradient(\n 90deg,\n #ff82aa,\n #ffcc54,\n #62d989\n );\n transition:width .5s;\n}\n\n\/* =========================\n JUEGO\n========================= *\/\n\n.game{\n max-width:900px;\n margin:auto;\n padding:15px 20px 40px;\n}\n\n\/* PERSONAJE *\/\n\n.character{\n background:white;\n max-width:540px;\n margin:0 auto 25px;\n border-radius:28px;\n padding:18px;\n box-shadow:0 8px 0 #d6b7ff;\n}\n\n.character-face{\n font-size:58px;\n animation:float 2s infinite ease-in-out;\n}\n\n@keyframes float{\n 0%,100%{\n transform:translateY(0);\n }\n\n 50%{\n transform:translateY(-6px);\n }\n}\n\n.character-message{\n font-weight:bold;\n font-size:1.08rem;\n}\n\n.hint{\n background:#fff2a8;\n border:3px dashed #ffad42;\n border-radius:16px;\n padding:12px;\n margin-top:12px;\n font-weight:bold;\n}\n\n\/* =========================\n TABLERO\n========================= *\/\n\n.board{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:14px;\n margin-bottom:30px;\n}\n\n.slot{\n min-height:120px;\n border:4px dashed #b38ddd;\n border-radius:22px;\n background:rgba(255,255,255,.68);\n display:flex;\n justify-content:center;\n align-items:center;\n flex-direction:column;\n transition:.25s;\n}\n\n.slot:hover{\n background:rgba(255,255,255,.9);\n}\n\n.slot-icon{\n font-size:34px;\n opacity:.4;\n}\n\n.slot-number{\n font-size:.85rem;\n opacity:.6;\n margin-top:5px;\n}\n\n.slot.correct{\n border-style:solid;\n border-color:#65c466;\n background:#dcffd7;\n}\n\n\/* =========================\n PIEZAS\n========================= *\/\n\n.pieces-title{\n font-size:1.1rem;\n font-weight:bold;\n margin-bottom:12px;\n}\n\n.pieces{\n display:grid;\n grid-template-columns:repeat(3,1fr);\n gap:14px;\n}\n\n.piece{\n min-height:110px;\n border-radius:22px;\n padding:12px;\n display:flex;\n align-items:center;\n justify-content:center;\n flex-direction:column;\n font-size:1.05rem;\n font-weight:bold;\n cursor:grab;\n user-select:none;\n box-shadow:0 6px 0 rgba(0,0,0,.15);\n transition:.2s;\n}\n\n.piece:hover{\n transform:translateY(-4px);\n}\n\n.piece.selected{\n outline:5px solid white;\n transform:scale(1.05);\n}\n\n.piece-icon{\n font-size:32px;\n margin-bottom:7px;\n}\n\n.color1{\n background:#ff9ca8;\n}\n\n.color2{\n background:#ffd76a;\n}\n\n.color3{\n background:#93e8b4;\n}\n\n.color4{\n background:#8ed8ff;\n}\n\n.color5{\n background:#c5a5ff;\n}\n\n.color6{\n background:#ffb5e5;\n}\n\n\/* =========================\n MENSAJES\n========================= *\/\n\n#message{\n min-height:45px;\n margin-top:20px;\n font-size:1.4rem;\n font-weight:bold;\n}\n\n.verse-box{\n display:none;\n max-width:620px;\n margin:22px auto;\n padding:22px;\n background:white;\n border-radius:24px;\n box-shadow:0 7px 0 rgba(0,0,0,.1);\n font-size:1.2rem;\n}\n\n.verse-reference{\n color:#7545b5;\n font-size:1.3rem;\n}\n\n.full-verse{\n line-height:1.6;\n margin:15px 0;\n}\n\n.translation{\n font-size:.8rem;\n color:#777;\n}\n\n\/* =========================\n ESTRELLAS\n========================= *\/\n\n.stars{\n font-size:1.7rem;\n margin:10px 0;\n min-height:40px;\n}\n\n.star{\n display:inline-block;\n animation:starPop .5s ease;\n}\n\n@keyframes starPop{\n 0%{\n transform:scale(0);\n }\n\n 70%{\n transform:scale(1.4);\n }\n\n 100%{\n transform:scale(1);\n }\n}\n\n\/* =========================\n BOTONES\n========================= *\/\n\n.buttons{\n margin-top:15px;\n}\n\nbutton{\n border:none;\n border-radius:22px;\n padding:13px 24px;\n margin:7px;\n font-size:1rem;\n font-weight:bold;\n cursor:pointer;\n color:white;\n background:#744bc4;\n box-shadow:0 5px 0 #4f2b93;\n transition:.2s;\n}\n\nbutton:hover{\n transform:translateY(-2px);\n background:#6039aa;\n}\n\nbutton:active{\n transform:translateY(2px);\n box-shadow:0 2px 0 #4f2b93;\n}\n\n.next-button{\n display:none;\n background:#32ad68;\n box-shadow:0 5px 0 #208049;\n}\n\n.next-button:hover{\n background:#28965a;\n}\n\n.restart-button{\n background:#ee6d8a;\n box-shadow:0 5px 0 #b84360;\n}\n\n\/* =========================\n CELEBRACI\u00d3N\n========================= *\/\n\n.celebration{\n animation:celebrate .6s ease;\n}\n\n@keyframes celebrate{\n\n 0%{\n transform:scale(.7);\n }\n\n 60%{\n transform:scale(1.12);\n }\n\n 100%{\n transform:scale(1);\n }\n\n}\n\n\/* =========================\n CELULARES\n========================= *\/\n\n@media(max-width:650px){\n\n .board,\n .pieces{\n grid-template-columns:repeat(2,1fr);\n }\n\n h1{\n font-size:1.55rem;\n }\n\n .game{\n padding:12px;\n }\n\n .piece{\n min-height:100px;\n font-size:.95rem;\n }\n\n .slot{\n min-height:105px;\n }\n\n button{\n width:90%;\n max-width:320px;\n }\n\n}\n\n<\/style>\n<\/head>\n\n<body>\n\n<header>\n\n <h1>\n \ud83c\udf08 Camino de la Palabra \ud83e\udde9\n <\/h1>\n\n <div class=\"subtitle\">\n \u00a1Completa los vers\u00edculos y gana estrellas! \u2b50\n <\/div>\n\n<\/header>\n\n\n\n\n<div class=\"progress-box\">\n\n <div class=\"level-text\" id=\"levelText\">\n Nivel 1 de 6\n <\/div>\n\n <div class=\"progress-bar\">\n <div class=\"progress\" id=\"progress\"><\/div>\n <\/div>\n\n<\/div>\n\n\n<div class=\"game\">\n\n\n \n\n <div class=\"character\">\n\n <div class=\"character-face\" id=\"characterFace\">\n \ud83d\udc67\ud83d\udcd6\n <\/div>\n\n <div class=\"character-message\" id=\"characterMessage\">\n \u00a1Hola! Ay\u00fadame a completar el vers\u00edculo.\n <\/div>\n\n <div class=\"hint\" id=\"hint\">\n \ud83d\udca1 Observa los dibujos para encontrar la primera pieza.\n <\/div>\n\n <\/div>\n\n\n \n\n <div class=\"stars\" id=\"stars\"><\/div>\n\n\n \n\n <div class=\"board\" id=\"board\"><\/div>\n\n\n \n\n <div class=\"pieces-title\">\n \ud83e\udde9 Tus piezas\n <\/div>\n\n <div class=\"pieces\" id=\"pieces\"><\/div>\n\n\n \n\n <div id=\"message\"><\/div>\n\n\n \n\n <div class=\"verse-box\" id=\"verseBox\">\n\n <div class=\"verse-reference\" id=\"verseReference\">\n <\/div>\n\n <div class=\"full-verse\" id=\"fullVerse\">\n <\/div>\n\n <div class=\"translation\">\n Reina-Valera 1960\n <\/div>\n\n <\/div>\n\n\n \n\n <div class=\"buttons\">\n\n <button onclick=\"giveHint()\">\n \ud83d\udca1 Dame una pista\n <\/button>\n\n <button onclick=\"restartLevel()\">\n \ud83d\udd04 Repetir nivel\n <\/button>\n\n <button\n class=\"next-button\"\n id=\"nextButton\"\n onclick=\"nextLevel()\">\n \ud83d\ude80 Siguiente nivel\n <\/button>\n\n <\/div>\n\n<\/div>\n\n\n<script>\n\n\/* ==================================\n NIVELES\n================================== *\/\n\nconst levels = [\n\n \/* NIVEL 1 *\/\n\n {\n reference:\"Salmo 119:105\",\n\n verse:\n \"L\u00e1mpara es a mis pies tu palabra, y lumbrera a mi camino.\",\n\n character:\"\ud83d\udc67\ud83d\udcd6\",\n\n pieces:[\n\n {\n text:\"L\u00e1mpara\",\n icon:\"\ud83e\ude94\"\n },\n\n {\n text:\"es a mis pies\",\n icon:\"\ud83d\udc63\"\n },\n\n {\n text:\"tu palabra,\",\n icon:\"\ud83d\udcd6\"\n },\n\n {\n text:\"y lumbrera\",\n icon:\"\u2728\"\n },\n\n {\n text:\"a mi\",\n icon:\"\ud83d\ude4b\"\n },\n\n {\n text:\"camino.\",\n icon:\"\ud83d\udee4\ufe0f\"\n }\n\n ]\n\n },\n\n\n \/* NIVEL 2 *\/\n\n {\n reference:\"Filipenses 4:13\",\n\n verse:\n \"Todo lo puedo en Cristo que me fortalece.\",\n\n character:\"\ud83d\udc66\ud83d\udcaa\",\n\n pieces:[\n\n {\n text:\"Todo\",\n icon:\"\ud83c\udf0e\"\n },\n\n {\n text:\"lo puedo\",\n icon:\"\ud83d\udcaa\"\n },\n\n {\n text:\"en\",\n icon:\"\u27a1\ufe0f\"\n },\n\n {\n text:\"Cristo\",\n icon:\"\u271d\ufe0f\"\n },\n\n {\n text:\"que me\",\n icon:\"\ud83d\ude4b\"\n },\n\n {\n text:\"fortalece.\",\n icon:\"\ud83d\udee1\ufe0f\"\n }\n\n ]\n\n },\n\n\n \/* NIVEL 3 *\/\n\n {\n reference:\"Salmo 23:1\",\n\n verse:\n \"Jehov\u00e1 es mi pastor; nada me faltar\u00e1.\",\n\n character:\"\ud83d\udc11\ud83d\udc66\",\n\n pieces:[\n\n {\n text:\"Jehov\u00e1\",\n icon:\"\u2600\ufe0f\"\n },\n\n {\n text:\"es\",\n icon:\"\u27a1\ufe0f\"\n },\n\n {\n text:\"mi\",\n icon:\"\ud83d\ude4b\"\n },\n\n {\n text:\"pastor;\",\n icon:\"\ud83d\udc11\"\n },\n\n {\n text:\"nada me\",\n icon:\"\ud83c\udf81\"\n },\n\n {\n text:\"faltar\u00e1.\",\n icon:\"\u2764\ufe0f\"\n }\n\n ]\n\n },\n\n\n \/* NIVEL 4 *\/\n\n {\n reference:\"Salmo 56:3\",\n\n verse:\n \"En el d\u00eda que temo, yo en ti conf\u00edo.\",\n\n character:\"\ud83d\udc67\ud83d\udee1\ufe0f\",\n\n pieces:[\n\n {\n text:\"En\",\n icon:\"\ud83c\udf24\ufe0f\"\n },\n\n {\n text:\"el d\u00eda\",\n icon:\"\u2600\ufe0f\"\n },\n\n {\n text:\"que temo,\",\n icon:\"\ud83d\ude1f\"\n },\n\n {\n text:\"yo\",\n icon:\"\ud83d\ude4b\"\n },\n\n {\n text:\"en ti\",\n icon:\"\u261d\ufe0f\"\n },\n\n {\n text:\"conf\u00edo.\",\n icon:\"\u2764\ufe0f\"\n }\n\n ]\n\n },\n\n\n \/* NIVEL 5 *\/\n\n {\n reference:\"1 Juan 4:8\",\n\n verse:\n \"El que no ama, no ha conocido a Dios; porque Dios es amor.\",\n\n character:\"\ud83d\udc67\u2764\ufe0f\ud83d\udc66\",\n\n pieces:[\n\n {\n text:\"El que\",\n icon:\"\ud83d\udc66\"\n },\n\n {\n text:\"no ama,\",\n icon:\"\ud83d\udc94\"\n },\n\n {\n text:\"no ha conocido\",\n icon:\"\ud83e\udd14\"\n },\n\n {\n text:\"a Dios;\",\n icon:\"\u261d\ufe0f\"\n },\n\n {\n text:\"porque Dios\",\n icon:\"\u2764\ufe0f\"\n },\n\n {\n text:\"es amor.\",\n icon:\"\ud83d\udc95\"\n }\n\n ]\n\n },\n\n\n \/* NIVEL 6 *\/\n\n {\n reference:\"Proverbios 3:5\",\n\n verse:\n \"F\u00edate de Jehov\u00e1 de todo tu coraz\u00f3n, y no te apoyes en tu propia prudencia.\",\n\n character:\"\ud83d\udc66\u2764\ufe0f\ud83d\ude4f\",\n\n pieces:[\n\n {\n text:\"F\u00edate\",\n icon:\"\ud83e\udd1d\"\n },\n\n {\n text:\"de Jehov\u00e1\",\n icon:\"\u261d\ufe0f\"\n },\n\n {\n text:\"de todo\",\n icon:\"\ud83c\udf1f\"\n },\n\n {\n text:\"tu coraz\u00f3n,\",\n icon:\"\u2764\ufe0f\"\n },\n\n {\n text:\"y no te apoyes\",\n icon:\"\ud83d\udeab\"\n },\n\n {\n text:\"en tu propia prudencia.\",\n icon:\"\ud83e\udde0\"\n }\n\n ]\n\n }\n\n];\n\n\n\/* ==================================\n VARIABLES DEL JUEGO\n================================== *\/\n\nlet currentLevel = 0;\n\nlet completedPieces = 0;\n\nlet completedLevels = 0;\n\nlet selectedPiece = null;\n\nlet draggedPiece = null;\n\nlet levelFinished = false;\n\n\n\/* ==================================\n ELEMENTOS\n================================== *\/\n\nconst board =\ndocument.getElementById(\"board\");\n\nconst piecesContainer =\ndocument.getElementById(\"pieces\");\n\nconst message =\ndocument.getElementById(\"message\");\n\nconst hint =\ndocument.getElementById(\"hint\");\n\nconst verseBox =\ndocument.getElementById(\"verseBox\");\n\nconst verseReference =\ndocument.getElementById(\"verseReference\");\n\nconst fullVerse =\ndocument.getElementById(\"fullVerse\");\n\nconst nextButton =\ndocument.getElementById(\"nextButton\");\n\nconst levelText =\ndocument.getElementById(\"levelText\");\n\nconst progress =\ndocument.getElementById(\"progress\");\n\nconst stars =\ndocument.getElementById(\"stars\");\n\nconst characterFace =\ndocument.getElementById(\"characterFace\");\n\nconst characterMessage =\ndocument.getElementById(\"characterMessage\");\n\n\n\/* ==================================\n MEZCLAR\n================================== *\/\n\nfunction shuffle(array){\n\n const newArray =\n [...array];\n\n for(\n let i = newArray.length - 1;\n i > 0;\n i--\n ){\n\n const j =\n Math.floor(\n Math.random() * (i + 1)\n );\n\n [\n newArray[i],\n newArray[j]\n ]\n =\n [\n newArray[j],\n newArray[i]\n ];\n\n }\n\n return newArray;\n\n}\n\n\n\/* ==================================\n CARGAR NIVEL\n================================== *\/\n\nfunction loadLevel(){\n\n const level =\n levels[currentLevel];\n\n completedPieces = 0;\n\n selectedPiece = null;\n\n draggedPiece = null;\n\n levelFinished = false;\n\n\n \/* Limpiar *\/\n\n board.innerHTML = \"\";\n\n piecesContainer.innerHTML = \"\";\n\n message.innerHTML = \"\";\n\n verseBox.style.display = \"none\";\n\n verseBox.classList.remove(\n \"celebration\"\n );\n\n nextButton.style.display = \"none\";\n\n\n \/* Fondo *\/\n\n document.body.style.background =\n \"linear-gradient(#9ee7ff,#fff5b8)\";\n\n\n \/* Informaci\u00f3n nivel *\/\n\n levelText.innerHTML =\n `\ud83c\udfae Nivel ${currentLevel + 1} de ${levels.length}`;\n\n progress.style.width =\n `${((currentLevel + 1) \/ levels.length) * 100}%`;\n\n\n \/* Personaje *\/\n\n characterFace.innerHTML =\n level.character;\n\n characterMessage.innerHTML =\n \"\u00a1Completemos juntos este vers\u00edculo!\";\n\n\n \/* Pista *\/\n\n hint.innerHTML =\n `\ud83d\udca1 Busca primero el dibujo ${level.pieces[0].icon}`;\n\n\n \/* Crear espacios *\/\n\n level.pieces.forEach(\n (piece,index)=>{\n\n const slot =\n document.createElement(\"div\");\n\n slot.className =\n \"slot\";\n\n slot.dataset.answer =\n index;\n\n slot.innerHTML = `\n\n <div class=\"slot-icon\">\n ${piece.icon}\n <\/div>\n\n <div class=\"slot-number\">\n Pieza ${index + 1}\n <\/div>\n\n `;\n\n\n \/* DROP *\/\n\n slot.addEventListener(\n \"dragover\",\n event => {\n\n event.preventDefault();\n\n }\n );\n\n\n slot.addEventListener(\n \"drop\",\n ()=>{\n\n if(draggedPiece){\n\n checkPiece(\n draggedPiece,\n slot\n );\n\n }\n\n }\n );\n\n\n \/* TOCAR *\/\n\n slot.addEventListener(\n \"click\",\n ()=>{\n\n if(selectedPiece){\n\n checkPiece(\n selectedPiece,\n slot\n );\n\n }\n\n }\n );\n\n\n board.appendChild(slot);\n\n }\n );\n\n\n \/* Crear piezas mezcladas *\/\n\n const shuffledPieces =\n shuffle(\n level.pieces.map(\n (piece,index)=>({\n ...piece,\n originalIndex:index\n })\n )\n );\n\n\n shuffledPieces.forEach(\n pieceData => {\n\n createPiece(\n pieceData\n );\n\n }\n );\n\n}\n\n\n\/* ==================================\n CREAR UNA PIEZA\n================================== *\/\n\nfunction createPiece(pieceData){\n\n const piece =\n document.createElement(\"div\");\n\n const colorNumber =\n (pieceData.originalIndex % 6) + 1;\n\n piece.className =\n `piece color${colorNumber}`;\n\n piece.dataset.piece =\n pieceData.originalIndex;\n\n piece.draggable =\n true;\n\n piece.innerHTML = `\n\n <div class=\"piece-icon\">\n ${pieceData.icon}\n <\/div>\n\n <div>\n ${pieceData.text}\n <\/div>\n\n `;\n\n\n \/* Arrastrar *\/\n\n piece.addEventListener(\n \"dragstart\",\n ()=>{\n\n if(levelFinished){\n return;\n }\n\n draggedPiece =\n piece;\n\n }\n );\n\n\n piece.addEventListener(\n \"dragend\",\n ()=>{\n\n draggedPiece =\n null;\n\n }\n );\n\n\n \/* Tocar *\/\n\n piece.addEventListener(\n \"click\",\n ()=>{\n\n if(levelFinished){\n return;\n }\n\n if(\n piece.parentElement.classList.contains(\n \"slot\"\n )\n ){\n return;\n }\n\n document\n .querySelectorAll(\".piece\")\n .forEach(p=>{\n\n p.classList.remove(\n \"selected\"\n );\n\n });\n\n\n selectedPiece =\n piece;\n\n piece.classList.add(\n \"selected\"\n );\n\n message.innerHTML =\n \"\ud83d\udc46 \u00a1Muy bien! Ahora toca el espacio donde crees que va.\";\n\n }\n );\n\n\n piecesContainer.appendChild(\n piece\n );\n\n}\n\n\n\/* ==================================\n COMPROBAR PIEZA\n================================== *\/\n\nfunction checkPiece(piece,slot){\n\n if(\n levelFinished ||\n slot.classList.contains(\"correct\")\n ){\n return;\n }\n\n\n const pieceNumber =\n Number(\n piece.dataset.piece\n );\n\n const answerNumber =\n Number(\n slot.dataset.answer\n );\n\n\n \/* CORRECTA *\/\n\n if(\n pieceNumber ===\n answerNumber\n ){\n\n slot.innerHTML = \"\";\n\n slot.appendChild(\n piece\n );\n\n slot.classList.add(\n \"correct\"\n );\n\n piece.draggable =\n false;\n\n piece.style.cursor =\n \"default\";\n\n piece.classList.remove(\n \"selected\"\n );\n\n\n completedPieces++;\n\n\n message.innerHTML =\n randomSuccessMessage();\n\n\n selectedPiece =\n null;\n\n draggedPiece =\n null;\n\n\n updateHint();\n\n\n if(\n completedPieces === 6\n ){\n\n finishLevel();\n\n }\n\n }\n\n\n \/* INCORRECTA *\/\n\n else{\n\n message.innerHTML =\n randomTryAgainMessage();\n\n slot.style.transform =\n \"scale(.94)\";\n\n setTimeout(\n ()=>{\n\n slot.style.transform =\n \"scale(1)\";\n\n },\n 250\n );\n\n }\n\n}\n\n\n\/* ==================================\n MENSAJES PARA NI\u00d1OS\n================================== *\/\n\nfunction randomSuccessMessage(){\n\n const messages = [\n\n \"\ud83c\udf89 \u00a1Excelente! Esa pieza est\u00e1 perfecta.\",\n\n \"\u2b50 \u00a1Muy bien! Sigue as\u00ed.\",\n\n \"\ud83c\udf08 \u00a1Correcto! Vas genial.\",\n\n \"\ud83d\udc4f \u00a1Lo encontraste!\",\n\n \"\ud83d\ude0a \u00a1S\u00ed! Esa pieza va ah\u00ed.\",\n\n \"\ud83d\udc9b \u00a1Buen trabajo!\"\n\n ];\n\n return messages[\n Math.floor(\n Math.random() *\n messages.length\n )\n ];\n\n}\n\n\nfunction randomTryAgainMessage(){\n\n const messages = [\n\n \"\ud83d\ude0a Casi... int\u00e9ntalo otra vez.\",\n\n \"\ud83e\udde9 Mira bien el dibujo.\",\n\n \"\ud83d\udca1 Esa pieza tiene otro lugar.\",\n\n \"\ud83c\udf1f \u00a1Sigue intentando!\",\n\n \"\ud83d\udc40 Observa la figura y prueba otra vez.\"\n\n ];\n\n return messages[\n Math.floor(\n Math.random() *\n messages.length\n )\n ];\n\n}\n\n\n\/* ==================================\n ACTUALIZAR PISTA\n================================== *\/\n\nfunction updateHint(){\n\n const level =\n levels[currentLevel];\n\n if(\n completedPieces < 6\n ){\n\n const slots =\n [...board.querySelectorAll(\n \".slot\"\n )];\n\n const nextEmpty =\n slots.find(\n slot =>\n !slot.classList.contains(\n \"correct\"\n )\n );\n\n\n if(nextEmpty){\n\n const number =\n Number(\n nextEmpty.dataset.answer\n );\n\n hint.innerHTML =\n `\ud83d\udca1 Busca la pieza con ${level.pieces[number].icon}`;\n\n }\n\n }\n\n}\n\n\n\/* ==================================\n BOT\u00d3N PISTA\n================================== *\/\n\nfunction giveHint(){\n\n if(levelFinished){\n\n hint.innerHTML =\n \"\u2b50 \u00a1Ya completaste este nivel!\";\n\n return;\n\n }\n\n\n const emptySlot =\n [...board.querySelectorAll(\n \".slot\"\n )]\n .find(\n slot =>\n !slot.classList.contains(\n \"correct\"\n )\n );\n\n\n if(!emptySlot){\n return;\n }\n\n\n const number =\n Number(\n emptySlot.dataset.answer\n );\n\n const level =\n levels[currentLevel];\n\n\n hint.innerHTML =\n `\ud83d\udca1 Busca esta figura: ${level.pieces[number].icon}`;\n\n\n emptySlot.style.background =\n \"#fff0a5\";\n\n emptySlot.style.transform =\n \"scale(1.05)\";\n\n\n setTimeout(\n ()=>{\n\n if(\n !emptySlot.classList.contains(\n \"correct\"\n )\n ){\n\n emptySlot.style.background =\n \"\";\n\n emptySlot.style.transform =\n \"\";\n\n }\n\n },\n 1100\n );\n\n}\n\n\n\/* ==================================\n TERMINAR NIVEL\n================================== *\/\n\nfunction finishLevel(){\n\n levelFinished =\n true;\n\n\n const level =\n levels[currentLevel];\n\n\n message.innerHTML =\n \"\ud83c\udf1f \u00a1LO LOGRASTE! \ud83c\udf1f<br>\u00a1Completaste el vers\u00edculo!\";\n\n\n verseReference.innerHTML =\n `\u2b50 ${level.reference}`;\n\n fullVerse.innerHTML =\n `\u201c${level.verse}\u201d`;\n\n\n verseBox.style.display =\n \"block\";\n\n verseBox.classList.add(\n \"celebration\"\n );\n\n\n hint.innerHTML =\n \"\u2764\ufe0f \u00a1Qu\u00e9 bonito es aprender la Palabra de Dios!\";\n\n\n document.body.style.background =\n \"linear-gradient(135deg,#ffd6e7,#fff0a8,#b7f5cb,#a8e1ff)\";\n\n\n \/* A\u00f1adir estrella *\/\n\n if(\n completedLevels <\n currentLevel + 1\n ){\n\n completedLevels =\n currentLevel + 1;\n\n }\n\n updateStars();\n\n\n \/* \u00daltimo nivel *\/\n\n if(\n currentLevel ===\n levels.length - 1\n ){\n\n nextButton.innerHTML =\n \"\ud83c\udfc6 Jugar desde el principio\";\n\n }\n\n else{\n\n nextButton.innerHTML =\n \"\ud83d\ude80 Siguiente nivel\";\n\n }\n\n\n nextButton.style.display =\n \"inline-block\";\n\n}\n\n\n\/* ==================================\n ESTRELLAS\n================================== *\/\n\nfunction updateStars(){\n\n stars.innerHTML = \"\";\n\n for(\n let i = 0;\n i < levels.length;\n i++\n ){\n\n const star =\n document.createElement(\n \"span\"\n );\n\n star.className =\n \"star\";\n\n if(\n i < completedLevels\n ){\n\n star.innerHTML =\n \"\u2b50\";\n\n }\n\n else{\n\n star.innerHTML =\n \"\u2606\";\n\n }\n\n stars.appendChild(\n star\n );\n\n }\n\n}\n\n\n\/* ==================================\n SIGUIENTE NIVEL\n================================== *\/\n\nfunction nextLevel(){\n\n if(\n currentLevel <\n levels.length - 1\n ){\n\n currentLevel++;\n\n }\n\n else{\n\n currentLevel = 0;\n\n completedLevels = 0;\n\n updateStars();\n\n }\n\n\n loadLevel();\n\n\n window.scrollTo({\n top:0,\n behavior:\"smooth\"\n });\n\n}\n\n\n\/* ==================================\n REPETIR NIVEL\n================================== *\/\n\nfunction restartLevel(){\n\n loadLevel();\n\n}\n\n\n\/* ==================================\n INICIAR JUEGO\n================================== *\/\n\nupdateStars();\n\nloadLevel();\n\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Rompecabezas B\u00edblico para Ni\u00f1os \ud83c\udf08 Camino de la Palabra \ud83e\udde9 \u00a1Completa los vers\u00edculos y gana estrellas! \u2b50 Nivel 1 de 6 \ud83d\udc67\ud83d\udcd6 \u00a1Hola! Ay\u00fadame a completar el vers\u00edculo. \ud83d\udca1 Observa los dibujos para encontrar la primera pieza. \ud83e\udde9 Tus piezas Reina-Valera 1960 \ud83d\udca1 Dame una pista \ud83d\udd04 Repetir nivel \ud83d\ude80 Siguiente nivel<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","slim_seo":{"title":"Promesas - NCP","description":"Rompecabezas B\u00edblico para Ni\u00f1os \ud83c\udf08 Camino de la Palabra \ud83e\udde9 \u00a1Completa los vers\u00edculos y gana estrellas! \u2b50 Nivel 1 de 6 \ud83d\udc67\ud83d\udcd6 \u00a1Hola! Ay\u00fadame a completar el vers\u00edculo. \ud83d\udca1"},"iawp_total_views":9,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"_slim_seo_primary_term_category":0,"_slim_seo_primary_term_post_tag":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3772","post","type-post","status-publish","format-standard","hentry","category-todos-los-articulos","entry"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/posts\/3772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/comments?post=3772"}],"version-history":[{"count":1,"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/posts\/3772\/revisions"}],"predecessor-version":[{"id":3773,"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/posts\/3772\/revisions\/3773"}],"wp:attachment":[{"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/media?parent=3772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/categories?post=3772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notasconproposito.com\/index.php\/wp-json\/wp\/v2\/tags?post=3772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}