Jquery Quiz

Building the quiz in pure jquery

HTML

<div id="wrapper">
    <div id="quiz">
        <div id="questions">This is a quiz about Turkey, click start to begin
            <div id="start">Start</div>
        </div>
        <div name="answersFrame" id="answersFrame" class="choices">
            <input type="radio" name="answers" class="choices" value=0>
            <p id="zero" class="pickone"></p>
            <br/>
            <input type="radio" name="answers" class="choices" value=1>
            <p id="one" class="pickone"></p>
            <br/>
            <input type="radio" name="answers" class="choices" value=2>
            <p id="two" class="pickone"></p>
            <br/>
            <input type="radio" name="answers" class="choices" value=3>
            <p id="three" class="pickone"></p>
        </div>
        <div id="next">next</div>
    </div>
    <div id="table">
        <div id="score"></div>
        <table id="results">
            <thead>
                <tr>
                    <th>Question</th>
                    <th>Your Answer</th>
                    <th>Correct Answer</th>
            </thead>
            <tbody>
                <tr class="row" name=0>
                    <td>Turkey's capital</td>
                    <td>
                        <p class="userAnswer" value=0></p>
                    </td>
                    <td>
                        <p class="correctAnswer" value=0></p>
                    </td>
                </tr>
                <tr class="row" name=1>
                    <td>Turkey's founding date</td>
                    <td>
                        <p class="userAnswer" value=1></p>
                    </td>
                    <td>
                        <p class="correctAnswer" value=1></p>
                    </td>
                </tr>
                <tr class="row" name=2>
                    <td>Turkey's population</td>
                    <td>
                        <p class="userAnswer" value=2></p>
                    </td>
                   ...

CSS

#wrapper {
    position: relative;
}
#quiz {
    position: relative;
    height: 400px;
    width: 400px;
}
#start {
    position: absolute;
    height: 40px;
    width: 70px;
    bottom: 10%;
    right: 0%;
    background: #0080FF;
    color: #ffffff;
    padding: 6px;
    text-align: center;
    font-size: 150%;
    border-radius: 10px;
}
#start:hover {
    cursor: pointer;
    background: navy;
}
#next {
    position: absolute;
    height: 40px;
    width: 60px;
    bottom: 10%;
    right: 0%;
    background: #0080FF;
    color: #ffffff;
    text-align: center;
    padding: 4px;
    font-size: 200%;
    border-radius: 10px;
    display: none;
}
#next:hover {
    cursor: pointer;
    background: navy;
}
.choices {
    display:none;
}
#questions {
    font-size: 150%;
    height: 70px;
}
.pickone {
    display: inline;
    position: relative;
}
#results {
    display: none;
    border: 1px solid black;
    text-align: center;
    height: 400px;
    width: 450px;
}
td {
    border: 1px solid black;
}
th {
    border: 1px solid black;
}
#score {
    font-size: 150%;
    height: 70px;
}

JavaScript

var quiz = [{
    question: "What is the capital of Turkey?",
    answers: ["Istanbul", "Ankara", "Izmir", "Trabzon"],
    correctAnswer: 1
}, {
    question: "When was Turkey established?",
    answers: [1923, 1928, 1933, 1934],
    correctAnswer: 0
}, {
    question: "What is the population of Turkey?",
    answers: ["90 million", "75 million", "100 million", "80 million"],
    correctAnswer: 1
}, {
    question: "What is the population of Turkey's biggest city, Istanbul?",
    answers: ["18 million", "16 million", "14 million", "7 million"],
    correctAnswer: 2
}]

var i = 0;
var score = 0;

$(document).ready(function () {
    $('#start').on('click', function () {
        $('#questions').text(quiz[i].question);
        $('#zero').text(quiz[i].answers[0]);
        $('#one').text(quiz[i].answers[1]);
        $('#two').text(quiz[i].answers[2]);
        $('#three').text(quiz[i].answers[3]);
        $('#start').remove();
        $('.choices').show('slow');
        $('#next').show('slow');
    });
});

$(document).ready(function () {
    $(document).on('click', '#next', function () {
        var answer = $('input[name="answers"]:checked').val();
        var answerString = quiz[i].answers[answer];
        $('p[class="userAnswer"][value=' + i + ']').text(answerString);
        var correctAnswer = quiz[i].correctAnswer;
        $('p[class="correctAnswer"][value=' + i + ']').text(quiz[i].answers[correctAnswer]);
        if (answer == quiz[i].correctAnswer) {
            score++;
        } else {
            $('tr[class="row"][name=' + i + ']').css('background', '#FE2E64');
        }
        if (!$('input[name="answers"]').is(':checked')) {
            alert("please make a choice");
            return undefined; //stops executing the rest of the code
        }
        i++;

        if (i < 4) {
            $('.choices').css('display', 'none');
            $('#questions').text(quiz[i].question);
            $('#zero').text(quiz[i].answers[0]);
           ...