Skip to content

Commit b6e9355

Browse files
Make workshop markdown checkboxes clickable and persistent
Co-authored-by: jamesmontemagno <1676321+jamesmontemagno@users.noreply.github.com>
1 parent 1865c48 commit b6e9355

1 file changed

Lines changed: 35 additions & 0 deletions

File tree

docs/step.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
}
8181

8282
const GITHUB_RAW_BASE = 'https://raw.githubusercontent.com/copilot-dev-days/agent-lab-typescript/main/workshop/';
83+
const CHECKBOX_STATE_KEY_PREFIX = 'workshop-checkboxes:';
8384

8485
function getCurrentStepId() {
8586
const params = new URLSearchParams(window.location.search);
@@ -162,6 +163,39 @@
162163
return md;
163164
}
164165

166+
function getCheckboxStorageKey(stepId) {
167+
return `${CHECKBOX_STATE_KEY_PREFIX}${stepId}`;
168+
}
169+
170+
function setupInteractiveCheckboxes(stepId) {
171+
const container = document.getElementById('markdown-content');
172+
const checkboxes = container.querySelectorAll('input[type="checkbox"]');
173+
if (!checkboxes.length) return;
174+
175+
const storageKey = getCheckboxStorageKey(stepId);
176+
let checkedIndexes = [];
177+
178+
try {
179+
checkedIndexes = JSON.parse(localStorage.getItem(storageKey) || '[]');
180+
if (!Array.isArray(checkedIndexes)) checkedIndexes = [];
181+
} catch {
182+
checkedIndexes = [];
183+
}
184+
185+
checkboxes.forEach((checkbox, index) => {
186+
checkbox.removeAttribute('disabled');
187+
checkbox.disabled = false;
188+
checkbox.checked = checkedIndexes.includes(index) ? true : checkbox.checked;
189+
checkbox.setAttribute('aria-label', `Checklist item ${index + 1}`);
190+
191+
checkbox.addEventListener('change', () => {
192+
const updated = Array.from(checkboxes)
193+
.flatMap((cb, i) => (cb.checked ? [i] : []));
194+
localStorage.setItem(storageKey, JSON.stringify(updated));
195+
});
196+
});
197+
}
198+
165199
async function loadContent() {
166200
const idx = getCurrentStepIndex();
167201
if (idx === -1) {
@@ -188,6 +222,7 @@
188222

189223
marked.setOptions({ breaks: true, gfm: true });
190224
document.getElementById('markdown-content').innerHTML = marked.parse(md);
225+
setupInteractiveCheckboxes(step.id);
191226

192227
if (step.id === '05-complete') {
193228
setTimeout(celebrate, 500);

0 commit comments

Comments
 (0)