| @@ -1,126 +1,126 @@ | ||
| 1 | -<?php | |
| 2 | -/** | |
| 3 | - * Question answers template. | |
| 4 | - * | |
| 5 | - * @since 3.0.0 | |
| 6 | - */ | |
| 7 | - | |
| 8 | -learn_press_admin_view( 'quiz/question-answer-option' ); | |
| 9 | -?> | |
| 10 | - | |
| 11 | -<script type="text/x-template" id="tmpl-lp-quiz-question-answers"> | |
| 12 | - <div class="quiz-question-data"> | |
| 13 | - <div class="lp-list-questions"> | |
| 14 | - <table class="lp-list-options"> | |
| 15 | - <thead> | |
| 16 | - <tr> | |
| 17 | - <th class="sort"></th> | |
| 18 | - <th class="answer-text"><?php esc_html_e( 'Answers', 'learnpress' ); ?></th> | |
| 19 | - <th class="answer-correct"><?php esc_html_e( 'Correction', 'learnpress' ); ?></th> | |
| 20 | - <th class="actions"></th> | |
| 21 | - </tr> | |
| 22 | - </thead> | |
| 23 | - <tbody> | |
| 24 | - <lp-quiz-question-answer-option v-for="(answer, index) in question.answers" :question="question" :answer="answer" :index="index" :key="index" @changeCorrect="changeCorrect" @nav="navItem"></lp-quiz-question-answer-option> | |
| 25 | - </tbody> | |
| 26 | - </table> | |
| 27 | - </div> | |
| 28 | - <p class="question-button-actions" v-if="addableAnswer"> | |
| 29 | - <button class="button add-question-option-button" type="button" @click="newAnswer"><?php esc_html_e( 'Add option', 'learnpress' ); ?></button> | |
| 30 | - </p> | |
| 31 | - </div> | |
| 32 | -</script> | |
| 33 | - | |
| 34 | -<script type="text/javascript"> | |
| 35 | - jQuery( function($) { | |
| 36 | - var $Vue = window.$Vue || Vue; | |
| 37 | - var $store = window.LP_Quiz_Store; | |
| 38 | - | |
| 39 | - $Vue.component('lp-quiz-question-answers', { | |
| 40 | - template: '#tmpl-lp-quiz-question-answers', | |
| 41 | - props: ['question'], | |
| 42 | - computed: { | |
| 43 | - addableAnswer: function() { | |
| 44 | - return !(String(this.question.type.key) === 'true_or_false'); | |
| 45 | - } | |
| 46 | - }, | |
| 47 | - mounted: function() { | |
| 48 | - var _self = this; | |
| 49 | - var $el = $(_self.$el).find('.lp-list-options tbody'); | |
| 50 | - | |
| 51 | - $el.sortable({ | |
| 52 | - handle: '.sort', | |
| 53 | - axis: 'y', | |
| 54 | - helper: function (e, ui) { | |
| 55 | - var $tr = $('<tr />'), | |
| 56 | - $row = $(e.target).closest('tr'); | |
| 57 | - $row.children().each(function () { | |
| 58 | - var $td = $(this).clone().width($(this).width()) | |
| 59 | - $tr.append($td); | |
| 60 | - }); | |
| 61 | - | |
| 62 | - return $tr; | |
| 63 | - }, | |
| 64 | - update: function () { | |
| 65 | - _self.sort(); | |
| 66 | - } | |
| 67 | - }); | |
| 68 | - }, | |
| 69 | - methods: { | |
| 70 | - sort: function() { | |
| 71 | - | |
| 72 | - var _items = $('.question-item[data-item-id="' + this.question.id + '"] .quiz-question-data .lp-list-questions>.lp-list-options tbody tr'); | |
| 73 | - var _order = []; | |
| 74 | - _items.each(function (index, item) { | |
| 75 | - $(item).find('.order').text((index + 1) + '.'); | |
| 76 | - _order.push($(item).data('answer-id')); | |
| 77 | - }); | |
| 78 | - | |
| 79 | - $store.dispatch('lqs/updateQuestionAnswersOrder', { | |
| 80 | - question_id: this.question.id, | |
| 81 | - order: _order | |
| 82 | - }); | |
| 83 | - }, | |
| 84 | - // change correct answer | |
| 85 | - changeCorrect: function(correct) { | |
| 86 | - $store.dispatch('lqs/updateQuestionCorrectAnswer', { | |
| 87 | - question_id: this.question.id, | |
| 88 | - correct: correct | |
| 89 | - }); | |
| 90 | - }, | |
| 91 | - // new answer option | |
| 92 | - newAnswer: function () { | |
| 93 | - $store.dispatch('lqs/newQuestionAnswer', { | |
| 94 | - question_id: this.question.id, | |
| 95 | - success: function (answer) { | |
| 96 | - $(this.$el).find('tr[data-answer-id="' + answer.question_answer_id + '"] .answer-text input').focus(); | |
| 97 | - }, context: this | |
| 98 | - }); | |
| 99 | - }, | |
| 100 | - // navigation course items | |
| 101 | - navItem: function (payload) { | |
| 102 | - | |
| 103 | - var keyCode = payload.key, | |
| 104 | - order = payload.order; | |
| 105 | - | |
| 106 | - if (keyCode === 38 && order > 0) { | |
| 107 | - this.nav(order - 1); | |
| 108 | - } | |
| 109 | - if (keyCode === 40 || keyCode === 13) { | |
| 110 | - if (order === this.question.answers.length) { | |
| 111 | - // code | |
| 112 | - } else { | |
| 113 | - this.nav(order + 1); | |
| 114 | - } | |
| 115 | - } | |
| 116 | - | |
| 117 | - }, | |
| 118 | - // focus item | |
| 119 | - nav: function (position) { | |
| 120 | - var element = 'div[data-item-id=' + this.question.id + '] tr[data-order-answer=' + position + ']'; | |
| 121 | - ($(element).find('.answer-text input')).focus(); | |
| 122 | - } | |
| 123 | - } | |
| 124 | - }); | |
| 125 | - }); | |
| 126 | -</script> | |
| 1 | +<?php | |
| 2 | +/** | |
| 3 | + * Question answers template. | |
| 4 | + * | |
| 5 | + * @since 3.0.0 | |
| 6 | + */ | |
| 7 | + | |
| 8 | +learn_press_admin_view( 'quiz/question-answer-option' ); | |
| 9 | +?> | |
| 10 | + | |
| 11 | +<script type="text/x-template" id="tmpl-lp-quiz-question-answers"> | |
| 12 | + <div class="quiz-question-data"> | |
| 13 | + <div class="lp-list-questions"> | |
| 14 | + <table class="lp-list-options"> | |
| 15 | + <thead> | |
| 16 | + <tr> | |
| 17 | + <th class="sort"></th> | |
| 18 | + <th class="answer-text"><?php esc_html_e( 'Answers', 'learnpress' ); ?></th> | |
| 19 | + <th class="answer-correct"><?php esc_html_e( 'Correction', 'learnpress' ); ?></th> | |
| 20 | + <th class="actions"></th> | |
| 21 | + </tr> | |
| 22 | + </thead> | |
| 23 | + <tbody> | |
| 24 | + <lp-quiz-question-answer-option v-for="(answer, index) in question.answers" :question="question" :answer="answer" :index="index" :key="index" @changeCorrect="changeCorrect" @nav="navItem"></lp-quiz-question-answer-option> | |
| 25 | + </tbody> | |
| 26 | + </table> | |
| 27 | + </div> | |
| 28 | + <p class="question-button-actions" v-if="addableAnswer"> | |
| 29 | + <button class="button add-question-option-button" type="button" @click="newAnswer"><?php esc_html_e( 'Add option', 'learnpress' ); ?></button> | |
| 30 | + </p> | |
| 31 | + </div> | |
| 32 | +</script> | |
| 33 | + | |
| 34 | +<script type="text/javascript"> | |
| 35 | + jQuery( function($) { | |
| 36 | + var $Vue = window.$Vue || Vue; | |
| 37 | + var $store = window.LP_Quiz_Store; | |
| 38 | + | |
| 39 | + $Vue.component('lp-quiz-question-answers', { | |
| 40 | + template: '#tmpl-lp-quiz-question-answers', | |
| 41 | + props: ['question'], | |
| 42 | + computed: { | |
| 43 | + addableAnswer: function() { | |
| 44 | + return !(String(this.question.type.key) === 'true_or_false'); | |
| 45 | + } | |
| 46 | + }, | |
| 47 | + mounted: function() { | |
| 48 | + var _self = this; | |
| 49 | + var $el = $(_self.$el).find('.lp-list-options tbody'); | |
| 50 | + | |
| 51 | + $el.sortable({ | |
| 52 | + handle: '.sort', | |
| 53 | + axis: 'y', | |
| 54 | + helper: function (e, ui) { | |
| 55 | + var $tr = $('<tr />'), | |
| 56 | + $row = $(e.target).closest('tr'); | |
| 57 | + $row.children().each(function () { | |
| 58 | + var $td = $(this).clone().width($(this).width()) | |
| 59 | + $tr.append($td); | |
| 60 | + }); | |
| 61 | + | |
| 62 | + return $tr; | |
| 63 | + }, | |
| 64 | + update: function () { | |
| 65 | + _self.sort(); | |
| 66 | + } | |
| 67 | + }); | |
| 68 | + }, | |
| 69 | + methods: { | |
| 70 | + sort: function() { | |
| 71 | + | |
| 72 | + var _items = $('.question-item[data-item-id="' + this.question.id + '"] .quiz-question-data .lp-list-questions>.lp-list-options tbody tr'); | |
| 73 | + var _order = []; | |
| 74 | + _items.each(function (index, item) { | |
| 75 | + $(item).find('.order').text((index + 1) + '.'); | |
| 76 | + _order.push($(item).data('answer-id')); | |
| 77 | + }); | |
| 78 | + | |
| 79 | + $store.dispatch('lqs/updateQuestionAnswersOrder', { | |
| 80 | + question_id: this.question.id, | |
| 81 | + order: _order | |
| 82 | + }); | |
| 83 | + }, | |
| 84 | + // change correct answer | |
| 85 | + changeCorrect: function(correct) { | |
| 86 | + $store.dispatch('lqs/updateQuestionCorrectAnswer', { | |
| 87 | + question_id: this.question.id, | |
| 88 | + correct: correct | |
| 89 | + }); | |
| 90 | + }, | |
| 91 | + // new answer option | |
| 92 | + newAnswer: function () { | |
| 93 | + $store.dispatch('lqs/newQuestionAnswer', { | |
| 94 | + question_id: this.question.id, | |
| 95 | + success: function (answer) { | |
| 96 | + $(this.$el).find('tr[data-answer-id="' + answer.question_answer_id + '"] .answer-text input').focus(); | |
| 97 | + }, context: this | |
| 98 | + }); | |
| 99 | + }, | |
| 100 | + // navigation course items | |
| 101 | + navItem: function (payload) { | |
| 102 | + | |
| 103 | + var keyCode = payload.key, | |
| 104 | + order = payload.order; | |
| 105 | + | |
| 106 | + if (keyCode === 38 && order > 0) { | |
| 107 | + this.nav(order - 1); | |
| 108 | + } | |
| 109 | + if (keyCode === 40 || keyCode === 13) { | |
| 110 | + if (order === this.question.answers.length) { | |
| 111 | + // code | |
| 112 | + } else { | |
| 113 | + this.nav(order + 1); | |
| 114 | + } | |
| 115 | + } | |
| 116 | + | |
| 117 | + }, | |
| 118 | + // focus item | |
| 119 | + nav: function (position) { | |
| 120 | + var element = 'div[data-item-id=' + this.question.id + '] tr[data-order-answer=' + position + ']'; | |
| 121 | + ($(element).find('.answer-text input')).focus(); | |
| 122 | + } | |
| 123 | + } | |
| 124 | + }); | |
| 125 | + }); | |
| 126 | +</script> | |