Emparejamiento variado \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.match-shell{\r\n max-width:1120px;\r\n margin:0 auto;\r\n padding:24px 16px 38px;\r\n}\r\n.match-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.match-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.match-head p{\r\n margin:8px auto 0;\r\n max-width:780px;\r\n line-height:1.55;\r\n}\r\n.toolbar{\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.section-card{\r\n background:#fff;\r\n border:1px solid var(--gris-300);\r\n border-radius:20px;\r\n padding:18px;\r\n margin-top:18px;\r\n box-shadow:0 10px 26px rgba(4,17,71,.07);\r\n}\r\n.section-title{\r\n display:flex;\r\n flex-wrap:wrap;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:10px;\r\n margin-bottom:12px;\r\n}\r\n.section-title h2{\r\n margin:0;\r\n color:var(--uapa-azul);\r\n font-size:clamp(1.18rem,1rem + 1vw,1.55rem);\r\n text-transform:none !important;\r\n}\r\n.mode-pill{\r\n display:inline-flex;\r\n background:var(--uapa-azul);\r\n color:#fff;\r\n border-radius:999px;\r\n padding:6px 11px;\r\n font-weight:850;\r\n font-size:.82rem;\r\n}\r\n.instruction{\r\n margin:0 0 14px;\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 line-height:1.55;\r\n}\r\n.activity-grid{\r\n display:grid;\r\n grid-template-columns:repeat(3,minmax(0,1fr));\r\n gap:14px;\r\n}\r\n.item-card{\r\n border:1px solid var(--gris-300);\r\n border-radius:16px;\r\n background:#fff;\r\n padding:14px;\r\n box-shadow:0 8px 18px rgba(4,17,71,.05);\r\n}\r\n.item-card h3{\r\n margin:0 0 10px;\r\n color:var(--uapa-azul);\r\n font-size:1.05rem;\r\n}\r\n.item-card select{\r\n width:100%;\r\n border:1px solid #ccd5ef;\r\n border-radius:12px;\r\n padding:10px 12px;\r\n font:inherit;\r\n color:var(--txt);\r\n background:#fff;\r\n}\r\n.choice-buttons{\r\n display:grid;\r\n gap:9px;\r\n}\r\n.choice-btn{\r\n width:100%;\r\n text-align:left;\r\n border:2px solid #dfe5f6;\r\n border-radius:14px;\r\n background:#f9faff;\r\n color:var(--txt);\r\n padding:10px 12px;\r\n cursor:pointer;\r\n font:inherit;\r\n transition:.18s ease;\r\n}\r\n.choice-btn:hover{\r\n border-color:#a9b8ea;\r\n transform:translateY(-1px);\r\n}\r\n.section-card .button-item .choice-btn{\r\n color:var(--txt) !important;\r\n -webkit-text-fill-color:var(--txt) !important;\r\n opacity:1 !important;\r\n}\r\n\r\n\/* Estado seleccionado de los botones de la Parte 2 *\/\r\n.section-card .button-item .choice-btn.selected,\r\n.section-card .button-item .choice-btn.selected:hover,\r\n.section-card .button-item .choice-btn.selected:focus,\r\n.section-card .button-item .choice-btn.selected:active{\r\n border-color:var(--uapa-naranja) !important;\r\n background:#fff1df !important;\r\n color:var(--uapa-azul) !important;\r\n -webkit-text-fill-color:var(--uapa-azul) !important;\r\n box-shadow:0 0 0 3px rgba(255,131,0,.14) !important;\r\n opacity:1 !important;\r\n outline:none !important;\r\n}\r\n\r\n\/* Mantener el texto visible al navegar con teclado *\/\r\n.section-card .button-item .choice-btn:focus-visible{\r\n border-color:var(--uapa-naranja) !important;\r\n color:var(--uapa-azul) !important;\r\n -webkit-text-fill-color:var(--uapa-azul) !important;\r\n outline:3px solid rgba(255,131,0,.22) !important;\r\n outline-offset:2px;\r\n}\r\n.drag-layout{\r\n display:grid;\r\n grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);\r\n gap:16px;\r\n}\r\n.drag-bank,.drop-area{\r\n min-width:0;\r\n}\r\n.drag-bank h3,.drop-area h3{\r\n margin:0 0 10px;\r\n color:var(--uapa-azul);\r\n font-size:1rem;\r\n}\r\n.drag-options{\r\n display:grid;\r\n gap:10px;\r\n}\r\n.drag-card{\r\n border:2px solid #dfe5f6;\r\n border-radius:14px;\r\n background:#fff;\r\n color:var(--txt);\r\n padding:11px 12px;\r\n cursor:grab;\r\n box-shadow:0 8px 18px rgba(4,17,71,.05);\r\n transition:.18s ease;\r\n line-height:1.45;\r\n}\r\n.drag-card:hover{\r\n border-color:#a9b8ea;\r\n transform:translateY(-1px);\r\n}\r\n.drag-card.selected{\r\n border-color:var(--uapa-naranja);\r\n background:#fff7ef;\r\n}\r\n.drag-card.used{\r\n opacity:.48;\r\n cursor:default;\r\n}\r\n.drop-zones{\r\n display:grid;\r\n gap:10px;\r\n}\r\n.drop-zone{\r\n border:2px dashed #b8c3e7;\r\n background:#f9faff;\r\n border-radius:16px;\r\n min-height:88px;\r\n padding:12px;\r\n transition:.18s ease;\r\n}\r\n.drop-zone.active{\r\n border-color:var(--uapa-naranja);\r\n background:#fff7ef;\r\n}\r\n.drop-zone strong{\r\n display:block;\r\n color:var(--uapa-azul);\r\n margin-bottom:7px;\r\n}\r\n.drop-placeholder{\r\n color:var(--txt-suave);\r\n font-size:.92rem;\r\n}\r\n.drop-answer{\r\n display:inline-flex;\r\n width:100%;\r\n border-radius:12px;\r\n padding:10px;\r\n background:#fff;\r\n border:1px solid var(--gris-300);\r\n color:var(--txt);\r\n line-height:1.45;\r\n}\r\n.feedback{\r\n display:none;\r\n margin-top:12px;\r\n border-radius:14px;\r\n padding:12px 13px;\r\n line-height:1.55;\r\n font-size:.94rem;\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.item-card.correct,\r\n.drop-zone.correct{\r\n border-color:#8dd09f;\r\n background:#f5fbf7;\r\n}\r\n.item-card.incorrect,\r\n.drop-zone.incorrect{\r\n border-color:#efb1b1;\r\n background:#fff7f7;\r\n}\r\n.actions{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:10px;\r\n margin-top:18px;\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.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:900px){\r\n .toolbar{grid-template-columns:1fr}\r\n .progress-wrap{justify-content:flex-start; flex-wrap:wrap}\r\n .progress{width:100%}\r\n .activity-grid{grid-template-columns:1fr}\r\n .drag-layout{grid-template-columns:1fr}\r\n}\r\n@media(max-width:560px){\r\n .match-shell{padding:22px 12px 32px}\r\n .match-head{padding:20px 14px}\r\n .match-head h1{font-size:clamp(1.45rem,7vw,1.85rem)}\r\n .section-card{padding:15px 12px}\r\n .actions .btn{width:100%}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<main class=\"match-shell\">\r\n <header class=\"match-head\">\r\n <h1>Emparejamiento \u00b7 APA 7<\/h1>\r\n <p>Relaciona conceptos clave con sus definiciones usando tres din\u00e1micas sencillas: listas, botones y arrastre de tarjetas.<\/p>\r\n <\/header>\r\n\r\n <section class=\"toolbar\" aria-label=\"Progreso del ejercicio\">\r\n <span class=\"badge\">Actividad variada \u00b7 8 relaciones<\/span>\r\n <div class=\"progress-wrap\">\r\n <span id=\"progressText\">0 \/ 8 completadas<\/span>\r\n <div class=\"progress\"><span id=\"progressBar\"><\/span><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"section-card\" aria-label=\"Seleccionar desde lista\">\r\n <div class=\"section-title\">\r\n <h2>Parte 1: selecciona de la lista<\/h2>\r\n <span class=\"mode-pill\">Lista desplegable<\/span>\r\n <\/div>\r\n <p class=\"instruction\">Lee el concepto y selecciona la definici\u00f3n correcta.<\/p>\r\n\r\n <div class=\"activity-grid\">\r\n <article class=\"item-card list-item\" data-correct=\"c\">\r\n <h3>DOI<\/h3>\r\n <select aria-label=\"Respuesta para DOI\">\r\n <option value=\"\">Selecciona una definici\u00f3n<\/option>\r\n <option value=\"a\">Robo intelectual<\/option>\r\n <option value=\"b\">Lista de fuentes utilizadas<\/option>\r\n <option value=\"c\">Identificador digital<\/option>\r\n <option value=\"d\">Uso responsable de informaci\u00f3n<\/option>\r\n <\/select>\r\n <div class=\"feedback\"><\/div>\r\n <\/article>\r\n\r\n <article class=\"item-card list-item\" data-correct=\"a\">\r\n <h3>Plagio<\/h3>\r\n <select aria-label=\"Respuesta para Plagio\">\r\n <option value=\"\">Selecciona una definici\u00f3n<\/option>\r\n <option value=\"a\">Robo intelectual<\/option>\r\n <option value=\"b\">Lista de fuentes utilizadas<\/option>\r\n <option value=\"c\">Identificador digital<\/option>\r\n <option value=\"d\">Uso responsable de informaci\u00f3n<\/option>\r\n <\/select>\r\n <div class=\"feedback\"><\/div>\r\n <\/article>\r\n\r\n <article class=\"item-card list-item\" data-correct=\"b\">\r\n <h3>Referencias<\/h3>\r\n <select aria-label=\"Respuesta para Referencias\">\r\n <option value=\"\">Selecciona una definici\u00f3n<\/option>\r\n <option value=\"a\">Robo intelectual<\/option>\r\n <option value=\"b\">Lista de fuentes utilizadas<\/option>\r\n <option value=\"c\">Identificador digital<\/option>\r\n <option value=\"d\">Uso responsable de informaci\u00f3n<\/option>\r\n <\/select>\r\n <div class=\"feedback\"><\/div>\r\n <\/article>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"section-card\" aria-label=\"Seleccionar con botones\">\r\n <div class=\"section-title\">\r\n <h2>Parte 2: elige con botones<\/h2>\r\n <span class=\"mode-pill\">Botones r\u00e1pidos<\/span>\r\n <\/div>\r\n <p class=\"instruction\">Toca el bot\u00f3n que mejor corresponde al concepto.<\/p>\r\n\r\n <div class=\"activity-grid\">\r\n <article class=\"item-card button-item\" data-correct=\"e\">\r\n <h3>Zotero<\/h3>\r\n <div class=\"choice-buttons\">\r\n <button type=\"button\" class=\"choice-btn\" data-value=\"e\">Gestor bibliogr\u00e1fico<\/button>\r\n <button type=\"button\" class=\"choice-btn\" data-value=\"h\">Publicaci\u00f3n acad\u00e9mica<\/button>\r\n <button type=\"button\" class=\"choice-btn\" data-value=\"f\">Ideas expresadas con palabras propias<\/button>\r\n <\/div>\r\n <div class=\"feedback\"><\/div>\r\n <\/article>\r\n\r\n <article class=\"item-card button-item\" data-correct=\"d\">\r\n <h3>\u00c9tica acad\u00e9mica<\/h3>\r\n <div class=\"choice-buttons\">\r\n <button type=\"button\" class=\"choice-btn\" data-value=\"g\">Reproducci\u00f3n exacta de un texto<\/button>\r\n <button type=\"button\" class=\"choice-btn\" data-value=\"d\">Uso responsable de informaci\u00f3n<\/button>\r\n <button type=\"button\" class=\"choice-btn\" data-value=\"a\">Robo intelectual<\/button>\r\n <\/div>\r\n <div class=\"feedback\"><\/div>\r\n <\/article>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"section-card\" aria-label=\"Arrastrar tarjetas\">\r\n <div class=\"section-title\">\r\n <h2>Parte 3: arrastra la definici\u00f3n<\/h2>\r\n <span class=\"mode-pill\">Arrastrar y soltar<\/span>\r\n <\/div>\r\n <p class=\"instruction\">Arrastra cada tarjeta a su concepto. En celular, toca primero la definici\u00f3n y luego toca el recuadro donde deseas colocarla.<\/p>\r\n\r\n <div class=\"drag-layout\">\r\n <div class=\"drag-bank\">\r\n <h3>Definiciones<\/h3>\r\n <div class=\"drag-options\">\r\n <div class=\"drag-card\" draggable=\"true\" data-value=\"g\">Reproducci\u00f3n exacta de un texto<\/div>\r\n <div class=\"drag-card\" draggable=\"true\" data-value=\"f\">Ideas expresadas con palabras propias<\/div>\r\n <div class=\"drag-card\" draggable=\"true\" data-value=\"h\">Publicaci\u00f3n acad\u00e9mica<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"drop-area\">\r\n <h3>Conceptos<\/h3>\r\n <div class=\"drop-zones\">\r\n <div class=\"drop-zone\" data-correct=\"g\">\r\n <strong>Cita textual<\/strong>\r\n <span class=\"drop-placeholder\">Suelta aqu\u00ed la definici\u00f3n correcta.<\/span>\r\n <\/div>\r\n <div class=\"drop-zone\" data-correct=\"f\">\r\n <strong>Par\u00e1frasis<\/strong>\r\n <span class=\"drop-placeholder\">Suelta aqu\u00ed la definici\u00f3n correcta.<\/span>\r\n <\/div>\r\n <div class=\"drop-zone\" data-correct=\"h\">\r\n <strong>Revista cient\u00edfica<\/strong>\r\n <span class=\"drop-placeholder\">Suelta aqu\u00ed la definici\u00f3n correcta.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"btn primary\" id=\"checkBtn\">Revisar actividad<\/button>\r\n <button type=\"button\" class=\"btn secondary\" id=\"resetBtn\">Reiniciar<\/button>\r\n <\/div>\r\n\r\n <section id=\"result\" class=\"result\"><\/section>\r\n<\/main>\r\n\r\n<script>\r\nconst labels = {\r\n a: 'Robo intelectual',\r\n b: 'Lista de fuentes utilizadas',\r\n c: 'Identificador digital',\r\n d: 'Uso responsable de informaci\u00f3n',\r\n e: 'Gestor bibliogr\u00e1fico',\r\n f: 'Ideas expresadas con palabras propias',\r\n g: 'Reproducci\u00f3n exacta de un texto',\r\n h: 'Publicaci\u00f3n acad\u00e9mica'\r\n};\r\n\r\nconst totalItems = 8;\r\nconst progressText = document.getElementById('progressText');\r\nconst progressBar = document.getElementById('progressBar');\r\nconst result = document.getElementById('result');\r\nlet selectedDrag = null;\r\n\r\nfunction answeredCount(){\r\n let count = 0;\r\n document.querySelectorAll('.list-item select').forEach(select => {\r\n if(select.value) count++;\r\n });\r\n\r\n document.querySelectorAll('.button-item').forEach(item => {\r\n if(item.dataset.answer) count++;\r\n });\r\n\r\n document.querySelectorAll('.drop-zone').forEach(zone => {\r\n if(zone.dataset.answer) count++;\r\n });\r\n\r\n return count;\r\n}\r\n\r\nfunction updateProgress(){\r\n const answered = answeredCount();\r\n const percent = Math.round((answered \/ totalItems) * 100);\r\n progressText.textContent = answered + ' \/ ' + totalItems + ' completadas';\r\n progressBar.style.width = percent + '%';\r\n}\r\n\r\nfunction setFeedback(container, ok, text){\r\n const feedback = container.querySelector('.feedback');\r\n if(!feedback) return;\r\n\r\n feedback.className = 'feedback show ' + (ok ? 'ok' : 'bad');\r\n feedback.innerHTML = '<strong>' + (ok ? '\u00a1Correcto!' : 'Revisa esta relaci\u00f3n.') + '<\/strong><br>' + text;\r\n}\r\n\r\ndocument.querySelectorAll('.list-item select').forEach(select => {\r\n select.addEventListener('change', updateProgress);\r\n});\r\n\r\ndocument.querySelectorAll('.choice-btn').forEach(button => {\r\n button.setAttribute('aria-pressed', 'false');\r\n\r\n button.addEventListener('click', () => {\r\n const item = button.closest('.button-item');\r\n item.dataset.answer = button.dataset.value;\r\n\r\n item.querySelectorAll('.choice-btn').forEach(btn => {\r\n btn.classList.remove('selected');\r\n btn.setAttribute('aria-pressed', 'false');\r\n });\r\n\r\n button.classList.add('selected');\r\n button.setAttribute('aria-pressed', 'true');\r\n updateProgress();\r\n });\r\n});\r\n\r\ndocument.querySelectorAll('.drag-card').forEach(card => {\r\n card.addEventListener('dragstart', event => {\r\n if(card.classList.contains('used')) {\r\n event.preventDefault();\r\n return;\r\n }\r\n\r\n event.dataTransfer.setData('text\/plain', card.dataset.value);\r\n selectedDrag = card;\r\n });\r\n\r\n card.addEventListener('click', () => {\r\n if(card.classList.contains('used')) return;\r\n\r\n document.querySelectorAll('.drag-card').forEach(item => item.classList.remove('selected'));\r\n selectedDrag = card;\r\n card.classList.add('selected');\r\n });\r\n});\r\n\r\ndocument.querySelectorAll('.drop-zone').forEach(zone => {\r\n zone.addEventListener('dragover', event => {\r\n event.preventDefault();\r\n zone.classList.add('active');\r\n });\r\n\r\n zone.addEventListener('dragleave', () => {\r\n zone.classList.remove('active');\r\n });\r\n\r\n zone.addEventListener('drop', event => {\r\n event.preventDefault();\r\n zone.classList.remove('active');\r\n const value = event.dataTransfer.getData('text\/plain');\r\n const card = document.querySelector('.drag-card[data-value=\"' + value + '\"]');\r\n placeDragAnswer(zone, card);\r\n });\r\n\r\n zone.addEventListener('click', () => {\r\n if(selectedDrag) {\r\n placeDragAnswer(zone, selectedDrag);\r\n }\r\n });\r\n});\r\n\r\nfunction clearPreviousUse(value){\r\n document.querySelectorAll('.drop-zone').forEach(zone => {\r\n if(zone.dataset.answer === value) {\r\n delete zone.dataset.answer;\r\n const placeholder = zone.querySelector('.drop-placeholder');\r\n placeholder.textContent = 'Suelta aqu\u00ed la definici\u00f3n correcta.';\r\n placeholder.className = 'drop-placeholder';\r\n }\r\n });\r\n}\r\n\r\nfunction placeDragAnswer(zone, card){\r\n if(!card || card.classList.contains('used') && zone.dataset.answer !== card.dataset.value) return;\r\n\r\n const value = card.dataset.value;\r\n\r\n clearPreviousUse(value);\r\n\r\n if(zone.dataset.answer) {\r\n const oldCard = document.querySelector('.drag-card[data-value=\"' + zone.dataset.answer + '\"]');\r\n if(oldCard) oldCard.classList.remove('used');\r\n }\r\n\r\n zone.dataset.answer = value;\r\n\r\n const placeholder = zone.querySelector('.drop-placeholder');\r\n placeholder.className = 'drop-answer';\r\n placeholder.textContent = labels[value];\r\n\r\n card.classList.add('used');\r\n card.classList.remove('selected');\r\n selectedDrag = null;\r\n\r\n updateProgress();\r\n}\r\n\r\nfunction checkActivity(){\r\n let score = 0;\r\n\r\n document.querySelectorAll('.list-item').forEach(item => {\r\n const correct = item.dataset.correct;\r\n const answer = item.querySelector('select').value;\r\n const ok = answer === correct;\r\n\r\n item.classList.remove('correct', 'incorrect');\r\n if(answer) {\r\n item.classList.add(ok ? 'correct' : 'incorrect');\r\n if(ok) score++;\r\n setFeedback(item, ok, 'Respuesta esperada: ' + labels[correct] + '.');\r\n } else {\r\n setFeedback(item, false, 'Debes seleccionar una definici\u00f3n.');\r\n }\r\n });\r\n\r\n document.querySelectorAll('.button-item').forEach(item => {\r\n const correct = item.dataset.correct;\r\n const answer = item.dataset.answer;\r\n const ok = answer === correct;\r\n\r\n item.classList.remove('correct', 'incorrect');\r\n if(answer) {\r\n item.classList.add(ok ? 'correct' : 'incorrect');\r\n if(ok) score++;\r\n setFeedback(item, ok, 'Respuesta esperada: ' + labels[correct] + '.');\r\n } else {\r\n setFeedback(item, false, 'Debes elegir una opci\u00f3n.');\r\n }\r\n });\r\n\r\n document.querySelectorAll('.drop-zone').forEach(zone => {\r\n const correct = zone.dataset.correct;\r\n const answer = zone.dataset.answer;\r\n const ok = answer === correct;\r\n\r\n zone.classList.remove('correct', 'incorrect');\r\n if(answer) {\r\n zone.classList.add(ok ? 'correct' : 'incorrect');\r\n if(ok) score++;\r\n } else {\r\n zone.classList.add('incorrect');\r\n }\r\n });\r\n\r\n const percent = Math.round((score \/ totalItems) * 100);\r\n result.style.display = 'block';\r\n result.innerHTML = '<h2>Resultado<\/h2><p>Obtuviste <strong>' + score + ' de ' + totalItems + '<\/strong> relaciones correctas (' + percent + '%). Revisa las tarjetas marcadas para reforzar los conceptos.<\/p>';\r\n result.scrollIntoView({behavior:'smooth', block:'start'});\r\n}\r\n\r\nfunction resetActivity(){\r\n document.querySelectorAll('.list-item select').forEach(select => select.value = '');\r\n\r\n document.querySelectorAll('.button-item').forEach(item => {\r\n delete item.dataset.answer;\r\n item.classList.remove('correct', 'incorrect');\r\n item.querySelectorAll('.choice-btn').forEach(btn => {\r\n btn.classList.remove('selected');\r\n btn.setAttribute('aria-pressed', 'false');\r\n });\r\n const feedback = item.querySelector('.feedback');\r\n feedback.className = 'feedback';\r\n feedback.innerHTML = '';\r\n });\r\n\r\n document.querySelectorAll('.list-item').forEach(item => {\r\n item.classList.remove('correct', 'incorrect');\r\n const feedback = item.querySelector('.feedback');\r\n feedback.className = 'feedback';\r\n feedback.innerHTML = '';\r\n });\r\n\r\n document.querySelectorAll('.drop-zone').forEach(zone => {\r\n delete zone.dataset.answer;\r\n zone.classList.remove('correct', 'incorrect', 'active');\r\n const placeholder = zone.querySelector('.drop-placeholder, .drop-answer');\r\n placeholder.className = 'drop-placeholder';\r\n placeholder.textContent = 'Suelta aqu\u00ed la definici\u00f3n correcta.';\r\n });\r\n\r\n document.querySelectorAll('.drag-card').forEach(card => {\r\n card.classList.remove('used', 'selected');\r\n });\r\n\r\n selectedDrag = null;\r\n result.style.display = 'none';\r\n result.innerHTML = '';\r\n updateProgress();\r\n window.scrollTo({top:0, behavior:'smooth'});\r\n}\r\n\r\ndocument.getElementById('checkBtn').addEventListener('click', checkActivity);\r\ndocument.getElementById('resetBtn').addEventListener('click', resetActivity);\r\n\r\nupdateProgress();\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>Emparejamiento variado \u00b7 APA 7 Emparejamiento \u00b7 APA 7 Relaciona conceptos clave con sus definiciones usando tres din\u00e1micas sencillas: listas, botones y arrastre de tarjetas. Actividad variada \u00b7 8 relaciones 0 \/ 8 completadas Parte 1: selecciona de la lista Lista desplegable Lee el concepto y selecciona la definici\u00f3n correcta. DOI Selecciona una definici\u00f3nRobo intelectualLista […]<\/p>\n","protected":false},"author":1,"featured_media":812,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-829","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\/829","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=829"}],"version-history":[{"count":7,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/829\/revisions"}],"predecessor-version":[{"id":1151,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/829\/revisions\/1151"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/media\/812"}],"wp:attachment":[{"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/media?parent=829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/categories?post=829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/tags?post=829"}],"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\nEmparejamiento variado \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.match-shell{\r\n max-width:1120px;\r\n margin:0 auto;\r\n padding:24px 16px 38px;\r\n}\r\n.match-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.match-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.match-head p{\r\n margin:8px auto 0;\r\n max-width:780px;\r\n line-height:1.55;\r\n}\r\n.toolbar{\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.section-card{\r\n background:#fff;\r\n border:1px solid var(--gris-300);\r\n border-radius:20px;\r\n padding:18px;\r\n margin-top:18px;\r\n box-shadow:0 10px 26px rgba(4,17,71,.07);\r\n}\r\n.section-title{\r\n display:flex;\r\n flex-wrap:wrap;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:10px;\r\n margin-bottom:12px;\r\n}\r\n.section-title h2{\r\n margin:0;\r\n color:var(--uapa-azul);\r\n font-size:clamp(1.18rem,1rem + 1vw,1.55rem);\r\n text-transform:none !important;\r\n}\r\n.mode-pill{\r\n display:inline-flex;\r\n background:var(--uapa-azul);\r\n color:#fff;\r\n border-radius:999px;\r\n padding:6px 11px;\r\n font-weight:850;\r\n font-size:.82rem;\r\n}\r\n.instruction{\r\n margin:0 0 14px;\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 line-height:1.55;\r\n}\r\n.activity-grid{\r\n display:grid;\r\n grid-template-columns:repeat(3,minmax(0,1fr));\r\n gap:14px;\r\n}\r\n.item-card{\r\n border:1px solid var(--gris-300);\r\n border-radius:16px;\r\n background:#fff;\r\n padding:14px;\r\n box-shadow:0 8px 18px rgba(4,17,71,.05);\r\n}\r\n.item-card h3{\r\n margin:0 0 10px;\r\n color:var(--uapa-azul);\r\n font-size:1.05rem;\r\n}\r\n.item-card select{\r\n width:100%;\r\n border:1px solid #ccd5ef;\r\n border-radius:12px;\r\n padding:10px 12px;\r\n font:inherit;\r\n color:var(--txt);\r\n background:#fff;\r\n}\r\n.choice-buttons{\r\n display:grid;\r\n gap:9px;\r\n}\r\n.choice-btn{\r\n width:100%;\r\n text-align:left;\r\n border:2px solid #dfe5f6;\r\n border-radius:14px;\r\n background:#f9faff;\r\n color:var(--txt);\r\n padding:10px 12px;\r\n cursor:pointer;\r\n font:inherit;\r\n transition:.18s ease;\r\n}\r\n.choice-btn:hover{\r\n border-color:#a9b8ea;\r\n transform:translateY(-1px);\r\n}\r\n.section-card .button-item .choice-btn{\r\n color:var(--txt) !important;\r\n -webkit-text-fill-color:var(--txt) !important;\r\n opacity:1 !important;\r\n}\r\n\r\n\/* Estado seleccionado de los botones de la Parte 2 *\/\r\n.section-card .button-item .choice-btn.selected,\r\n.section-card .button-item .choice-btn.selected:hover,\r\n.section-card .button-item .choice-btn.selected:focus,\r\n.section-card .button-item .choice-btn.selected:active{\r\n border-color:var(--uapa-naranja) !important;\r\n background:#fff1df !important;\r\n color:var(--uapa-azul) !important;\r\n -webkit-text-fill-color:var(--uapa-azul) !important;\r\n box-shadow:0 0 0 3px rgba(255,131,0,.14) !important;\r\n opacity:1 !important;\r\n outline:none !important;\r\n}\r\n\r\n\/* Mantener el texto visible al navegar con teclado *\/\r\n.section-card .button-item .choice-btn:focus-visible{\r\n border-color:var(--uapa-naranja) !important;\r\n color:var(--uapa-azul) !important;\r\n -webkit-text-fill-color:var(--uapa-azul) !important;\r\n outline:3px solid rgba(255,131,0,.22) !important;\r\n outline-offset:2px;\r\n}\r\n.drag-layout{\r\n display:grid;\r\n grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);\r\n gap:16px;\r\n}\r\n.drag-bank,.drop-area{\r\n min-width:0;\r\n}\r\n.drag-bank h3,.drop-area h3{\r\n margin:0 0 10px;\r\n color:var(--uapa-azul);\r\n font-size:1rem;\r\n}\r\n.drag-options{\r\n display:grid;\r\n gap:10px;\r\n}\r\n.drag-card{\r\n border:2px solid #dfe5f6;\r\n border-radius:14px;\r\n background:#fff;\r\n color:var(--txt);\r\n padding:11px 12px;\r\n cursor:grab;\r\n box-shadow:0 8px 18px rgba(4,17,71,.05);\r\n transition:.18s ease;\r\n line-height:1.45;\r\n}\r\n.drag-card:hover{\r\n border-color:#a9b8ea;\r\n transform:translateY(-1px);\r\n}\r\n.drag-card.selected{\r\n border-color:var(--uapa-naranja);\r\n background:#fff7ef;\r\n}\r\n.drag-card.used{\r\n opacity:.48;\r\n cursor:default;\r\n}\r\n.drop-zones{\r\n display:grid;\r\n gap:10px;\r\n}\r\n.drop-zone{\r\n border:2px dashed #b8c3e7;\r\n background:#f9faff;\r\n border-radius:16px;\r\n min-height:88px;\r\n padding:12px;\r\n transition:.18s ease;\r\n}\r\n.drop-zone.active{\r\n border-color:var(--uapa-naranja);\r\n background:#fff7ef;\r\n}\r\n.drop-zone strong{\r\n display:block;\r\n color:var(--uapa-azul);\r\n margin-bottom:7px;\r\n}\r\n.drop-placeholder{\r\n color:var(--txt-suave);\r\n font-size:.92rem;\r\n}\r\n.drop-answer{\r\n display:inline-flex;\r\n width:100%;\r\n border-radius:12px;\r\n padding:10px;\r\n background:#fff;\r\n border:1px solid var(--gris-300);\r\n color:var(--txt);\r\n line-height:1.45;\r\n}\r\n.feedback{\r\n display:none;\r\n margin-top:12px;\r\n border-radius:14px;\r\n padding:12px 13px;\r\n line-height:1.55;\r\n font-size:.94rem;\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.item-card.correct,\r\n.drop-zone.correct{\r\n border-color:#8dd09f;\r\n background:#f5fbf7;\r\n}\r\n.item-card.incorrect,\r\n.drop-zone.incorrect{\r\n border-color:#efb1b1;\r\n background:#fff7f7;\r\n}\r\n.actions{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:10px;\r\n margin-top:18px;\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.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:900px){\r\n .toolbar{grid-template-columns:1fr}\r\n .progress-wrap{justify-content:flex-start; flex-wrap:wrap}\r\n .progress{width:100%}\r\n .activity-grid{grid-template-columns:1fr}\r\n .drag-layout{grid-template-columns:1fr}\r\n}\r\n@media(max-width:560px){\r\n .match-shell{padding:22px 12px 32px}\r\n .match-head{padding:20px 14px}\r\n .match-head h1{font-size:clamp(1.45rem,7vw,1.85rem)}\r\n .section-card{padding:15px 12px}\r\n .actions .btn{width:100%}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<main class=\"match-shell\">\r\n <header class=\"match-head\">\r\n <h1>Emparejamiento \u00b7 APA 7<\/h1>\r\n <p>Relaciona conceptos clave con sus definiciones usando tres din\u00e1micas sencillas: listas, botones y arrastre de tarjetas.<\/p>\r\n <\/header>\r\n\r\n <section class=\"toolbar\" aria-label=\"Progreso del ejercicio\">\r\n <span class=\"badge\">Actividad variada \u00b7 8 relaciones<\/span>\r\n <div class=\"progress-wrap\">\r\n <span id=\"progressText\">0 \/ 8 completadas<\/span>\r\n <div class=\"progress\"><span id=\"progressBar\"><\/span><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"section-card\" aria-label=\"Seleccionar desde lista\">\r\n <div class=\"section-title\">\r\n <h2>Parte 1: selecciona de la lista<\/h2>\r\n <span class=\"mode-pill\">Lista desplegable<\/span>\r\n <\/div>\r\n <p class=\"instruction\">Lee el concepto y selecciona la definici\u00f3n correcta.<\/p>\r\n\r\n <div class=\"activity-grid\">\r\n <article class=\"item-card list-item\" data-correct=\"c\">\r\n <h3>DOI<\/h3>\r\n <select aria-label=\"Respuesta para DOI\">\r\n <option value=\"\">Selecciona una definici\u00f3n<\/option>\r\n <option value=\"a\">Robo intelectual<\/option>\r\n <option value=\"b\">Lista de fuentes utilizadas<\/option>\r\n <option value=\"c\">Identificador digital<\/option>\r\n <option value=\"d\">Uso responsable de informaci\u00f3n<\/option>\r\n <\/select>\r\n <div class=\"feedback\"><\/div>\r\n <\/article>\r\n\r\n <article class=\"item-card list-item\" data-correct=\"a\">\r\n <h3>Plagio<\/h3>\r\n <select aria-label=\"Respuesta para Plagio\">\r\n <option value=\"\">Selecciona una definici\u00f3n<\/option>\r\n <option value=\"a\">Robo intelectual<\/option>\r\n <option value=\"b\">Lista de fuentes utilizadas<\/option>\r\n <option value=\"c\">Identificador digital<\/option>\r\n <option value=\"d\">Uso responsable de informaci\u00f3n<\/option>\r\n <\/select>\r\n <div class=\"feedback\"><\/div>\r\n <\/article>\r\n\r\n <article class=\"item-card list-item\" data-correct=\"b\">\r\n <h3>Referencias<\/h3>\r\n <select aria-label=\"Respuesta para Referencias\">\r\n <option value=\"\">Selecciona una definici\u00f3n<\/option>\r\n <option value=\"a\">Robo intelectual<\/option>\r\n <option value=\"b\">Lista de fuentes utilizadas<\/option>\r\n <option value=\"c\">Identificador digital<\/option>\r\n <option value=\"d\">Uso responsable de informaci\u00f3n<\/option>\r\n <\/select>\r\n <div class=\"feedback\"><\/div>\r\n <\/article>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"section-card\" aria-label=\"Seleccionar con botones\">\r\n <div class=\"section-title\">\r\n <h2>Parte 2: elige con botones<\/h2>\r\n <span class=\"mode-pill\">Botones r\u00e1pidos<\/span>\r\n <\/div>\r\n <p class=\"instruction\">Toca el bot\u00f3n que mejor corresponde al concepto.<\/p>\r\n\r\n <div class=\"activity-grid\">\r\n <article class=\"item-card button-item\" data-correct=\"e\">\r\n <h3>Zotero<\/h3>\r\n <div class=\"choice-buttons\">\r\n <button type=\"button\" class=\"choice-btn\" data-value=\"e\">Gestor bibliogr\u00e1fico<\/button>\r\n <button type=\"button\" class=\"choice-btn\" data-value=\"h\">Publicaci\u00f3n acad\u00e9mica<\/button>\r\n <button type=\"button\" class=\"choice-btn\" data-value=\"f\">Ideas expresadas con palabras propias<\/button>\r\n <\/div>\r\n <div class=\"feedback\"><\/div>\r\n <\/article>\r\n\r\n <article class=\"item-card button-item\" data-correct=\"d\">\r\n <h3>\u00c9tica acad\u00e9mica<\/h3>\r\n <div class=\"choice-buttons\">\r\n <button type=\"button\" class=\"choice-btn\" data-value=\"g\">Reproducci\u00f3n exacta de un texto<\/button>\r\n <button type=\"button\" class=\"choice-btn\" data-value=\"d\">Uso responsable de informaci\u00f3n<\/button>\r\n <button type=\"button\" class=\"choice-btn\" data-value=\"a\">Robo intelectual<\/button>\r\n <\/div>\r\n <div class=\"feedback\"><\/div>\r\n <\/article>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"section-card\" aria-label=\"Arrastrar tarjetas\">\r\n <div class=\"section-title\">\r\n <h2>Parte 3: arrastra la definici\u00f3n<\/h2>\r\n <span class=\"mode-pill\">Arrastrar y soltar<\/span>\r\n <\/div>\r\n <p class=\"instruction\">Arrastra cada tarjeta a su concepto. En celular, toca primero la definici\u00f3n y luego toca el recuadro donde deseas colocarla.<\/p>\r\n\r\n <div class=\"drag-layout\">\r\n <div class=\"drag-bank\">\r\n <h3>Definiciones<\/h3>\r\n <div class=\"drag-options\">\r\n <div class=\"drag-card\" draggable=\"true\" data-value=\"g\">Reproducci\u00f3n exacta de un texto<\/div>\r\n <div class=\"drag-card\" draggable=\"true\" data-value=\"f\">Ideas expresadas con palabras propias<\/div>\r\n <div class=\"drag-card\" draggable=\"true\" data-value=\"h\">Publicaci\u00f3n acad\u00e9mica<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"drop-area\">\r\n <h3>Conceptos<\/h3>\r\n <div class=\"drop-zones\">\r\n <div class=\"drop-zone\" data-correct=\"g\">\r\n <strong>Cita textual<\/strong>\r\n <span class=\"drop-placeholder\">Suelta aqu\u00ed la definici\u00f3n correcta.<\/span>\r\n <\/div>\r\n <div class=\"drop-zone\" data-correct=\"f\">\r\n <strong>Par\u00e1frasis<\/strong>\r\n <span class=\"drop-placeholder\">Suelta aqu\u00ed la definici\u00f3n correcta.<\/span>\r\n <\/div>\r\n <div class=\"drop-zone\" data-correct=\"h\">\r\n <strong>Revista cient\u00edfica<\/strong>\r\n <span class=\"drop-placeholder\">Suelta aqu\u00ed la definici\u00f3n correcta.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"actions\">\r\n <button type=\"button\" class=\"btn primary\" id=\"checkBtn\">Revisar actividad<\/button>\r\n <button type=\"button\" class=\"btn secondary\" id=\"resetBtn\">Reiniciar<\/button>\r\n <\/div>\r\n\r\n <section id=\"result\" class=\"result\"><\/section>\r\n<\/main>\r\n\r\n<script>\r\nconst labels = {\r\n a: 'Robo intelectual',\r\n b: 'Lista de fuentes utilizadas',\r\n c: 'Identificador digital',\r\n d: 'Uso responsable de informaci\u00f3n',\r\n e: 'Gestor bibliogr\u00e1fico',\r\n f: 'Ideas expresadas con palabras propias',\r\n g: 'Reproducci\u00f3n exacta de un texto',\r\n h: 'Publicaci\u00f3n acad\u00e9mica'\r\n};\r\n\r\nconst totalItems = 8;\r\nconst progressText = document.getElementById('progressText');\r\nconst progressBar = document.getElementById('progressBar');\r\nconst result = document.getElementById('result');\r\nlet selectedDrag = null;\r\n\r\nfunction answeredCount(){\r\n let count = 0;\r\n document.querySelectorAll('.list-item select').forEach(select => {\r\n if(select.value) count++;\r\n });\r\n\r\n document.querySelectorAll('.button-item').forEach(item => {\r\n if(item.dataset.answer) count++;\r\n });\r\n\r\n document.querySelectorAll('.drop-zone').forEach(zone => {\r\n if(zone.dataset.answer) count++;\r\n });\r\n\r\n return count;\r\n}\r\n\r\nfunction updateProgress(){\r\n const answered = answeredCount();\r\n const percent = Math.round((answered \/ totalItems) * 100);\r\n progressText.textContent = answered + ' \/ ' + totalItems + ' completadas';\r\n progressBar.style.width = percent + '%';\r\n}\r\n\r\nfunction setFeedback(container, ok, text){\r\n const feedback = container.querySelector('.feedback');\r\n if(!feedback) return;\r\n\r\n feedback.className = 'feedback show ' + (ok ? 'ok' : 'bad');\r\n feedback.innerHTML = '<strong>' + (ok ? '\u00a1Correcto!' : 'Revisa esta relaci\u00f3n.') + '<\/strong><br>' + text;\r\n}\r\n\r\ndocument.querySelectorAll('.list-item select').forEach(select => {\r\n select.addEventListener('change', updateProgress);\r\n});\r\n\r\ndocument.querySelectorAll('.choice-btn').forEach(button => {\r\n button.setAttribute('aria-pressed', 'false');\r\n\r\n button.addEventListener('click', () => {\r\n const item = button.closest('.button-item');\r\n item.dataset.answer = button.dataset.value;\r\n\r\n item.querySelectorAll('.choice-btn').forEach(btn => {\r\n btn.classList.remove('selected');\r\n btn.setAttribute('aria-pressed', 'false');\r\n });\r\n\r\n button.classList.add('selected');\r\n button.setAttribute('aria-pressed', 'true');\r\n updateProgress();\r\n });\r\n});\r\n\r\ndocument.querySelectorAll('.drag-card').forEach(card => {\r\n card.addEventListener('dragstart', event => {\r\n if(card.classList.contains('used')) {\r\n event.preventDefault();\r\n return;\r\n }\r\n\r\n event.dataTransfer.setData('text\/plain', card.dataset.value);\r\n selectedDrag = card;\r\n });\r\n\r\n card.addEventListener('click', () => {\r\n if(card.classList.contains('used')) return;\r\n\r\n document.querySelectorAll('.drag-card').forEach(item => item.classList.remove('selected'));\r\n selectedDrag = card;\r\n card.classList.add('selected');\r\n });\r\n});\r\n\r\ndocument.querySelectorAll('.drop-zone').forEach(zone => {\r\n zone.addEventListener('dragover', event => {\r\n event.preventDefault();\r\n zone.classList.add('active');\r\n });\r\n\r\n zone.addEventListener('dragleave', () => {\r\n zone.classList.remove('active');\r\n });\r\n\r\n zone.addEventListener('drop', event => {\r\n event.preventDefault();\r\n zone.classList.remove('active');\r\n const value = event.dataTransfer.getData('text\/plain');\r\n const card = document.querySelector('.drag-card[data-value=\"' + value + '\"]');\r\n placeDragAnswer(zone, card);\r\n });\r\n\r\n zone.addEventListener('click', () => {\r\n if(selectedDrag) {\r\n placeDragAnswer(zone, selectedDrag);\r\n }\r\n });\r\n});\r\n\r\nfunction clearPreviousUse(value){\r\n document.querySelectorAll('.drop-zone').forEach(zone => {\r\n if(zone.dataset.answer === value) {\r\n delete zone.dataset.answer;\r\n const placeholder = zone.querySelector('.drop-placeholder');\r\n placeholder.textContent = 'Suelta aqu\u00ed la definici\u00f3n correcta.';\r\n placeholder.className = 'drop-placeholder';\r\n }\r\n });\r\n}\r\n\r\nfunction placeDragAnswer(zone, card){\r\n if(!card || card.classList.contains('used') && zone.dataset.answer !== card.dataset.value) return;\r\n\r\n const value = card.dataset.value;\r\n\r\n clearPreviousUse(value);\r\n\r\n if(zone.dataset.answer) {\r\n const oldCard = document.querySelector('.drag-card[data-value=\"' + zone.dataset.answer + '\"]');\r\n if(oldCard) oldCard.classList.remove('used');\r\n }\r\n\r\n zone.dataset.answer = value;\r\n\r\n const placeholder = zone.querySelector('.drop-placeholder');\r\n placeholder.className = 'drop-answer';\r\n placeholder.textContent = labels[value];\r\n\r\n card.classList.add('used');\r\n card.classList.remove('selected');\r\n selectedDrag = null;\r\n\r\n updateProgress();\r\n}\r\n\r\nfunction checkActivity(){\r\n let score = 0;\r\n\r\n document.querySelectorAll('.list-item').forEach(item => {\r\n const correct = item.dataset.correct;\r\n const answer = item.querySelector('select').value;\r\n const ok = answer === correct;\r\n\r\n item.classList.remove('correct', 'incorrect');\r\n if(answer) {\r\n item.classList.add(ok ? 'correct' : 'incorrect');\r\n if(ok) score++;\r\n setFeedback(item, ok, 'Respuesta esperada: ' + labels[correct] + '.');\r\n } else {\r\n setFeedback(item, false, 'Debes seleccionar una definici\u00f3n.');\r\n }\r\n });\r\n\r\n document.querySelectorAll('.button-item').forEach(item => {\r\n const correct = item.dataset.correct;\r\n const answer = item.dataset.answer;\r\n const ok = answer === correct;\r\n\r\n item.classList.remove('correct', 'incorrect');\r\n if(answer) {\r\n item.classList.add(ok ? 'correct' : 'incorrect');\r\n if(ok) score++;\r\n setFeedback(item, ok, 'Respuesta esperada: ' + labels[correct] + '.');\r\n } else {\r\n setFeedback(item, false, 'Debes elegir una opci\u00f3n.');\r\n }\r\n });\r\n\r\n document.querySelectorAll('.drop-zone').forEach(zone => {\r\n const correct = zone.dataset.correct;\r\n const answer = zone.dataset.answer;\r\n const ok = answer === correct;\r\n\r\n zone.classList.remove('correct', 'incorrect');\r\n if(answer) {\r\n zone.classList.add(ok ? 'correct' : 'incorrect');\r\n if(ok) score++;\r\n } else {\r\n zone.classList.add('incorrect');\r\n }\r\n });\r\n\r\n const percent = Math.round((score \/ totalItems) * 100);\r\n result.style.display = 'block';\r\n result.innerHTML = '<h2>Resultado<\/h2><p>Obtuviste <strong>' + score + ' de ' + totalItems + '<\/strong> relaciones correctas (' + percent + '%). Revisa las tarjetas marcadas para reforzar los conceptos.<\/p>';\r\n result.scrollIntoView({behavior:'smooth', block:'start'});\r\n}\r\n\r\nfunction resetActivity(){\r\n document.querySelectorAll('.list-item select').forEach(select => select.value = '');\r\n\r\n document.querySelectorAll('.button-item').forEach(item => {\r\n delete item.dataset.answer;\r\n item.classList.remove('correct', 'incorrect');\r\n item.querySelectorAll('.choice-btn').forEach(btn => {\r\n btn.classList.remove('selected');\r\n btn.setAttribute('aria-pressed', 'false');\r\n });\r\n const feedback = item.querySelector('.feedback');\r\n feedback.className = 'feedback';\r\n feedback.innerHTML = '';\r\n });\r\n\r\n document.querySelectorAll('.list-item').forEach(item => {\r\n item.classList.remove('correct', 'incorrect');\r\n const feedback = item.querySelector('.feedback');\r\n feedback.className = 'feedback';\r\n feedback.innerHTML = '';\r\n });\r\n\r\n document.querySelectorAll('.drop-zone').forEach(zone => {\r\n delete zone.dataset.answer;\r\n zone.classList.remove('correct', 'incorrect', 'active');\r\n const placeholder = zone.querySelector('.drop-placeholder, .drop-answer');\r\n placeholder.className = 'drop-placeholder';\r\n placeholder.textContent = 'Suelta aqu\u00ed la definici\u00f3n correcta.';\r\n });\r\n\r\n document.querySelectorAll('.drag-card').forEach(card => {\r\n card.classList.remove('used', 'selected');\r\n });\r\n\r\n selectedDrag = null;\r\n result.style.display = 'none';\r\n result.innerHTML = '';\r\n updateProgress();\r\n window.scrollTo({top:0, behavior:'smooth'});\r\n}\r\n\r\ndocument.getElementById('checkBtn').addEventListener('click', checkActivity);\r\ndocument.getElementById('resetBtn').addEventListener('click', resetActivity);\r\n\r\nupdateProgress();\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>Emparejamiento variado \u00b7 APA 7 Emparejamiento \u00b7 APA 7 Relaciona conceptos clave con sus definiciones usando tres din\u00e1micas sencillas: listas, botones y arrastre de tarjetas. Actividad variada \u00b7 8 relaciones 0 \/ 8 completadas Parte 1: selecciona de la lista Lista desplegable Lee el concepto y selecciona la definici\u00f3n correcta. DOI Selecciona una definici\u00f3nRobo intelectualLista […]<\/p>\n","protected":false},"author":1,"featured_media":812,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-829","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\/829","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=829"}],"version-history":[{"count":7,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/829\/revisions"}],"predecessor-version":[{"id":1151,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/posts\/829\/revisions\/1151"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/media\/812"}],"wp:attachment":[{"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/media?parent=829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/categories?post=829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/integridadacademica.uapa.edu.do\/index.php\/wp-json\/wp\/v2\/tags?post=829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}