Workbook Load Sequence

1HTML loads in WebView
2Flutter channel ready
3Check if response exists
4Load saved data if found
5Populate form fields
6Enable auto-save listeners

Auto-Save Mechanism

All form changes trigger a 2-second debounced auto-save. The collectWorkbookData() function gathers ALL form elements, and triggerAutoSave() is attached to ALL interactive elements.

Responses are auto-saved
Editing...
Saving...
Saved
Save failed - will retry

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

Flutter Channel Messages

ActionDirectionPurpose
saveWorkbookResponseJS → FlutterSave workbook data to JSON file
loadWorkbookResponseJS → FlutterLoad previously saved responses
checkResponseExistsJS → FlutterCheck if a response file exists
saveResultFlutter → JSConfirm save success/failure
loadResultFlutter → JSReturn loaded data or empty result
responseExistsResultFlutter → JSReturn whether file exists

Note: When loading data, access nested fields with data.data.data — the response wraps actual workbook data inside a data property.

File Naming Convention

Format: {course_code}{workbook_number}_response.json — All journals use workbook number 1

ExampleCourse
C14ENB1_response.jsonConfidence, English
H23ENB1_response.jsonSmoking cessation, English
S66ENB1_response.jsonWeight loss, English
P11ENM1_response.jsonProductivity, English, Male

Storage: AppData/JSONs/User_Workbook_Responses/

JSON Response Structure

FieldTypeDescription
workbook_idStringUnique identifier for the workbook type
created_atISO8601First save timestamp (preserved across updates)
updated_atISO8601Most recent save timestamp
ai_promptStringContext prompt for AI analysis of journal data
dataObjectWorkbook-specific response data (entries, tracking, etc.)

Supported Input Types

TextgetElementById().value
TextareagetElementById().value
RadioquerySelector(:checked).value
CheckboxquerySelectorAll(:checked).map
SelectgetElementById().value
NumberparseInt(value)
DategetElementById().value
RangegetElementById().value
Calendar.calendar-day.checked
EditablegetElementById().innerText
Response Lifecycle → Flutter Channel Integration → Data Structure & File Naming →