← All changes | inc/admin/views/quiz/question-answer-option.php +128 -128 4.3.9 → 4.4.9 View file →

		@@ -1,128 +1,128 @@
1		-<?php
2		-/**
3		- * Question answer item template.
4		- *
5		- * @since 3.0.0
6		- */
7		-?>
8		-
9		-<script type="text/x-template" id="tmpl-lp-quiz-question-answer-option">
10		- <tr class="answer-option" :class="[isNew() || isUpdating() ? 'empty-option' : '']" :data-answer-id="answer.question_answer_id" :data-order-answer="index">
11		- <td class="sort lp-sortable-handle"><?php learn_press_admin_view( 'svg-icon' ); ?></td>
12		- <td class="answer-text">
13		- <input type="text" v-model="answer.title" @change="changeTitle" @keyup.enter="updateTitle" @blur="updateTitle" @keyup="keyUp"/>
14		- </td>
15		- <td class="answer-correct lp-answer-check">
16		- <input :type="radio ? 'radio' : 'checkbox'" :checked="correct" :value="answer.value" :name="name" @change="changeCorrect">
17		- </td>
18		- <td class="actions lp-toolbar-buttons">
19		- <div class="lp-toolbar-btn lp-btn-remove" v-if="deletable">
20		- <a class="lp-btn-icon dashicons dashicons-trash" @click="deleteAnswer"></a>
21		- </div>
22		- </td>
23		- </tr>
24		-</script>
25		-
26		-<script type="text/javascript">
27		- jQuery( function($) {
28		- var $Vue = window.$Vue || Vue;
29		- var $store = window.LP_Quiz_Store;
30		-
31		- $Vue.component('lp-quiz-question-answer-option', {
32		- template: '#tmpl-lp-quiz-question-answer-option',
33		- props: ['question', 'answer', 'index'],
34		- data: function() {
35		- return {
36		- title: this.answer.title,
37		- changed: false,
38		- updating: false
39		- }
40		- },
41		- watch: {
42		- status: function (newStatus) {
43		- if (newStatus !== 'updating') {
44		- this.updating = false;
45		- }
46		- return newStatus;
47		- }
48		- },
49		- computed: {
50		- // correct answer
51		- correct: function () {
52		- return this.answer.is_true === 'yes';
53		- },
54		- // radio
55		- radio: function () {
56		- var type = this.question.type.key;
57		-
58		- return type === 'true_or_false' || type === 'single_choice';
59		- },
60		- // correct answer input name
61		- name: function () {
62		- return 'answer_question[' + this.question.id + ']'
63		- },
64		- numberCorrect: function () {
65		- var correct = 0;
66		- this.question.answers.forEach(function (answer) {
67		- if (answer.is_true === 'yes') {
68		- correct += 1;
69		- }
70		- });
71		- return correct;
72		- },
73		- // deletable answer option
74		- deletable: function () {
75		- return !((this.answer.is_true === 'yes' && this.numberCorrect === 1) || (this.question.type.key === 'true_or_false') || this.question.answers.length < 3);
76		- },
77		- status: function () {
78		- return $store.getters['lqs/statusUpdateQuestionItem'][this.question.id] || '';
79		- }
80		- },
81		- methods: {
82		- isNew: function () {
83		- return isNaN(this.answer.question_answer_id)
84		- },
85		- changeCorrect: function (e) {
86		- this.updating = true;
87		-
88		- this.answer.is_true = (e.target.checked) ? 'yes' : '';
89		- this.$emit('changeCorrect', this.answer);
90		- },
91		- // detect change answer title
92		- changeTitle: function () {
93		- this.changed = true;
94		- },
95		- // update answer option title
96		- updateTitle: function () {
97		- if (this.changed) {
98		- this.updating = true;
99		- $store.dispatch('lqs/updateQuestionAnswerTitle', {
100		- question_id: this.question.id,
101		- answer: this.answer
102		- });
103		- }
104		- },
105		- // deletable answer
106		- deleteAnswer: function () {
107		- $store.dispatch('lqs/deleteQuestionAnswer', {
108		- question_id: this.question.id,
109		- answer_id: this.answer.question_answer_id
110		- });
111		- },
112		- isUpdating: function () {
113		- return this.updating;
114		- },
115		- // navigation answer option items
116		- keyUp: function (event) {
117		- var keyCode = event.keyCode;
118		- // escape update answer option items text
119		- if (keyCode === 27) {
120		- this.answer.title = this.title;
121		- } else {
122		- this.$emit('nav', {key: event.keyCode, order: this.index});
123		- }
124		- }
125		- }
126		- });
127		- });
128		-</script>
	1	+<?php
	2	+/**
	3	+ * Question answer item template.
	4	+ *
	5	+ * @since 3.0.0
	6	+ */
	7	+?>
	8	+
	9	+<script type="text/x-template" id="tmpl-lp-quiz-question-answer-option">
	10	+ <tr class="answer-option" :class="[isNew() || isUpdating() ? 'empty-option' : '']" :data-answer-id="answer.question_answer_id" :data-order-answer="index">
	11	+ <td class="sort lp-sortable-handle"><?php learn_press_admin_view( 'svg-icon' ); ?></td>
	12	+ <td class="answer-text">
	13	+ <input type="text" v-model="answer.title" @change="changeTitle" @keyup.enter="updateTitle" @blur="updateTitle" @keyup="keyUp"/>
	14	+ </td>
	15	+ <td class="answer-correct lp-answer-check">
	16	+ <input :type="radio ? 'radio' : 'checkbox'" :checked="correct" :value="answer.value" :name="name" @change="changeCorrect">
	17	+ </td>
	18	+ <td class="actions lp-toolbar-buttons">
	19	+ <div class="lp-toolbar-btn lp-btn-remove" v-if="deletable">
	20	+ <a class="lp-btn-icon dashicons dashicons-trash" @click="deleteAnswer"></a>
	21	+ </div>
	22	+ </td>
	23	+ </tr>
	24	+</script>
	25	+
	26	+<script type="text/javascript">
	27	+ jQuery( function($) {
	28	+ var $Vue = window.$Vue || Vue;
	29	+ var $store = window.LP_Quiz_Store;
	30	+
	31	+ $Vue.component('lp-quiz-question-answer-option', {
	32	+ template: '#tmpl-lp-quiz-question-answer-option',
	33	+ props: ['question', 'answer', 'index'],
	34	+ data: function() {
	35	+ return {
	36	+ title: this.answer.title,
	37	+ changed: false,
	38	+ updating: false
	39	+ }
	40	+ },
	41	+ watch: {
	42	+ status: function (newStatus) {
	43	+ if (newStatus !== 'updating') {
	44	+ this.updating = false;
	45	+ }
	46	+ return newStatus;
	47	+ }
	48	+ },
	49	+ computed: {
	50	+ // correct answer
	51	+ correct: function () {
	52	+ return this.answer.is_true === 'yes';
	53	+ },
	54	+ // radio
	55	+ radio: function () {
	56	+ var type = this.question.type.key;
	57	+
	58	+ return type === 'true_or_false' || type === 'single_choice';
	59	+ },
	60	+ // correct answer input name
	61	+ name: function () {
	62	+ return 'answer_question[' + this.question.id + ']'
	63	+ },
	64	+ numberCorrect: function () {
	65	+ var correct = 0;
	66	+ this.question.answers.forEach(function (answer) {
	67	+ if (answer.is_true === 'yes') {
	68	+ correct += 1;
	69	+ }
	70	+ });
	71	+ return correct;
	72	+ },
	73	+ // deletable answer option
	74	+ deletable: function () {
	75	+ return !((this.answer.is_true === 'yes' && this.numberCorrect === 1) || (this.question.type.key === 'true_or_false') || this.question.answers.length < 3);
	76	+ },
	77	+ status: function () {
	78	+ return $store.getters['lqs/statusUpdateQuestionItem'][this.question.id] || '';
	79	+ }
	80	+ },
	81	+ methods: {
	82	+ isNew: function () {
	83	+ return isNaN(this.answer.question_answer_id)
	84	+ },
	85	+ changeCorrect: function (e) {
	86	+ this.updating = true;
	87	+
	88	+ this.answer.is_true = (e.target.checked) ? 'yes' : '';
	89	+ this.$emit('changeCorrect', this.answer);
	90	+ },
	91	+ // detect change answer title
	92	+ changeTitle: function () {
	93	+ this.changed = true;
	94	+ },
	95	+ // update answer option title
	96	+ updateTitle: function () {
	97	+ if (this.changed) {
	98	+ this.updating = true;
	99	+ $store.dispatch('lqs/updateQuestionAnswerTitle', {
	100	+ question_id: this.question.id,
	101	+ answer: this.answer
	102	+ });
	103	+ }
	104	+ },
	105	+ // deletable answer
	106	+ deleteAnswer: function () {
	107	+ $store.dispatch('lqs/deleteQuestionAnswer', {
	108	+ question_id: this.question.id,
	109	+ answer_id: this.answer.question_answer_id
	110	+ });
	111	+ },
	112	+ isUpdating: function () {
	113	+ return this.updating;
	114	+ },
	115	+ // navigation answer option items
	116	+ keyUp: function (event) {
	117	+ var keyCode = event.keyCode;
	118	+ // escape update answer option items text
	119	+ if (keyCode === 27) {
	120	+ this.answer.title = this.title;
	121	+ } else {
	122	+ this.$emit('nav', {key: event.keyCode, order: this.index});
	123	+ }
	124	+ }
	125	+ }
	126	+ });
	127	+ });
	128	+</script>