| @@ -1,106 +1,106 @@ | ||
| 1 | -<?php | |
| 2 | -/** | |
| 3 | - * Question options template. | |
| 4 | - * | |
| 5 | - * @since 3.0.0 | |
| 6 | - */ | |
| 7 | -?> | |
| 8 | - | |
| 9 | -<script type="text/x-template" id="tmpl-lp-quiz-question-meta"> | |
| 10 | - <div class="quiz-question-options"> | |
| 11 | - <div class="postbox" @click="openSettings($event)"> | |
| 12 | - <h2 class="hndle"><span><?php esc_html_e( 'Details', 'learnpress' ); ?></span> </h2> | |
| 13 | - <a class="toggle" @click.prevent="openSettings($event)"></a> | |
| 14 | - <div class="inside"> | |
| 15 | - <div class="lp-quiz-editor__detail"> | |
| 16 | - <div class="lp-quiz-editor__detail-field"> | |
| 17 | - <div class="lp-quiz-editor__detail-label"> | |
| 18 | - <label :for="'content-'+question.id"><?php esc_html_e( 'Description', 'learnpress' ); ?></label> | |
| 19 | - </div> | |
| 20 | - <div class="lp-quiz-editor__detail-input"> | |
| 21 | - <div> | |
| 22 | - <textarea name="" :id="'content-'+question.id" cols="60" rows="3" class="lp-quiz-editor__detail-textarea large-text" @change="updateContent" v-model="question.settings.content"></textarea> | |
| 23 | - </div> | |
| 24 | - </div> | |
| 25 | - </div> | |
| 26 | - <div class="lp-quiz-editor__detail-field"> | |
| 27 | - <div class="lp-quiz-editor__detail-label"> | |
| 28 | - <label :for="'marking-'+question.id"><?php esc_html_e( 'Points', 'learnpress' ); ?></label> | |
| 29 | - </div> | |
| 30 | - <div class="lp-quiz-editor__detail-input"> | |
| 31 | - <div> | |
| 32 | - <input name="mark" :id="'marking-'+question.id" type="number" min="1" step="1" v-model="question.settings.mark" @change="updateMeta"> | |
| 33 | - <p class="description"><?php esc_html_e( 'Points for choosing the correct answer.', 'learnpress' ); ?></p> | |
| 34 | - </div> | |
| 35 | - </div> | |
| 36 | - </div> | |
| 37 | - <div class="lp-quiz-editor__detail-field"> | |
| 38 | - <div class="lp-quiz-editor__detail-label"> | |
| 39 | - <label :for="'hint-'+question.id"><?php esc_html_e( 'Hint', 'learnpress' ); ?></label> | |
| 40 | - </div> | |
| 41 | - <div class="lp-quiz-editor__detail-input"> | |
| 42 | - <div> | |
| 43 | - <textarea name="hint" :id="'hint-'+question.id" cols="60" rows="3" class="rlp-quiz-editor__detail-textarea large-text" @change="updateMeta" v-model="question.settings.hint"></textarea> | |
| 44 | - <p class="description"><?php esc_html_e( 'The instructions for the user to select the right answer. The text will be shown when users click the \'Hint\' button.', 'learnpress' ); ?></p> | |
| 45 | - </div> | |
| 46 | - </div> | |
| 47 | - </div> | |
| 48 | - <div class="lp-quiz-editor__detail-field"> | |
| 49 | - <div class="lp-quiz-editor__detail-label"> | |
| 50 | - <label :for="'explanation-'+question.id"><?php esc_html_e( 'Explanation', 'learnpress' ); ?></label> | |
| 51 | - </div> | |
| 52 | - <div class="lp-quiz-editor__detail-input"> | |
| 53 | - <div> | |
| 54 | - <textarea name="explanation" :id="'explanation-'+question.id" cols="60" rows="3" class="lp-quiz-editor__detail-textarea large-text" @change="updateMeta" v-model="question.settings.explanation"></textarea> | |
| 55 | - <p class="description"><?php esc_html_e( 'The explanation will be displayed when students click the "Check Answer" button.', 'learnpress' ); ?></p> | |
| 56 | - </div> | |
| 57 | - </div> | |
| 58 | - </div> | |
| 59 | - </div> | |
| 60 | - </div> | |
| 61 | - </div> | |
| 62 | - </div> | |
| 63 | -</script> | |
| 64 | - | |
| 65 | -<script type="text/javascript"> | |
| 66 | - jQuery( function($) { | |
| 67 | - var $Vue = window.$Vue || Vue; | |
| 68 | - var $store = window.LP_Quiz_Store; | |
| 69 | - | |
| 70 | - $Vue.component('lp-quiz-question-meta', { | |
| 71 | - template: '#tmpl-lp-quiz-question-meta', | |
| 72 | - props: ['question'], | |
| 73 | - methods: { | |
| 74 | - updateContent: function () { | |
| 75 | - $store.dispatch( 'lqs/updateQuestionContent', this.question ); | |
| 76 | - }, | |
| 77 | - updateMeta: function(e) { | |
| 78 | - $store.dispatch( 'lqs/updateQuestionMeta', { | |
| 79 | - question: this.question, | |
| 80 | - meta_key: e.target.name | |
| 81 | - }); | |
| 82 | - }, | |
| 83 | - openSettings: function(e) { | |
| 84 | - e.stopPropagation(); | |
| 85 | - | |
| 86 | - var $root = $( this.$el ).closest( '.question-settings' ), | |
| 87 | - $postbox = $root.find( '.postbox' ); | |
| 88 | - | |
| 89 | - $postbox.removeClass( 'closed' ); | |
| 90 | - | |
| 91 | - if ( ! $( e.target ).hasClass( 'toggle' ) ) { | |
| 92 | - return; | |
| 93 | - } | |
| 94 | - | |
| 95 | - var isClosed = $root.toggleClass( 'closed' ).hasClass('closed'); | |
| 96 | - | |
| 97 | - $store.dispatch( 'lqs/updateQuizQuestionsHidden', { | |
| 98 | - hidden: $( '.question-settings.closed' ).map( function() { | |
| 99 | - return $(this).closest( '.question-item' ).data( 'item-id' ); | |
| 100 | - }).get() | |
| 101 | - }); | |
| 102 | - } | |
| 103 | - } | |
| 104 | - }); | |
| 105 | - }); | |
| 106 | -</script> | |
| 1 | +<?php | |
| 2 | +/** | |
| 3 | + * Question options template. | |
| 4 | + * | |
| 5 | + * @since 3.0.0 | |
| 6 | + */ | |
| 7 | +?> | |
| 8 | + | |
| 9 | +<script type="text/x-template" id="tmpl-lp-quiz-question-meta"> | |
| 10 | + <div class="quiz-question-options"> | |
| 11 | + <div class="postbox" @click="openSettings($event)"> | |
| 12 | + <h2 class="hndle"><span><?php esc_html_e( 'Details', 'learnpress' ); ?></span> </h2> | |
| 13 | + <a class="toggle" @click.prevent="openSettings($event)"></a> | |
| 14 | + <div class="inside"> | |
| 15 | + <div class="lp-quiz-editor__detail"> | |
| 16 | + <div class="lp-quiz-editor__detail-field"> | |
| 17 | + <div class="lp-quiz-editor__detail-label"> | |
| 18 | + <label :for="'content-'+question.id"><?php esc_html_e( 'Description', 'learnpress' ); ?></label> | |
| 19 | + </div> | |
| 20 | + <div class="lp-quiz-editor__detail-input"> | |
| 21 | + <div> | |
| 22 | + <textarea name="" :id="'content-'+question.id" cols="60" rows="3" class="lp-quiz-editor__detail-textarea large-text" @change="updateContent" v-model="question.settings.content"></textarea> | |
| 23 | + </div> | |
| 24 | + </div> | |
| 25 | + </div> | |
| 26 | + <div class="lp-quiz-editor__detail-field"> | |
| 27 | + <div class="lp-quiz-editor__detail-label"> | |
| 28 | + <label :for="'marking-'+question.id"><?php esc_html_e( 'Points', 'learnpress' ); ?></label> | |
| 29 | + </div> | |
| 30 | + <div class="lp-quiz-editor__detail-input"> | |
| 31 | + <div> | |
| 32 | + <input name="mark" :id="'marking-'+question.id" type="number" min="1" step="1" v-model="question.settings.mark" @change="updateMeta"> | |
| 33 | + <p class="description"><?php esc_html_e( 'Points for choosing the correct answer.', 'learnpress' ); ?></p> | |
| 34 | + </div> | |
| 35 | + </div> | |
| 36 | + </div> | |
| 37 | + <div class="lp-quiz-editor__detail-field"> | |
| 38 | + <div class="lp-quiz-editor__detail-label"> | |
| 39 | + <label :for="'hint-'+question.id"><?php esc_html_e( 'Hint', 'learnpress' ); ?></label> | |
| 40 | + </div> | |
| 41 | + <div class="lp-quiz-editor__detail-input"> | |
| 42 | + <div> | |
| 43 | + <textarea name="hint" :id="'hint-'+question.id" cols="60" rows="3" class="rlp-quiz-editor__detail-textarea large-text" @change="updateMeta" v-model="question.settings.hint"></textarea> | |
| 44 | + <p class="description"><?php esc_html_e( 'The instructions for the user to select the right answer. The text will be shown when users click the \'Hint\' button.', 'learnpress' ); ?></p> | |
| 45 | + </div> | |
| 46 | + </div> | |
| 47 | + </div> | |
| 48 | + <div class="lp-quiz-editor__detail-field"> | |
| 49 | + <div class="lp-quiz-editor__detail-label"> | |
| 50 | + <label :for="'explanation-'+question.id"><?php esc_html_e( 'Explanation', 'learnpress' ); ?></label> | |
| 51 | + </div> | |
| 52 | + <div class="lp-quiz-editor__detail-input"> | |
| 53 | + <div> | |
| 54 | + <textarea name="explanation" :id="'explanation-'+question.id" cols="60" rows="3" class="lp-quiz-editor__detail-textarea large-text" @change="updateMeta" v-model="question.settings.explanation"></textarea> | |
| 55 | + <p class="description"><?php esc_html_e( 'The explanation will be displayed when students click the "Check Answer" button.', 'learnpress' ); ?></p> | |
| 56 | + </div> | |
| 57 | + </div> | |
| 58 | + </div> | |
| 59 | + </div> | |
| 60 | + </div> | |
| 61 | + </div> | |
| 62 | + </div> | |
| 63 | +</script> | |
| 64 | + | |
| 65 | +<script type="text/javascript"> | |
| 66 | + jQuery( function($) { | |
| 67 | + var $Vue = window.$Vue || Vue; | |
| 68 | + var $store = window.LP_Quiz_Store; | |
| 69 | + | |
| 70 | + $Vue.component('lp-quiz-question-meta', { | |
| 71 | + template: '#tmpl-lp-quiz-question-meta', | |
| 72 | + props: ['question'], | |
| 73 | + methods: { | |
| 74 | + updateContent: function () { | |
| 75 | + $store.dispatch( 'lqs/updateQuestionContent', this.question ); | |
| 76 | + }, | |
| 77 | + updateMeta: function(e) { | |
| 78 | + $store.dispatch( 'lqs/updateQuestionMeta', { | |
| 79 | + question: this.question, | |
| 80 | + meta_key: e.target.name | |
| 81 | + }); | |
| 82 | + }, | |
| 83 | + openSettings: function(e) { | |
| 84 | + e.stopPropagation(); | |
| 85 | + | |
| 86 | + var $root = $( this.$el ).closest( '.question-settings' ), | |
| 87 | + $postbox = $root.find( '.postbox' ); | |
| 88 | + | |
| 89 | + $postbox.removeClass( 'closed' ); | |
| 90 | + | |
| 91 | + if ( ! $( e.target ).hasClass( 'toggle' ) ) { | |
| 92 | + return; | |
| 93 | + } | |
| 94 | + | |
| 95 | + var isClosed = $root.toggleClass( 'closed' ).hasClass('closed'); | |
| 96 | + | |
| 97 | + $store.dispatch( 'lqs/updateQuizQuestionsHidden', { | |
| 98 | + hidden: $( '.question-settings.closed' ).map( function() { | |
| 99 | + return $(this).closest( '.question-item' ).data( 'item-id' ); | |
| 100 | + }).get() | |
| 101 | + }); | |
| 102 | + } | |
| 103 | + } | |
| 104 | + }); | |
| 105 | + }); | |
| 106 | +</script> | |