| @@ -1,138 +1,138 @@ | ||
| 1 | -<?php | |
| 2 | -/** | |
| 3 | - * Admin question editor: question answer template. | |
| 4 | - * | |
| 5 | - * @since 3.0.0 | |
| 6 | - */ | |
| 7 | - | |
| 8 | -learn_press_admin_view( 'question/option' ); | |
| 9 | -?> | |
| 10 | - | |
| 11 | -<script type="text/x-template" id="tmpl-lp-question-answer"> | |
| 12 | - <div class="lp-box-data-content"> | |
| 13 | - <table class="lp-list-options list-question-answers"> | |
| 14 | - <thead> | |
| 15 | - <tr> | |
| 16 | - <th class="sort"></th> | |
| 17 | - <th class="answer-text"><?php esc_html_e( 'Answers', 'learnpress' ); ?></th> | |
| 18 | - <th class="answer-correct"><?php esc_html_e( 'Correction', 'learnpress' ); ?></th> | |
| 19 | - <th class="actions"></th> | |
| 20 | - </tr> | |
| 21 | - </thead> | |
| 22 | - <tbody> | |
| 23 | - <lp-question-answer-option v-for="(answer, index) in answers" :key="index" :index="index" :type="type" :radio="radio" :number="number" :answer="answer" @updateTitle="updateTitle" @changeCorrect="changeCorrect" @deleteAnswer="deleteAnswer"></lp-question-answer-option> | |
| 24 | - </tbody> | |
| 25 | - </table> | |
| 26 | - <p class="add-answer" v-if="addable"> | |
| 27 | - <button class="button add-question-option-button" type="button" @click="newAnswer"><?php esc_html_e( 'Add a new Answer', 'learnpress' ); ?></button> | |
| 28 | - </p> | |
| 29 | - </div> | |
| 30 | -</script> | |
| 31 | - | |
| 32 | -<script type="text/javascript"> | |
| 33 | - jQuery( function( $ ) { | |
| 34 | - var $store = window.LP_Question_Store; | |
| 35 | - | |
| 36 | - window.$Vue = window.$Vue || Vue; | |
| 37 | - | |
| 38 | - $Vue.component('lp-question-answer', { | |
| 39 | - template: '#tmpl-lp-question-answer', | |
| 40 | - props: ['type', 'answers'], | |
| 41 | - computed: { | |
| 42 | - // check type radio answer type | |
| 43 | - radio: function() { | |
| 44 | - return this.type === 'true_or_false' || this.type === 'single_choice'; | |
| 45 | - }, | |
| 46 | - // number answer | |
| 47 | - number: function() { | |
| 48 | - return this.answers.length; | |
| 49 | - }, | |
| 50 | - // addable new answer | |
| 51 | - addable: function() { | |
| 52 | - return this.type !== 'true_or_false'; | |
| 53 | - }, | |
| 54 | - // question status | |
| 55 | - status: function() { | |
| 56 | - return $store.getters['status']; | |
| 57 | - }, | |
| 58 | - // get draft status | |
| 59 | - draft: function() { | |
| 60 | - return $store.getters['autoDraft']; | |
| 61 | - } | |
| 62 | - }, | |
| 63 | - created: function() { | |
| 64 | - var _self = this; | |
| 65 | - | |
| 66 | - setTimeout( function() { | |
| 67 | - var $el = $('.list-question-answers tbody'); | |
| 68 | - | |
| 69 | - $el.sortable({ | |
| 70 | - handle: '.sort', | |
| 71 | - axis: 'y', | |
| 72 | - helper: function(e, ui) { | |
| 73 | - var $tr = $('<tr />'), | |
| 74 | - $row = $(e.target).closest('tr'); | |
| 75 | - | |
| 76 | - $row.children().each( function() { | |
| 77 | - var $td = $(this).clone().width( $(this).width() ) | |
| 78 | - $tr.append($td); | |
| 79 | - }); | |
| 80 | - | |
| 81 | - return $tr; | |
| 82 | - }, | |
| 83 | - start: function() { | |
| 84 | - | |
| 85 | - }, | |
| 86 | - update: function() { | |
| 87 | - _self.sort(); | |
| 88 | - } | |
| 89 | - }); | |
| 90 | - }, 1000); | |
| 91 | - | |
| 92 | - | |
| 93 | - }, | |
| 94 | - methods: { | |
| 95 | - // sort answer options | |
| 96 | - sort: function() { | |
| 97 | - var _items = $('.list-question-answers tbody>tr.answer-option'); | |
| 98 | - var _order = []; | |
| 99 | - _items.each( function( index, item ) { | |
| 100 | - $(item).find('.order').text( (index + 1) + '.'); | |
| 101 | - _order.push( $(item).data('answer-id') ); | |
| 102 | - }); | |
| 103 | - | |
| 104 | - $store.dispatch('updateAnswersOrder', _order); | |
| 105 | - | |
| 106 | - }, | |
| 107 | - // change answer title | |
| 108 | - updateTitle: function(answer) { | |
| 109 | - //if (!this.draft) { | |
| 110 | - // update title | |
| 111 | - $store.dispatch('updateAnswerTitle', answer); | |
| 112 | - //} | |
| 113 | - }, | |
| 114 | - // change correct answer | |
| 115 | - changeCorrect: function(correct) { | |
| 116 | - if (!this.draft) { | |
| 117 | - $store.dispatch('updateCorrectAnswer', correct); | |
| 118 | - } | |
| 119 | - }, | |
| 120 | - // delete answer | |
| 121 | - deleteAnswer: function(answer) { | |
| 122 | - $store.dispatch('deleteAnswer', answer); | |
| 123 | - }, | |
| 124 | - // new answer option | |
| 125 | - newAnswer: function() { | |
| 126 | - // new answer | |
| 127 | - $store.dispatch('newAnswer', { | |
| 128 | - answer: { | |
| 129 | - value: '', | |
| 130 | - title: '' | |
| 131 | - } | |
| 132 | - }); | |
| 133 | - } | |
| 134 | - } | |
| 135 | - }) | |
| 136 | - }); | |
| 137 | - | |
| 138 | -</script> | |
| 1 | +<?php | |
| 2 | +/** | |
| 3 | + * Admin question editor: question answer template. | |
| 4 | + * | |
| 5 | + * @since 3.0.0 | |
| 6 | + */ | |
| 7 | + | |
| 8 | +learn_press_admin_view( 'question/option' ); | |
| 9 | +?> | |
| 10 | + | |
| 11 | +<script type="text/x-template" id="tmpl-lp-question-answer"> | |
| 12 | + <div class="lp-box-data-content"> | |
| 13 | + <table class="lp-list-options list-question-answers"> | |
| 14 | + <thead> | |
| 15 | + <tr> | |
| 16 | + <th class="sort"></th> | |
| 17 | + <th class="answer-text"><?php esc_html_e( 'Answers', 'learnpress' ); ?></th> | |
| 18 | + <th class="answer-correct"><?php esc_html_e( 'Correction', 'learnpress' ); ?></th> | |
| 19 | + <th class="actions"></th> | |
| 20 | + </tr> | |
| 21 | + </thead> | |
| 22 | + <tbody> | |
| 23 | + <lp-question-answer-option v-for="(answer, index) in answers" :key="index" :index="index" :type="type" :radio="radio" :number="number" :answer="answer" @updateTitle="updateTitle" @changeCorrect="changeCorrect" @deleteAnswer="deleteAnswer"></lp-question-answer-option> | |
| 24 | + </tbody> | |
| 25 | + </table> | |
| 26 | + <p class="add-answer" v-if="addable"> | |
| 27 | + <button class="button add-question-option-button" type="button" @click="newAnswer"><?php esc_html_e( 'Add a new Answer', 'learnpress' ); ?></button> | |
| 28 | + </p> | |
| 29 | + </div> | |
| 30 | +</script> | |
| 31 | + | |
| 32 | +<script type="text/javascript"> | |
| 33 | + jQuery( function( $ ) { | |
| 34 | + var $store = window.LP_Question_Store; | |
| 35 | + | |
| 36 | + window.$Vue = window.$Vue || Vue; | |
| 37 | + | |
| 38 | + $Vue.component('lp-question-answer', { | |
| 39 | + template: '#tmpl-lp-question-answer', | |
| 40 | + props: ['type', 'answers'], | |
| 41 | + computed: { | |
| 42 | + // check type radio answer type | |
| 43 | + radio: function() { | |
| 44 | + return this.type === 'true_or_false' || this.type === 'single_choice'; | |
| 45 | + }, | |
| 46 | + // number answer | |
| 47 | + number: function() { | |
| 48 | + return this.answers.length; | |
| 49 | + }, | |
| 50 | + // addable new answer | |
| 51 | + addable: function() { | |
| 52 | + return this.type !== 'true_or_false'; | |
| 53 | + }, | |
| 54 | + // question status | |
| 55 | + status: function() { | |
| 56 | + return $store.getters['status']; | |
| 57 | + }, | |
| 58 | + // get draft status | |
| 59 | + draft: function() { | |
| 60 | + return $store.getters['autoDraft']; | |
| 61 | + } | |
| 62 | + }, | |
| 63 | + created: function() { | |
| 64 | + var _self = this; | |
| 65 | + | |
| 66 | + setTimeout( function() { | |
| 67 | + var $el = $('.list-question-answers tbody'); | |
| 68 | + | |
| 69 | + $el.sortable({ | |
| 70 | + handle: '.sort', | |
| 71 | + axis: 'y', | |
| 72 | + helper: function(e, ui) { | |
| 73 | + var $tr = $('<tr />'), | |
| 74 | + $row = $(e.target).closest('tr'); | |
| 75 | + | |
| 76 | + $row.children().each( function() { | |
| 77 | + var $td = $(this).clone().width( $(this).width() ) | |
| 78 | + $tr.append($td); | |
| 79 | + }); | |
| 80 | + | |
| 81 | + return $tr; | |
| 82 | + }, | |
| 83 | + start: function() { | |
| 84 | + | |
| 85 | + }, | |
| 86 | + update: function() { | |
| 87 | + _self.sort(); | |
| 88 | + } | |
| 89 | + }); | |
| 90 | + }, 1000); | |
| 91 | + | |
| 92 | + | |
| 93 | + }, | |
| 94 | + methods: { | |
| 95 | + // sort answer options | |
| 96 | + sort: function() { | |
| 97 | + var _items = $('.list-question-answers tbody>tr.answer-option'); | |
| 98 | + var _order = []; | |
| 99 | + _items.each( function( index, item ) { | |
| 100 | + $(item).find('.order').text( (index + 1) + '.'); | |
| 101 | + _order.push( $(item).data('answer-id') ); | |
| 102 | + }); | |
| 103 | + | |
| 104 | + $store.dispatch('updateAnswersOrder', _order); | |
| 105 | + | |
| 106 | + }, | |
| 107 | + // change answer title | |
| 108 | + updateTitle: function(answer) { | |
| 109 | + //if (!this.draft) { | |
| 110 | + // update title | |
| 111 | + $store.dispatch('updateAnswerTitle', answer); | |
| 112 | + //} | |
| 113 | + }, | |
| 114 | + // change correct answer | |
| 115 | + changeCorrect: function(correct) { | |
| 116 | + if (!this.draft) { | |
| 117 | + $store.dispatch('updateCorrectAnswer', correct); | |
| 118 | + } | |
| 119 | + }, | |
| 120 | + // delete answer | |
| 121 | + deleteAnswer: function(answer) { | |
| 122 | + $store.dispatch('deleteAnswer', answer); | |
| 123 | + }, | |
| 124 | + // new answer option | |
| 125 | + newAnswer: function() { | |
| 126 | + // new answer | |
| 127 | + $store.dispatch('newAnswer', { | |
| 128 | + answer: { | |
| 129 | + value: '', | |
| 130 | + title: '' | |
| 131 | + } | |
| 132 | + }); | |
| 133 | + } | |
| 134 | + } | |
| 135 | + }) | |
| 136 | + }); | |
| 137 | + | |
| 138 | +</script> | |