JSFiddle - React, Tailwind, and code Playground

by boazmier

HTML

<script src="https://bitbucket.org/boazhoch/quizapp/raw/e9e359cf187e810e4c8ffdcf09cc4db2454e5210/Quiz/Js/questionData.json"></script>
<body>
<header>
    <h1>Web App - Quiz</h1>
</header>
<section>
    <div id="log">
        <h1>please write your first name and last name</h1>
        <form>
            <input type="text" id="fName" name="fName" placeholder="FirstName" />
            <input type="text" id="lName" name="lName" placeholder="LastName" />
            <input type="submit" id="sublog" name="login" value="Login" />
        </form>
    </div>
    <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>

</body>

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

/*

wow

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
};

 */
/*
var whichQuestion = [];
var dataQuestion = [];


$.getJSON('/Quiz/Js/questionData.json',function(questions){
    data =  questions["allQuestions"]["question"];
    $.each(data,function(key,val){
       whichQuestion.push(key);
       dataQuestion.push(val["question"]);
    });
});
*/

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...