JSFiddle - React, Tailwind, and code Playground

by boazmier

HTML

<body>
<header>
    <h1>Web App - Quiz</h1>
</header>
<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="next" type="submit">Next</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;
}

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

var allquestion = allQuestions["question"];//just a quick way to access the object

var calcAnswers =allQuestions["correctAnswer"];//just a quick way to access the correctAnswer property object

var qNum = 0; //counts the questions up

var value; //undeclared var

//function that display the question and the choices to the section.
function loadquestions(qNum){
    if(allquestion["question"+qNum] != undefined){
    $(".question").text(allquestion["question"+qNum]["question"]); //set the the question to the title
    for(var i=0;i<allquestion["question"+qNum]["choices"].length;){
        //loops throughout the li's
        var cH =(allquestion["question"+qNum]["choices"][i]); // a var that holds text of choice in poistion i
        $("label[for=li"+i+"]").text(cH); //define for every label its text
        $("#li"+i).attr("value",cH); //define for every input radio its value which is equals to label which is equals to var cH
        i++;//count i with +1
    }
}
}
//function that fires when clicked the "next" button and when trigered hides the current question and presents the next one
function checkClientChoice(){
 $("#next").click(function(){
     value =...