xstate-catalogue icon indicating copy to clipboard operation
xstate-catalogue copied to clipboard

New State Machine: Quiz or Test

Open karlhorky opened this issue 3 years ago • 3 comments

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:

  • start screen with start button
  • "answering single-answer question" state during quiz (also with the number of the question?)
  • "answering multi-answer question" state during quiz (also with the number of the question?)
  • end screen with restart button (also with the results of the quiz questions?)

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

karlhorky avatar Apr 26 '21 11:04 karlhorky

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.

mattpocock avatar Apr 26 '21 16:04 mattpocock

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

ChrisShank avatar Apr 27 '21 03:04 ChrisShank

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

  • Can testers skip a question & circle back to it later? (This helped me often in paper-tests.)
  • Different types of questions on same test?
  • Question Types:
    • single-choice
    • multiple-choice
    • single-choice but has ('all of the above', 'both A & C')
    • true/false
    • short answer
    • long answer (minimum characters)
  • Questions randomized?
  • Answers randomized?
  • Questions &/or answers a sub-set of a pool?
  • Questions incremental?
  • Do questions &/or answers have different 'score' values?

tomByrer avatar May 30 '21 22:05 tomByrer