Simple Quiz

For Chaewon.

by the_voder

HTML

<section id="question1" class="question" data-question="weather">
    <div class="answer" data-answer="rainy">Rainy</div>
    <div class="answer" data-answer="sunny">Sunny</div>
    <div class="answer" data-answer="cloudy">Cloudy</div>
    <div class="answer" data-answer="snowy">Snowy</div>
    <div class="answer" data-answer="windy">Windy</div>
</section>
<section id="question2" class="question" data-question="gender">
    <div class="answer" data-answer="male">Male</div>
    <div class="answer" data-answer="female">Female</div>
</section>
<section id="question3" class="question" data-question="style">
    <div class="answer" data-answer="formal">Formal</div>
    <div class="answer" data-answer="informal">Informal</div>
</section>
<section id="endmessage">
    <p>Finding your perfect perfume!</p>
</section>

CSS

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

section {
    display: none;
    position: fixed;
    box-sizing: border-box;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: white;
}

section:first-of-type {
    display: block;
}
.answer {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    margin: 20px;
    box-sizing: border-box;
    padding: 10px;
    background-color: #eee;
    text-align: center;
}

.answer:hover {
    cursor: pointer;
    background-color: #fff;
}

#question1 {
    background-color: red;
}
#question2 {
    background-color: green;
}
#question3 {
    background-color: blue;
}
#endmessage {
    background-color: orange;
}

JavaScript

$(document).ready(function() {
    var theurl = "";
    $(".answer").click(function() { 
        if($(this).parent().is('.question:last')) {
            theurl += $(this).attr("data-answer") + ".html";
            $(this).parent().next().fadeIn(1000, function() {
                console.log(theurl);
            });           
        } else {
            theurl += $(this).attr("data-answer") + "-";
            $(this).parent().next().fadeIn(1000);
        }
    });
});