mattpocock / xstate-catalogue

Professionally designed, interactive state machines
https://xstate-catalogue.com
MIT License
811 stars 62 forks source link

New State Machine: Quiz or Test #37

Open karlhorky opened 3 years ago

karlhorky commented 3 years ago

Hi @mattpocock, thanks for this project, really cool! 🙌 So amazing to see high quality examples of state machines - great for learners like our bootcamp students at @upleveled.

I'm not sure if you're accepting suggestions for new state machines, but I wanted to open an issue just in case.

It would be cool to have a state machine in the catalogue that would represent a quiz or test, including features such as:

I'm kind of new to designing state machines, so the parts in parentheses above may be better implemented in a different way.

mattpocock commented 3 years ago

Hey @karlhorky - fantastic idea! Let's use this issue to ideate on requirements and come up with ideas.

Initial thoughts:

The state machine should not be tied to the specific quiz - i.e. it should be able to handle any set of quiz questions that fall within certain types. An example question interface might be:

interface Question {
  type: 'free-text' | 'multiple-choice';
  text: string;
}

We'd feed those into context initially, then work out our states based on that.

A state map I'm thinking would be:

waitingToBegin
takingQuiz.checkingIfThereAreMoreQuestionsToAnswer
takingQuiz.answeringFreeText
takingQuiz.answeringMultipleChoice
takingQuiz.savingAnswer
takingQuiz.complete
reviewingAnswers
submitting
complete

The takingQuiz section is the most complex, let me take you through it.

takingQuiz.checkingIfThereAreMoreQuestionsToAnswer would check if there are any more questions using a condition in an always statement. If there are no more questions to answer, go to takingQuiz.complete.

takingQuiz.savingAnswer would save the answer via an API call, or some other async function.

Once you arrive at takingQuiz.complete, you head to reviewingAnswers. We can assume that at this point, your only action can be to submit the quiz. (maybe we handle editing as well?)

Off to submitting, where we call an async service to dispatch all the answers and mark the quiz as complete.

And then to complete!

What do you think of this initial framework? Some things left to consider - context, events, and any actions along the way.

ChrisShank commented 3 years ago

A couple of months ago I was trying to model a generic scheduler for a flashcard system (think Anki, Quizlet, ect.). I never got a chance to finish it and I would probably do some things different (as I have learned a lot since then), but maybe it can provide some inspiration!

Source

image

tomByrer commented 3 years ago

I started to make a quiz program 6mo ago. Strictly singe-choice, but here are some considerations: