riot.tag2('answer-question', '<div class="question_{question.id}"> <div class="question_header"> <h3> <span class="question_order"> <img class="correct question_correct_{question.id}" src="/image/loading.gif" data-echo="/image/image_correct.png" alt=""> <img class="correct question_incorrect_{question.id}" src="/image/loading.gif" data-echo="/image/image_incorrect.png" alt=""> <span class="question_number">{order}</span>問目 </span> </h3> <span class="question_accuracy_rate"> 正解率: <span class="{getAccuracyRate( question.correct_count ) < 40 && parent.quiz.play_count > 10 ? \'question_difficulty_hard\' : \'\'}">{getAccuracyRate( question.correct_count )}% <br>{getAccuracyRate( question.correct_count ) < 40 && parent.quiz.play_count > 10 ? \'難問!!\' : \'\'}</span> </span> </div> <div class="input_row question_body"> <p> <nl2br text="{question.body == \'\' ? \'問題文が設定されていません\' : question.body}"></nl2br> </p> <div class="question_image_wrapper" if="{question.image_url != \'\'}"> <img if="{question.image_url != \'\'}" id="question_image_tag_{question.id}" src="/image/loading.gif" data-echo="{question.image_url}" alt=""> </div> </div> <div class="input_row"> <answer-choice-unique if="{type == 1}" choiceis="{Choice}"></answer-choice-unique> <answer-choice-multiple if="{type == 2}" choiceis="{Choice}"></answer-choice-multiple> <answer-choice-text if="{type == 3}" choiceis="{Choice}"></answer-choice-text> </div> <div class="pass_through"> <a href="#" onclick="{toScrollNextQuestion}">{this.order == this.parent.questions.length ? \'回答をパスして採点する\' : \'回答をパスする\'}</a> </div> </div>', 'answer-question { position: relative; display: block; width: 100%; background-color: #fdfdf9; border: 1px solid #a7a7aa; border-radius: 2px; box-sizing: border-box; padding: 8px 16px; height: auto; margin-bottom: 32px; } answer-question .question_header,[data-is="answer-question"] .question_header{ position: relative; } answer-question .question span,[data-is="answer-question"] .question span{ color: #584836; display: inline-block; } answer-question .question span .question_number,[data-is="answer-question"] .question span .question_number{ font-size: 38px; margin-right: 4px; } answer-question .question_body p,[data-is="answer-question"] .question_body p{ margin-bottom: 16px; word-break: break-all; } answer-question .question_difficulty_hard,[data-is="answer-question"] .question_difficulty_hard{ color: #4776af !important; } answer-question h3,[data-is="answer-question"] h3{ margin-bottom: 16px; font-size: 24px; font-weight: bold; } answer-question h3 span,[data-is="answer-question"] h3 span{ color: #584836; display: inline-block; } answer-question h3 span .question_number,[data-is="answer-question"] h3 span .question_number{ font-size: 38px; margin-right: 4px; } answer-question .radio,[data-is="answer-question"] .radio,answer-question .checkbox,[data-is="answer-question"] .checkbox{ background-color: #fff; vertical-align: middle; cursor: pointer; box-sizing: border-box; } answer-question .question_image_wrapper,[data-is="answer-question"] .question_image_wrapper{ width: 100%; text-align: left; } answer-question .question_image_wrapper img,[data-is="answer-question"] .question_image_wrapper img{ height: auto; max-width: 100%; } answer-question .question_order,[data-is="answer-question"] .question_order{ display: inline-block; margin: 0 auto; position: relative; } answer-question .correct,[data-is="answer-question"] .correct{ position: absolute; bottom: 12px; left: -80px; height: 0px; width: 70px; } answer-question .question_accuracy_rate,[data-is="answer-question"] .question_accuracy_rate{ display: block; position: absolute; right: 0px; top: 16px; font-weight: normal; text-align: right; font-size: 14px; color: #8e8f83; } answer-question .pass_through,[data-is="answer-question"] .pass_through{ text-align: center; font-size: 12px; } answer-question .pass_through a,[data-is="answer-question"] .pass_through a{ color: #3B5998; }', '', function(opts) {
        var self = this;
        var date = new Date();
        this.imagequery = '?'+date.getTime();
        this.question = {
            body: ''
        };
        this.type = 0;
        this.on('mount', function(){
            self.question = self.Question;
            self.type = self.question.type;
            self.update();

            echo.init({
                offset: 300,
                throttle: 50,
                unload: false,
            });
        });

        this.toScrollNextQuestion = function(e) {
            e.preventDefault();
            if (this.order >= self.parent.questions.length) {
                self.parent.checkAnswer(e);
            }
            else {
                $('html,body').animate({
                    scrollTop: $('.question_'+self.parent.questions[this.order].Question.id).offset().top - 30
                },900,'easeInOutQuart');
            }

        }.bind(this)

        this.getAccuracyRate = function(correctCount) {
            if (self.parent.quiz.play_count == 0){
                return '--';
            }

            var rate = correctCount / self.parent.quiz.play_count;
            rate *= 1000;
            rate = Math.floor(rate);
            rate /= 10;
            return rate;
        }.bind(this)
});