Programando Orientado a Eventos – Quiz em multipassos

Programando Orientado a Eventos – Quiz em multipassos

by Angelo Rogério Rubin

HTML

<section class="content column-ten-twelfths space-bottom-big" id="quiz">
    <div id="quiz-inner">
        <ol class="overflow space-bottom-medium column-half content" id="quiz-pager">
            <li class="fleft quiz-pager-item is-active">1</li>
            <li class="fleft quiz-pager-item">2</li>
            <li class="fleft quiz-pager-item">3</li>
            <li class="fleft quiz-pager-item">4</li>
            <li class="fleft quiz-pager-item">5</li>
            <li class="fleft quiz-pager-item">6</li>
            <li class="fleft quiz-pager-item">7</li>
            <li class="fleft quiz-pager-item">8</li>
        </ol><!-- #quiz-pager -->


        <ul id="quiz-questions">
            <li class="quiz-question-item is-active">

                <p class="quiz-question">Qual meu perfil como FrontEnd ?</p>
                <form id="quiz-form-user" class="quiz-form column-half content" method="" action="">
                    <fieldset>
                        <label class="overflow space-bottom-small">
                            <span class="fleft">Nome: </span>
                            <input type="text" class="input-text fright column-five-twelfths" value="" name="name">
                        </label>
                        <label class="overflow space-bottom-medium">
                            <span class="fleft">E-mail: </span>
                            <input type="email" class="input-text fright column-five-twelfths" value="" name="email">
                        </label>

                        <p class="quiz-form-error-msg">Preencha os seus dados corretamente</p>

                        <label class="overflow space-bottom-small">
                            <input type="submit" class="btn btn-quiz content" value="Acesse a pesquisa" name="send">
                        </label>
                    </fieldset>
                </form>
            </li><!-- .quiz-question-item -->
            <li class="quiz-question-item">
                <p...

CSS

* {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}
body {
    font: normal 12px Tahoma, sans-serif;
}
p { margin-bottom: 15px; }
.fleft { float: left; }
.fright { float: right; }
.overflow { overflow: hidden; }
.input-text { padding: 5px; }
.link-again { display: block; text-decoration: underline; }
.quiz-answer { font-size: 24px; }
.content { margin: 0 auto; }
.column-half { width: 460px; }
.column-five-twelfths { width: 370px; }
.column-ten-twelfths { width: 780px; }
.space-bottom-big { margin-bottom: 40px; }
.space-bottom-medium { margin-bottom: 20px; }
.space-bottom-small { margin-bottom: 10px; }
.center { text-align: center; }

.is-hidden { display: none; }
.btn {
    background:#EF8721;
    color: #fff;
    border-radius: 5px;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}

#quiz {
    border-radius: 8px;
    border: 1px solid #cccccc;
    height: 400px;
}
#quiz-inner { padding: 30px 20px; }

#quiz label { display: block; }

#quiz .input-text { border: 1px solid #ccc; border-radius: 0; background: #fff; }

.quiz-question {
    font-weight: bold;
    text-align: center;
    padding: 20px 0;
    height: 30px; line-height: 30px;
}
.quiz-pager-item {
    border-radius: 50%;
    background: #e6eaeb;
    width: 40px; height: 40px; line-height: 40px;
    text-align: center;
    font-size: 14px;
    margin-right: 15px;
    position: relative;
}
.quiz-pager-item:first-child { margin-left: 20px; }
.quiz-pager-item:last-child { margin-right: 0; }
.quiz-pager-item:last-child:after { background: none; }

.quiz-pager-item.is-active { background: #990000; color: #fff; }

.quiz-form { padding: 0 60px; }
.btn-quiz { width: 200px; height: 35px; line-height: 35px; display: block; cursor: pointer; }

.quiz-question-item.is-active { display: block; }
.quiz-question-item { display: none; }

.quiz-form-error-msg {
    display: none;
    color: #b94a48;
    background: #f2dede;
    border: 1px...

JavaScript

(function (document) {
    "use strict";
    /*jslint plusplus: true, browser: true*/
    
    Array.prototype.sum = function () {
        var total = 0,
            i = this.length;

        while (i--) {
            total += parseInt(this[i], 10);
        }
        return total;
    };
    
    function loop($els, cb) {
        var i = $els.length;

        while (i > 0) {
            i -= 1;
            cb($els[i]);
        }
    }


    var $formRadios = document.querySelectorAll('.quiz-form-radios'),
        $formUser = document.querySelector('#quiz-form-user'),
        $quizForm = document.querySelectorAll('.quiz-form'),
        $quizLastForm = document.querySelector('#quiz-form-last'),
        $quizQuestions = document.querySelectorAll('.quiz-question-item'),
        $quizPagers = document.querySelectorAll('.quiz-pager-item'),

        $answerProduct = document.querySelectorAll('.quiz-answer-product'),
        $answer1 = document.querySelector('#quiz-answer-1'),
        $answer2 = document.querySelector('#quiz-answer-2'),
        $answer3 = document.querySelector('#quiz-answer-3'),
        $answer4 = document.querySelector('#quiz-answer-4'),
        $linkAgain = document.querySelector('.link-again'),

        $name = $formUser.querySelector("input[name='name']"),
        $email = $formUser.querySelector("input[name='email']"),
        answers = {};


    $formUser.addEventListener("submit", function () {
        answers.user = [];

        if ($name.value !== '' && $email.value !== '') {
            this.setAttribute('data-answer', 'answered');
        }
    });


    loop($formRadios, function ($form) {
        $form.addEventListener("submit", function () {
            var $radio = $form.querySelector('input[type="radio"]:checked');

            if ($radio) {
                answers.user.push($radio.value);
                this.setAttribute('data-answer', 'answered');
            }

        });
    });



    loop($quizForm, function ($form) {
       ...