@windward/core 0.0.5 → 0.0.6

package/README.md

@@ -24,7 +24,7 @@ Link to Windward ui repo
 $ cd windward-ui
 $ npm install
 $ cd node_modules
-$ npm link @mindedge/windward-ui-plugin-core
+$ npm link @windward/core
 $ npm run dev
 ```
 
@@ -61,6 +61,7 @@ Your Repos are linked at this point and you are ready to start developing windwa
     ```
     import UserUpload from '@/components/Content/Blocks/UserUpload.vue'
     ```
+
 4. To add a page use the below format in your `pages: []` in `plugin.js`
     ```javascript
     {

package/components/Content/Blocks/ClickableIcons.vue

@@ -31,7 +31,7 @@
                         outlined
                         @click="item.active = !item.active"
                     >
-                        <v-icon>{{ item.icon }}</v-icon>
+                        <v-icon>{{ onHandleHtmlEntities(item.icon) }}</v-icon>
                     </v-btn>
                 </v-col>
                 <v-col cols="10" v-if="item.active">
@@ -89,6 +89,15 @@ export default {
             displayText: false,
         }
     },
+    methods: {
+        onHandleHtmlEntities(str) {
+            let txt = document.createElement('textarea')
+
+            txt.innerHTML = str
+
+            return txt.value
+        },
+    },
 }
 </script>
 <style scoped>

package/components/Content/Blocks/Feedback.vue

@@ -13,6 +13,13 @@
                 </h3>
             </v-row>
             <v-row class="pt-2">
