Generated by XState Viz: https://xstate.js.org/viz

machine.js

  function fetchQuestions() {
    return Promise.resolve([
      { name: 'bob' },
      { name: 'bill' },
      { name: 'mary' }
      ]);  
  }
  
  const test = Machine({
    id: 'test',
    initial: 'idle',
    context: {
      questions: [],
      error: ''
    },
    states: {
      idle: {
        on: {
          START_TEST: 'fetchingQuestions'
        }
      },
      fetchingQuestions: {
        on: {
          EXIT_TEST: 'exit'
        },
        invoke: {
          id: 'fetchQuestions',
          src: () => fetchQuestions,
          onDone: {
            target: 'answeringQuestion',
            actions: assign({ questions: (ctx, event) => event.data})
          },
          onError: {
            target: 'error',
            actions: assign({ questions: (ctx, event) => event.data})
          }
        }
      },
      answeringQuestion: {
        on: {
          SUBMIT_ANSWER: 'viewingAnwer',
          EXIT_TEST: 'exit'
        },
      },
      viewingAnwer: {
        on: {
          NEXT_QUESTION: 'answeringQuestion',
          FINISH_TEST: 'reviewingTest',
          EXIT_TEST: 'exit'
        }
      },
      reviewingTest: {
        on: {
          EXIT_TEST: 'exit'
        }
      },
      error: {},
      exit: {
        type: 'final'
      }
    }
  });