← All Diagrams

Dynamic Questionnaire UI State Machine

state diagram

UI-layer state machine for the assessment questionnaire page — Idle, Loading, Answering, Submitting, Completed, and Error states with transitions.

Source: dynamic-questionnaire-ui-statemachine.mmd

stateDiagram-v2
    direction LR

    [*] --> Idle

    state Idle {
        [*] --> waiting
    }

    state Loading {
        [*] --> fetching
    }

    state Answering {
        [*] --> displaying
    }

    state Submitting {
        [*] --> sending
    }

    state Completed {
        [*] --> done
    }

    state Error {
        [*] --> failed
    }

    Idle --> Loading: User clicks Start Assessment
    Loading --> Answering: Initial questions fetched successfully
    Loading --> Error: API call fails

    Answering --> Submitting: User submits an answer

    Submitting --> Loading: Answer submitted, loading next question
    Submitting --> Completed: Answer submitted, no next question
    Submitting --> Error: API call fails

    Error --> Answering: User retries submission
    Error --> Idle: User cancels or navigates away

    Completed --> [*]: Navigate to results page