|
80 | 80 | } |
81 | 81 |
|
82 | 82 | const GITHUB_RAW_BASE = 'https://raw.githubusercontent.com/copilot-dev-days/agent-lab-typescript/main/workshop/'; |
| 83 | + const CHECKBOX_STATE_KEY_PREFIX = 'workshop-checkboxes:'; |
83 | 84 |
|
84 | 85 | function getCurrentStepId() { |
85 | 86 | const params = new URLSearchParams(window.location.search); |
|
162 | 163 | return md; |
163 | 164 | } |
164 | 165 |
|
| 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 | + |
165 | 199 | async function loadContent() { |
166 | 200 | const idx = getCurrentStepIndex(); |
167 | 201 | if (idx === -1) { |
|
188 | 222 |
|
189 | 223 | marked.setOptions({ breaks: true, gfm: true }); |
190 | 224 | document.getElementById('markdown-content').innerHTML = marked.parse(md); |
| 225 | + setupInteractiveCheckboxes(step.id); |
191 | 226 |
|
192 | 227 | if (step.id === '05-complete') { |
193 | 228 | setTimeout(celebrate, 500); |
|
0 commit comments