Response Lifecycle

HTML workbooks collect user data with automatic response saving via Flutter integration. All interactive workbooks follow these specifications for consistent behavior and data integrity.

Workbook Load Sequence

1. HTML Loads — Workbook HTML is rendered in a WebView
2. Flutter Channel Ready — JavaScript receives onFlutterChannelReady callback
3. Check Response Exists — Sends checkResponseExists message to Flutter
4. Load if Found — If previous responses exist, loads them via loadWorkbookResponse
5. Populate Form — Saved data is populated into form fields
6. Enable Auto-Save — Event listeners attached to all form elements

First Time User Flow

1. HTML displays normal entry form
2. User fills out data
3. As user fills out sections, responses are auto-saved (2-second debounce)
4. Data sent to Flutter via channel
5. Flutter saves to: AppData/JSONs/User_Workbook_Responses/
6. Status banner shows real-time save status

Returning User Flow

1. HTML checks for existing responses
2. If found: automatically load data into form
3. Edit mode: detect when data is changed
4. Auto-save: update same response file (don’t create new)

Auto-Save Mechanism

The auto-save uses a 2-second debounce timer:

• triggerAutoSave() is called on any form change
• Clears any existing timer and shows “Editing…” status
• After 2 seconds of inactivity, triggers saveWorkbook()
• saveInProgress flag prevents concurrent saves

AUTO_SAVE_DELAY = 2000ms (2 seconds after user stops typing)

Status Indicator States

Key Concept

The collectWorkbookData() function gathers ALL form elements regardless of type (text inputs, checkboxes, radio buttons, textareas, etc.), and triggerAutoSave() is attached to ALL interactive elements so any change triggers the save after 2 seconds.

Flutter only handles saving and loading JSON responses — all form interactions and auto-save logic are managed by the HTML workbook itself.