std-stem-lab

Level: Organism | Entity: Experiment | Persistence: runtime

3 states, 5 events, 5 transitions

Live Preview

;; app STEM Lab

orbital ExperimentOrbital {
  entity Experiment [runtime] {
    id : string!
    title : string!
    hypothesis : string
    score : number
    completed : boolean
    level : number
  }
  trait ExperimentSimulatorGame -> Experiment [interaction] {
    initial: menu
    state menu {
      INIT -> menu
        (fetch Experiment)
        (render-ui main { type: "game-shell", appName: "STEM Lab", showTopBar: true, children: [{ type: "game-menu", title: "Experiment Simulator", menuItems: [{ label: "Start", event: "START", variant: "primary" }] }] })
      START -> playing
        (render-ui main { type: "game-shell", appName: "STEM Lab", showTopBar: true, children: [{ type: "stack", direction: "vertical", gap: "md", children: [{ type: "game-hud", stats: [{ label: "Score", value: "@entity.score" }, { label: "Level", value: "@entity.level" }] }, { type: "simulator-board", entity: "Experiment", completeEvent: "COMPLETE" }] }] })
      NAVIGATE -> menu
    }
    state playing {
      COMPLETE -> complete
        (render-ui main { type: "game-shell", appName: "STEM Lab", showTopBar: true, children: [{ type: "game-over-screen", title: "Well Done!", menuItems: [{ label: "Play Again", event: "RESTART", variant: "primary" }] }] })
    }
    state complete {
      RESTART -> menu
        (render-ui main { type: "game-shell", appName: "STEM Lab", showTopBar: true, children: [{ type: "game-menu", title: "Experiment Simulator", menuItems: [{ label: "Start", event: "START", variant: "primary" }] }] })
    }
  }
  page "/simulator" -> ExperimentSimulatorGame
}
orbital ClassificationOrbital {
  entity Classification [runtime] {
    id : string!
    title : string!
    category : string
    score : number
    accuracy : number
    level : number
  }
  trait ClassificationClassifierGame -> Classification [interaction] {
    initial: menu
    state menu {
      INIT -> menu
        (fetch Classification)
        (render-ui main { type: "game-shell", appName: "STEM Lab", showTopBar: true, children: [{ type: "game-menu", title: "Classification Lab", menuItems: [{ label: "Start", event: "START", variant: "primary" }] }] })
      START -> playing
        (render-ui main { type: "game-shell", appName: "STEM Lab", showTopBar: true, children: [{ type: "stack", direction: "vertical", gap: "md", children: [{ type: "game-hud", stats: [{ label: "Score", value: "@entity.score" }, { label: "Level", value: "@entity.level" }] }, { type: "classifier-board", entity: "Classification", completeEvent: "COMPLETE" }] }] })
      NAVIGATE -> menu
    }
    state playing {
      COMPLETE -> complete
        (render-ui main { type: "game-shell", appName: "STEM Lab", showTopBar: true, children: [{ type: "game-over-screen", title: "Well Done!", menuItems: [{ label: "Play Again", event: "RESTART", variant: "primary" }] }] })
    }
    state complete {
      RESTART -> menu
        (render-ui main { type: "game-shell", appName: "STEM Lab", showTopBar: true, children: [{ type: "game-menu", title: "Classification Lab", menuItems: [{ label: "Start", event: "START", variant: "primary" }] }] })
    }
  }
  page "/classifier" -> ClassificationClassifierGame
}
orbital LabResultOrbital {
  entity LabResult [runtime] {
    id : string!
    experimentCount : number
    avgAccuracy : number
    totalScore : number
    grade : string
  }
  trait LabResultDisplay -> LabResult [interaction] {
    initial: loading
    state loading {
      INIT -> displaying
        (fetch LabResult)
        (render-ui main { type: "game-shell", appName: "STEM Lab", showTopBar: true, children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Lab Results" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "clipboard", size: "lg" }, { type: "typography", content: "Lab Results", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "ExperimentCount", value: ["object/get", ["array/first", "@entity"], "experimentCount"] }, { type: "stat-display", label: "AvgAccuracy", value: ["object/get", ["array/first", "@entity"], "avgAccuracy"] }, { type: "stat-display", label: "TotalScore", value: ["object/get", ["array/first", "@entity"], "totalScore"] }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "caption", content: "Grade" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "grade"] }] }] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
      LOADED -> displaying
        (fetch LabResult)
        (render-ui main { type: "game-shell", appName: "STEM Lab", showTopBar: true, children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Lab Results" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "clipboard", size: "lg" }, { type: "typography", content: "Lab Results", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "ExperimentCount", value: ["object/get", ["array/first", "@entity"], "experimentCount"] }, { type: "stat-display", label: "AvgAccuracy", value: ["object/get", ["array/first", "@entity"], "avgAccuracy"] }, { type: "stat-display", label: "TotalScore", value: ["object/get", ["array/first", "@entity"], "totalScore"] }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "caption", content: "Grade" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "grade"] }] }] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
    }
    state displaying {
      INIT -> displaying
        (fetch LabResult)
        (render-ui main { type: "game-shell", appName: "STEM Lab", showTopBar: true, children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Lab Results" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "clipboard", size: "lg" }, { type: "typography", content: "Lab Results", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "ExperimentCount", value: ["object/get", ["array/first", "@entity"], "experimentCount"] }, { type: "stat-display", label: "AvgAccuracy", value: ["object/get", ["array/first", "@entity"], "avgAccuracy"] }, { type: "stat-display", label: "TotalScore", value: ["object/get", ["array/first", "@entity"], "totalScore"] }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "caption", content: "Grade" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "grade"] }] }] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
      REFRESH -> refreshing
        (fetch LabResult)
        (render-ui main { type: "game-shell", appName: "STEM Lab", showTopBar: true, children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Lab Results" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "clipboard", size: "lg" }, { type: "typography", content: "Lab Results", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "ExperimentCount", value: ["object/get", ["array/first", "@entity"], "experimentCount"] }, { type: "stat-display", label: "AvgAccuracy", value: ["object/get", ["array/first", "@entity"], "avgAccuracy"] }, { type: "stat-display", label: "TotalScore", value: ["object/get", ["array/first", "@entity"], "totalScore"] }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "caption", content: "Grade" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "grade"] }] }] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
    }
    state refreshing {
      REFRESHED -> displaying
        (fetch LabResult)
        (render-ui main { type: "game-shell", appName: "STEM Lab", showTopBar: true, children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Lab Results" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "clipboard", size: "lg" }, { type: "typography", content: "Lab Results", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "ExperimentCount", value: ["object/get", ["array/first", "@entity"], "experimentCount"] }, { type: "stat-display", label: "AvgAccuracy", value: ["object/get", ["array/first", "@entity"], "avgAccuracy"] }, { type: "stat-display", label: "TotalScore", value: ["object/get", ["array/first", "@entity"], "totalScore"] }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "caption", content: "Grade" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "grade"] }] }] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
    }
  }
  page "/results" -> LabResultDisplay
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
title	string	-
hypothesis	string	-
score	number	0
completed	boolean	false
level	number	1

States

State	Type
menu	Initial
playing	-
complete	-

Events

Event	Payload
INIT	-
START	-
COMPLETE	-
RESTART	-
NAVIGATE	-

Transitions

From	Event	To	Effects
menu	INIT	menu	2 effects
menu	START	playing	1 effect
menu	NAVIGATE	menu	-
playing	COMPLETE	complete	1 effect
complete	RESTART	menu	1 effect