diff --git a/docs/step.html b/docs/step.html index c5989e8..990edf4 100644 --- a/docs/step.html +++ b/docs/step.html @@ -220,6 +220,8 @@ const GITHUB_RAW_BASE = isLocal ? '../workshop/' : 'https://raw.githubusercontent.com/copilot-dev-days/agent-lab-python/main/workshop/'; + const CHECKBOX_STORAGE_KEY = 'agent-lab-checkboxes-v1'; + let checkboxSaveTimeout; // Get current step from URL function getCurrentStepId() { @@ -232,6 +234,54 @@ return steps.findIndex(s => s.id === stepId); } + function readCheckboxState() { + try { + return JSON.parse(localStorage.getItem(CHECKBOX_STORAGE_KEY) || '{}'); + } catch { + return {}; + } + } + + function writeCheckboxState(state) { + try { + localStorage.setItem(CHECKBOX_STORAGE_KEY, JSON.stringify(state)); + } catch { + // Ignore storage failures (private mode / blocked storage) + } + } + + function writeCheckboxStateDebounced(state) { + clearTimeout(checkboxSaveTimeout); + checkboxSaveTimeout = setTimeout(() => writeCheckboxState(state), 100); + } + + function initializeTaskListCheckboxes(stepId) { + const container = document.getElementById('markdown-content'); + if (!container) return; + const checkboxes = container.querySelectorAll('input[type="checkbox"]'); + if (checkboxes.length === 0) return; + + const allState = readCheckboxState(); + if (!Array.isArray(allState[stepId])) { + allState[stepId] = []; + } + const stepState = allState[stepId]; + + checkboxes.forEach((checkbox, index) => { + checkbox.disabled = false; + + if (typeof stepState[index] === 'boolean') { + checkbox.checked = stepState[index]; + } + + checkbox.addEventListener('change', () => { + stepState[index] = checkbox.checked; + allState[stepId] = stepState; + writeCheckboxStateDebounced(allState); + }); + }); + } + // Build sidebar navigation function buildSidebar() { const nav = document.getElementById('stepNav'); @@ -339,6 +389,7 @@ }); document.getElementById('markdown-content').innerHTML = marked.parse(md); + initializeTaskListCheckboxes(step.id); // If this is the completion page, add confetti! if (step.id === '05-complete') {