JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<script src="https://rawgit.com/srobbin/jquery-backstretch/master/jquery.backstretch.min.js"></script>
<div class="outer">
    <a href="#" id="start" onclick="begin()">Begin</a>
    <ul>
        <li><a href="#" onclick="submit1()" id="option1"></a></li>
        <li><a href="#" onclick="submit2()" id="option2"></a></li>
        <li><a href="#" onclick="submit3()" id="option3"></a></li>
    </ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

* {
    font-family: 'Open Sans', sans-serif;
}
body {
    background:url(http://www.freeallimages.com/wp-content/uploads/2014/09/fall-trees-2.jpg);
}
.outer {
    padding:25px;
    width:400px;
    height:300px;
    margin-right:-230px;
    margin-top:-180px;
    background:rgba(0,0,0,0.8);
    position:absolute;
    top:50%;
    right:50%;
    border-radius:20px;
}
.outer ul {
    margin:0;
    padding: 0;
    list-style-type: none;
    display:none; /* Will be shown by JS later... */
}
.outer ul li {
    list-style:none;
    margin: 0 0 10px 0;
}
.outer ul li a {
    color:white;
    font-size:24px;
    text-decoration:none;
}
#start {
    display:inline-block;
    color:white;
    text-decoration:none;
    font-size:32px;
    border:4px solid white;
    padding:5px 20px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-67px;
    margin-top:-31px;
}
#start:hover {
    background:white;
    color:black;
}

JavaScript

var currentquestion = 0; //Remember: actually question 1
var options = [
    ["Trees with needles or scale-like leaves","Trees with broadleaf leaves"],
    ["1","2","3"]
];

function loadquestion(n) {
    $("#option1").text(options[n][0]);
    $("#option2").text(options[n][1]);
    if(options[n][2] == "") {
        $("#option3").text(options[n][2]);
        $("#option3").css("display","none");
    } else {
        $("#option3").text(options[n][2]);
        $("#option3").css("display","inline");
    }
}
function begin() {

    $("#start").css("display","none");
    loadquestion(currentquestion);
}