2f:T1b27,viewof devanagariMatch = { const root = html`

Devanagari ↔ Roman (IAST)

0 / 0 correct

Letter Bank

Match to Roman (IAST)

`; const state = { bank: [], targets: [], correct: 0 }; let pickedIdx = null; // for keyboard selection const bankEl = root.querySelector("#bank"); const targetsEl = root.querySelector("#targets"); const scoreEl = root.querySelector("#score"); const shuffleBtn = root.querySelector("#shuffle"); const resetBtn = root.querySelector("#reset"); const revealBtn = root.querySelector("#reveal"); // ---------- helpers ---------- function shuffleArray(arr) { const a = arr.slice(); for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; } function updateScore() { scoreEl.textContent = `${state.correct} / ${items.length} correct`; } // ---------- rendering ---------- function renderBoard() { bankEl.innerHTML = ""; targetsEl.innerHTML = ""; state.bank.forEach((item) => { const tile = document.createElement("div"); tile.className = "dev-match-tile dg"; tile.textContent = item.dg; tile.draggable = true; tile.dataset.idx = item.idx; tile.tabIndex = 0; tile.setAttribute("role", "button"); tile.setAttribute("aria-grabbed", "false"); tile.addEventListener("dragstart", onDragStart); tile.addEventListener("keydown", onKeyPick); bankEl.appendChild(tile); }); // Targets: show romanization as prompts state.targets.forEach((item) => { const drop = document.createElement("div"); drop.className = "dev-match-drop"; drop.dataset.idx = item.idx; drop.tabIndex = 0; drop.setAttribute("aria-dropeffect", "move"); drop.addEventListener("dragover", (ev) => ev.preventDefault()); drop.addEventListener("drop", onDrop); drop.addEventListener("keydown", onKeyPlace); // Romanization label visible from the start const label = document.createElement("span"); label.className = "label"; label.textContent = item.rom; drop.appendChild(label); targetsEl.appendChild(drop); }); updateScore(); } function initBoard() { state.bank = shuffleArray(items); state.targets = shuffleArray(items); state.correct = 0; pickedIdx = null; renderBoard(); } // ---------- logic ---------- function onDragStart(ev) { const idx = ev.currentTarget.dataset.idx; ev.dataTransfer.setData("text/plain", idx); } function onDrop(ev) { ev.preventDefault(); const draggedIdx = parseInt(ev.dataTransfer.getData("text/plain"), 10); const targetIdx = parseInt(ev.currentTarget.dataset.idx, 10); checkMatch(draggedIdx, targetIdx, ev.currentTarget); } function checkMatch(draggedIdx, targetIdx, dropEl) { const bankPos = state.bank.findIndex((d) => d.idx === draggedIdx); if (bankPos === -1) { flash(dropEl, false); return; } const correct = draggedIdx === targetIdx; flash(dropEl, correct); if (correct) { const item = state.bank[bankPos]; state.bank.splice(bankPos, 1); state.correct += 1; // remove tile from bank visually const bankTile = bankEl.querySelector( `.dev-match-tile.dg[data-idx="${String(draggedIdx)}"]` ); if (bankTile && bankTile.parentNode) { bankTile.parentNode.removeChild(bankTile); } // lock tile into drop dropEl.innerHTML = ""; const tile = document.createElement("div"); tile.className = "dev-match-tile dg"; tile.textContent = `${item.dg} (${item.rom})`; dropEl.appendChild(tile); dropEl.classList.add("locked", "ok"); dropEl.style.pointerEvents = "none"; dropEl.setAttribute("aria-label", `${item.rom} matched`); updateScore(); } } function flash(el, ok) { el.classList.remove("ok", "no"); void el.offsetWidth; // force reflow el.classList.add(ok ? "ok" : "no"); if (!ok) { setTimeout(() => el.classList.remove("no"), 250); } } // ---------- keyboard support ---------- function onKeyPick(ev) { const key = ev.key.toLowerCase(); if (key === " " || key === "enter") { const idx = parseInt(ev.currentTarget.dataset.idx, 10); pickedIdx = idx; ev.currentTarget.setAttribute("aria-grabbed", "true"); } } function onKeyPlace(ev) { const key = ev.key.toLowerCase(); if (pickedIdx == null) return; if (key === " " || key === "enter") { const targetIdx = parseInt(ev.currentTarget.dataset.idx, 10); checkMatch(pickedIdx, targetIdx, ev.currentTarget); pickedIdx = null; } } // ---------- controls ---------- function revealAll() { const drops = targetsEl.querySelectorAll(".dev-match-drop:not(.locked)"); drops.forEach((drop) => { const targetIdx = parseInt(drop.dataset.idx, 10); const item = items.find((d) => d.idx === targetIdx); if (!item) return; drop.innerHTML = ""; const tile = document.createElement("div"); tile.className = "dev-match-tile dg"; tile.textContent = `${item.dg} (${item.rom})`; drop.appendChild(tile); drop.classList.add("locked", "ok"); drop.style.pointerEvents = "none"; }); state.bank = []; state.correct = items.length; updateScore(); } shuffleBtn.addEventListener("click", initBoard); resetBtn.addEventListener("click", initBoard); revealBtn.addEventListener("click", revealAll); // initialize once when cell runs initBoard(); // viewof value: return whatever you like (score, state, etc.) // Return the current score as an object so other cells can read it: root.value = { get correct() { return state.correct; }, get total() { return items.length; } }; return root; }30:Ta65,devanagariMatchStyles = html``31:[] 2d:{"title":"Interactive Devanagari Letters Matching","cells":[{"id":0,"value":"# Interactive Devanagari Letters Matching","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"items = [\n { dg: \"क\", rom: \"ka\" },\n { dg: \"ख\", rom: \"kha\" },\n { dg: \"ग\", rom: \"ga\" },\n { dg: \"घ\", rom: \"gha\" },\n { dg: \"ङ\", rom: \"ṅa\" },\n { dg: \"च\", rom: \"ca\" },\n { dg: \"छ\", rom: \"cha\" },\n { dg: \"ज\", rom: \"ja\" },\n { dg: \"झ\", rom: \"jha\" },\n { dg: \"ञ\", rom: \"ña\" },\n { dg: \"ट\", rom: \"ṭa\" },\n { dg: \"ठ\", rom: \"ṭha\" },\n { dg: \"ड\", rom: \"ḍa\" },\n { dg: \"ढ\", rom: \"ḍha\" },\n { dg: \"ण\", rom: \"ṇa\" }\n].map((d, idx) => ({ ...d, idx }))","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}