Wizard UI

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>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/kristw/75b61f9beeab9b530612/raw/389e984e4041117a9185cf6edad9f6b85a38097a/d3kit.min.js"></script>
<script src="//rawgit.com/jstat/jstat/master/dist/jstat.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: 450px;}

div.slider{margin-bottom: 10px;}
select.distribution{margin-bottom: 15px;}
span.slider__label,
span.slider__value{
  margin-bottom: 10px;
}

.x-axis-layer path,
.x-axis-layer line {
  fill: none;
  stroke: black;
  stroke-opacity: 0.8;
  shape-rendering: crispEdges;
}

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: "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
  }
]


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