Simple Quiz

by Zach McCall

HTML

<body>
    <div id="question1" class="div" name="Q1[0,0]">
        <p>What is the capital of Washington?</p>
        <input type="radio" class="input" id="answer1a" name="Q">Salem
        <br>
        <input type="radio" class="input" id="answer1b" name="Q">Seattle
        <br>
        <input type="radio" class="input CA" name="Q">Olympia
        <br>
        <input type="radio" class="input" id="answer1d" name="Q">Helena</div>
    <div id="question2" class="div">
        <p>How many countries are in Europe?</p>
        <input type="radio" class="input CA" name="Q">51
        <br>
        <input type="radio" class="input" id="answer2b" name="Q">15
        <br>
        <input type="radio" class="input" id="answer2c" name="Q">46
        <br>
        <input type="radio" class="input" id="answer2d" name="Q">27
    </div>
    <div id="question3" class="div">
        <p>What is the population of Mexico City?</p>
        <input type="radio" class="input" id="answer3a" name="Q">3.3 million
        <br>
        <input type="radio" class="input CA" name="Q">8.9 million
        <br>
        <input type="radio" class="input" id="answer3c" name="Q">800 Thousand
        <br>
        <input type="radio" class="input" id="answer3d" name="Q">15.1 million</div>
    <div id="question4" class="div">
        <p>Who is the current leader of Russia?</p>
        <input type="radio" class="input CA" name="Q">Vladimir Putin
        <br>
        <input type="radio" class="input" id="answer4b" name="Q">Boris Yelstin
        <br>
        <input type="radio" class="input" id="answer4c" name="Q">Dmitry Medvedev
        <br>
        <input type="radio" class="input" id="answer4d" name="Q">Nikolai Bulganin</div>
    <div id="question5" class="div">
        <p>How large is the state of California?</p>
        <input type="radio" class="input" id="answer5a" name="Q">85,115 square miles
        <br>
        <input type="radio" class="input" id="answer5b" name="Q">130,919 square miles
        <br>
 ...

CSS

body {
    background-color: aliceblue;
}
h3 {
    text-align: center;
}
p {
    font-size:25px;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center
}
.div {
    border:none width:500px;
    height: 300px;
    margin-left: 25%;
    display:none;
}
.input {
    margin-left: 10%;
    height:15%;
}
.activequestion {
    display:block;
}
#submit {
    width:50px;
    height:20px;
    font-weight: bold;
}
#scorepage {
    display:none;
}
#points {
    width:50px;
}

JavaScript

var total;

$('#question1').addClass('activequestion');

var quiz = function () {
    total = 0;

    $('#submit').click(function () {
        
        if($('.CA').hasClass('activequestion')){ function check () {
            if ($(this).is(':checked')) {
                total++;
                $('#points').text('Score: '+total);
            }
            }
                                               }
                                        


        var currentquestion = $('.activequestion');
        var nextquestion = currentquestion.next();

        currentquestion.fadeOut(0).removeClass('activequestion');

        nextquestion.fadeIn(0).addClass('activequestion');

        finished();



    });


    $('#restart').click(function () {
        var currentquestion = $('.activequestion');
        currentquestion.fadeOut(0).removeClass('activequestion');
        $('#question1').show().addClass('activequestion');
        quiz();
    });
};


$(document).ready(quiz);