Ordena citas y referencias seg\u00fan APA 7<\/title>\r\n<style>\r\n:root {\r\n --azul:#041147; --azul2:#0b1d6b; --naranja:#ff8300; --linea:#d8e1f0;\r\n --texto:#1f2937; --verde:#157347; --verdebg:#edf9f1; --rojo:#b42318;\r\n --rojobg:#fff1f1; --sombra:0 16px 35px rgba(4,17,71,.12);\r\n}\r\n* { box-sizing:border-box; }\r\nbody {\r\n margin:0; font-family:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif;\r\n color:var(--texto); background:linear-gradient(180deg,#f8fbff 0%,#eef3fb 100%);\r\n}\r\n.wrap { width:min(1060px,100%); margin:0 auto; padding:28px 16px 40px; }\r\n.hero {\r\n background:linear-gradient(135deg,var(--azul),var(--azul2));\r\n color:#fff; border-radius:24px; padding:28px 22px; box-shadow:var(--sombra);\r\n}\r\n.kicker {\r\n display:inline-block; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.12);\r\n font-size:.84rem; font-weight:800; margin-bottom:10px;\r\n}\r\nh1 {\r\n margin:0 0 8px; color:var(--naranja); font-size:clamp(1.9rem,4vw,2.7rem);\r\n line-height:1.08; font-weight:900; text-transform:none!important;\r\n}\r\n.hero p { margin:0; line-height:1.65; max-width:860px; }\r\n.progress-card {\r\n margin-top:18px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14);\r\n border-radius:16px; padding:13px;\r\n}\r\n.progress-top {\r\n display:flex; justify-content:space-between; gap:12px; margin-bottom:7px; font-size:.92rem; font-weight:800;\r\n}\r\n.track { height:12px; background:rgba(255,255,255,.16); border-radius:999px; overflow:hidden; }\r\n.fill {\r\n width:0; height:100%; background:linear-gradient(90deg,var(--naranja),#ffb860);\r\n border-radius:999px; transition:width .35s ease;\r\n}\r\n.note {\r\n margin-top:18px; background:#fff7ed; border-left:5px solid var(--naranja); border-radius:14px;\r\n padding:14px 16px; color:#7a4a00; line-height:1.65; box-shadow:0 8px 18px rgba(4,17,71,.05);\r\n}\r\n.case {\r\n background:#fff; border:1px solid var(--linea); border-radius:22px; padding:22px;\r\n box-shadow:var(--sombra); margin-top:18px;\r\n}\r\n.case-head {\r\n display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-bottom:10px;\r\n}\r\n.badge {\r\n display:inline-flex; padding:7px 11px; border-radius:999px; background:#eef2ff; border:1px solid #d9e2fa;\r\n color:var(--azul); font-size:.84rem; font-weight:900;\r\n}\r\n.case h2 {\r\n margin:0; color:var(--azul); font-size:1.35rem; line-height:1.2; font-weight:900; text-transform:none!important;\r\n}\r\n.case p { line-height:1.65; }\r\n.label { font-size:.95rem; font-weight:800; color:var(--azul); margin:14px 0 8px; }\r\n.pool, .dropzone {\r\n display:flex; flex-wrap:wrap; gap:10px; min-height:74px; padding:14px; border-radius:16px;\r\n border:2px dashed #cfd9ea; background:#f8fbff;\r\n}\r\n.dropzone { margin-top:12px; background:#fff; border-style:solid; }\r\n.chip {\r\n display:inline-flex; align-items:center; min-height:44px; padding:10px 14px; border-radius:14px;\r\n background:#fff; border:1px solid #d7e0ef; color:#14213d; box-shadow:0 4px 12px rgba(4,17,71,.06);\r\n cursor:grab; user-select:none; line-height:1.45; font-weight:700;\r\n}\r\n.chip.dragging { opacity:.55; }\r\n.pool.over, .dropzone.over { border-color:var(--azul); background:#f2f6ff; }\r\n.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }\r\nbutton {\r\n appearance:none; border:0; border-radius:13px; padding:12px 16px; font:800 .95rem\/1 inherit;\r\n cursor:pointer; transition:.18s ease;\r\n}\r\n.btn-primary { background:var(--azul); color:#fff; }\r\n.btn-secondary { background:#eef2ff; color:var(--azul); border:1px solid #d9e2fa; }\r\n.feedback {\r\n display:none; margin-top:14px; border-radius:14px; padding:14px 16px; line-height:1.65; font-weight:700;\r\n}\r\n.feedback.show { display:block; }\r\n.feedback.ok { background:var(--verdebg); color:var(--verde); border:1px solid #b9e0c7; }\r\n.feedback.bad { background:var(--rojobg); color:var(--rojo); border:1px solid #efb8b8; }\r\n.answer {\r\n margin-top:10px; padding:12px 14px; background:#f8fbff; border:1px solid #dde6f5;\r\n border-radius:14px; color:#334155; line-height:1.65;\r\n}\r\n.result {\r\n display:none; background:#fff; border:1px solid var(--linea); border-radius:22px; padding:24px;\r\n box-shadow:var(--sombra); margin-top:20px; text-align:center;\r\n}\r\n.result.show { display:block; }\r\n.score {\r\n width:118px; height:118px; margin:0 auto 16px; display:grid; place-items:center; border-radius:50%;\r\n border:8px solid #eef2ff; background:linear-gradient(145deg,var(--azul),var(--azul2));\r\n color:#fff; font-size:1.6rem; font-weight:900;\r\n}\r\n.result h2 {\r\n margin:0 0 8px; color:var(--azul); font-size:1.6rem; font-weight:900; text-transform:none!important;\r\n}\r\n.result p { margin:0 auto 16px; max-width:740px; color:#667085; line-height:1.7; }\r\n.footer-note {\r\n margin-top:18px; background:#fff; border:1px solid var(--linea); border-radius:18px; padding:16px;\r\n color:#4b5563; line-height:1.7; box-shadow:0 8px 20px rgba(4,17,71,.05);\r\n}\r\n@media (max-width:700px) {\r\n .wrap { padding:20px 12px 34px; }\r\n .hero, .case, .result { padding:18px 14px; }\r\n .chip { width:100%; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"wrap\">\r\n <section class=\"hero\">\r\n <span class=\"kicker\">Normas APA \u00b7 7.\u00aa edici\u00f3n<\/span>\r\n <h1>Ordena los elementos de citas y referencias<\/h1>\r\n <p>Arrastra cada elemento y col\u00f3calo en el orden correcto para formar la cita o la referencia seg\u00fan las Normas APA. Luego verifica tu respuesta y revisa la retroalimentaci\u00f3n.<\/p>\r\n <div class=\"progress-card\">\r\n <div class=\"progress-top\"><span id=\"progressText\">0 de 5 casos completados<\/span><span id=\"progressPercent\">0%<\/span><\/div>\r\n <div class=\"track\"><div id=\"progressFill\" class=\"fill\"><\/div><\/div>\r\n <\/div>\r\n <\/section>\r\n <div class=\"note\"><strong>Indicaciones:<\/strong> arrastra las tarjetas desde el banco de elementos hacia el espacio de respuesta. Tambi\u00e9n puedes reorganizarlas dentro del mismo espacio. Cuando termines, pulsa <strong>Verificar<\/strong>.<\/div>\r\n <div id=\"casesContainer\"><\/div>\r\n <section id=\"finalResult\" class=\"result\">\r\n <div id=\"scoreCircle\" class=\"score\"><\/div>\r\n <h2>\u00a1Ejercicio completado!<\/h2>\r\n <p id=\"resultMessage\"><\/p>\r\n <button id=\"restartAll\" class=\"btn-primary\">Volver a intentarlo<\/button>\r\n <\/section>\r\n <div class=\"footer-note\"><strong>Recomendaci\u00f3n:<\/strong> despu\u00e9s de practicar, puedes reforzar este contenido revisando en el portal las secciones <em>C\u00f3mo citar<\/em> y <em>C\u00f3mo referenciar<\/em>.<\/div>\r\n<\/div>\r\n<script>\r\nconst DATA = [{\"badge\": \"Cita parent\u00e9tica\", \"prompt\": \"Ordena los elementos para formar correctamente la cita parent\u00e9tica.\", \"parts\": [\"2023, p. 121).\", \"(G\u00f3mez,\", \"\\\"La lectura fortalece el pensamiento cr\u00edtico\\\".\"], \"correct\": [\"\\\"La lectura fortalece el pensamiento cr\u00edtico\\\"\", \"(G\u00f3mez, 2023, p. 121).\"], \"renderCorrect\": \"\\\"La lectura fortalece el pensamiento cr\u00edtico\\\" (G\u00f3mez, 2023, p. 121).\", \"reason\": \"En una cita parent\u00e9tica textual breve, el fragmento citado se coloca primero y, al final, se incluyen entre par\u00e9ntesis el apellido del autor, el a\u00f1o y la p\u00e1gina.\", \"mode\": \"merge-parenthetical\"}, {\"badge\": \"Cita narrativa\", \"prompt\": \"Ordena los elementos para formar correctamente la cita narrativa.\", \"parts\": [\"(2021)\", \"Mart\u00ednez\", \"sostiene que\", \"\\\"la planificaci\u00f3n mejora el aprendizaje\\\".\", \"(p. 120).\"], \"correct\": [\"Mart\u00ednez\", \"(2021)\", \"sostiene que\", \"\\\"la planificaci\u00f3n mejora el aprendizaje\\\".\", \"(p. 120).\"], \"renderCorrect\": \"Mart\u00ednez (2021) sostiene que \\\"la planificaci\u00f3n mejora el aprendizaje\\\" (p. 120).\", \"reason\": \"En la cita narrativa, el apellido del autor se integra a la redacci\u00f3n, el a\u00f1o va entre par\u00e9ntesis despu\u00e9s del autor y la p\u00e1gina se coloca al final.\", \"mode\": \"normal\"}, {\"badge\": \"Referencia de libro\", \"prompt\": \"Ordena los elementos para formar la referencia correcta del libro.\", \"parts\": [\"Editorial Alfa.\", \"Aprendizaje significativo.\", \"P\u00e9rez, J.\", \"(2022).\"], \"correct\": [\"P\u00e9rez, J.\", \"(2022).\", \"Aprendizaje significativo.\", \"Editorial Alfa.\"], \"renderCorrect\": \"P\u00e9rez, J. (2022). Aprendizaje significativo. Editorial Alfa.\", \"reason\": \"En los libros, el orden general es autor, a\u00f1o, t\u00edtulo en cursiva y editorial.\", \"mode\": \"normal\"}, {\"badge\": \"Art\u00edculo con DOI\", \"prompt\": \"Ordena los elementos para formar la referencia correcta del art\u00edculo.\", \"parts\": [\"https:\/\/doi.org\/10.1234\/abcd.5678.\", \"Revista Educaci\u00f3n, 15(2), 45\u201360.\", \"Rodr\u00edguez, M.\", \"(2024).\", \"Innovaci\u00f3n educativa en el contexto latinoamericano.\"], \"correct\": [\"Rodr\u00edguez, M.\", \"(2024).\", \"Innovaci\u00f3n educativa en el contexto latinoamericano.\", \"Revista Educaci\u00f3n, 15(2), 45\u201360.\", \"https:\/\/doi.org\/10.1234\/abcd.5678.\"], \"renderCorrect\": \"Rodr\u00edguez, M. (2024). Innovaci\u00f3n educativa en el contexto latinoamericano. Revista Educaci\u00f3n, 15(2), 45\u201360. https:\/\/doi.org\/10.1234\/abcd.5678\", \"reason\": \"En un art\u00edculo con DOI, se coloca: autor, a\u00f1o, t\u00edtulo del art\u00edculo, revista con volumen y n\u00famero, p\u00e1ginas y DOI.\", \"mode\": \"normal\"}, {\"badge\": \"P\u00e1gina web\", \"prompt\": \"Ordena los elementos para formar la referencia correcta de la p\u00e1gina web.\", \"parts\": [\"https:\/\/www.ejemplo.org.\", \"Organizaci\u00f3n Educativa.\", \"(2023).\", \"Gu\u00eda para la investigaci\u00f3n.\"], \"correct\": [\"Organizaci\u00f3n Educativa.\", \"(2023).\", \"Gu\u00eda para la investigaci\u00f3n.\", \"https:\/\/www.ejemplo.org.\"], \"renderCorrect\": \"Organizaci\u00f3n Educativa. (2023). Gu\u00eda para la investigaci\u00f3n. https:\/\/www.ejemplo.org.\", \"reason\": \"En una p\u00e1gina web, el orden b\u00e1sico es autor, fecha, t\u00edtulo y URL.\", \"mode\": \"normal\"}];\r\nconst container = document.getElementById('casesContainer');\r\nconst progressText = document.getElementById('progressText');\r\nconst progressPercent = document.getElementById('progressPercent');\r\nconst progressFill = document.getElementById('progressFill');\r\nconst finalResult = document.getElementById('finalResult');\r\nconst scoreCircle = document.getElementById('scoreCircle');\r\nconst resultMessage = document.getElementById('resultMessage');\r\nconst restartAll = document.getElementById('restartAll');\r\nlet completedCount = 0;\r\nlet solved = new Set();\r\n\r\nfunction shuffle(arr) {\r\n const copy = [...arr];\r\n for (let i = copy.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [copy[i], copy[j]] = [copy[j], copy[i]];\r\n }\r\n return copy;\r\n}\r\n\r\nfunction updateProgress() {\r\n const percent = Math.round((completedCount \/ DATA.length) * 100);\r\n progressText.textContent = `${completedCount} de ${DATA.length} casos completados`;\r\n progressPercent.textContent = `${percent}%`;\r\n progressFill.style.width = `${percent}%`;\r\n if (completedCount === DATA.length) {\r\n const score = solved.size;\r\n const percentScore = Math.round((score \/ DATA.length) * 100);\r\n scoreCircle.textContent = `${score}\/${DATA.length}`;\r\n let msg = percentScore >= 90\r\n ? 'Excelente. Dominas muy bien el orden de los elementos de citas y referencias en APA 7.'\r\n : percentScore >= 70\r\n ? 'Muy bien. Has resuelto la mayor\u00eda de los casos correctamente; conviene seguir practicando algunos formatos.'\r\n : 'Buen intento. Te recomiendo repasar la estructura de cada tipo de fuente y volver a practicar.';\r\n resultMessage.textContent = `${msg} Resultado: ${percentScore} %.`;\r\n finalResult.classList.add('show');\r\n }\r\n}\r\n\r\nfunction createChip(text) {\r\n const chip = document.createElement('div');\r\n chip.className = 'chip';\r\n chip.draggable = true;\r\n chip.textContent = text;\r\n chip.dataset.value = text;\r\n return chip;\r\n}\r\n\r\nfunction getOrder(dropzone, item) {\r\n const vals = Array.from(dropzone.children).map(el => el.dataset.value);\r\n\r\n if (item.mode === 'merge-parenthetical' && vals.length === 3) {\r\n const cita = vals[0].replace(\/\\.\\s*$\/, '');\r\n const autor = vals[1].trim();\r\n const fechaPagina = vals[2].trim();\r\n\r\n return [\r\n cita,\r\n `${autor} ${fechaPagina}`\r\n ];\r\n }\r\n\r\n return vals;\r\n}\r\n\r\nfunction attachDnD(scope) {\r\n let dragged = null;\r\n scope.querySelectorAll('.chip').forEach(chip => {\r\n chip.addEventListener('dragstart', () => {\r\n dragged = chip;\r\n chip.classList.add('dragging');\r\n });\r\n chip.addEventListener('dragend', () => chip.classList.remove('dragging'));\r\n });\r\n\r\n scope.querySelectorAll('.pool, .dropzone').forEach(zone => {\r\n zone.addEventListener('dragover', e => {\r\n e.preventDefault();\r\n zone.classList.add('over');\r\n if (!dragged) return;\r\n const after = getDragAfterElement(zone, e.clientY);\r\n if (after == null) zone.appendChild(dragged);\r\n else zone.insertBefore(dragged, after);\r\n });\r\n zone.addEventListener('dragleave', () => zone.classList.remove('over'));\r\n zone.addEventListener('drop', e => {\r\n e.preventDefault();\r\n zone.classList.remove('over');\r\n });\r\n });\r\n}\r\n\r\nfunction getDragAfterElement(container, y) {\r\n const els = [...container.querySelectorAll('.chip:not(.dragging)')];\r\n return els.reduce((closest, child) => {\r\n const box = child.getBoundingClientRect();\r\n const offset = y - box.top - box.height \/ 2;\r\n if (offset < 0 && offset > closest.offset) return { offset, element: child };\r\n return closest;\r\n }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction buildCase(item, index) {\r\n const section = document.createElement('section');\r\n section.className = 'case';\r\n section.innerHTML = `\r\n <div class=\"case-head\">\r\n <div>\r\n <span class=\"badge\">${item.badge}<\/span>\r\n <\/div>\r\n <span class=\"badge\">Arrastrar y ordenar<\/span>\r\n <\/div>\r\n <p>${item.prompt}<\/p>\r\n <div class=\"label\">Banco de elementos<\/div>\r\n <div class=\"pool\" data-role=\"pool\"><\/div>\r\n <div class=\"label\">Tu respuesta<\/div>\r\n <div class=\"dropzone\" data-role=\"dropzone\"><\/div>\r\n <div class=\"actions\">\r\n <button class=\"btn-primary\" type=\"button\">Verificar<\/button>\r\n <button class=\"btn-secondary\" type=\"button\">Reiniciar<\/button>\r\n <\/div>\r\n <div class=\"feedback\"><\/div>\r\n `;\r\n const pool = section.querySelector('[data-role=\"pool\"]');\r\n const dropzone = section.querySelector('[data-role=\"dropzone\"]');\r\n const verifyBtn = section.querySelector('.btn-primary');\r\n const resetBtn = section.querySelector('.btn-secondary');\r\n const feedback = section.querySelector('.feedback');\r\n\r\n function loadParts() {\r\n pool.innerHTML = '';\r\n dropzone.innerHTML = '';\r\n feedback.className = 'feedback';\r\n feedback.innerHTML = '';\r\n shuffle(item.parts).forEach(part => pool.appendChild(createChip(part)));\r\n attachDnD(section);\r\n verifyBtn.disabled = false;\r\n }\r\n\r\n verifyBtn.addEventListener('click', () => {\r\n const ok = JSON.stringify(getOrder(dropzone, item)) === JSON.stringify(item.correct);\r\n feedback.className = `feedback show ${ok ? 'ok' : 'bad'}`;\r\n feedback.innerHTML = ok\r\n ? `<strong>\u00a1Correcto!<\/strong> ${item.reason}`\r\n : `<strong>A\u00fan no est\u00e1 correcto.<\/strong> ${item.reason}`;\r\n if (ok && !solved.has(index)) {\r\n solved.add(index);\r\n completedCount++;\r\n verifyBtn.disabled = true;\r\n updateProgress();\r\n }\r\n });\r\n\r\n resetBtn.addEventListener('click', () => {\r\n if (solved.has(index)) {\r\n solved.delete(index);\r\n completedCount = Math.max(0, completedCount - 1);\r\n updateProgress();\r\n }\r\n loadParts();\r\n });\r\n\r\n loadParts();\r\n return section;\r\n}\r\n\r\nfunction init() {\r\n container.innerHTML = '';\r\n completedCount = 0;\r\n solved = new Set();\r\n DATA.forEach((item, index) => container.appendChild(buildCase(item, index)));\r\n finalResult.classList.remove('show');\r\n updateProgress();\r\n}\r\n\r\nrestartAll.addEventListener('click', init);\r\ninit();\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>Ordena citas y referencias seg\u00fan APA 7 Normas APA \u00b7 7.\u00aa edici\u00f3n Ordena los elementos de citas y referencias Arrastra cada elemento y col\u00f3calo en el orden correcto para formar la cita o la referencia seg\u00fan las Normas APA. Luego verifica tu respuesta y revisa la retroalimentaci\u00f3n. 0 de 5 casos completados0% Indicaciones: arrastra las […]<\/p>\n","protected":false},"author":1,"featured_media":927,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-922","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\/922","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=922"}],"version-history":[{"count":10,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/922\/revisions"}],"predecessor-version":[{"id":1136,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/922\/revisions\/1136"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/media\/927"}],"wp:attachment":[{"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/media?parent=922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/categories?post=922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/tags?post=922"}],"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\nOrdena citas y referencias seg\u00fan APA 7<\/title>\r\n<style>\r\n:root {\r\n --azul:#041147; --azul2:#0b1d6b; --naranja:#ff8300; --linea:#d8e1f0;\r\n --texto:#1f2937; --verde:#157347; --verdebg:#edf9f1; --rojo:#b42318;\r\n --rojobg:#fff1f1; --sombra:0 16px 35px rgba(4,17,71,.12);\r\n}\r\n* { box-sizing:border-box; }\r\nbody {\r\n margin:0; font-family:system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif;\r\n color:var(--texto); background:linear-gradient(180deg,#f8fbff 0%,#eef3fb 100%);\r\n}\r\n.wrap { width:min(1060px,100%); margin:0 auto; padding:28px 16px 40px; }\r\n.hero {\r\n background:linear-gradient(135deg,var(--azul),var(--azul2));\r\n color:#fff; border-radius:24px; padding:28px 22px; box-shadow:var(--sombra);\r\n}\r\n.kicker {\r\n display:inline-block; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.12);\r\n font-size:.84rem; font-weight:800; margin-bottom:10px;\r\n}\r\nh1 {\r\n margin:0 0 8px; color:var(--naranja); font-size:clamp(1.9rem,4vw,2.7rem);\r\n line-height:1.08; font-weight:900; text-transform:none!important;\r\n}\r\n.hero p { margin:0; line-height:1.65; max-width:860px; }\r\n.progress-card {\r\n margin-top:18px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14);\r\n border-radius:16px; padding:13px;\r\n}\r\n.progress-top {\r\n display:flex; justify-content:space-between; gap:12px; margin-bottom:7px; font-size:.92rem; font-weight:800;\r\n}\r\n.track { height:12px; background:rgba(255,255,255,.16); border-radius:999px; overflow:hidden; }\r\n.fill {\r\n width:0; height:100%; background:linear-gradient(90deg,var(--naranja),#ffb860);\r\n border-radius:999px; transition:width .35s ease;\r\n}\r\n.note {\r\n margin-top:18px; background:#fff7ed; border-left:5px solid var(--naranja); border-radius:14px;\r\n padding:14px 16px; color:#7a4a00; line-height:1.65; box-shadow:0 8px 18px rgba(4,17,71,.05);\r\n}\r\n.case {\r\n background:#fff; border:1px solid var(--linea); border-radius:22px; padding:22px;\r\n box-shadow:var(--sombra); margin-top:18px;\r\n}\r\n.case-head {\r\n display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-bottom:10px;\r\n}\r\n.badge {\r\n display:inline-flex; padding:7px 11px; border-radius:999px; background:#eef2ff; border:1px solid #d9e2fa;\r\n color:var(--azul); font-size:.84rem; font-weight:900;\r\n}\r\n.case h2 {\r\n margin:0; color:var(--azul); font-size:1.35rem; line-height:1.2; font-weight:900; text-transform:none!important;\r\n}\r\n.case p { line-height:1.65; }\r\n.label { font-size:.95rem; font-weight:800; color:var(--azul); margin:14px 0 8px; }\r\n.pool, .dropzone {\r\n display:flex; flex-wrap:wrap; gap:10px; min-height:74px; padding:14px; border-radius:16px;\r\n border:2px dashed #cfd9ea; background:#f8fbff;\r\n}\r\n.dropzone { margin-top:12px; background:#fff; border-style:solid; }\r\n.chip {\r\n display:inline-flex; align-items:center; min-height:44px; padding:10px 14px; border-radius:14px;\r\n background:#fff; border:1px solid #d7e0ef; color:#14213d; box-shadow:0 4px 12px rgba(4,17,71,.06);\r\n cursor:grab; user-select:none; line-height:1.45; font-weight:700;\r\n}\r\n.chip.dragging { opacity:.55; }\r\n.pool.over, .dropzone.over { border-color:var(--azul); background:#f2f6ff; }\r\n.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }\r\nbutton {\r\n appearance:none; border:0; border-radius:13px; padding:12px 16px; font:800 .95rem\/1 inherit;\r\n cursor:pointer; transition:.18s ease;\r\n}\r\n.btn-primary { background:var(--azul); color:#fff; }\r\n.btn-secondary { background:#eef2ff; color:var(--azul); border:1px solid #d9e2fa; }\r\n.feedback {\r\n display:none; margin-top:14px; border-radius:14px; padding:14px 16px; line-height:1.65; font-weight:700;\r\n}\r\n.feedback.show { display:block; }\r\n.feedback.ok { background:var(--verdebg); color:var(--verde); border:1px solid #b9e0c7; }\r\n.feedback.bad { background:var(--rojobg); color:var(--rojo); border:1px solid #efb8b8; }\r\n.answer {\r\n margin-top:10px; padding:12px 14px; background:#f8fbff; border:1px solid #dde6f5;\r\n border-radius:14px; color:#334155; line-height:1.65;\r\n}\r\n.result {\r\n display:none; background:#fff; border:1px solid var(--linea); border-radius:22px; padding:24px;\r\n box-shadow:var(--sombra); margin-top:20px; text-align:center;\r\n}\r\n.result.show { display:block; }\r\n.score {\r\n width:118px; height:118px; margin:0 auto 16px; display:grid; place-items:center; border-radius:50%;\r\n border:8px solid #eef2ff; background:linear-gradient(145deg,var(--azul),var(--azul2));\r\n color:#fff; font-size:1.6rem; font-weight:900;\r\n}\r\n.result h2 {\r\n margin:0 0 8px; color:var(--azul); font-size:1.6rem; font-weight:900; text-transform:none!important;\r\n}\r\n.result p { margin:0 auto 16px; max-width:740px; color:#667085; line-height:1.7; }\r\n.footer-note {\r\n margin-top:18px; background:#fff; border:1px solid var(--linea); border-radius:18px; padding:16px;\r\n color:#4b5563; line-height:1.7; box-shadow:0 8px 20px rgba(4,17,71,.05);\r\n}\r\n@media (max-width:700px) {\r\n .wrap { padding:20px 12px 34px; }\r\n .hero, .case, .result { padding:18px 14px; }\r\n .chip { width:100%; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"wrap\">\r\n <section class=\"hero\">\r\n <span class=\"kicker\">Normas APA \u00b7 7.\u00aa edici\u00f3n<\/span>\r\n <h1>Ordena los elementos de citas y referencias<\/h1>\r\n <p>Arrastra cada elemento y col\u00f3calo en el orden correcto para formar la cita o la referencia seg\u00fan las Normas APA. Luego verifica tu respuesta y revisa la retroalimentaci\u00f3n.<\/p>\r\n <div class=\"progress-card\">\r\n <div class=\"progress-top\"><span id=\"progressText\">0 de 5 casos completados<\/span><span id=\"progressPercent\">0%<\/span><\/div>\r\n <div class=\"track\"><div id=\"progressFill\" class=\"fill\"><\/div><\/div>\r\n <\/div>\r\n <\/section>\r\n <div class=\"note\"><strong>Indicaciones:<\/strong> arrastra las tarjetas desde el banco de elementos hacia el espacio de respuesta. Tambi\u00e9n puedes reorganizarlas dentro del mismo espacio. Cuando termines, pulsa <strong>Verificar<\/strong>.<\/div>\r\n <div id=\"casesContainer\"><\/div>\r\n <section id=\"finalResult\" class=\"result\">\r\n <div id=\"scoreCircle\" class=\"score\"><\/div>\r\n <h2>\u00a1Ejercicio completado!<\/h2>\r\n <p id=\"resultMessage\"><\/p>\r\n <button id=\"restartAll\" class=\"btn-primary\">Volver a intentarlo<\/button>\r\n <\/section>\r\n <div class=\"footer-note\"><strong>Recomendaci\u00f3n:<\/strong> despu\u00e9s de practicar, puedes reforzar este contenido revisando en el portal las secciones <em>C\u00f3mo citar<\/em> y <em>C\u00f3mo referenciar<\/em>.<\/div>\r\n<\/div>\r\n<script>\r\nconst DATA = [{\"badge\": \"Cita parent\u00e9tica\", \"prompt\": \"Ordena los elementos para formar correctamente la cita parent\u00e9tica.\", \"parts\": [\"2023, p. 121).\", \"(G\u00f3mez,\", \"\\\"La lectura fortalece el pensamiento cr\u00edtico\\\".\"], \"correct\": [\"\\\"La lectura fortalece el pensamiento cr\u00edtico\\\"\", \"(G\u00f3mez, 2023, p. 121).\"], \"renderCorrect\": \"\\\"La lectura fortalece el pensamiento cr\u00edtico\\\" (G\u00f3mez, 2023, p. 121).\", \"reason\": \"En una cita parent\u00e9tica textual breve, el fragmento citado se coloca primero y, al final, se incluyen entre par\u00e9ntesis el apellido del autor, el a\u00f1o y la p\u00e1gina.\", \"mode\": \"merge-parenthetical\"}, {\"badge\": \"Cita narrativa\", \"prompt\": \"Ordena los elementos para formar correctamente la cita narrativa.\", \"parts\": [\"(2021)\", \"Mart\u00ednez\", \"sostiene que\", \"\\\"la planificaci\u00f3n mejora el aprendizaje\\\".\", \"(p. 120).\"], \"correct\": [\"Mart\u00ednez\", \"(2021)\", \"sostiene que\", \"\\\"la planificaci\u00f3n mejora el aprendizaje\\\".\", \"(p. 120).\"], \"renderCorrect\": \"Mart\u00ednez (2021) sostiene que \\\"la planificaci\u00f3n mejora el aprendizaje\\\" (p. 120).\", \"reason\": \"En la cita narrativa, el apellido del autor se integra a la redacci\u00f3n, el a\u00f1o va entre par\u00e9ntesis despu\u00e9s del autor y la p\u00e1gina se coloca al final.\", \"mode\": \"normal\"}, {\"badge\": \"Referencia de libro\", \"prompt\": \"Ordena los elementos para formar la referencia correcta del libro.\", \"parts\": [\"Editorial Alfa.\", \"Aprendizaje significativo.\", \"P\u00e9rez, J.\", \"(2022).\"], \"correct\": [\"P\u00e9rez, J.\", \"(2022).\", \"Aprendizaje significativo.\", \"Editorial Alfa.\"], \"renderCorrect\": \"P\u00e9rez, J. (2022). Aprendizaje significativo. Editorial Alfa.\", \"reason\": \"En los libros, el orden general es autor, a\u00f1o, t\u00edtulo en cursiva y editorial.\", \"mode\": \"normal\"}, {\"badge\": \"Art\u00edculo con DOI\", \"prompt\": \"Ordena los elementos para formar la referencia correcta del art\u00edculo.\", \"parts\": [\"https:\/\/doi.org\/10.1234\/abcd.5678.\", \"Revista Educaci\u00f3n, 15(2), 45\u201360.\", \"Rodr\u00edguez, M.\", \"(2024).\", \"Innovaci\u00f3n educativa en el contexto latinoamericano.\"], \"correct\": [\"Rodr\u00edguez, M.\", \"(2024).\", \"Innovaci\u00f3n educativa en el contexto latinoamericano.\", \"Revista Educaci\u00f3n, 15(2), 45\u201360.\", \"https:\/\/doi.org\/10.1234\/abcd.5678.\"], \"renderCorrect\": \"Rodr\u00edguez, M. (2024). Innovaci\u00f3n educativa en el contexto latinoamericano. Revista Educaci\u00f3n, 15(2), 45\u201360. https:\/\/doi.org\/10.1234\/abcd.5678\", \"reason\": \"En un art\u00edculo con DOI, se coloca: autor, a\u00f1o, t\u00edtulo del art\u00edculo, revista con volumen y n\u00famero, p\u00e1ginas y DOI.\", \"mode\": \"normal\"}, {\"badge\": \"P\u00e1gina web\", \"prompt\": \"Ordena los elementos para formar la referencia correcta de la p\u00e1gina web.\", \"parts\": [\"https:\/\/www.ejemplo.org.\", \"Organizaci\u00f3n Educativa.\", \"(2023).\", \"Gu\u00eda para la investigaci\u00f3n.\"], \"correct\": [\"Organizaci\u00f3n Educativa.\", \"(2023).\", \"Gu\u00eda para la investigaci\u00f3n.\", \"https:\/\/www.ejemplo.org.\"], \"renderCorrect\": \"Organizaci\u00f3n Educativa. (2023). Gu\u00eda para la investigaci\u00f3n. https:\/\/www.ejemplo.org.\", \"reason\": \"En una p\u00e1gina web, el orden b\u00e1sico es autor, fecha, t\u00edtulo y URL.\", \"mode\": \"normal\"}];\r\nconst container = document.getElementById('casesContainer');\r\nconst progressText = document.getElementById('progressText');\r\nconst progressPercent = document.getElementById('progressPercent');\r\nconst progressFill = document.getElementById('progressFill');\r\nconst finalResult = document.getElementById('finalResult');\r\nconst scoreCircle = document.getElementById('scoreCircle');\r\nconst resultMessage = document.getElementById('resultMessage');\r\nconst restartAll = document.getElementById('restartAll');\r\nlet completedCount = 0;\r\nlet solved = new Set();\r\n\r\nfunction shuffle(arr) {\r\n const copy = [...arr];\r\n for (let i = copy.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [copy[i], copy[j]] = [copy[j], copy[i]];\r\n }\r\n return copy;\r\n}\r\n\r\nfunction updateProgress() {\r\n const percent = Math.round((completedCount \/ DATA.length) * 100);\r\n progressText.textContent = `${completedCount} de ${DATA.length} casos completados`;\r\n progressPercent.textContent = `${percent}%`;\r\n progressFill.style.width = `${percent}%`;\r\n if (completedCount === DATA.length) {\r\n const score = solved.size;\r\n const percentScore = Math.round((score \/ DATA.length) * 100);\r\n scoreCircle.textContent = `${score}\/${DATA.length}`;\r\n let msg = percentScore >= 90\r\n ? 'Excelente. Dominas muy bien el orden de los elementos de citas y referencias en APA 7.'\r\n : percentScore >= 70\r\n ? 'Muy bien. Has resuelto la mayor\u00eda de los casos correctamente; conviene seguir practicando algunos formatos.'\r\n : 'Buen intento. Te recomiendo repasar la estructura de cada tipo de fuente y volver a practicar.';\r\n resultMessage.textContent = `${msg} Resultado: ${percentScore} %.`;\r\n finalResult.classList.add('show');\r\n }\r\n}\r\n\r\nfunction createChip(text) {\r\n const chip = document.createElement('div');\r\n chip.className = 'chip';\r\n chip.draggable = true;\r\n chip.textContent = text;\r\n chip.dataset.value = text;\r\n return chip;\r\n}\r\n\r\nfunction getOrder(dropzone, item) {\r\n const vals = Array.from(dropzone.children).map(el => el.dataset.value);\r\n\r\n if (item.mode === 'merge-parenthetical' && vals.length === 3) {\r\n const cita = vals[0].replace(\/\\.\\s*$\/, '');\r\n const autor = vals[1].trim();\r\n const fechaPagina = vals[2].trim();\r\n\r\n return [\r\n cita,\r\n `${autor} ${fechaPagina}`\r\n ];\r\n }\r\n\r\n return vals;\r\n}\r\n\r\nfunction attachDnD(scope) {\r\n let dragged = null;\r\n scope.querySelectorAll('.chip').forEach(chip => {\r\n chip.addEventListener('dragstart', () => {\r\n dragged = chip;\r\n chip.classList.add('dragging');\r\n });\r\n chip.addEventListener('dragend', () => chip.classList.remove('dragging'));\r\n });\r\n\r\n scope.querySelectorAll('.pool, .dropzone').forEach(zone => {\r\n zone.addEventListener('dragover', e => {\r\n e.preventDefault();\r\n zone.classList.add('over');\r\n if (!dragged) return;\r\n const after = getDragAfterElement(zone, e.clientY);\r\n if (after == null) zone.appendChild(dragged);\r\n else zone.insertBefore(dragged, after);\r\n });\r\n zone.addEventListener('dragleave', () => zone.classList.remove('over'));\r\n zone.addEventListener('drop', e => {\r\n e.preventDefault();\r\n zone.classList.remove('over');\r\n });\r\n });\r\n}\r\n\r\nfunction getDragAfterElement(container, y) {\r\n const els = [...container.querySelectorAll('.chip:not(.dragging)')];\r\n return els.reduce((closest, child) => {\r\n const box = child.getBoundingClientRect();\r\n const offset = y - box.top - box.height \/ 2;\r\n if (offset < 0 && offset > closest.offset) return { offset, element: child };\r\n return closest;\r\n }, { offset: Number.NEGATIVE_INFINITY }).element;\r\n}\r\n\r\nfunction buildCase(item, index) {\r\n const section = document.createElement('section');\r\n section.className = 'case';\r\n section.innerHTML = `\r\n <div class=\"case-head\">\r\n <div>\r\n <span class=\"badge\">${item.badge}<\/span>\r\n <\/div>\r\n <span class=\"badge\">Arrastrar y ordenar<\/span>\r\n <\/div>\r\n <p>${item.prompt}<\/p>\r\n <div class=\"label\">Banco de elementos<\/div>\r\n <div class=\"pool\" data-role=\"pool\"><\/div>\r\n <div class=\"label\">Tu respuesta<\/div>\r\n <div class=\"dropzone\" data-role=\"dropzone\"><\/div>\r\n <div class=\"actions\">\r\n <button class=\"btn-primary\" type=\"button\">Verificar<\/button>\r\n <button class=\"btn-secondary\" type=\"button\">Reiniciar<\/button>\r\n <\/div>\r\n <div class=\"feedback\"><\/div>\r\n `;\r\n const pool = section.querySelector('[data-role=\"pool\"]');\r\n const dropzone = section.querySelector('[data-role=\"dropzone\"]');\r\n const verifyBtn = section.querySelector('.btn-primary');\r\n const resetBtn = section.querySelector('.btn-secondary');\r\n const feedback = section.querySelector('.feedback');\r\n\r\n function loadParts() {\r\n pool.innerHTML = '';\r\n dropzone.innerHTML = '';\r\n feedback.className = 'feedback';\r\n feedback.innerHTML = '';\r\n shuffle(item.parts).forEach(part => pool.appendChild(createChip(part)));\r\n attachDnD(section);\r\n verifyBtn.disabled = false;\r\n }\r\n\r\n verifyBtn.addEventListener('click', () => {\r\n const ok = JSON.stringify(getOrder(dropzone, item)) === JSON.stringify(item.correct);\r\n feedback.className = `feedback show ${ok ? 'ok' : 'bad'}`;\r\n feedback.innerHTML = ok\r\n ? `<strong>\u00a1Correcto!<\/strong> ${item.reason}`\r\n : `<strong>A\u00fan no est\u00e1 correcto.<\/strong> ${item.reason}`;\r\n if (ok && !solved.has(index)) {\r\n solved.add(index);\r\n completedCount++;\r\n verifyBtn.disabled = true;\r\n updateProgress();\r\n }\r\n });\r\n\r\n resetBtn.addEventListener('click', () => {\r\n if (solved.has(index)) {\r\n solved.delete(index);\r\n completedCount = Math.max(0, completedCount - 1);\r\n updateProgress();\r\n }\r\n loadParts();\r\n });\r\n\r\n loadParts();\r\n return section;\r\n}\r\n\r\nfunction init() {\r\n container.innerHTML = '';\r\n completedCount = 0;\r\n solved = new Set();\r\n DATA.forEach((item, index) => container.appendChild(buildCase(item, index)));\r\n finalResult.classList.remove('show');\r\n updateProgress();\r\n}\r\n\r\nrestartAll.addEventListener('click', init);\r\ninit();\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>Ordena citas y referencias seg\u00fan APA 7 Normas APA \u00b7 7.\u00aa edici\u00f3n Ordena los elementos de citas y referencias Arrastra cada elemento y col\u00f3calo en el orden correcto para formar la cita o la referencia seg\u00fan las Normas APA. Luego verifica tu respuesta y revisa la retroalimentaci\u00f3n. 0 de 5 casos completados0% Indicaciones: arrastra las […]<\/p>\n","protected":false},"author":1,"featured_media":927,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-922","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\/922","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=922"}],"version-history":[{"count":10,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/922\/revisions"}],"predecessor-version":[{"id":1136,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/922\/revisions\/1136"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/media\/927"}],"wp:attachment":[{"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/media?parent=922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/categories?post=922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/tags?post=922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}