Mithril Wizard

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.2-rc.1/mithril.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container" id="app"></div>

CSS

#app {
  margin-top: 20px;
}

CoffeeScript

DAT = [
  {
    question: "Hi! I am your friendly distribution selector! I will lead you through a series of questions that will help you figure out what would be the appropriate distributions to model your data. Are you ready?",
    responses: ["Yes"]
  },
  {
    Yes:
      question: "Is the data discrete or continuous?",
      responses: ["Discrete", "Continuous"]
  },
  {
    YesDiscrete: 
      question: "Can you estimate outcomes and probabilities?"
      responses: ["Yes", "No"]
    YesContinuous:
      question: "Is the data symmetric or asymmetric"
      responses: ["Symmetric", "Asymmetric"]
  },
  {
    YesDiscreteYes:
      question: "Estimate Probability Distribution"
      responses: null
    YesDiscreteNo:
      question: "Is data symmetric or asymmetric"
      responses: ['Symmetric', 'Asymmetric']
    YesContinuousSymmetric:
      question: "Is the data clustered around a central value?"
      responses: ["Yes", "No"]
    YesContinuousAsymmetric:
      question: "Where do the outliers lie?"
      responses: ["Only Positive", "Mostly Positive", "Mostly Negative"]
  },
  {
   YesContinuousSymmetricYes:
      question: "How likely are outliers?"
      responses: ["Limits on data", "Very Low", "Low"]
  },
  {
    YesContinuousSymmetricYesLow:
      question: "Use a Normal Distribution!!"
      responses: null
  }
]

Page = view: (ctrl, props, children) ->
  m '.row', m('.col-xs-12.col-md-6', children)
  
  
Select = view: (ctrl, props) ->
  m 'select.form-control', {
      onchange: props.handleChange
      style: {"margin-top": "20px"}
    }, props.options.map (d, i) -> m 'option', d

Panel = view: (ctrl, props, children) ->
  m ".panel.panel-#{props.bsClass}", 
    Object.keys(children).map (k) ->
      m ".panel-#{k}", children[k]

Pager = view: (ctrl, props) ->
  m 'nav',
    m 'ul.pager',
      m 'li.previous', m 'a[href="#"', m.trust("<<")
      m 'li.next', m 'a[href="#"', m.trust(">>")
      
myBody = m "div", 
  m 'h4', "Tutorial"
  m...