JSFiddle - React, Tailwind, and code Playground

by boazmier

HTML

<section>
    <div id="contain">
      <h2 class="question">q1</h2>
        <ul>
            <li class="li0">
                <input type="radio" value="ch1" name="choice" id="li0"/>
                <label for="li0"></label>
            </li>
            <li class="li1">
                <input type="radio" value="ch2" name="choice" id="li1"/>
                <label for="li1"></label>
            </li>
            <li class="li2">
                <input type="radio" value="ch3" name="choice" id="li2"/>
                <label for="li2"></label>
            </li>
            <li class="li3">
                <input type="radio" value="ch4" name="choice" id="li3"/>
                <label for="li3"></label>
            </li>
        </ul>
        <button id="back" type="submit">&larr; Back</button>
        <button id="next" type="submit">Next &rarr;</button>
        <p id="fool">Plese dont try to fool me, just pick an answer.</p>

    </div>
</section>

CSS

@import url(http://fonts.googleapis.com/css?family=Lily+Script+One);

body{
    background: #f8f8f8 center no-repeat;
}

header{
    position: relative;
    top: 0;
    left: 50%;
    background: transparent center no-repeat;
    width: 50%;
    height: auto;
}

header h1{
    font-family: 'Lily Script One', cursive;
    font-size: 30px;
    color: #000;
}

section{
    position: relative;
    top:0;
    left: 25%;
    opacity: 0.5;
    background: #f1f1f1 center no-repeat;
    padding: 3em;
    width: 50%;
    height: auto;
    box-shadow: 5px 5px 5px #000;
    font-family: "lily script one", cursive;
}


#contain{
    background: transparent center no-repeat;
}

ul{
    list-style: none;
}

#fool{
    color:#DE1414;
    position: relative;
    width: auto;
    height: auto;
    float:right;
    border: 3px solid #de0000;
    padding: 5px;
    background: #fff no-repeat center;
    border-radius: 3px 3px 3px 3px;
    display: none;
}
#log{
    text-align: center;
}

input{
    text-align: center;
}

#sublog{
    text-align: center;
    position: relative;
    top: 30px;
    left: -188px;
    border: 3px solid #488BCE;
    box-shadow: 2px 2px 2px;
    border-radius: 3px 3px 3px 3px;
    cursor: pointer;
    background-image: linear-gradient(bottom, rgb(217,214,217) 2%, rgb(209,209,209) 38%, rgb(240,240,240) 53%);
    background-image: -o-linear-gradient(bottom, rgb(217,214,217) 2%, rgb(209,209,209) 38%, rgb(240,240,240) 53%);
    background-image: -moz-linear-gradient(bottom, rgb(217,214,217) 2%, rgb(209,209,209) 38%, rgb(240,240,240) 53%);
    background-image: -webkit-linear-gradient(bottom, rgb(217,214,217) 2%, rgb(209,209,209) 38%, rgb(240,240,240) 53%);
    background-image: -ms-linear-gradient(bottom, rgb(217,214,217) 2%, rgb(209,209,209) 38%, rgb(240,240,240) 53%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.02, rgb(217,214,217)),
        color-stop(0.38, rgb(209,209,209)),
       ...

JavaScript

var allQuestions = {
    question: {
        question0: {
            question: "What is the meaning of HP?",
            choices: ["Hewlett-Pako", "Holy-Packard", "Hewlett-Packard", "Holy-Bigel"],
            correct: "Hewlett-Packard"
        },
        question1: {
            question: "how much is PI?",
            choices: ["2.54", "3.54", "1.21", "3.14"],
            correct: "3.14"
        },
        question2: {
            question: "Who is Messi?",
            choices: ["basketball player", "soccer player", "gold player", "tennis player"],
            correct: "soccer player"
        },
        question3: {
            question: "What is jQuery?",
            choices: ["JS library", "php library", "sql library", "html library"],
            correct: "JS library"
        }
    },

    correctAnswer: 0
};


function set_client() {//this function is to set the client info the first thing that the function does is to look if the text entered in the inputs is valid, next it will see if localstorage has been set already

    //the blur function test to see if the value entered in the inputs are text if it is then it will let you procced if not it wont let you go further more
    $("#fName,#lName").blur(function(){
        //check to see if the the info given is valid if not it will pop up a sentence that alert for wrong info
        var validfn = /[a-zA-Z]/.test($("input[name='fName']").val());// check to match the if the input is a-z char
        var validln = /[a-zA-Z]/.test($("input[name='lName']").val());// check to match the if the input is a-z char
        if (!validfn || !validln) {
            $("#log").append($("#fool").text("First name and last name must be a-z charcters").fadeIn());
            $("#fool").css({"margin-top":"-10px","margin-right":"-20px"});
        }
        else{ //if there the message already exist and the client entered valid text then the message will be dismiss
            $("#fool").fadeOut();
            return validfn;

   ...