std-quiz

Level: Molecule | Entity: QuizItem | Persistence: runtime

3 states, 4 events, 5 transitions

Live Preview

orbital QuizItemOrbital {
  entity QuizItem [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    question : string
    answer : string
    optionA : string
    optionB : string
    optionC : string
    optionD : string
    difficulty : string
    currentIndex : number
    totalQuestions : number
  }
  trait QuizItemQuiz -> QuizItem [interaction] {
    initial: question
    state question {
      INIT -> question
        (fetch QuizItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "help-circle", size: "lg" }, { type: "typography", content: "Quiz", variant: "h2" }] }, { type: "divider" }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "icon", name: "help-circle", size: "lg" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "name"] }] }] }, { type: "simple-grid", columns: 2, children: [{ type: "button", label: ["object/get", ["array/first", "@entity"], "optionA"], event: "ANSWER", variant: "secondary", actionPayload: { answer: "A" } }, { type: "button", label: ["object/get", ["array/first", "@entity"], "optionB"], event: "ANSWER", variant: "secondary", actionPayload: { answer: "B" } }, { type: "button", label: ["object/get", ["array/first", "@entity"], "optionC"], event: "ANSWER", variant: "secondary", actionPayload: { answer: "C" } }, { type: "button", label: ["object/get", ["array/first", "@entity"], "optionD"], event: "ANSWER", variant: "secondary", actionPayload: { answer: "D" } }] }, { type: "stack", direction: "horizontal", gap: "md", align: "center", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "signal", size: "sm" }, { type: "typography", variant: "caption", color: "muted", content: "Difficulty:" }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "difficulty"] }] }, { type: "stack", direction: "horizontal", gap: "xs", align: "center", children: [{ type: "typography", variant: "caption", color: "muted", content: "Question" }, { type: "typography", variant: "caption", content: ["+", ["object/get", ["array/first", "@entity"], "currentIndex"], 1] }, { type: "typography", variant: "caption", color: "muted", content: "of" }, { type: "typography", variant: "caption", content: ["object/get", ["array/first", "@entity"], "totalQuestions"] }] }] }] })
      ANSWER -> answer-revealed
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "help-circle", size: "lg" }, { type: "typography", content: "Answer Revealed", variant: "h2" }] }, { type: "divider" }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "md", children: [{ type: "typography", variant: "caption", color: "muted", content: "Question" }, { type: "typography", variant: "body", content: ["object/get", ["array/first", "@entity"], "name"] }, { type: "divider" }, { type: "typography", variant: "caption", color: "muted", content: "Answer" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "description"] }] }] }, { type: "alert", variant: "info", message: "Review the answer above." }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Next Question", event: "NEXT", variant: "primary", icon: "arrow-right" }] }] })
    }
    state answer-revealed {
      NEXT -> question
        (set @entity.currentIndex (+ @entity.currentIndex 1))
        (fetch QuizItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "help-circle", size: "lg" }, { type: "typography", content: "Quiz", variant: "h2" }] }, { type: "divider" }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "icon", name: "help-circle", size: "lg" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "name"] }] }] }, { type: "simple-grid", columns: 2, children: [{ type: "button", label: ["object/get", ["array/first", "@entity"], "optionA"], event: "ANSWER", variant: "secondary", actionPayload: { answer: "A" } }, { type: "button", label: ["object/get", ["array/first", "@entity"], "optionB"], event: "ANSWER", variant: "secondary", actionPayload: { answer: "B" } }, { type: "button", label: ["object/get", ["array/first", "@entity"], "optionC"], event: "ANSWER", variant: "secondary", actionPayload: { answer: "C" } }, { type: "button", label: ["object/get", ["array/first", "@entity"], "optionD"], event: "ANSWER", variant: "secondary", actionPayload: { answer: "D" } }] }, { type: "stack", direction: "horizontal", gap: "md", align: "center", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "signal", size: "sm" }, { type: "typography", variant: "caption", color: "muted", content: "Difficulty:" }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "difficulty"] }] }, { type: "stack", direction: "horizontal", gap: "xs", align: "center", children: [{ type: "typography", variant: "caption", color: "muted", content: "Question" }, { type: "typography", variant: "caption", content: ["+", ["object/get", ["array/first", "@entity"], "currentIndex"], 1] }, { type: "typography", variant: "caption", color: "muted", content: "of" }, { type: "typography", variant: "caption", content: ["object/get", ["array/first", "@entity"], "totalQuestions"] }] }] }] })
      RESTART -> complete
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "icon", name: "check-circle", size: "lg" }, { type: "typography", content: "Quiz Complete!", variant: "h2" }, { type: "alert", variant: "success", message: "You have completed all questions." }, { type: "button", label: "Restart", event: "RESTART", variant: "primary", icon: "rotate-ccw" }] })
    }
    state complete {
      RESTART -> question
        (fetch QuizItem)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "help-circle", size: "lg" }, { type: "typography", content: "Quiz", variant: "h2" }] }, { type: "divider" }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "icon", name: "help-circle", size: "lg" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "name"] }] }] }, { type: "simple-grid", columns: 2, children: [{ type: "button", label: ["object/get", ["array/first", "@entity"], "optionA"], event: "ANSWER", variant: "secondary", actionPayload: { answer: "A" } }, { type: "button", label: ["object/get", ["array/first", "@entity"], "optionB"], event: "ANSWER", variant: "secondary", actionPayload: { answer: "B" } }, { type: "button", label: ["object/get", ["array/first", "@entity"], "optionC"], event: "ANSWER", variant: "secondary", actionPayload: { answer: "C" } }, { type: "button", label: ["object/get", ["array/first", "@entity"], "optionD"], event: "ANSWER", variant: "secondary", actionPayload: { answer: "D" } }] }, { type: "stack", direction: "horizontal", gap: "md", align: "center", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "signal", size: "sm" }, { type: "typography", variant: "caption", color: "muted", content: "Difficulty:" }, { type: "badge", label: ["object/get", ["array/first", "@entity"], "difficulty"] }] }, { type: "stack", direction: "horizontal", gap: "xs", align: "center", children: [{ type: "typography", variant: "caption", color: "muted", content: "Question" }, { type: "typography", variant: "caption", content: ["+", ["object/get", ["array/first", "@entity"], "currentIndex"], 1] }, { type: "typography", variant: "caption", color: "muted", content: "of" }, { type: "typography", variant: "caption", content: ["object/get", ["array/first", "@entity"], "totalQuestions"] }] }] }] })
    }
  }
  page "/quizitems/quiz" -> QuizItemQuiz
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-
question	string	""
answer	string	""
optionA	string	""
optionB	string	""
optionC	string	""
optionD	string	""
difficulty	string	"medium"
currentIndex	number	0
totalQuestions	number	3

States

State	Type
question	Initial
answer-revealed	-
complete	-

Events

Event	Payload
INIT	-
ANSWER	answer: string
NEXT	-
RESTART	-

Transitions

From	Event	To	Effects
question	INIT	question	2 effects
question	ANSWER	answer-revealed	1 effect
answer-revealed	NEXT	question	3 effects
answer-revealed	RESTART	complete	1 effect
complete	RESTART	question	2 effects