Selecci\u00f3n m\u00faltiple con tarjetas \u00b7 APA 7<\/title>\r\n<style>\r\n:root{\r\n --uapa-azul:#041147;\r\n --uapa-naranja:#ff8300;\r\n --gris-50:#f8f9ff;\r\n --gris-100:#eef2ff;\r\n --gris-200:#e6eaf5;\r\n --gris-300:#cbd5e1;\r\n --txt:#1c223a;\r\n --txt-suave:#47516f;\r\n --ok:#107c41;\r\n --bad:#c62828;\r\n}\r\n*{box-sizing:border-box}\r\nbody{\r\n margin:0;\r\n font-family:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif;\r\n background:linear-gradient(180deg,#f8f9ff 0%,#ffffff 100%);\r\n color:var(--txt);\r\n}\r\n.apa-game{\r\n max-width:1080px;\r\n margin:0 auto;\r\n padding:24px 16px 38px;\r\n}\r\n.game-head{\r\n background:var(--uapa-azul);\r\n color:#fff;\r\n border-radius:18px;\r\n padding:22px 18px;\r\n text-align:center;\r\n box-shadow:0 10px 28px rgba(4,17,71,.16);\r\n}\r\n.game-head h1{\r\n margin:0;\r\n color:var(--uapa-naranja);\r\n font-size:clamp(1.55rem,1rem + 2vw,2.3rem);\r\n font-weight:900;\r\n line-height:1.2;\r\n text-transform:none !important;\r\n}\r\n.game-head p{\r\n margin:8px auto 0;\r\n max-width:760px;\r\n line-height:1.55;\r\n}\r\n.game-info{\r\n display:grid;\r\n grid-template-columns:1fr auto;\r\n gap:12px;\r\n align-items:center;\r\n margin-top:18px;\r\n background:#fff;\r\n border:1px solid var(--gris-300);\r\n border-radius:16px;\r\n padding:14px 16px;\r\n box-shadow:0 8px 22px rgba(4,17,71,.07);\r\n}\r\n.badge{\r\n display:inline-flex;\r\n width:fit-content;\r\n align-items:center;\r\n gap:8px;\r\n background:rgba(255,131,0,.14);\r\n color:var(--uapa-azul);\r\n border-radius:999px;\r\n padding:7px 12px;\r\n font-weight:850;\r\n font-size:.88rem;\r\n}\r\n.progress-wrap{\r\n display:flex;\r\n align-items:center;\r\n gap:12px;\r\n justify-content:flex-end;\r\n}\r\n#progressText{\r\n color:var(--txt-suave);\r\n font-size:.9rem;\r\n white-space:nowrap;\r\n}\r\n.progress{\r\n width:min(260px,100%);\r\n height:12px;\r\n background:#edf1ff;\r\n border-radius:999px;\r\n overflow:hidden;\r\n}\r\n.progress span{\r\n display:block;\r\n height:100%;\r\n width:0%;\r\n background:linear-gradient(90deg,var(--uapa-naranja),#ffad4d);\r\n transition:width .25s ease;\r\n}\r\n.game-stage{\r\n margin-top:18px;\r\n display:grid;\r\n grid-template-columns:minmax(0,1fr) 300px;\r\n gap:16px;\r\n align-items:start;\r\n}\r\n\r\n.game-stage > *{\r\n min-width:0;\r\n}\r\n.question-card{\r\n background:#fff;\r\n border:1px solid var(--gris-300);\r\n border-radius:22px;\r\n padding:18px;\r\n box-shadow:0 10px 26px rgba(4,17,71,.08);\r\n}\r\n.question-top{\r\n display:flex;\r\n justify-content:space-between;\r\n gap:10px;\r\n align-items:flex-start;\r\n margin-bottom:14px;\r\n}\r\n.counter,.score{\r\n display:inline-flex;\r\n border-radius:999px;\r\n padding:6px 11px;\r\n font-size:.84rem;\r\n font-weight:900;\r\n}\r\n.counter{\r\n background:#fff7ef;\r\n color:#8a5100;\r\n border:1px solid #f0cf9f;\r\n}\r\n.score{\r\n background:var(--gris-100);\r\n color:var(--uapa-azul);\r\n border:1px solid var(--gris-300);\r\n}\r\n.question-card h2{\r\n margin:0 0 14px;\r\n color:var(--uapa-azul);\r\n font-size:clamp(1.18rem,1rem + 1vw,1.55rem);\r\n line-height:1.32;\r\n text-transform:none !important;\r\n}\r\n.instruction{\r\n color:var(--txt-suave);\r\n background:#f9faff;\r\n border:1px solid #e1e6f5;\r\n border-radius:14px;\r\n padding:11px 12px;\r\n margin:0 0 14px;\r\n line-height:1.55;\r\n}\r\n.card-grid{\r\n display:grid;\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n gap:12px;\r\n}\r\n.answer-card{\r\n min-height:96px;\r\n border:2px solid #dfe5f6;\r\n border-radius:16px;\r\n background:#fff;\r\n padding:13px;\r\n cursor:grab;\r\n text-align:left;\r\n color:var(--txt);\r\n display:flex;\r\n gap:12px;\r\n align-items:flex-start;\r\n font:inherit;\r\n box-shadow:0 8px 18px rgba(4,17,71,.06);\r\n transition:.18s ease;\r\n}\r\n.answer-card:hover{\r\n transform:translateY(-2px);\r\n border-color:#a9b8ea;\r\n}\r\n.answer-card:active{\r\n cursor:grabbing;\r\n}\r\n.answer-card[disabled]{\r\n cursor:default;\r\n}\r\n.answer-card .letter{\r\n flex:0 0 34px;\r\n width:34px;\r\n height:34px;\r\n border-radius:50%;\r\n display:grid;\r\n place-items:center;\r\n background:var(--gris-100);\r\n color:var(--uapa-azul);\r\n border:1px solid var(--gris-300);\r\n font-weight:900;\r\n text-transform:uppercase;\r\n}\r\n.answer-card.correct{\r\n border-color:#7fc696;\r\n background:#eef8f1;\r\n}\r\n.answer-card.correct .letter{\r\n background:var(--ok);\r\n color:#fff;\r\n border-color:var(--ok);\r\n}\r\n.answer-card.incorrect{\r\n border-color:#efb1b1;\r\n background:#fff1f1;\r\n}\r\n.answer-card.incorrect .letter{\r\n background:var(--bad);\r\n color:#fff;\r\n border-color:var(--bad);\r\n}\r\n.drop-zone{\r\n margin-top:16px;\r\n border:2px dashed #b8c3e7;\r\n background:#f9faff;\r\n border-radius:18px;\r\n min-height:98px;\r\n display:grid;\r\n place-items:center;\r\n text-align:center;\r\n padding:14px;\r\n color:var(--txt-suave);\r\n transition:.18s ease;\r\n}\r\n.drop-zone strong{\r\n color:var(--uapa-azul);\r\n}\r\n.drop-zone.active{\r\n border-color:var(--uapa-naranja);\r\n background:#fff7ef;\r\n transform:scale(1.01);\r\n}\r\n.feedback{\r\n display:none;\r\n margin-top:14px;\r\n border-radius:14px;\r\n padding:13px 14px;\r\n line-height:1.55;\r\n}\r\n.feedback.show{display:block}\r\n.feedback.ok{\r\n background:#eef8f1;\r\n color:var(--ok);\r\n border:1px solid #b7dfc2;\r\n}\r\n.feedback.bad{\r\n background:#fff1f1;\r\n color:var(--bad);\r\n border:1px solid #f0b8b8;\r\n}\r\n.actions{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:10px;\r\n margin-top:16px;\r\n}\r\n.btn{\r\n border:none;\r\n border-radius:999px;\r\n padding:10px 14px;\r\n font-weight:850;\r\n cursor:pointer;\r\n transition:.18s ease;\r\n text-transform:none !important;\r\n}\r\n.btn:hover{transform:translateY(-1px)}\r\n.primary{background:var(--uapa-azul); color:#fff}\r\n.secondary{background:#fff; color:var(--uapa-azul); border:2px solid var(--uapa-azul)}\r\n.accent{background:var(--uapa-naranja); color:#111}\r\n.side-panel{\r\n background:#fff;\r\n border:1px solid var(--gris-300);\r\n border-radius:22px;\r\n padding:16px;\r\n box-shadow:0 10px 26px rgba(4,17,71,.06);\r\n min-width:0;\r\n overflow:hidden;\r\n}\r\n.side-panel h3{\r\n margin:0 0 8px;\r\n color:var(--uapa-azul);\r\n font-size:1.08rem;\r\n}\r\n.side-panel p{\r\n margin:0 0 12px;\r\n color:var(--txt-suave);\r\n line-height:1.55;\r\n font-size:.94rem;\r\n}\r\n.map{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fit,minmax(38px,1fr));\r\n gap:7px;\r\n width:100%;\r\n max-width:100%;\r\n min-width:0;\r\n overflow:hidden;\r\n}\r\n.map button{\r\n width:100%;\r\n min-width:0;\r\n height:34px;\r\n padding:0;\r\n border-radius:10px;\r\n border:1px solid var(--gris-300);\r\n background:#f9faff;\r\n color:var(--uapa-azul);\r\n font-weight:900;\r\n cursor:pointer;\r\n display:grid;\r\n place-items:center;\r\n}\r\n.map button.current{\r\n outline:3px solid rgba(255,131,0,.28);\r\n border-color:var(--uapa-naranja);\r\n}\r\n.map button.done-ok{\r\n background:#eef8f1;\r\n color:var(--ok);\r\n border-color:#8dd09f;\r\n}\r\n.map button.done-bad{\r\n background:#fff1f1;\r\n color:var(--bad);\r\n border-color:#efb1b1;\r\n}\r\n.result{\r\n display:none;\r\n margin-top:18px;\r\n background:linear-gradient(135deg,#041147,#0f2d88);\r\n color:#fff;\r\n border-radius:18px;\r\n padding:18px;\r\n box-shadow:0 12px 28px rgba(4,17,71,.18);\r\n}\r\n.result h2{\r\n margin:0 0 8px;\r\n color:var(--uapa-naranja);\r\n}\r\n.result p{margin:0; line-height:1.6}\r\n@media(max-width:860px){\r\n .game-info{grid-template-columns:1fr}\r\n .progress-wrap{justify-content:flex-start; flex-wrap:wrap}\r\n .progress{width:100%}\r\n .game-stage{grid-template-columns:1fr}\r\n}\r\n@media(max-width:560px){\r\n .apa-game{padding:22px 12px 32px}\r\n .game-head{padding:20px 14px}\r\n .game-head h1{font-size:clamp(1.45rem,7vw,1.85rem)}\r\n .question-top{flex-direction:column}\r\n .card-grid{grid-template-columns:1fr}\r\n .answer-card{min-height:76px}\r\n .actions .btn{width:100%}\r\n .map{grid-template-columns:repeat(auto-fit,minmax(38px,1fr))}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<main class=\"apa-game\">\r\n <header class=\"game-head\">\r\n <h1>Selecci\u00f3n m\u00faltiple \u00b7 APA 7<\/h1>\r\n <p>Lee la pregunta y arrastra la tarjeta correcta al \u00e1rea de respuesta. En celular tambi\u00e9n puedes tocar una tarjeta para responder.<\/p>\r\n <\/header>\r\n\r\n <section class=\"game-info\" aria-label=\"Progreso del ejercicio\">\r\n <span class=\"badge\">Tarjetas interactivas \u00b7 15 reactivos<\/span>\r\n <div class=\"progress-wrap\">\r\n <span id=\"progressText\">0 \/ 15 completadas<\/span>\r\n <div class=\"progress\"><span id=\"progressBar\"><\/span><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"game-stage\">\r\n <article class=\"question-card\" aria-live=\"polite\">\r\n <div class=\"question-top\">\r\n <span id=\"counter\" class=\"counter\">Pregunta 1 de 15<\/span>\r\n <span id=\"scoreText\" class=\"score\">Aciertos: 0<\/span>\r\n <\/div>\r\n\r\n <h2 id=\"questionText\"><\/h2>\r\n\r\n <p class=\"instruction\">\r\n <strong>Din\u00e1mica:<\/strong> arrastra una tarjeta al recuadro de respuesta o t\u00f3cala directamente.\r\n <\/p>\r\n\r\n <div id=\"cardGrid\" class=\"card-grid\"><\/div>\r\n\r\n <div id=\"dropZone\" class=\"drop-zone\">\r\n <div>\r\n <strong>Suelta aqu\u00ed tu respuesta<\/strong><br>\r\n <span>Tambi\u00e9n puedes tocar una tarjeta si est\u00e1s desde el celular.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"feedback\" class=\"feedback\"><\/div>\r\n\r\n <div class=\"actions\">\r\n <button id=\"prevBtn\" class=\"btn secondary\" type=\"button\">Anterior<\/button>\r\n <button id=\"nextBtn\" class=\"btn primary\" type=\"button\">Siguiente<\/button>\r\n <button id=\"resetBtn\" class=\"btn accent\" type=\"button\">Reiniciar<\/button>\r\n <\/div>\r\n <\/article>\r\n\r\n <aside class=\"side-panel\">\r\n <h3>Mapa de avance<\/h3>\r\n <p>Verde indica respuesta correcta y rojo indica que conviene revisar el concepto.<\/p>\r\n <div id=\"map\" class=\"map\"><\/div>\r\n <\/aside>\r\n <\/section>\r\n\r\n <section id=\"result\" class=\"result\"><\/section>\r\n<\/main>\r\n\r\n<script>\r\nconst questions = [{\"question\": \"\u00bfCu\u00e1l es el tama\u00f1o de letra m\u00e1s utilizado en APA 7?\", \"options\": [\"10\", \"11\", \"12\", \"14\"], \"correct\": 2, \"explanation\": \"La respuesta correcta es 12.\"}, {\"question\": \"\u00bfQu\u00e9 tipo de alineaci\u00f3n utiliza APA 7?\", \"options\": [\"Justificada\", \"Centrada\", \"Alineada a la izquierda\", \"Alineada a la derecha\"], \"correct\": 2, \"explanation\": \"APA utiliza alineaci\u00f3n a la izquierda.\"}, {\"question\": \"\u00bfCu\u00e1l de las siguientes opciones representa una cita narrativa?\", \"options\": [\"(P\u00e9rez, 2020)\", \"Seg\u00fan P\u00e9rez (2020)\u2026\", \"\u201cTexto citado\u201d (2020)\", \"(2020, P\u00e9rez)\"], \"correct\": 1, \"explanation\": \"La cita narrativa integra el apellido del autor en la oraci\u00f3n.\"}, {\"question\": \"\u00bfCu\u00e1l es el objetivo principal de citar fuentes?\", \"options\": [\"Decorar el trabajo\", \"Evitar escribir mucho\", \"Reconocer la autor\u00eda y evitar plagio\", \"Completar p\u00e1ginas\"], \"correct\": 2, \"explanation\": \"Citar permite reconocer la autor\u00eda y evitar plagio.\"}, {\"question\": \"\u00bfQu\u00e9 elemento NO pertenece a una referencia bibliogr\u00e1fica?\", \"options\": [\"Autor\", \"A\u00f1o\", \"Pa\u00eds\", \"T\u00edtulo\"], \"correct\": 2, \"explanation\": \"El pa\u00eds no es un elemento b\u00e1sico de la referencia en APA 7.\"}, {\"question\": \"\u00bfCu\u00e1l de estos recursos es m\u00e1s confiable para investigaciones acad\u00e9micas?\", \"options\": [\"Blog personal\", \"Revista cient\u00edfica\", \"Redes sociales\", \"Foro abierto\"], \"correct\": 1, \"explanation\": \"La revista cient\u00edfica es la opci\u00f3n m\u00e1s confiable.\"}, {\"question\": \"\u00bfQu\u00e9 gestor bibliogr\u00e1fico permite organizar referencias autom\u00e1ticamente?\", \"options\": [\"Canva\", \"Excel\", \"Zotero\", \"Word\"], \"correct\": 2, \"explanation\": \"Zotero es un gestor bibliogr\u00e1fico.\"}, {\"question\": \"\u00bfQu\u00e9 debe incluir una cita textual corta?\", \"options\": [\"Solo el autor\", \"Autor, a\u00f1o y p\u00e1gina\", \"Autor, a\u00f1o y comillas\", \"Solo la p\u00e1gina\"], \"correct\": 1, \"explanation\": \"Debe incluir autor, a\u00f1o y p\u00e1gina.\"}, {\"question\": \"\u00bfQu\u00e9 significa DOI?\", \"options\": [\"Documento Oficial Internacional\", \"Digital Object Identifier\", \"Direcci\u00f3n Oficial de Internet\", \"Documento Online Integrado\"], \"correct\": 1, \"explanation\": \"DOI significa Digital Object Identifier.\"}, {\"question\": \"\u00bfCu\u00e1l es una pr\u00e1ctica \u00e9tica al usar informaci\u00f3n de internet?\", \"options\": [\"Copiar y pegar sin citar\", \"Modificar autores\", \"Verificar la fuente y citarla\", \"Eliminar referencias\"], \"correct\": 2, \"explanation\": \"Se debe verificar la fuente y citarla.\"}, {\"question\": \"\u00bfC\u00f3mo deben aparecer los t\u00edtulos de libros en las referencias APA?\", \"options\": [\"Entre comillas\", \"En negrita\", \"En cursiva\", \"Subrayados\"], \"correct\": 2, \"explanation\": \"Los t\u00edtulos de libros se escriben en cursiva.\"}, {\"question\": \"\u00bfQu\u00e9 tipo de fuente recomienda APA?\", \"options\": [\"Comic Sans o Arial\", \"Arial o Times New Roman\", \"Impact o Arial\", \"Courier decorativo\"], \"correct\": 1, \"explanation\": \"APA recomienda fuentes legibles como Arial o Times New Roman.\"}, {\"question\": \"\u00bfCu\u00e1l es un ejemplo de plagio acad\u00e9mico?\", \"options\": [\"Citar correctamente\", \"Parafrasear citando la fuente\", \"Copiar ideas sin reconocer al autor\", \"Elaborar referencias\"], \"correct\": 2, \"explanation\": \"Copiar ideas sin reconocer al autor es plagio.\"}, {\"question\": \"\u00bfQu\u00e9 debe hacerse al utilizar contenido generado con IA?\", \"options\": [\"Revisarlo y ocultarlo\", \"Reconocer y revisar cr\u00edticamente su uso\", \"Presentarlo como propio\", \"Eliminarlo del trabajo\"], \"correct\": 1, \"explanation\": \"Debe reconocerse y revisarse cr\u00edticamente.\"}, {\"question\": \"\u00bfQu\u00e9 informaci\u00f3n debe aparecer primero en una referencia APA?\", \"options\": [\"Editorial\", \"Ciudad\", \"Autor\", \"P\u00e1gina web\"], \"correct\": 2, \"explanation\": \"La referencia inicia con el autor.\"}];\r\nconst letters = ['a','b','c','d'];\r\nlet current = 0;\r\nlet answers = Array(questions.length).fill(null);\r\nlet draggedIndex = null;\r\n\r\nconst questionText = document.getElementById('questionText');\r\nconst cardGrid = document.getElementById('cardGrid');\r\nconst dropZone = document.getElementById('dropZone');\r\nconst feedback = document.getElementById('feedback');\r\nconst counter = document.getElementById('counter');\r\nconst scoreText = document.getElementById('scoreText');\r\nconst progressText = document.getElementById('progressText');\r\nconst progressBar = document.getElementById('progressBar');\r\nconst map = document.getElementById('map');\r\nconst result = document.getElementById('result');\r\nconst prevBtn = document.getElementById('prevBtn');\r\nconst nextBtn = document.getElementById('nextBtn');\r\nconst resetBtn = document.getElementById('resetBtn');\r\n\r\nfunction getScore(){\r\n return answers.reduce((sum, answer, index) => sum + (answer === questions[index].correct ? 1 : 0), 0);\r\n}\r\n\r\nfunction getAnswered(){\r\n return answers.filter(answer => answer !== null).length;\r\n}\r\n\r\nfunction updateProgress(){\r\n const answered = getAnswered();\r\n const total = questions.length;\r\n const percent = Math.round((answered \/ total) * 100);\r\n progressText.textContent = answered + ' \/ ' + total + ' completadas';\r\n progressBar.style.width = percent + '%';\r\n scoreText.textContent = 'Aciertos: ' + getScore();\r\n}\r\n\r\nfunction buildMap(){\r\n map.innerHTML = '';\r\n questions.forEach((_, index) => {\r\n const btn = document.createElement('button');\r\n btn.type = 'button';\r\n btn.textContent = index + 1;\r\n if(index === current) btn.classList.add('current');\r\n if(answers[index] !== null){\r\n btn.classList.add(answers[index] === questions[index].correct ? 'done-ok' : 'done-bad');\r\n }\r\n btn.addEventListener('click', () => {\r\n current = index;\r\n render();\r\n });\r\n map.appendChild(btn);\r\n });\r\n}\r\n\r\nfunction render(){\r\n const q = questions[current];\r\n counter.textContent = 'Pregunta ' + (current + 1) + ' de ' + questions.length;\r\n questionText.textContent = q.question;\r\n cardGrid.innerHTML = '';\r\n feedback.className = 'feedback';\r\n feedback.innerHTML = '';\r\n draggedIndex = null;\r\n\r\n q.options.forEach((option, index) => {\r\n const card = document.createElement('button');\r\n card.type = 'button';\r\n card.className = 'answer-card';\r\n card.draggable = answers[current] === null;\r\n card.dataset.index = index;\r\n card.innerHTML = '<span class=\"letter\">' + letters[index] + '<\/span><span>' + option + '<\/span>';\r\n\r\n if(answers[current] !== null){\r\n card.disabled = true;\r\n if(index === q.correct) card.classList.add('correct');\r\n if(index === answers[current] && index !== q.correct) card.classList.add('incorrect');\r\n }\r\n\r\n card.addEventListener('click', () => choose(index));\r\n\r\n card.addEventListener('dragstart', event => {\r\n draggedIndex = index;\r\n event.dataTransfer.setData('text\/plain', String(index));\r\n dropZone.classList.add('active');\r\n });\r\n\r\n card.addEventListener('dragend', () => {\r\n dropZone.classList.remove('active');\r\n });\r\n\r\n cardGrid.appendChild(card);\r\n });\r\n\r\n if(answers[current] !== null){\r\n showFeedback(answers[current] === q.correct);\r\n }\r\n\r\n prevBtn.disabled = current === 0;\r\n nextBtn.textContent = current === questions.length - 1 ? 'Ver resultado' : 'Siguiente';\r\n\r\n updateProgress();\r\n buildMap();\r\n renderResult(false);\r\n}\r\n\r\nfunction choose(index){\r\n if(answers[current] !== null) return;\r\n answers[current] = index;\r\n render();\r\n\r\n if(current < questions.length - 1){\r\n setTimeout(() => {\r\n current++;\r\n render();\r\n }, 900);\r\n }else{\r\n setTimeout(() => renderResult(true), 400);\r\n }\r\n}\r\n\r\nfunction showFeedback(ok){\r\n const q = questions[current];\r\n feedback.className = 'feedback show ' + (ok ? 'ok' : 'bad');\r\n feedback.innerHTML = '<strong>' + (ok ? '\u00a1Correcto!' : 'Respuesta incorrecta.') + '<\/strong><br>' + q.explanation;\r\n}\r\n\r\ndropZone.addEventListener('dragover', event => {\r\n event.preventDefault();\r\n dropZone.classList.add('active');\r\n});\r\n\r\ndropZone.addEventListener('dragleave', () => {\r\n dropZone.classList.remove('active');\r\n});\r\n\r\ndropZone.addEventListener('drop', event => {\r\n event.preventDefault();\r\n dropZone.classList.remove('active');\r\n const index = Number(event.dataTransfer.getData('text\/plain'));\r\n if(!Number.isNaN(index)) choose(index);\r\n});\r\n\r\nfunction renderResult(scroll){\r\n const complete = getAnswered() === questions.length;\r\n if(!complete){\r\n result.style.display = 'none';\r\n result.innerHTML = '';\r\n return;\r\n }\r\n\r\n const totalScore = getScore();\r\n const percent = Math.round((totalScore \/ questions.length) * 100);\r\n let message = 'Buen avance. Revisa las preguntas marcadas en rojo para reforzar los detalles.';\r\n if(percent >= 90) message = 'Excelente dominio de los conceptos trabajados.';\r\n else if(percent >= 70) message = 'Buen resultado. Solo necesitas reforzar algunos detalles.';\r\n\r\n result.style.display = 'block';\r\n result.innerHTML = '<h2>Resultado final<\/h2><p>Obtuviste <strong>' + totalScore + ' de ' + questions.length + '<\/strong> respuestas correctas (' + percent + '%). ' + message + '<\/p>';\r\n\r\n if(scroll) result.scrollIntoView({behavior:'smooth', block:'start'});\r\n}\r\n\r\nprevBtn.addEventListener('click', () => {\r\n if(current > 0){\r\n current--;\r\n render();\r\n }\r\n});\r\n\r\nnextBtn.addEventListener('click', () => {\r\n if(current < questions.length - 1){\r\n current++;\r\n render();\r\n }else{\r\n renderResult(true);\r\n }\r\n});\r\n\r\nresetBtn.addEventListener('click', () => {\r\n current = 0;\r\n answers = Array(questions.length).fill(null);\r\n result.style.display = 'none';\r\n result.innerHTML = '';\r\n render();\r\n window.scrollTo({top:0, behavior:'smooth'});\r\n});\r\n\r\nrender();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Selecci\u00f3n m\u00faltiple con tarjetas \u00b7 APA 7 Selecci\u00f3n m\u00faltiple \u00b7 APA 7 Lee la pregunta y arrastra la tarjeta correcta al \u00e1rea de respuesta. En celular tambi\u00e9n puedes tocar una tarjeta para responder. Tarjetas interactivas \u00b7 15 reactivos 0 \/ 15 completadas Pregunta 1 de 15 Aciertos: 0 Din\u00e1mica: arrastra una tarjeta al recuadro de […]<\/p>\n","protected":false},"author":1,"featured_media":814,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-818","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ejercicios"],"_links":{"self":[{"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/comments?post=818"}],"version-history":[{"count":7,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/818\/revisions"}],"predecessor-version":[{"id":825,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/818\/revisions\/825"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/media\/814"}],"wp:attachment":[{"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/media?parent=818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/categories?post=818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/tags?post=818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nSelecci\u00f3n m\u00faltiple con tarjetas \u00b7 APA 7<\/title>\r\n<style>\r\n:root{\r\n --uapa-azul:#041147;\r\n --uapa-naranja:#ff8300;\r\n --gris-50:#f8f9ff;\r\n --gris-100:#eef2ff;\r\n --gris-200:#e6eaf5;\r\n --gris-300:#cbd5e1;\r\n --txt:#1c223a;\r\n --txt-suave:#47516f;\r\n --ok:#107c41;\r\n --bad:#c62828;\r\n}\r\n*{box-sizing:border-box}\r\nbody{\r\n margin:0;\r\n font-family:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif;\r\n background:linear-gradient(180deg,#f8f9ff 0%,#ffffff 100%);\r\n color:var(--txt);\r\n}\r\n.apa-game{\r\n max-width:1080px;\r\n margin:0 auto;\r\n padding:24px 16px 38px;\r\n}\r\n.game-head{\r\n background:var(--uapa-azul);\r\n color:#fff;\r\n border-radius:18px;\r\n padding:22px 18px;\r\n text-align:center;\r\n box-shadow:0 10px 28px rgba(4,17,71,.16);\r\n}\r\n.game-head h1{\r\n margin:0;\r\n color:var(--uapa-naranja);\r\n font-size:clamp(1.55rem,1rem + 2vw,2.3rem);\r\n font-weight:900;\r\n line-height:1.2;\r\n text-transform:none !important;\r\n}\r\n.game-head p{\r\n margin:8px auto 0;\r\n max-width:760px;\r\n line-height:1.55;\r\n}\r\n.game-info{\r\n display:grid;\r\n grid-template-columns:1fr auto;\r\n gap:12px;\r\n align-items:center;\r\n margin-top:18px;\r\n background:#fff;\r\n border:1px solid var(--gris-300);\r\n border-radius:16px;\r\n padding:14px 16px;\r\n box-shadow:0 8px 22px rgba(4,17,71,.07);\r\n}\r\n.badge{\r\n display:inline-flex;\r\n width:fit-content;\r\n align-items:center;\r\n gap:8px;\r\n background:rgba(255,131,0,.14);\r\n color:var(--uapa-azul);\r\n border-radius:999px;\r\n padding:7px 12px;\r\n font-weight:850;\r\n font-size:.88rem;\r\n}\r\n.progress-wrap{\r\n display:flex;\r\n align-items:center;\r\n gap:12px;\r\n justify-content:flex-end;\r\n}\r\n#progressText{\r\n color:var(--txt-suave);\r\n font-size:.9rem;\r\n white-space:nowrap;\r\n}\r\n.progress{\r\n width:min(260px,100%);\r\n height:12px;\r\n background:#edf1ff;\r\n border-radius:999px;\r\n overflow:hidden;\r\n}\r\n.progress span{\r\n display:block;\r\n height:100%;\r\n width:0%;\r\n background:linear-gradient(90deg,var(--uapa-naranja),#ffad4d);\r\n transition:width .25s ease;\r\n}\r\n.game-stage{\r\n margin-top:18px;\r\n display:grid;\r\n grid-template-columns:minmax(0,1fr) 300px;\r\n gap:16px;\r\n align-items:start;\r\n}\r\n\r\n.game-stage > *{\r\n min-width:0;\r\n}\r\n.question-card{\r\n background:#fff;\r\n border:1px solid var(--gris-300);\r\n border-radius:22px;\r\n padding:18px;\r\n box-shadow:0 10px 26px rgba(4,17,71,.08);\r\n}\r\n.question-top{\r\n display:flex;\r\n justify-content:space-between;\r\n gap:10px;\r\n align-items:flex-start;\r\n margin-bottom:14px;\r\n}\r\n.counter,.score{\r\n display:inline-flex;\r\n border-radius:999px;\r\n padding:6px 11px;\r\n font-size:.84rem;\r\n font-weight:900;\r\n}\r\n.counter{\r\n background:#fff7ef;\r\n color:#8a5100;\r\n border:1px solid #f0cf9f;\r\n}\r\n.score{\r\n background:var(--gris-100);\r\n color:var(--uapa-azul);\r\n border:1px solid var(--gris-300);\r\n}\r\n.question-card h2{\r\n margin:0 0 14px;\r\n color:var(--uapa-azul);\r\n font-size:clamp(1.18rem,1rem + 1vw,1.55rem);\r\n line-height:1.32;\r\n text-transform:none !important;\r\n}\r\n.instruction{\r\n color:var(--txt-suave);\r\n background:#f9faff;\r\n border:1px solid #e1e6f5;\r\n border-radius:14px;\r\n padding:11px 12px;\r\n margin:0 0 14px;\r\n line-height:1.55;\r\n}\r\n.card-grid{\r\n display:grid;\r\n grid-template-columns:repeat(2,minmax(0,1fr));\r\n gap:12px;\r\n}\r\n.answer-card{\r\n min-height:96px;\r\n border:2px solid #dfe5f6;\r\n border-radius:16px;\r\n background:#fff;\r\n padding:13px;\r\n cursor:grab;\r\n text-align:left;\r\n color:var(--txt);\r\n display:flex;\r\n gap:12px;\r\n align-items:flex-start;\r\n font:inherit;\r\n box-shadow:0 8px 18px rgba(4,17,71,.06);\r\n transition:.18s ease;\r\n}\r\n.answer-card:hover{\r\n transform:translateY(-2px);\r\n border-color:#a9b8ea;\r\n}\r\n.answer-card:active{\r\n cursor:grabbing;\r\n}\r\n.answer-card[disabled]{\r\n cursor:default;\r\n}\r\n.answer-card .letter{\r\n flex:0 0 34px;\r\n width:34px;\r\n height:34px;\r\n border-radius:50%;\r\n display:grid;\r\n place-items:center;\r\n background:var(--gris-100);\r\n color:var(--uapa-azul);\r\n border:1px solid var(--gris-300);\r\n font-weight:900;\r\n text-transform:uppercase;\r\n}\r\n.answer-card.correct{\r\n border-color:#7fc696;\r\n background:#eef8f1;\r\n}\r\n.answer-card.correct .letter{\r\n background:var(--ok);\r\n color:#fff;\r\n border-color:var(--ok);\r\n}\r\n.answer-card.incorrect{\r\n border-color:#efb1b1;\r\n background:#fff1f1;\r\n}\r\n.answer-card.incorrect .letter{\r\n background:var(--bad);\r\n color:#fff;\r\n border-color:var(--bad);\r\n}\r\n.drop-zone{\r\n margin-top:16px;\r\n border:2px dashed #b8c3e7;\r\n background:#f9faff;\r\n border-radius:18px;\r\n min-height:98px;\r\n display:grid;\r\n place-items:center;\r\n text-align:center;\r\n padding:14px;\r\n color:var(--txt-suave);\r\n transition:.18s ease;\r\n}\r\n.drop-zone strong{\r\n color:var(--uapa-azul);\r\n}\r\n.drop-zone.active{\r\n border-color:var(--uapa-naranja);\r\n background:#fff7ef;\r\n transform:scale(1.01);\r\n}\r\n.feedback{\r\n display:none;\r\n margin-top:14px;\r\n border-radius:14px;\r\n padding:13px 14px;\r\n line-height:1.55;\r\n}\r\n.feedback.show{display:block}\r\n.feedback.ok{\r\n background:#eef8f1;\r\n color:var(--ok);\r\n border:1px solid #b7dfc2;\r\n}\r\n.feedback.bad{\r\n background:#fff1f1;\r\n color:var(--bad);\r\n border:1px solid #f0b8b8;\r\n}\r\n.actions{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:10px;\r\n margin-top:16px;\r\n}\r\n.btn{\r\n border:none;\r\n border-radius:999px;\r\n padding:10px 14px;\r\n font-weight:850;\r\n cursor:pointer;\r\n transition:.18s ease;\r\n text-transform:none !important;\r\n}\r\n.btn:hover{transform:translateY(-1px)}\r\n.primary{background:var(--uapa-azul); color:#fff}\r\n.secondary{background:#fff; color:var(--uapa-azul); border:2px solid var(--uapa-azul)}\r\n.accent{background:var(--uapa-naranja); color:#111}\r\n.side-panel{\r\n background:#fff;\r\n border:1px solid var(--gris-300);\r\n border-radius:22px;\r\n padding:16px;\r\n box-shadow:0 10px 26px rgba(4,17,71,.06);\r\n min-width:0;\r\n overflow:hidden;\r\n}\r\n.side-panel h3{\r\n margin:0 0 8px;\r\n color:var(--uapa-azul);\r\n font-size:1.08rem;\r\n}\r\n.side-panel p{\r\n margin:0 0 12px;\r\n color:var(--txt-suave);\r\n line-height:1.55;\r\n font-size:.94rem;\r\n}\r\n.map{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fit,minmax(38px,1fr));\r\n gap:7px;\r\n width:100%;\r\n max-width:100%;\r\n min-width:0;\r\n overflow:hidden;\r\n}\r\n.map button{\r\n width:100%;\r\n min-width:0;\r\n height:34px;\r\n padding:0;\r\n border-radius:10px;\r\n border:1px solid var(--gris-300);\r\n background:#f9faff;\r\n color:var(--uapa-azul);\r\n font-weight:900;\r\n cursor:pointer;\r\n display:grid;\r\n place-items:center;\r\n}\r\n.map button.current{\r\n outline:3px solid rgba(255,131,0,.28);\r\n border-color:var(--uapa-naranja);\r\n}\r\n.map button.done-ok{\r\n background:#eef8f1;\r\n color:var(--ok);\r\n border-color:#8dd09f;\r\n}\r\n.map button.done-bad{\r\n background:#fff1f1;\r\n color:var(--bad);\r\n border-color:#efb1b1;\r\n}\r\n.result{\r\n display:none;\r\n margin-top:18px;\r\n background:linear-gradient(135deg,#041147,#0f2d88);\r\n color:#fff;\r\n border-radius:18px;\r\n padding:18px;\r\n box-shadow:0 12px 28px rgba(4,17,71,.18);\r\n}\r\n.result h2{\r\n margin:0 0 8px;\r\n color:var(--uapa-naranja);\r\n}\r\n.result p{margin:0; line-height:1.6}\r\n@media(max-width:860px){\r\n .game-info{grid-template-columns:1fr}\r\n .progress-wrap{justify-content:flex-start; flex-wrap:wrap}\r\n .progress{width:100%}\r\n .game-stage{grid-template-columns:1fr}\r\n}\r\n@media(max-width:560px){\r\n .apa-game{padding:22px 12px 32px}\r\n .game-head{padding:20px 14px}\r\n .game-head h1{font-size:clamp(1.45rem,7vw,1.85rem)}\r\n .question-top{flex-direction:column}\r\n .card-grid{grid-template-columns:1fr}\r\n .answer-card{min-height:76px}\r\n .actions .btn{width:100%}\r\n .map{grid-template-columns:repeat(auto-fit,minmax(38px,1fr))}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<main class=\"apa-game\">\r\n <header class=\"game-head\">\r\n <h1>Selecci\u00f3n m\u00faltiple \u00b7 APA 7<\/h1>\r\n <p>Lee la pregunta y arrastra la tarjeta correcta al \u00e1rea de respuesta. En celular tambi\u00e9n puedes tocar una tarjeta para responder.<\/p>\r\n <\/header>\r\n\r\n <section class=\"game-info\" aria-label=\"Progreso del ejercicio\">\r\n <span class=\"badge\">Tarjetas interactivas \u00b7 15 reactivos<\/span>\r\n <div class=\"progress-wrap\">\r\n <span id=\"progressText\">0 \/ 15 completadas<\/span>\r\n <div class=\"progress\"><span id=\"progressBar\"><\/span><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"game-stage\">\r\n <article class=\"question-card\" aria-live=\"polite\">\r\n <div class=\"question-top\">\r\n <span id=\"counter\" class=\"counter\">Pregunta 1 de 15<\/span>\r\n <span id=\"scoreText\" class=\"score\">Aciertos: 0<\/span>\r\n <\/div>\r\n\r\n <h2 id=\"questionText\"><\/h2>\r\n\r\n <p class=\"instruction\">\r\n <strong>Din\u00e1mica:<\/strong> arrastra una tarjeta al recuadro de respuesta o t\u00f3cala directamente.\r\n <\/p>\r\n\r\n <div id=\"cardGrid\" class=\"card-grid\"><\/div>\r\n\r\n <div id=\"dropZone\" class=\"drop-zone\">\r\n <div>\r\n <strong>Suelta aqu\u00ed tu respuesta<\/strong><br>\r\n <span>Tambi\u00e9n puedes tocar una tarjeta si est\u00e1s desde el celular.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"feedback\" class=\"feedback\"><\/div>\r\n\r\n <div class=\"actions\">\r\n <button id=\"prevBtn\" class=\"btn secondary\" type=\"button\">Anterior<\/button>\r\n <button id=\"nextBtn\" class=\"btn primary\" type=\"button\">Siguiente<\/button>\r\n <button id=\"resetBtn\" class=\"btn accent\" type=\"button\">Reiniciar<\/button>\r\n <\/div>\r\n <\/article>\r\n\r\n <aside class=\"side-panel\">\r\n <h3>Mapa de avance<\/h3>\r\n <p>Verde indica respuesta correcta y rojo indica que conviene revisar el concepto.<\/p>\r\n <div id=\"map\" class=\"map\"><\/div>\r\n <\/aside>\r\n <\/section>\r\n\r\n <section id=\"result\" class=\"result\"><\/section>\r\n<\/main>\r\n\r\n<script>\r\nconst questions = [{\"question\": \"\u00bfCu\u00e1l es el tama\u00f1o de letra m\u00e1s utilizado en APA 7?\", \"options\": [\"10\", \"11\", \"12\", \"14\"], \"correct\": 2, \"explanation\": \"La respuesta correcta es 12.\"}, {\"question\": \"\u00bfQu\u00e9 tipo de alineaci\u00f3n utiliza APA 7?\", \"options\": [\"Justificada\", \"Centrada\", \"Alineada a la izquierda\", \"Alineada a la derecha\"], \"correct\": 2, \"explanation\": \"APA utiliza alineaci\u00f3n a la izquierda.\"}, {\"question\": \"\u00bfCu\u00e1l de las siguientes opciones representa una cita narrativa?\", \"options\": [\"(P\u00e9rez, 2020)\", \"Seg\u00fan P\u00e9rez (2020)\u2026\", \"\u201cTexto citado\u201d (2020)\", \"(2020, P\u00e9rez)\"], \"correct\": 1, \"explanation\": \"La cita narrativa integra el apellido del autor en la oraci\u00f3n.\"}, {\"question\": \"\u00bfCu\u00e1l es el objetivo principal de citar fuentes?\", \"options\": [\"Decorar el trabajo\", \"Evitar escribir mucho\", \"Reconocer la autor\u00eda y evitar plagio\", \"Completar p\u00e1ginas\"], \"correct\": 2, \"explanation\": \"Citar permite reconocer la autor\u00eda y evitar plagio.\"}, {\"question\": \"\u00bfQu\u00e9 elemento NO pertenece a una referencia bibliogr\u00e1fica?\", \"options\": [\"Autor\", \"A\u00f1o\", \"Pa\u00eds\", \"T\u00edtulo\"], \"correct\": 2, \"explanation\": \"El pa\u00eds no es un elemento b\u00e1sico de la referencia en APA 7.\"}, {\"question\": \"\u00bfCu\u00e1l de estos recursos es m\u00e1s confiable para investigaciones acad\u00e9micas?\", \"options\": [\"Blog personal\", \"Revista cient\u00edfica\", \"Redes sociales\", \"Foro abierto\"], \"correct\": 1, \"explanation\": \"La revista cient\u00edfica es la opci\u00f3n m\u00e1s confiable.\"}, {\"question\": \"\u00bfQu\u00e9 gestor bibliogr\u00e1fico permite organizar referencias autom\u00e1ticamente?\", \"options\": [\"Canva\", \"Excel\", \"Zotero\", \"Word\"], \"correct\": 2, \"explanation\": \"Zotero es un gestor bibliogr\u00e1fico.\"}, {\"question\": \"\u00bfQu\u00e9 debe incluir una cita textual corta?\", \"options\": [\"Solo el autor\", \"Autor, a\u00f1o y p\u00e1gina\", \"Autor, a\u00f1o y comillas\", \"Solo la p\u00e1gina\"], \"correct\": 1, \"explanation\": \"Debe incluir autor, a\u00f1o y p\u00e1gina.\"}, {\"question\": \"\u00bfQu\u00e9 significa DOI?\", \"options\": [\"Documento Oficial Internacional\", \"Digital Object Identifier\", \"Direcci\u00f3n Oficial de Internet\", \"Documento Online Integrado\"], \"correct\": 1, \"explanation\": \"DOI significa Digital Object Identifier.\"}, {\"question\": \"\u00bfCu\u00e1l es una pr\u00e1ctica \u00e9tica al usar informaci\u00f3n de internet?\", \"options\": [\"Copiar y pegar sin citar\", \"Modificar autores\", \"Verificar la fuente y citarla\", \"Eliminar referencias\"], \"correct\": 2, \"explanation\": \"Se debe verificar la fuente y citarla.\"}, {\"question\": \"\u00bfC\u00f3mo deben aparecer los t\u00edtulos de libros en las referencias APA?\", \"options\": [\"Entre comillas\", \"En negrita\", \"En cursiva\", \"Subrayados\"], \"correct\": 2, \"explanation\": \"Los t\u00edtulos de libros se escriben en cursiva.\"}, {\"question\": \"\u00bfQu\u00e9 tipo de fuente recomienda APA?\", \"options\": [\"Comic Sans o Arial\", \"Arial o Times New Roman\", \"Impact o Arial\", \"Courier decorativo\"], \"correct\": 1, \"explanation\": \"APA recomienda fuentes legibles como Arial o Times New Roman.\"}, {\"question\": \"\u00bfCu\u00e1l es un ejemplo de plagio acad\u00e9mico?\", \"options\": [\"Citar correctamente\", \"Parafrasear citando la fuente\", \"Copiar ideas sin reconocer al autor\", \"Elaborar referencias\"], \"correct\": 2, \"explanation\": \"Copiar ideas sin reconocer al autor es plagio.\"}, {\"question\": \"\u00bfQu\u00e9 debe hacerse al utilizar contenido generado con IA?\", \"options\": [\"Revisarlo y ocultarlo\", \"Reconocer y revisar cr\u00edticamente su uso\", \"Presentarlo como propio\", \"Eliminarlo del trabajo\"], \"correct\": 1, \"explanation\": \"Debe reconocerse y revisarse cr\u00edticamente.\"}, {\"question\": \"\u00bfQu\u00e9 informaci\u00f3n debe aparecer primero en una referencia APA?\", \"options\": [\"Editorial\", \"Ciudad\", \"Autor\", \"P\u00e1gina web\"], \"correct\": 2, \"explanation\": \"La referencia inicia con el autor.\"}];\r\nconst letters = ['a','b','c','d'];\r\nlet current = 0;\r\nlet answers = Array(questions.length).fill(null);\r\nlet draggedIndex = null;\r\n\r\nconst questionText = document.getElementById('questionText');\r\nconst cardGrid = document.getElementById('cardGrid');\r\nconst dropZone = document.getElementById('dropZone');\r\nconst feedback = document.getElementById('feedback');\r\nconst counter = document.getElementById('counter');\r\nconst scoreText = document.getElementById('scoreText');\r\nconst progressText = document.getElementById('progressText');\r\nconst progressBar = document.getElementById('progressBar');\r\nconst map = document.getElementById('map');\r\nconst result = document.getElementById('result');\r\nconst prevBtn = document.getElementById('prevBtn');\r\nconst nextBtn = document.getElementById('nextBtn');\r\nconst resetBtn = document.getElementById('resetBtn');\r\n\r\nfunction getScore(){\r\n return answers.reduce((sum, answer, index) => sum + (answer === questions[index].correct ? 1 : 0), 0);\r\n}\r\n\r\nfunction getAnswered(){\r\n return answers.filter(answer => answer !== null).length;\r\n}\r\n\r\nfunction updateProgress(){\r\n const answered = getAnswered();\r\n const total = questions.length;\r\n const percent = Math.round((answered \/ total) * 100);\r\n progressText.textContent = answered + ' \/ ' + total + ' completadas';\r\n progressBar.style.width = percent + '%';\r\n scoreText.textContent = 'Aciertos: ' + getScore();\r\n}\r\n\r\nfunction buildMap(){\r\n map.innerHTML = '';\r\n questions.forEach((_, index) => {\r\n const btn = document.createElement('button');\r\n btn.type = 'button';\r\n btn.textContent = index + 1;\r\n if(index === current) btn.classList.add('current');\r\n if(answers[index] !== null){\r\n btn.classList.add(answers[index] === questions[index].correct ? 'done-ok' : 'done-bad');\r\n }\r\n btn.addEventListener('click', () => {\r\n current = index;\r\n render();\r\n });\r\n map.appendChild(btn);\r\n });\r\n}\r\n\r\nfunction render(){\r\n const q = questions[current];\r\n counter.textContent = 'Pregunta ' + (current + 1) + ' de ' + questions.length;\r\n questionText.textContent = q.question;\r\n cardGrid.innerHTML = '';\r\n feedback.className = 'feedback';\r\n feedback.innerHTML = '';\r\n draggedIndex = null;\r\n\r\n q.options.forEach((option, index) => {\r\n const card = document.createElement('button');\r\n card.type = 'button';\r\n card.className = 'answer-card';\r\n card.draggable = answers[current] === null;\r\n card.dataset.index = index;\r\n card.innerHTML = '<span class=\"letter\">' + letters[index] + '<\/span><span>' + option + '<\/span>';\r\n\r\n if(answers[current] !== null){\r\n card.disabled = true;\r\n if(index === q.correct) card.classList.add('correct');\r\n if(index === answers[current] && index !== q.correct) card.classList.add('incorrect');\r\n }\r\n\r\n card.addEventListener('click', () => choose(index));\r\n\r\n card.addEventListener('dragstart', event => {\r\n draggedIndex = index;\r\n event.dataTransfer.setData('text\/plain', String(index));\r\n dropZone.classList.add('active');\r\n });\r\n\r\n card.addEventListener('dragend', () => {\r\n dropZone.classList.remove('active');\r\n });\r\n\r\n cardGrid.appendChild(card);\r\n });\r\n\r\n if(answers[current] !== null){\r\n showFeedback(answers[current] === q.correct);\r\n }\r\n\r\n prevBtn.disabled = current === 0;\r\n nextBtn.textContent = current === questions.length - 1 ? 'Ver resultado' : 'Siguiente';\r\n\r\n updateProgress();\r\n buildMap();\r\n renderResult(false);\r\n}\r\n\r\nfunction choose(index){\r\n if(answers[current] !== null) return;\r\n answers[current] = index;\r\n render();\r\n\r\n if(current < questions.length - 1){\r\n setTimeout(() => {\r\n current++;\r\n render();\r\n }, 900);\r\n }else{\r\n setTimeout(() => renderResult(true), 400);\r\n }\r\n}\r\n\r\nfunction showFeedback(ok){\r\n const q = questions[current];\r\n feedback.className = 'feedback show ' + (ok ? 'ok' : 'bad');\r\n feedback.innerHTML = '<strong>' + (ok ? '\u00a1Correcto!' : 'Respuesta incorrecta.') + '<\/strong><br>' + q.explanation;\r\n}\r\n\r\ndropZone.addEventListener('dragover', event => {\r\n event.preventDefault();\r\n dropZone.classList.add('active');\r\n});\r\n\r\ndropZone.addEventListener('dragleave', () => {\r\n dropZone.classList.remove('active');\r\n});\r\n\r\ndropZone.addEventListener('drop', event => {\r\n event.preventDefault();\r\n dropZone.classList.remove('active');\r\n const index = Number(event.dataTransfer.getData('text\/plain'));\r\n if(!Number.isNaN(index)) choose(index);\r\n});\r\n\r\nfunction renderResult(scroll){\r\n const complete = getAnswered() === questions.length;\r\n if(!complete){\r\n result.style.display = 'none';\r\n result.innerHTML = '';\r\n return;\r\n }\r\n\r\n const totalScore = getScore();\r\n const percent = Math.round((totalScore \/ questions.length) * 100);\r\n let message = 'Buen avance. Revisa las preguntas marcadas en rojo para reforzar los detalles.';\r\n if(percent >= 90) message = 'Excelente dominio de los conceptos trabajados.';\r\n else if(percent >= 70) message = 'Buen resultado. Solo necesitas reforzar algunos detalles.';\r\n\r\n result.style.display = 'block';\r\n result.innerHTML = '<h2>Resultado final<\/h2><p>Obtuviste <strong>' + totalScore + ' de ' + questions.length + '<\/strong> respuestas correctas (' + percent + '%). ' + message + '<\/p>';\r\n\r\n if(scroll) result.scrollIntoView({behavior:'smooth', block:'start'});\r\n}\r\n\r\nprevBtn.addEventListener('click', () => {\r\n if(current > 0){\r\n current--;\r\n render();\r\n }\r\n});\r\n\r\nnextBtn.addEventListener('click', () => {\r\n if(current < questions.length - 1){\r\n current++;\r\n render();\r\n }else{\r\n renderResult(true);\r\n }\r\n});\r\n\r\nresetBtn.addEventListener('click', () => {\r\n current = 0;\r\n answers = Array(questions.length).fill(null);\r\n result.style.display = 'none';\r\n result.innerHTML = '';\r\n render();\r\n window.scrollTo({top:0, behavior:'smooth'});\r\n});\r\n\r\nrender();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Selecci\u00f3n m\u00faltiple con tarjetas \u00b7 APA 7 Selecci\u00f3n m\u00faltiple \u00b7 APA 7 Lee la pregunta y arrastra la tarjeta correcta al \u00e1rea de respuesta. En celular tambi\u00e9n puedes tocar una tarjeta para responder. Tarjetas interactivas \u00b7 15 reactivos 0 \/ 15 completadas Pregunta 1 de 15 Aciertos: 0 Din\u00e1mica: arrastra una tarjeta al recuadro de […]<\/p>\n","protected":false},"author":1,"featured_media":814,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-818","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ejercicios"],"_links":{"self":[{"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/comments?post=818"}],"version-history":[{"count":7,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/818\/revisions"}],"predecessor-version":[{"id":825,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/818\/revisions\/825"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/media\/814"}],"wp:attachment":[{"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/media?parent=818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/categories?post=818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/tags?post=818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}