+                <p>
+                    {{
+                        $t(
+                            'windward.core.components.content.blocks.feedback.likert_directions'
+                        )
+                    }}
+                </p>
                 <p>
                     {{
                         $t(
@@ -24,9 +31,9 @@
         </v-container>
         <v-container v-if="doesFeedbackExist">
             <v-row>
-                <h3>
-                    {{ block.metadata.config.definition.name }}
-                </h3>
+                <h2>
+                    {{ existingFeedback.survey_type }}
+                </h2>
             </v-row>
             <v-row class="pt-2">
                 <p>
@@ -187,8 +194,8 @@ export default {
             courseUserId: '',
             valid: true,
             key: '0',
-            existingFeedback: '',
             doesFeedbackExist: false,
+            existingFeedback: '',
             templates: '',
             chosenPreset: '',
             studentResponse: '',
@@ -271,6 +278,7 @@ export default {
                 survey_snapshot:
                     this.block.metadata.config.definition.metadata.definition,
                 survey_question_answers: this.chosenPreset,
+                survey_type: this.block.metadata.config.definition.name,
                 version: version,
             }
             let feedback = new SurveyResult(feedbackData).for(

package/components/Content/Blocks/FeedbackTemplates/FeedbackQuestionOpenResponse.vue

@@ -4,27 +4,28 @@
             {{ value.body }}
         </p>
         <div v-if="!feedbackExist">
-            <TextEditor v-model="value.response"></TextEditor>
+            <v-text-field
+                outlined
+                v-model="value.response"
+                :label="
+                    $t('windward.core.components.content.blocks.feedback.enter')
+                "
+            ></v-text-field>
         </div>
         <div v-else>
             <div v-if="value.response">
-                <TextViewer v-model="value.response" text-viewer></TextViewer>
+                <div>{{ value.response }}</div>
             </div>
             <div v-else>
-                <TextViewer v-model="noResponse" text-viewer></TextViewer>
+                <div>{{ noResponse }}</div>
             </div>
         </div>
     </v-container>
 </template>
 <script>
-import TextEditor from '~/components/Text/TextEditor.vue'
-import TextViewer from '~/components/Text/TextViewer.vue'
 export default {
     name: 'FeedbackQuestionOpenResponse',
-    components: {
-        TextEditor,
-        TextViewer,
-    },
+    components: {},
     props: {
         value: { type: Object, required: true, default: '' },
         feedbackExist: { type: Boolean, required: false, default: false },

package/components/Navigation/Items/AskTheExpert.vue

@@ -0,0 +1,173 @@
+<template>
+    <v-list-item @click="dialog = true">
+        <v-list-item-action>
+            <v-icon>{{ config.icon }}</v-icon>
+        </v-list-item-action>
+        <v-list-item-content>
+            <v-list-item-title>
+                {{ $t(config.i18n) }}
+            </v-list-item-title>
+            <Dialog v-model="dialog" color="primary" text :trigger="false">
+                <template #title>{{ $t(config.i18n) }}</template>
+                <template #form="{ on, attrs }">
+                    <v-card flat v-bind="attrs" v-on="on">
+                        <v-container fluid>
+                            <v-row>
+                                <v-col cols="12" class="pl-6">
+                                    <h3>
+                                        {{
+                                            $t(
+                                                'windward.core.components.navigation.ask_the_expert.description'
+                                            )
+                                        }}
+                                    </h3>
+                                </v-col>
+                                <v-col
+                                    v-if="
+                                        $PermissionService.userHasAccessTo(
+                                            'windward.global.course,windward.organization.course.contentBlock',
+                                            'writable'
+                                        )
+                                    "
+                                    cols="12"
+                                >
+                                    <v-col cols="12">
+                                        <h3 class="pb-4">
+                                            {{
+                                                $t(
+                                                    'windward.core.components.navigation.ask_the_expert.config'
+                                                )
+                                            }}
+                                        </h3>
+                                    </v-col>
+                                    <v-col cols="12">
+                                        <v-text-field
+                                            v-model="courseAndContentName"
+                                            disabled
+                                            outlined
+                                            :label="
+                                                $t(
+                                                    'windward.core.components.navigation.ask_the_expert.course_info'
+                                                )
+                                            "
+                                        ></v-text-field>
+                                    </v-col>
+                                </v-col>
+                                <v-col
+                                    v-if="
+                                        !$PermissionService.userHasAccessTo(
+                                            'windward.global.course,windward.organization.course.contentBlock',
+                                            'writable'
+                                        )
+                                    "
+                                    cols="12"
+                                >
+                                    <v-col cols="12">
+                                        <v-text-field
+                                            v-model="subject"
+                                            outlined
+                                            :label="
+                                                $t(
+                                                    'windward.core.components.navigation.ask_the_expert.subject'
+                                                )
+                                            "
+                                        ></v-text-field>
+                                    </v-col>
+                                    <v-col cols="12">
+                                        <v-textarea v-model="body" outlined>
+                                            <template #label>
+                                                <div>
+                                                    {{
+                                                        $t(
+                                                            'windward.core.components.navigation.ask_the_expert.question'
+                                                        )
+                                                    }}
+                                                </div>
+                                            </template>
+                                        </v-textarea>
+                                    </v-col>
+                                    <v-col
+                                        cols="12"
+                                        class="pt-5 pb-5 d-flex flex-row-reverse"
+                                    >
+                                        <v-btn
+                                            class="primary"
+                                            :disabled="valid"
+                                            @click="onSubmit"
+                                            >{{
+                                                $t('shared.forms.submit')
+                                            }}</v-btn
+                                        >
+                                    </v-col>
+                                </v-col>
+                            </v-row>
+                        </v-container>
+                    </v-card>
+                </template>
+            </Dialog>
+        </v-list-item-content>
+    </v-list-item>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import AuthUserRepository from '~/models/repositories/AuthUserRepository'
+import AskTheExpert from '~/models/AskTheExpert'
+
+export default {
+    name: 'NavigationItemAskTheExpert',
+    components: {},
+    props: {
+        config: { type: Object, required: true },
+    },
+    data() {
+        return {
+            currentUser: new AuthUserRepository(this.$nuxt),
+            expert: '',
+            course: this.$ContentService.getCourse(),
+            content: this.$ContentService.get().content,
+            courseAndContentName: '',
+            body: '',
+            subject: '',
+            dialog: false,
+        }
+    },
+    computed: {
+        ...mapGetters({
+            enrollment: 'enrollment/get',
+        }),
+        valid() {
+            if (this.body === '' || this.subject === '') {
+                return true
+            } else {
+                return false
+            }
+        },
+    },
+    mounted() {
+        this.courseAndContentName = this.course.name + ': ' + this.content.name
+    },
+    methods: {
+        async onSubmit() {
+            const askTheExpertSubmission = new AskTheExpert({
+                body: this.body,
+                subject: this.subject,
+                currentUser: this.currentUser,
+                enrollment: this.enrollment,
+                content: this.content,
+                course: this.course,
+                courseAndContentName: this.courseAndContentName,
+            })
+            await askTheExpertSubmission.save()
+            if (askTheExpertSubmission) {
+                this.$dialog.success('Ask The Expert Email Sent Successfully')
+                this.body = ''
+                this.subject = ''
+                this.dialog = false
+            } else {
+                this.$dialog.error('Ask The Expert Email Failed')
+            }
+        },
+    },
+}
+</script>

package/components/Settings/ClickableIconsSettings.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <v-container>
-            <v-col>
+            <v-col class="pa-0">
                 <v-text-field
                     v-model="block.metadata.config.title"
                     :label="
@@ -18,7 +18,11 @@
                         )
                     "
                 ></v-text-field>
-                <v-btn color="primary" outlined @click="onAddElement"
+                <v-btn
+                    color="primary"
+                    outlined
+                    @click="onAddElement"
+                    class="btn-add"
                     ><v-icon>mdi-plus</v-icon
                     >{{ $t('shared.forms.add') }}</v-btn
                 >
@@ -29,7 +33,7 @@
                     :key="itemIndex"
                     class="elevation-0"
                 >
-                    <v-expansion-panel-header class="elevation-0">{{
+                    <v-expansion-panel-header class="elevation-0 pa-0">{{
                         'item ' + (itemIndex + 1)
                     }}</v-expansion-panel-header>
                     <v-expansion-panel-content
@@ -37,8 +41,6 @@
                         :key="expansionPanelKey"
                     >
                         <v-text-field
-                            :counter="1"
-                            maxlength="1"
                             v-model="
                                 block.metadata.config.items[itemIndex].icon
                             "
@@ -186,4 +188,7 @@ export default {
 .v-progress-circular {
     margin: 1rem;
 }
+.btn-add {
+    width: 100%;
+}
 </style>

package/components/utils/ContentViewer.vue

@@ -8,6 +8,7 @@
 <script>
 import MathHelper from '../../helpers/MathHelper'
 import GlossaryHelper from '../../helpers/GlossaryHelper'
+import FillInBlankHelper from '../../helpers/FillInBlankHelper'
 import { mapGetters } from 'vuex'
 import Vue from 'vue'
 export default {
@@ -29,17 +30,27 @@ export default {
         convertedContent() {
             let content = ''
             if (this.value) {
+                content = _.cloneDeep(this.value)
                 if (
-                    GlossaryHelper.containsGlossaryTerms(this.value) &&
+                    MathHelper.containsMathML(content) ||
+                    MathHelper.containsLatex(content)
+                ) {
+                    content = MathHelper.convertMathContentToHtml(content)
+                }
+                if (
+                    GlossaryHelper.containsGlossaryTerms(content) &&
                     _.isObject(this.course.metadata) &&
                     _.isArray(this.course.metadata.glossary)
                 ) {
                     content = GlossaryHelper.renderGlossaryWordsHtml(
-                        MathHelper.convertMathContentToHtml(this.value),
+                        content,
                         this.course.metadata.glossary
                     )
-                } else {
-                    content = MathHelper.convertMathContentToHtml(this.value)
+                }
+
+                if (FillInBlankHelper.containsFillInBlank(content)) {
+                    content =
+                        FillInBlankHelper.renderFillInTHeBlankHtml(content)
                 }
             }
             return Vue.compile('<div>' + content + '</div>')

package/components/utils/FillInBlank/FillInBlankInput.vue

@@ -0,0 +1,208 @@
+<template>
+    <span class="fib">
+        <v-dialog v-model="show" max-width="300">
+            <v-card>
+                <v-card-title class="text-h5">
+                    {{
+                        answerIsCorrect
+                            ? $t(
+                                  'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.correct'
+                              )
+                            : $t(
+                                  'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.incorrect'
+                              )
+                    }}
+                </v-card-title>
+                <v-card-text>
+                    <div v-if="answerIsCorrect || showAnswer">
+                        <p>
+                            <ContentViewer v-model="computedDescription" />
+                        </p>
+                    </div>
+                    <div v-else-if="!answerIsCorrect && userInput">
+                        {{
+                            $t(
+                                'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.input_incorrect',
+                                [userInput]
+                            )
+                        }}
+                    </div>
+                </v-card-text>
+                <v-card-actions>
+                    <v-container justify="center" align="center" class="pb-5">
+                        <v-row justify="center" align="center"
+                            ><v-btn
+                                ref="action_button_1"
+                                color="primary"
+                                outlined
+                                @click="show = false"
+                            >
+                                {{
+                                    answerIsCorrect
+                                        ? $t(
+                                              'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.close'
+                                          )
+                                        : $t(
+                                              'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.try_again'
+                                          )
+                                }}
+                            </v-btn>
+                            <v-btn
+                                color="primary"
+                                outlined
+                                @click="displayAnswer"
+                                v-if="!answerIsCorrect"
+                            >
+                                {{
+                                    $t(
+                                        'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.answer'
+                                    )
+                                }}
+                            </v-btn></v-row
+                        >
+                    </v-container>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+
+        <div class="fib">
+            <v-text-field
+                :disabled="false"
+                outlined
+                dense
+                v-model="userInput"
+                clear-icon="mdi-close-circle-outline"
+                @click:append-outer="toggleToolTip"
+                clearable
+                :background-color="feedback"
+                :placeholder="
+                    $t(
+                        'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.add_answer'
+                    )
+                "
+                @input="showAnswer = false"
+                @keydown="onPressEnter"
+            ></v-text-field>
+            &nbsp;
+            <v-btn
+                v-if="userInput && userInput.length > 0"
+                @click="toggleToolTip"
+                color="primary"
+                outlined
+                :aria-label="
+                    $t(
+                        'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.check_answer'
+                    )
+                "
+                >{{
+                    show
+                        ? $t(
+                              'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.reset'
+                          )
+                        : $t(
+                              'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.check'
+                          )
+                }}</v-btn
+            >
+        </div>
+    </span>
+</template>
+<script>
+import ContentViewer from '../ContentViewer.vue'
+import _ from 'lodash'
+export default {
+    name: 'FillInBlankInput',
+    components: { ContentViewer },
+    props: {
+        answer: { type: String, required: true },
+        description: {
+            type: String,
+            required: false,
+            default: '',
+        },
+    },
+
+    data() {
+        return {
+            userInput: '',
+            show: false,
+            showAnswer: false,
+            timerId: '',
+        }
+    },
+
+    computed: {
+        answerIsCorrect() {
+            if (_.toLower(this.answer) === _.toLower(this.userInput)) {
+                return true
+            }
+            return false
+        },
+        feedback() {
+            if (this.answerIsCorrect && this.showAnswer) {
+                return 'light-green lighten-2'
+            }
+            if (this.show && !this.answerIsCorrect) {
+                return 'red lighten-3'
+            }
+            return ''
+        },
+        computedDescription() {
+            return atob(this.description)
+        },
+    },
+    methods: {
+        setFocusAction() {
+            this.$refs.action_button_1.$el.focus()
+        },
+        onPressEnter(e) {
+            if (e.code === 'Enter') {
+                this.toggleToolTip()
+            }
+        },
+        reset() {
+            this.show = false
+        },
+        displayAnswer() {
+            this.userInput = this.answer
+        },
+        toggleToolTip() {
+            if (this.showAnswer === true) {
+                this.showAnswer = false
+            }
+            if (this.answerIsCorrect) {
+                this.show = true
+                this.showAnswer = true
+                return
+            }
+
+            this.show = !this.show
+        },
+    },
+    watch: {
+        //set focus on the action button when dialog loaded for accessibility
+        show: function (newValue) {
+            if (newValue) {
+                this.timerId = setTimeout(() => {
+                    this.setFocusAction()
+                }, 100)
+            } else {
+                if (this.timerId !== '') {
+                    clearTimeout(this.timeout)
+                }
+            }
+        },
+    },
+}
+</script>
+<style scoped>
+.fib {
+    display: inline-flex;
+}
+.correct {
+    background-color: #7c7;
+}
+.incorrect {
+    background: #e01f1f;
+}
+</style>