Wizard UI with React

by ramnathv

HTML

<script src="//fb.me/react-with-addons-0.14.0.js"></script>
<script src="//fb.me/react-dom-0.14.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.18.0/ramda.min.js"></script>
<div class="container-fluid" id='main'>
   <div class="row">
       <div class="col-xs-12 col-md-3" id='app'>
         
       </div>
   </div>
</div>

CSS

#main{
  margin-top: 20px;
}
.content{min-height: 350px;}

CoffeeScript

R = React.DOM
Rc = React.createElement
Rb = ReactBootstrap


dummyData = [
  {question: "Q1", responses: ["A", "B"]},
  {
  "A": {question: "Q2yes", responses: ["Y", "N"]},
  "B": {question: "Q2No", responses: ["Y", "N"]}
  },
  {
   AY: {question: "Q3 AY", responses: ["Y", "N"]}
   BY: {question: "Q3 BY", responses: ["Y", "N"]}
   AN: {question: "Q3 AN", responses: ["Y", "N"]}
   BN: {question: "Q3 BN", responses: ["Y", "N"]}
  }
]

DAT = [
  {
    question: "Is the data discrete or continuous?",
    responses: ["Discrete", "Continuous"]
  },
  {
    Discrete: 
      question: "Can you estimate outcomes and probabilities?"
      responses: ["Yes", "No"]
    Continuous:
      question: "Is the data symmetric or asymmetric"
      responses: ["Symmetric", "Asymmetric"]
  },
  {
    DiscreteYes:
      question: "Estimate Probability Distribution"
      responses: null
    DiscreteNo:
      question: "Is data symmetric or asymmetric"
      responses: ['Symmetric', 'Asymmetric']
    ContinuousSymmetric:
      question: "Is the data clustered around a central value?"
      responses: ["Yes", "No"]
    ContinuousAsymmetric:
      question: "Where do the outliers lie?"
      responses: ["Only Positive", "Mostly Positive", "Mostly Negative"]
  },
  {
   ContinuousSymmetricYes:
      question: "How likely are outliers?"
      responses: ["Limits on data", "Very Low", "Low"]
  },
  {
    ContinuousSymmetricYesLow:
      question: "Use a Normal Distribution!!"
      responses: null
  }
]


navInstance = (props) ->
  {Nav, NavItem} = Rb
  makeNavItem = (d, i) -> Rc(NavItem, 
    {key: i, eventKey: i, href: "#", disabled: props.responded < i}, d
  )
  Rc Nav, props, props.steps.map(makeNavItem)

pagerInstance = (props) ->
  {Pager, PageItem} = Rb
  {disablePrev, disableNext, step} = props
  Rc Pager, {},
    Rc PageItem, {href: "#", previous: true, disabled: disablePrev
      , onClick: step(-1)}, "<<"
    Rc PageItem, {href: "#", next: true, disabled: disableNext
      ,...