Screensaver

SketchSystems.spec

Screensaver
  interrupt -> User

  Init*
    next -> Intro
  Intro
    next -> TranslationA
  TranslationA
    next -> AnimationA
    error -> Init
    final -> Error
  AnimationA
    next -> Init

User
  Interaction*
    next -> TranslationB
    Question*
      next -> Question
      tryAgain -> Repeat
    Repeat
      next -> Question
  TranslationB
    next -> AnimationB
    repat -> TranslationB
    error -> TranslationError
    final -> Error
  TranslationError
    next -> Screensaver
  AnimationB
    next -> Screensaver
    
Error

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}