jQuiz

Very simple quiz interface with jQuery

by Fatih Acet

HTML

<h1>jQuiz Demo Page</h1>
<div class="questionContainer radius">
    <div class="question"><b>Question 1:</b> Inside which HTML element do we put the JavaScript?</div>
    <div class="answers">
        <ul>
            <li>
                <label><input type="radio" name="q1" id="q1-a" />&lt;js&gt;</label>
            </li>
            <li>
                <label><input type="radio" name="q1" id="q1-b" />&lt;script&gt;</label>
            </li>
            <li>
                <label><input type="radio" name="q1" id="q1-c" />&lt;scripting&gt;</label>
            </li>
            <li>
                <label><input type="radio" name="q1" id="q1-d" />&lt;javascript&gt;</label>
            </li>
        </ul>
    </div>
    <div class="btnContainer">
        <div class="prev"></div>
        <div class="next">
            <a class="btnNext">Next &gt;&gt;</a>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="questionContainer hide radius">
    <div class="question"><b>Question 2:</b> What is the correct JavaScript syntax to write "Hello World"?</div>
    <div class="answers">
        <ul>
            <li>
                <label><input type="radio" name="q2" id="q2-a" />response.write("Hello World")</label>
            </li>
            <li>
                <label><input type="radio" name="q2" id="q2-b" />("Hello World")</label>
            </li>
            <li>
                <label><input type="radio" name="q2" id="q2-c" />"Hello World"</label>
            </li>
            <li>
                <label><input type="radio" name="q2" id="q2-d" />document.write("Hello World")</label>
            </li>
        </ul>
    </div>
    <div class="btnContainer">
        <div class="prev">
            <a class="btnPrev">&lt;&lt; Prev</a>
        </div>
        <div class="next">
            <a class="btnNext">Next &gt;&gt;</a>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="questionContainer radius hide">
    <div...

CSS

body{
    margin: 0px;
    padding: 0px;
    background: #EFEFEF;
    cursor: default;
    font-size: 12px;
    font-family: Arial, Tahoma;
}
.questionContainer {
    width: 600px;
    border: 3px double #CFCFCF;
    padding: 3px;
    margin: 10px;
}
ul {
    margin: 0px;
    padding: 5px;
}
ul li {
    list-style: none;
}
a {
    border: 1px solid #000;
    padding: 2px 5px;
    font-weight: bold;
    font-size: 10px;
    background: #FFF;
    cursor: pointer;
}
a:hover {
    background: none;
}
.btnContainer {
    width: 96%;
    margin: 10px 0px 10px 2%;
}
#progressKeeper {
    width: 600px;
    height: 25px;
    border: 3px double #CFCFCF;
    margin: 0px 10px;
    padding: 3px;
}
.txtStatusBar {
    margin: 5px 10px;
    font-weight: bold;
}
#progress {
    background: green;
    width: 0;
    height: 25px;
    -webkit-transition: width 0.3s ease;
}
.radius {
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
}
#resultKeeper {
    width: 600px;
    margin: 10px;
    padding: 3px;
    border: 3px double #CFCFCF;
}
#resultKeeper div {
    line-height: 20px;
}
.totalScore {
    font-weight: bold;
}
input {
    position: relative;
    top: 2px;
}
h1 {
    border-bottom: 1px solid #CCCCCC;
    font-size: 16px;
    height: 22px;
    margin: 10px;
    text-indent: 5px;
}
.prev { float: left; }
.next, .btnShowResult { float: right; }
.clear { clear: both; }
.hide { display: none; }

JavaScript

$(function(){
    var jQuiz = {
        answers: { q1: 'd', q2: 'd', q3: 'a', q4: 'c', q5: 'a' },
        questionLenght: 5,
        checkAnswers: function() {
            var arr = this.answers;
            var ans = this.userAnswers;
            var resultArr = []
            for (var p in ans) {
                var x = parseInt(p) + 1;
                var key = 'q' + x;
                var flag = false;
                if (ans[p] == 'q' + x + '-' + arr[key]) {
                    flag = true;
                }
                else {
                    flag = false;
                }
                resultArr.push(flag);
            }
            return resultArr;
        },
        init: function(){
            $('.btnNext').click(function(){
                if ($('input[type=radio]:checked:visible').length == 0) {
                            
                    return false;
                }
                $(this).parents('.questionContainer').fadeOut(500, function(){
                    $(this).next().fadeIn(500);
                });
                var el = $('#progress');
                el.width(el.width() + 120 + 'px');
            });
            $('.btnPrev').click(function(){
                $(this).parents('.questionContainer').fadeOut(500, function(){
                    $(this).prev().fadeIn(500)
                });
                var el = $('#progress');
                el.width(el.width() - 120 + 'px');
            })
            $('.btnShowResult').click(function(){
                var arr = $('input[type=radio]:checked');
                var ans = jQuiz.userAnswers = [];
                for (var i = 0, ii = arr.length; i < ii; i++) {
                    ans.push(arr[i].getAttribute('id'))
                }
            })
            $('.btnShowResult').click(function(){
                $('#progress').width(300);
                $('#progressKeeper').hide();
                var results = jQuiz.checkAnswers();
                var resultSet =...