riot.tag2('layer-answered', '<div class="block block_result"> <p class="quiz_title"> <b>{title}</b> </p> <p class="result_score"> <span if="{count == score}" class="result_score_count"> 全問正解！！ </span> <span if="{count != score && score >= 1}"> {count}問中 <span class="result_score_count">{score}問 正解！</span> </span> <span if="{0 == score}" class="result_score_count"> 全問不正解… </span> </p> <p class="perfect_message" if="{!!perfectMessage}"> <nl2br text="{perfectMessage}"></nl2br> </p> <ul class="answer_list"> <li each="{result, i in results}" class="{result.correct ? \'correct\' : \'discorrect\'}"> <span>{i+1}問目: {result.correct ? \'○\' : \'✕\'}</span> <a href="#" onclick="{showExplain.bind(this, result.question_id)}">正解と問題文を確認<span if="{!!result.question.commentary}">【解説あり】</span></a> <div class="question_explain" ref="explain_{result.question_id}"> <p class="question_explain_row"> <b class="question_explain_answer">正解：</b><nl2br text="{result.answer}"></nl2br> </p> <p if="{!!result.question.commentary}" class="question_explain_row"> <b>解説：</b><nl2br text="{result.question.commentary}"></nl2br> </p> <p class="question_explain_row"> <b class="question_explain_question">問題：</b><nl2br text="{result.question.body}"></nl2br> </p> <img if="{result.question.image_url}" riot-src="{result.question.image_url}" alt=""> </div> </li> </ul> <p class="heading_message">結果をシェア!!</p> <div class="sns_links"> <a href="#" class="twitter share_twitter" onclick="window.open(this.href, \'tweetwindow\', \'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1\'); return false;" rel="nofollow"> <i class="fab fa-twitter"></i> <span>Twitter</span> </a> <a href="#" class="facebook share_fb" onclick="window.open(this.href, \'fbwindow\', \'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1\'); return false;" rel="nofollow"> <i class="fab fa-facebook"></i> <span>facebook</span> </a> <a href="#" class="line share_line" onclick="window.open(this.href, \'linewindow\', \'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1\'); return false;" rel="nofollow"> <i class="fab fa-line"></i> <span>LINE</span> </a> </div> <div> <ins class="adsbygoogle modal_ad" style="display:block" data-ad-client="ca-pub-5938675457512983" data-ad-slot="3287274014" data-ad-format="auto" data-full-width-responsive="true"></ins> </div> <p class="heading_message">こちらも挑戦してみませんか？</p> <div> <list-quiz ref="listQuiz" quizs="{recommendQuizzes}"></list-quiz> </div> <a href="#" class="button button_retry" onclick="{retry}"> クイズに再挑戦 </a> <div> <a href="/" class="nav">クイズメーカーのトップページへ</a> </div> </div>', 'layer-answered { z-index: 100; display: none; width: 100%; min-height: 100vh; height: auto; } layer-answered .block,[data-is="layer-answered"] .block{ position: relative; box-sizing: border-box; width: 100%; max-width: 98%; margin: 16px auto 0; border: 1px solid #F7F7F7; border-radius: 4px; background-color: #FFF; padding: 16px 16px 60px 16px; min-height: 100%; } layer-answered .block_result,[data-is="layer-answered"] .block_result{ text-align: center; } layer-answered .block_result .result_score,[data-is="layer-answered"] .block_result .result_score{ font-weight: bold; font-size: 20px; margin: 28px 0; } layer-answered .block_result .result_score_count,[data-is="layer-answered"] .block_result .result_score_count{ color: #db164a; font-size: 200%; } layer-answered .quiz_title,[data-is="layer-answered"] .quiz_title{ font-weight: bold; font-size: 22px; } layer-answered .heading_message,[data-is="layer-answered"] .heading_message{ font-weight: bold; margin: 16px auto; } layer-answered .sns_links,[data-is="layer-answered"] .sns_links{ display: flex; margin: 0 auto 32px; max-width: 98%; width: 600px; flex-direction: row; justify-content: space-evenly; } layer-answered .sns_links a,[data-is="layer-answered"] .sns_links a{ border: 2px solid; border-radius: 4px; font-weight: bold; padding: 16px; box-sizing: border-box; width: 180px; text-align: center; position: relative; color: #FFF; } layer-answered .sns_links a span,[data-is="layer-answered"] .sns_links a span{ padding-left: 18px; } layer-answered .sns_links a .fab,[data-is="layer-answered"] .sns_links a .fab{ position: absolute; left: 12px; display: block; font-size: 28px; font-weight: normal; } layer-answered .sns_links .twitter,[data-is="layer-answered"] .sns_links .twitter{ background-color: #55acee; border-color: #124469; } layer-answered .sns_links .facebook,[data-is="layer-answered"] .sns_links .facebook{ background-color: #3B5998; border-color: #181269; } layer-answered .sns_links .line,[data-is="layer-answered"] .sns_links .line{ background-color: #00b900; border-color: #126936; } layer-answered .answer_list,[data-is="layer-answered"] .answer_list{ margin: 0 0 32px; } layer-answered .answer_list li,[data-is="layer-answered"] .answer_list li{ margin: 0 0 8px; } layer-answered .answer_list li a,[data-is="layer-answered"] .answer_list li a{ color: #085bbf; text-decoration: underline; display: inline-block; margin-left: 8px; font-size: 12px; } layer-answered .answer_list .correct,[data-is="layer-answered"] .answer_list .correct{ color: #db164a; } layer-answered .answer_list .discorrect,[data-is="layer-answered"] .answer_list .discorrect{ color: #3B5998; } layer-answered .answer_list .question_explain,[data-is="layer-answered"] .answer_list .question_explain{ color: #191916; box-sizing: border-box; max-width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #333; width: 600px; margin: 8px auto; display: none; font-size: 14px; } layer-answered .answer_list .question_explain p,[data-is="layer-answered"] .answer_list .question_explain p{ text-align: left; } layer-answered .answer_list .question_explain img,[data-is="layer-answered"] .answer_list .question_explain img{ max-width: 100%; } layer-answered .answer_list .question_explain_answer,[data-is="layer-answered"] .answer_list .question_explain_answer{ color: #db164a; font-weight: bold; } layer-answered .answer_list .question_explain_question,[data-is="layer-answered"] .answer_list .question_explain_question{ color: #3B5998; font-weight: bold; } layer-answered .answer_list .question_explain_row,[data-is="layer-answered"] .answer_list .question_explain_row{ word-break: break-all; margin-bottom: 16px; } layer-answered .button_close,[data-is="layer-answered"] .button_close{ position: absolute; top: 8px; right: 8px; padding: 8px; display: inline-block; color: #db164a; border: 1px solid #db164a; border-radius: 4px; font-size: 10px; } layer-answered .button_close:hover,[data-is="layer-answered"] .button_close:hover{ color: #ffffff; background-color: #db164a; } layer-answered list-quiz .quiz_list li,[data-is="layer-answered"] list-quiz .quiz_list li{ border: 1px solid #5f697e; border-radius: 4px; } layer-answered .button,[data-is="layer-answered"] .button{ display: block; width: 600px; max-width: 98%; text-align: center; margin: 0 auto 16px; } layer-answered .button_retry,[data-is="layer-answered"] .button_retry{ color: #085bbf; border: 2px solid #085bbf; border-radius: 16px; font-weight: bold; box-sizing: border-box; padding: 8px 0; margin: 32px auto; } layer-answered .button_retry_wrapper,[data-is="layer-answered"] .button_retry_wrapper{ margin: 16px 0; } layer-answered .button_retry:hover,[data-is="layer-answered"] .button_retry:hover{ background-color: #085bbf; color: #fff; } layer-answered .nav,[data-is="layer-answered"] .nav{ color: #085bbf; text-align: center; display: block; margin: 16px 0; text-decoration: underline; box-sizing: border-box; } layer-answered list-quiz,[data-is="layer-answered"] list-quiz{ text-align: left; } layer-answered .perfect_message,[data-is="layer-answered"] .perfect_message{ box-sizing: border-box; padding: 16px 8px; margin: 8px auto; color: #00443f; background-color: #f0faf9; word-break: break-all; } @media (max-width: 450px) { layer-answered .sns_links a,[data-is="layer-answered"] .sns_links a{ border-radius: 0px; } layer-answered .sns_links a span,[data-is="layer-answered"] .sns_links a span{ display: none; padding-left: 18px; } layer-answered .sns_links a .fab,[data-is="layer-answered"] .sns_links a .fab{ position: inherit; left: inherit; display: inline; font-size: 28px; } }', '', function(opts) {
        var self = this;
        this.title = '';
        this.score = 0;
        this.count = 0;

        this.recommendQuizzes = [];
        this.results = [];
        this.perfectMessage = '';

        var sumojiArr = [
            '①','②','③','④','⑤','⑥','⑦','⑧','⑨','⑩'
        ];

        this.showExplain = function(question_id, event) {
            event.preventDefault();
            $(self.refs['explain_'+question_id]).slideDown("300");
        }.bind(this)

        obs.on('showResultAnsweredLayer', function(data) {
            $('app-header').css('position','fixed');
            $('app-header').css('zIndex','1000');
            $('.quiz_inner').css({'paddingBottom' : '16px'});
            $('.content_inner').css('paddingBottom','16px');

            for (var key in data) {
                if (data.hasOwnProperty(key)) {
                    var element = data[key];
                    self.results.push(element);
                    if (element.correct) {
                        self.score += 1;
                    }
                }
            }
            self.count = self.results.length;
            self.title = self.parent.quiz.title;
            self.perfectMessage = self.parent.perfectMessage;

            var text = '';

            var quizTitle = encodeURIComponent(self.title);
            var path = location.pathname;
            if (self.count == self.score) {
                text = quizTitle + "に全問正解しました！！";
            }
            else if(self.count != self.score && self.score >= 1) {
                text = quizTitle + " " + self.count+"問中 "+self.score+"問 正解しました！%0a";
                var corrects = ' ';

                $.each(self.results,function(i, val){
                    corrects += sumojiArr[i]+''+(val.correct ? '○' : '✕')+ ' ';
                });
                text += '【' + corrects + '】';
            }
            else if(0 == self.score) {
                text = quizTitle + "、全問不正解でした…";
            }

            var tags = '';
            for (var i = 0; i < self.parent.quizTags.length; i++) {
                tags += '%20%23'+encodeURI(self.parent.quizTags[i].ViewTagQuiz.tag_value).replace('#','%23');
            }

            var via = '';
            if (self.parent.quiz.is_share_id) {
                via = 'via='+self.parent.quiz.user_name+'&';
            }

            var twitterHref = 'https://twitter.com/intent/tweet?'+via+'related=quizmaker_minq&text='+text+'%0a%23クイズメーカー'+tags+'%0a&url=https://quiz-maker.site'+path;
            $('.share_twitter').attr('href', twitterHref);

            var fbHref = 'http://www.facebook.com/share.php?u=https://quiz-maker.site'+path;
            $('.share_fb').attr('href', fbHref);

            var lineHref = 'https://social-plugins.line.me/lineit/share?url=https://quiz-maker.site'+path;
            $('.share_line').attr('href', lineHref);

            $.ajax(SERVER_URL + '/quizzes/recomend', {
                method: 'post'
            })
            .done(function(data){
                self.recommendQuizzes = data;
                self.refs.listQuiz.setQuizs(self.recommendQuizzes);
                self.update();

            });
            self.update();
            $(self.root).slideDown(300, function(){
                setTimeout(function(){
                    $("ins.modal_ad").each(function() {
                        if (!window.adsbygoogle) {
                            window.adsbygoogle = [];
                        }
                        window.adsbygoogle.push({});
                    });
                },2000);
            });
                $('html,body').animate({
                    scrollTop: $(self.root).offset().top - 48
                },900,'easeInOutQuart');
        });

        this.on('mount', function(){
        });

        this.retry = function(event) {
            event.preventDefault();
            location.reload(false);
        }.bind(this)
});