Oculus Rift Helper

a helper page to illustrate the kinds of choices that help inform a rift purchase.

by sperske

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="container">
  <div class="header">
    <ul class="nav nav-pills pull-right">
      <li><a href="http://jason.sperske.com" target='_blank'>by Jason</a></li>
      <li><a href="https://github.com/jasonsperske" target='_blank'><i class="fa fa-github"></i></a></li>
      <li><a href="http://stackoverflow.com/users/16959/jason-sperske" target='_blank'><i class="fa fa-stack-overflow"></i></a></li>
    </ul>
    <h3 class="text-muted">Are you sure?</h3>
  </div>
  <div class="jumbotron">
    <h1>Are you sure you want an Oculus Rift?</h1>
    <p class="lead">The Oculus Rift is in many ways the realization of the dream of VR that thousands (perhaps millions) of people have had for decades.  Some people won't need any help deciding when to order a Rift.  If you are one of those people then you don't need to answer a single question. If that's you and you haven't ordered the Dev Kit then what are you waiting for?</p>
    <p><a class="btn btn-lg btn-success" href="https://www.oculusvr.com/order/" role="button" target='_blank'>Order One Today</a>
    </p>
      <p class="lead">If that isn't you then perhaps this simple page can help.  Just answer these simple questions and as you do the final prognosis (found at the bottom of this page will update automatically) giving you what (I think) is a reasonable suggesting.  Of course this just an opinion (and feel free to look at the source code to see how I am determining it).  If you think you can do better you can always edit the code and distribute your helper page yourself.</p>
  </div>
  <div class="row marketing">
    <div class="col-lg-6">
      <h4>1) What Generation of Video Games are you are looking forward to playing in VR?</h4>
    ...

CSS

.footer {
    padding-top: 20px;
}
.row {
    padding-bottom: 25px;
}
.slider-label {
    color:#f6931f;
    font-weight:bold;
}

JavaScript

var prognosis = {
      'buy': true,
      'accessories': {
        'GamePad': true,
        'HandTracking':false,
        'MovementTracking':false,
        '3DDriver':false}
    },
    data = {
      generation: [{'name':'Zork'},
                   {'name':'Hovertank 3D'},
                   {'name':'Doom/Duke Nukem 3D'},
                   {'name':'Quake 1'},
                   {'name':'Quake 2'},
                   {'name':'Half Life 2'},
                   {'name':'Euro Truck Simulator'},
                   {'name':'Mirrors Edge'},
                   {'name':'Dear Esther'},
                   {'name':'Skyrim'},
                   {'name':'Call of Duty: Ghosts'}],
        config: [{'name':'I have no idea'},
                 {'name':'I\'d rather not'},
                 {'name':'I can manage'},
                 {'name':'Bring it on!'},
                 {'name':'I use vi for fun'}],
        controller: [{'name':'A NES Gamepad is fine'},
                     {'name':'Only an XBox Gamepad will do'},
                     {'name':'I need to see my hands'},
                     {'name':'I expect something like the holodeck'}]
    },
    desc = function(label, required, optional) {
        $('#'+label).html(data[label][required]['name'] + (optional ? " to "+data[label][optional]['name'] : ''));
    };
$(function() {
  $('.btn').button();
    
  $("#slider-generation").slider({
    range: true,
    min: 0,
    max: 10,
    values: [2, 6],
    slide: function( event, ui ) {
      desc('generation', ui.values[0], ui.values[1]);
    }
  });
  $("#slider-config").slider({
    min: 0,
    max: 4,
    value: 2,
    slide: function( event, ui ) {
      desc('config', ui.value);
    }
  });
  $("#slider-controller").slider({
    min: 0,
    max: 3,
    value: 1,
    slide: function( event, ui ) {
      desc('controller', ui.value);
    }
  });
  //Setup defaults
  desc('generation', 2, 6);
  desc('config', 2);
  desc('controller', 1);
});