← All changes | inc/admin/views/quiz/question-answer.php +126 -126 4.3.8 → 4.4.9 View file →

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