Click and drag between boxes to create connections.
\n
Use the tab key to navigate to a box and press Enter to select the box. Then tab to the connecting box and press Enter to create a connection between the two selected boxes.
\n
Click on a connection line to remove it. You can also use the tab key to select lines. Press the delete key to remove a selected line.
\n
Click the "Check Me" button to check your connections, and save your work.
\n
Click the "Reset" button to clear all connections.
\n
',this.containerDiv.appendChild(this.helpModal),this.helpModal.querySelector(".help-close").addEventListener("click",(()=>this.hideHelp()))}showHelp(){this.helpModal.style.display="flex"}hideHelp(){this.helpModal.style.display="none"}shuffle(e){for(let t=e.length-1;t>0;t--){const n=Math.floor(Math.random()*(t+1));[e[t],e[n]]=[e[n],e[t]]}return e}renderBoxes(){this.boxData.left.forEach((({id:e,label:t})=>{const n=this.createBox(e,t,"drag");this.leftColumn.appendChild(n),this.allBoxes.push(n)})),this.boxData.right.forEach((({id:e,label:t})=>{const n=this.createBox(e,t,"drop");this.rightColumn.appendChild(n),this.allBoxes.push(n)}));const e=Array.from(this.workspace.querySelectorAll("img"));0===e.length&&this.boxesRenderedResolve();const t=e.map((e=>"function"==typeof e.decode?e.decode():e.complete&&0!==e.naturalWidth?Promise.resolve():new Promise((t=>{e.addEventListener("load",(()=>t())),e.addEventListener("error",(()=>t()))}))));Promise.all(t).then((()=>{this.boxesRenderedResolve()}))}createBox(e,t,n){const o=document.createElement("div");return o.className="box",o.dataset.id=e,o.dataset.role=n,o.innerHTML=t,o.tabIndex=0,o.setAttribute("role","button"),o.setAttribute("aria-label",`${"drag"===n?"Draggable":"Droppable"}: ${t}`),o}getCenter(e){const t=e.getBoundingClientRect(),n=this.workspace.getBoundingClientRect();return{x:t.left-n.left+t.width/2,y:t.top-n.top+t.height/2}}getRightBoxCenter(e){const t=e.getBoundingClientRect(),n=this.workspace.getBoundingClientRect();return{x:t.left-n.left+t.width,y:t.top-n.top+t.height/2}}getLeftBoxCenter(e){const t=e.getBoundingClientRect(),n=this.workspace.getBoundingClientRect();return{x:t.left-n.left,y:t.top-n.top+t.height/2}}createLineElement(e,t,n,o){const s=document.createElementNS("http://www.w3.org/2000/svg","line");return s.setAttribute("x1",e),s.setAttribute("y1",t),s.setAttribute("x2",n),s.setAttribute("y2",o),s.setAttribute("class","line"),s.setAttribute("tabindex","0"),s.setAttribute("focusable","true"),s.setAttribute("role","button"),s.setAttribute("aria-label","Connection line. Press Delete to remove."),s.addEventListener("click",(()=>{this.removeLine(s)})),s.addEventListener("keydown",(e=>{"Delete"!==e.key&&"Backspace"!==e.key||(e.preventDefault(),this.removeLine(s))})),s}removeLine(e){this.svg.removeChild(e);const t=this.connections.findIndex((t=>t.fromBox===e.fromBox&&t.toBox===e.toBox||t.fromBox===e.toBox&&t.toBox===e.fromBox));-1!==t&&this.connections.splice(t,1),this.updateConnectionModel()}isConnected(e,t){return this.connections.some((n=>n.fromBox===e&&n.toBox===t||n.fromBox===t&&n.toBox===e))}createPermanentLine(e,t){if(e.dataset.role===t.dataset.role)return void alert("You can only connect a draggable to a droppable.");if("drop"===e.dataset.role&&([e,t]=[t,e]),this.isConnected(e,t))return;const n=this.getRightBoxCenter(e),o=this.getLeftBoxCenter(t),s=this.createLineElement(n.x,n.y,o.x,o.y);s.fromBox=e,s.toBox=t,this.svg.appendChild(s),this.connections.push({fromBox:e,toBox:t,line:s}),this.updateConnectionModel(),this.isAnswered=!0,this.ariaLive&&(this.ariaLive.textContent=`Connected ${e.textContent} to ${t.textContent}`)}updateConnectionModel(){this.connList.innerHTML="Connections: ",this.connections.forEach((e=>{const t=e.fromBox.textContent;let n=e.toBox.textContent;n||(n=e.toBox.querySelector("img").alt);const o=document.createElement("div");o.className="conn-entry",o.textContent=`${t} → ${n}`,this.connList.appendChild(o)}))}gradeConnections(){this.checkCurrentAnswer(),this.renderFeedback(),this.logCurrentAnswer(),this.setLocalStorage()}resetConnections(){this.connections.forEach((e=>{e.line&&e.line.parentNode===this.svg&&this.svg.removeChild(e.line)})),this.connections.length=0,this.updateConnectionModel(),this.ariaLive&&(this.ariaLive.textContent="All connections have been cleared.")}attachEvents(){this.allBoxes.forEach((e=>{e.addEventListener("pointerdown",(t=>{t.ctrlKey||t.metaKey;{t.preventDefault(),this.startBox=e;const n=this.getRightBoxCenter(this.startBox);this.tempLine=this.createLineElement(n.x,n.y,n.x,n.y),this.tempLine.setAttribute("stroke","gray"),this.tempLine.setAttribute("stroke-dasharray","4"),this.svg.appendChild(this.tempLine),document.addEventListener("pointermove",this.updateTempLine),document.addEventListener("pointerup",this.finishConnection)}})),e.addEventListener("keydown",(t=>{if("Enter"===t.key)if(t.preventDefault(),this.selectedBox){e!==this.selectedBox&&this.createPermanentLine(this.selectedBox,e),this.selectedBox.classList.remove("selected"),this.selectedBox=null;const t=this.allBoxes.indexOf(e),n=this.allBoxes[t+1];n?n.focus():this.allBoxes[0].focus()}else this.selectedBox=e,e.classList.add("selected")})),e.addEventListener("mouseenter",(()=>{this.connections.forEach((t=>{t.fromBox===e||t.toBox===e?(t.line.classList.add("highlighted"),t.line.classList.remove("faded")):(t.line.classList.add("faded"),t.line.classList.remove("highlighted"))}))})),e.addEventListener("mouseleave",(()=>{this.connections.forEach((e=>{e.line.classList.remove("highlighted","faded")}))}))}));const e=this.containerDiv.querySelector(".grade-button"),t=this.containerDiv.querySelector(".reset-button");e&&e.addEventListener("click",(()=>this.gradeConnections())),t&&t.addEventListener("click",(()=>this.resetConnections())),window.addEventListener("resize",(()=>{this.connections.forEach((e=>{const t=this.getRightBoxCenter(e.fromBox),n=this.getLeftBoxCenter(e.toBox);e.line.setAttribute("x1",t.x),e.line.setAttribute("y1",t.y),e.line.setAttribute("x2",n.x),e.line.setAttribute("y2",n.y)}))}))}updateTempLine=e=>{if(e.preventDefault(),!this.startBox||!this.tempLine)return;const t=this.getRightBoxCenter(this.startBox);this.tempLine.setAttribute("x1",t.x),this.tempLine.setAttribute("y1",t.y);const n=this.workspace.getBoundingClientRect(),o=e.clientX-n.left,s=e.clientY-n.top;this.tempLine.setAttribute("x2",o),this.tempLine.setAttribute("y2",s)};finishConnection=e=>{e.preventDefault(),this.tempLine&&(this.svg.removeChild(this.tempLine),this.tempLine=null);const t=e.clientX||e.changedTouches&&e.changedTouches[0].clientX,n=e.clientY||e.changedTouches&&e.changedTouches[0].clientY,o=document.elementFromPoint(t,n),s=this.allBoxes.find((e=>e.contains(o)&&e!==this.startBox));this.startBox&&s&&this.createPermanentLine(this.startBox,s),this.startBox=null,document.removeEventListener("pointermove",this.updateTempLine),document.removeEventListener("pointerup",this.finishConnection)}}document.addEventListener("runestone:login-complete",(()=>{document.querySelectorAll('[data-component="matching"]').forEach((e=>{if(!e.closest("[data-component=timedAssessment]")){let t={orig:e};window.componentMap[e.id]=new s(t)}}))})),void 0===window.component_factory&&(window.component_factory={}),window.component_factory.matching=function(e){return new s(e)}}}]);
+//# sourceMappingURL=566.750e5a3f55fac7c5.js.map
\ No newline at end of file
diff --git a/_static/566.750e5a3f55fac7c5.js.gz b/_static/566.750e5a3f55fac7c5.js.gz
new file mode 100755
index 0000000..eec53e7
Binary files /dev/null and b/_static/566.750e5a3f55fac7c5.js.gz differ
diff --git a/_static/566.750e5a3f55fac7c5.js.map b/_static/566.750e5a3f55fac7c5.js.map
new file mode 100755
index 0000000..2d4fbf9
--- /dev/null
+++ b/_static/566.750e5a3f55fac7c5.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"566.750e5a3f55fac7c5.js","mappings":"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","sources":["webpack://WebComponents/./runestone/matching/js/matching.js","webpack://WebComponents/./runestone/matching/js/xmlconversion.js"],"sourcesContent":["import RunestoneBase from \"../../common/js/runestonebase.js\";\nimport \"../css/matching.less\";\nimport { xmlToJson } from \"./xmlconversion.js\";\nexport class MatchingProblem extends RunestoneBase {\n constructor(opts) {\n super(opts)\n let container = opts.orig;\n this.containerDiv = opts.orig;\n const script = container.querySelector('script');\n if (script) {\n let boxData;\n try {\n // the script is called xml but may also contain some html for the statement.\n if (script.type == 'text/xml') {\n const xml = script.textContent;\n boxData = xmlToJson(xml);\n } else {\n boxData = JSON.parse(script.textContent);\n }\n this.boxData = boxData;\n } catch (err) {\n console.error(\"Failed to parse boxData JSON:\", err);\n }\n }\n\n this.divid = container.id;\n this.boxesRenderedPromise = new Promise((resolve) => {\n this.boxesRenderedResolve = resolve;\n });\n this.workspace = this.createWorkspace(container);\n try {\n this.statement = this.createStatement(container);\n } catch (error) {\n console.error(\"Error setting statement:\", error);\n } \n this.connList = this.createConnList(container);\n this.ariaLive = this.createAriaLive(container);\n this.controlDiv = this.createControlDiv(container);\n this.createHelpModal();\n\n this.connections = [];\n this.allBoxes = [];\n this.selectedBox = null;\n this.startBox = null;\n this.tempLine = null;\n this.useRunestoneServices = eBookConfig.useRunestoneServices;\n this.graderactive = opts.graderactive || false;\n this.init();\n // ensure that boxes are rendered before checking server\n // if boxes are not rendered then we may have dangling lines\n // that are not connected to any boxes\n this.boxesRenderedPromise.then(() => {\n this.checkServer(\"matching\", true);\n });\n }\n\n init() {\n this.shuffle(this.boxData.left);\n this.shuffle(this.boxData.right);\n\n this.renderBoxes();\n this.attachEvents();\n\n this.queueMathJax(this.containerDiv);\n }\n\n // required elements for a Runestone component\n\n checkCurrentAnswer() {\n const correctAnswers = this.boxData.correctAnswers;\n const actual = this.connections.map(conn => [\n conn.fromBox.dataset.id,\n conn.toBox.dataset.id\n ]);\n\n const correctMatches = correctAnswers.filter(expected =>\n actual.some(given => given[0] === expected[0] && given[1] === expected[1])\n );\n\n const incorrectConnections = actual.filter(given =>\n !correctAnswers.some(expected => expected[0] === given[0] && expected[1] === given[1])\n );\n\n this.correctCount = correctMatches.length;\n this.incorrectCount = incorrectConnections.length;\n this.missingCount = correctAnswers.length - this.correctCount;\n this.denominator = this.correctCount + this.incorrectCount + this.missingCount;\n this.scorePercent = this.denominator === 0 ? 0 : Math.max(0, Math.min(100, Math.round((this.correctCount / this.denominator) * 100)));\n\n }\n\n async logCurrentAnswer() {\n let eventData = {\n score: this.scorePercent,\n percent: this.scorePercent/100.0,\n correctCount: this.correctCount,\n incorrectCount: this.incorrectCount,\n missingCount: this.missingCount,\n connections: this.connections.map(conn => ({\n from: conn.fromBox.dataset.id,\n to: conn.toBox.dataset.id\n }))\n }\n eventData.event = \"matching\";\n eventData.div_id = this.divid;\n eventData.act = `score:${eventData.score} connections:${JSON.stringify(eventData.connections)}`;\n eventData.correct = eventData.score === 100;\n eventData.answer = JSON.stringify({ connections: eventData.connections });\n\n await this.logBookEvent(eventData);\n\n }\n\n renderFeedback() {\n this.connections.forEach(conn => {\n const idPair = [conn.fromBox.dataset.id, conn.toBox.dataset.id];\n const isCorrect = this.boxData.correctAnswers.some(expected =>\n expected[0] === idPair[0] && expected[1] === idPair[1]\n );\n conn.line.classList.remove(\"correct\", \"incorrect\");\n conn.line.classList.add(isCorrect ? \"correct\" : \"incorrect\");\n });\n\n this.connList.innerHTML = `Score: ${this.scorePercent}% `;\n this.connList.innerHTML += ` Correct: ${this.correctCount}`;\n this.connList.innerHTML += ` Incorrect: ${this.incorrectCount}`;\n this.connList.innerHTML += ` Missing: ${this.missingCount}`;\n if (this.scorePercent !== 100) {\n this.connList.innerHTML += `
Click and drag between boxes to create connections.
\n
Use the tab key to navigate to a box and press Enter to select the box. Then tab to the connecting box and press Enter to create a connection between the two selected boxes.
\n
Click on a connection line to remove it. You can also use the tab key to select lines. Press the delete key to remove a selected line.
\n
Click the \"Check Me\" button to check your connections, and save your work.
\n
Click the \"Reset\" button to clear all connections.
`\n\n this.helpModal.innerHTML = `\n
\n \n
${text}
\n
`;\n this.containerDiv.appendChild(this.helpModal);\n this.helpModal.querySelector('.help-close')\n .addEventListener('click', () => this.hideHelp());\n }\n\n showHelp() {\n this.helpModal.style.display = 'flex';\n }\n\n hideHelp() {\n this.helpModal.style.display = 'none';\n }\n\n // Utility functions\n shuffle(array) {\n for (let i = array.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n return array;\n }\n\n renderBoxes() {\n this.boxData.left.forEach(({ id, label }) => {\n const box = this.createBox(id, label, \"drag\");\n this.leftColumn.appendChild(box);\n this.allBoxes.push(box);\n });\n\n this.boxData.right.forEach(({ id, label }) => {\n const box = this.createBox(id, label, \"drop\");\n this.rightColumn.appendChild(box);\n this.allBoxes.push(box);\n });\n\n const imgs = Array.from(this.workspace.querySelectorAll('img'));\n if (imgs.length === 0) {\n this.boxesRenderedResolve();\n }\n // Wait for all images to load before resolving the promise\n const imgPromises = imgs.map(img => {\n if (typeof img.decode === 'function') {\n return img.decode();\n }\n if (img.complete && img.naturalWidth !== 0) {\n return Promise.resolve();\n }\n return new Promise((resolve) => {\n img.addEventListener('load', () => resolve());\n img.addEventListener('error', () => resolve());\n });\n });\n\n Promise.all(imgPromises).then(() => {\n this.boxesRenderedResolve();\n });\n }\n\n createBox(id, label, role) {\n const div = document.createElement('div');\n div.className = 'box';\n div.dataset.id = id;\n div.dataset.role = role;\n div.innerHTML = label;\n div.tabIndex = 0;\n div.setAttribute('role', 'button');\n div.setAttribute('aria-label', `${role === \"drag\" ? \"Draggable\" : \"Droppable\"}: ${label}`);\n return div;\n }\n\n getCenter(el) {\n const elRect = el.getBoundingClientRect();\n const containerRect = this.workspace.getBoundingClientRect();\n return {\n x: elRect.left - containerRect.left + elRect.width / 2,\n y: elRect.top - containerRect.top + elRect.height / 2\n };\n }\n\n getRightBoxCenter(el) {\n const elRect = el.getBoundingClientRect();\n const containerRect = this.workspace.getBoundingClientRect();\n return {\n x: elRect.left - containerRect.left + elRect.width,\n y: elRect.top - containerRect.top + elRect.height / 2\n };\n }\n getLeftBoxCenter(el) {\n const elRect = el.getBoundingClientRect();\n const containerRect = this.workspace.getBoundingClientRect();\n return {\n x: elRect.left - containerRect.left,\n y: elRect.top - containerRect.top + elRect.height / 2\n };\n }\n\n createLineElement(x1, y1, x2, y2) {\n const line = document.createElementNS(\"http://www.w3.org/2000/svg\", \"line\");\n line.setAttribute(\"x1\", x1);\n line.setAttribute(\"y1\", y1);\n line.setAttribute(\"x2\", x2);\n line.setAttribute(\"y2\", y2);\n line.setAttribute(\"class\", \"line\");\n line.setAttribute(\"tabindex\", \"0\"); // Make the line focusable\n line.setAttribute(\"focusable\", \"true\"); // Make the line focusable\n line.setAttribute(\"role\", \"button\"); // Add ARIA role for accessibility\n line.setAttribute(\"aria-label\", \"Connection line. Press Delete to remove.\"); // Add ARIA label\n\n\n line.addEventListener(\"click\", () => {\n this.removeLine(line);\n });\n\n line.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Delete\" || e.key === \"Backspace\") {\n e.preventDefault();\n this.removeLine(line);\n }\n });\n\n return line;\n }\n\n removeLine(line) {\n this.svg.removeChild(line);\n const index = this.connections.findIndex(conn =>\n (conn.fromBox === line.fromBox && conn.toBox === line.toBox) ||\n (conn.fromBox === line.toBox && conn.toBox === line.fromBox)\n );\n if (index !== -1) this.connections.splice(index, 1);\n this.updateConnectionModel();\n }\n\n isConnected(a, b) {\n return this.connections.some(conn =>\n (conn.fromBox === a && conn.toBox === b) ||\n (conn.fromBox === b && conn.toBox === a)\n );\n }\n\n createPermanentLine(fromBox, toBox) {\n const fromRole = fromBox.dataset.role;\n const toRole = toBox.dataset.role;\n\n if (fromRole === toRole) {\n alert(\"You can only connect a draggable to a droppable.\");\n return;\n }\n\n // we should always store connections as drag to drop\n // even if the user connects drop to drag\n if (fromBox.dataset.role === \"drop\") {\n [fromBox, toBox] = [toBox, fromBox];\n }\n if (this.isConnected(fromBox, toBox)) return;\n\n const from = this.getRightBoxCenter(fromBox);\n const to = this.getLeftBoxCenter(toBox);\n const line = this.createLineElement(from.x, from.y, to.x, to.y);\n\n line.fromBox = fromBox;\n line.toBox = toBox;\n\n this.svg.appendChild(line);\n this.connections.push({ fromBox, toBox, line });\n this.updateConnectionModel();\n this.isAnswered = true;\n\n if (this.ariaLive) {\n this.ariaLive.textContent = `Connected ${fromBox.textContent} to ${toBox.textContent}`;\n }\n }\n\n updateConnectionModel() {\n this.connList.innerHTML = \"Connections: \";\n this.connections.forEach(conn => {\n const fromLabel = conn.fromBox.textContent;\n let toLabel = conn.toBox.textContent;\n if (!toLabel) {\n toLabel = conn.toBox.querySelector(\"img\").alt // innerHTML preserves everything inside \n }\n const line = document.createElement('div');\n line.className = 'conn-entry';\n line.textContent = `${fromLabel} → ${toLabel}`;\n this.connList.appendChild(line);\n });\n }\n\n /*\n * This method grades the connections made by the user.\n * It checks the current answer against the correct answers,\n * renders feedback, and logs the current answer.\n * It also updates the local storage with the current state.\n * It is called when the user clicks the \"Grade\" button.\n */\n gradeConnections() {\n this.checkCurrentAnswer();\n this.renderFeedback();\n this.logCurrentAnswer();\n this.setLocalStorage();\n }\n\n resetConnections() {\n this.connections.forEach(conn => {\n if (conn.line && conn.line.parentNode === this.svg) {\n this.svg.removeChild(conn.line);\n }\n });\n this.connections.length = 0;\n this.updateConnectionModel();\n if (this.ariaLive) this.ariaLive.textContent = \"All connections have been cleared.\";\n }\n\n attachEvents() {\n this.allBoxes.forEach(box => {\n box.addEventListener(\"pointerdown\", e => {\n if (e.ctrlKey || e.metaKey || true) {\n e.preventDefault();\n this.startBox = box;\n const from = this.getRightBoxCenter(this.startBox);\n this.tempLine = this.createLineElement(from.x, from.y, from.x, from.y);\n this.tempLine.setAttribute(\"stroke\", \"gray\");\n this.tempLine.setAttribute(\"stroke-dasharray\", \"4\");\n this.svg.appendChild(this.tempLine);\n\n document.addEventListener(\"pointermove\", this.updateTempLine);\n document.addEventListener(\"pointerup\", this.finishConnection);\n }\n });\n\n box.addEventListener(\"keydown\", e => {\n if (e.key === \"Enter\") {\n e.preventDefault();\n if (!this.selectedBox) {\n this.selectedBox = box;\n box.classList.add(\"selected\");\n } else {\n if (box !== this.selectedBox) this.createPermanentLine(this.selectedBox, box);\n this.selectedBox.classList.remove(\"selected\");\n this.selectedBox = null;\n const currentIndex = this.allBoxes.indexOf(box);\n const next = this.allBoxes[currentIndex + 1];\n if (next) next.focus();\n else this.allBoxes[0].focus();\n }\n }\n });\n\n box.addEventListener(\"mouseenter\", () => {\n this.connections.forEach(conn => {\n if (conn.fromBox === box || conn.toBox === box) {\n conn.line.classList.add(\"highlighted\");\n conn.line.classList.remove(\"faded\");\n } else {\n conn.line.classList.add(\"faded\");\n conn.line.classList.remove(\"highlighted\");\n }\n });\n });\n\n box.addEventListener(\"mouseleave\", () => {\n this.connections.forEach(conn => {\n conn.line.classList.remove(\"highlighted\", \"faded\");\n });\n });\n });\n\n const gradeBtn = this.containerDiv.querySelector('.grade-button');\n const resetBtn = this.containerDiv.querySelector('.reset-button');\n if (gradeBtn) gradeBtn.addEventListener('click', () => this.gradeConnections());\n if (resetBtn) resetBtn.addEventListener('click', () => this.resetConnections());\n\n window.addEventListener(\"resize\", () => {\n this.connections.forEach(conn => {\n const from = this.getRightBoxCenter(conn.fromBox);\n const to = this.getLeftBoxCenter(conn.toBox);\n conn.line.setAttribute(\"x1\", from.x);\n conn.line.setAttribute(\"y1\", from.y);\n conn.line.setAttribute(\"x2\", to.x);\n conn.line.setAttribute(\"y2\", to.y);\n });\n });\n }\n\n updateTempLine = (e) => {\n e.preventDefault();\n if (!this.startBox || !this.tempLine) return;\n const from = this.getRightBoxCenter(this.startBox);\n this.tempLine.setAttribute(\"x1\", from.x);\n this.tempLine.setAttribute(\"y1\", from.y);\n const containerRect = this.workspace.getBoundingClientRect();\n const x = e.clientX - containerRect.left;\n const y = e.clientY - containerRect.top;\n\n this.tempLine.setAttribute(\"x2\", x);\n this.tempLine.setAttribute(\"y2\", y);\n };\n\n finishConnection = (e) => {\n e.preventDefault();\n if (this.tempLine) {\n this.svg.removeChild(this.tempLine);\n this.tempLine = null;\n }\n\n // the target element is the element under the pointer\n // when the pointer is released\n // this is not the same as e.target which may be the box or it may be the svg \n // or it may be the line, so we do it this way instead of checking to see if the box contains\n // e.target. const endBox = this.allBoxes.find(box => box.contains(e.target) && box !== this.startBox);\n const pointX = e.clientX || (e.changedTouches && e.changedTouches[0].clientX);\n const pointY = e.clientY || (e.changedTouches && e.changedTouches[0].clientY);\n const targetElement = document.elementFromPoint(pointX, pointY);\n\n const endBox = this.allBoxes.find(box =>\n box.contains(targetElement) && box !== this.startBox\n );\n\n if (this.startBox && endBox) this.createPermanentLine(this.startBox, endBox);\n\n this.startBox = null;\n document.removeEventListener(\"pointermove\", this.updateTempLine);\n document.removeEventListener(\"pointerup\", this.finishConnection);\n }\n}\n\n\n\n\n// Register the component with Runestone \ndocument.addEventListener(\"runestone:login-complete\", () => {\n document.querySelectorAll('[data-component=\"matching\"]').forEach(container => {\n if (!container.closest(\"[data-component=timedAssessment]\")) {\n let opts = { orig: container }\n window.componentMap[container.id] = new MatchingProblem(opts);\n }\n });\n});\n\n// Add component factory initialization\nif (typeof window.component_factory === \"undefined\") {\n window.component_factory = {};\n}\n\nwindow.component_factory.matching = function (opts) {\n return new MatchingProblem(opts);\n};","export function xmlToJson(xmlString) {\n // 1) Parse the XML string\n const parser = new DOMParser();\n const doc = parser.parseFromString(xmlString, 'text/html');\n const err = doc.querySelector('parsererror');\n if (err) {\n throw new Error('XML parse error: ' + err.textContent);\n }\n\n // 2) Helper to extract [ { id, label }, … ] from or \n function itemsFrom(tagName) {\n return Array.from(doc.querySelectorAll(tagName))\n .map(el => {\n const idEl = el.querySelector('id');\n const labelEl = el.querySelector('label');\n return {\n id: idEl ? idEl.textContent.trim() : '',\n // innerHTML preserves any markup inside the label\n label: labelEl ? labelEl.innerHTML.trim() : ''\n };\n });\n }\n\n // 3) Helper to build [ [p, r], [p, r], … ]\n function correctAnswersFrom() {\n return Array.from(doc.querySelectorAll('edge'))\n .map(edgeEl => {\n const labs = Array.from(edgeEl.querySelectorAll('label'));\n // take first two