| 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> |
| 139 |
|
