Quiz View > question view

questionView.js

define(['backbone', 'handlebars', 'commonview', 'quiz/host/collection/question-alternatives', 'quiz/host/model/question-alternative', 'quiz/host/view/question-alternative-collection', 'text!quiz/host/template/question.hbs'],
function(Backbone, Handlebars, CommonView, QuestionAlternativeCollection, QuestionAlternativeModel, QuestionAlternativeCollectionView, QuestionTemplate)
{
    var QuestionView = CommonView.extend(
    {
        socketEvents: {
            'hostTask': 'populate'
        },

        init: function()
        {
            this.listenTo(this.model, 'change', this.render);
            this.render();

            this.eventAggregator.bind('clientAnswered', this.clientAnswered, this);
        },

        render: function()
        {
            var template = Handlebars.compile(QuestionTemplate);
            var output = template(this.model.attributes);

            console.log(this.model.attributes);

            this.$el
                .html(output)
                .append(this.renderAlternatives());
        },

        populate: function(data)
        {
            var questionAlternativeCollection = new QuestionAlternativeCollection(_.map(data.alternatives, function(alternative)
            {
                return new QuestionAlternativeModel(
                {
                    text: alternative
                });
            }));

            this.model.set(
            {
                question: data.task,
                alternatives: questionAlternativeCollection,
                correctAlternativeIndex: data.correctAlt,
                questionDuration: data.time
            });
        },

        renderAlternatives: function()
        {
            var questionAlternativeCollection = new QuestionAlternativeCollection(_.pluck(this.model.get('alternatives').models, 'attributes'));
            return questionAlternativeCollectionView = new QuestionAlternativeCollectionView(
            {
                collection: questionAlternativeCollection
            }).render().el;
        },

        clientAnswered: function(data)
        {
            data.$el
                .addClass('picked')
            .siblings()
                .addClass('not-picked');
        }
    });

    return QuestionView;
});

quizView.js

define(['backbone', 'handlebars', 'commonview', 'quiz/host/model/question', 'quiz/host/view/question', 'text!quiz/host/template/quiz.hbs'],
function(Backbone, Handlebars, CommonView, QuestionModel, QuestionView, QuizTemplate)
{
    var QuizView = CommonView.extend(
    {
        el: '#quiz',

        events: {
            'click .next': 'nextQuestion'
        },

        init: function()
        {
            this.listenTo(this.model, 'change', this.render);
            this.render();

            this.countdown();
        },

        render: function()
        {
            var template = Handlebars.compile(QuizTemplate);
            var output = template(this.model.attributes);
            this.$el.html(output);

            this.questionView = new QuestionView(
            {
                model: new QuestionModel,
                el: $('.question')
            });

            this.assign(
            {
                '.question': this.questionView
            });
        },

        countdown: function()
        {
            var counterInitial = this.model.get('counter');

            if(counterInitial)
            {
                var self = this;

                var counter = window.setInterval(function()
                {
                    var counterCurrent = self.model.get('counter');
                    self.model.set('counter', counterCurrent - 1);

                    if(counterCurrent === 1)
                        window.clearInterval(counter);
                }, 1000);
            }
        },

        nextQuestion: function(e)
        {
            e.preventDefault();

            this.model.set('questionIndex', this.model.get('questionIndex') + 1);
            // QuizIO.socket.emit(stuff)
        }
    });

    return QuizView;
});