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