@windward/core 0.0.5 → 0.0.7

package/components/Settings/OpenResponseCollateSettings.vue

@@ -0,0 +1,170 @@
+<template>
+    <v-container>
+        <v-form>
+            <p>
+                {{
+                    $t(
+                        'windward.core.components.settings.open_response_collate.instructions'
+                    )
+                }}
+            </p>
+            <v-switch
+                v-model="block.metadata.config.include_prompts"
+                :label="
+                    $t(
+                        'windward.core.components.settings.open_response_collate.include_prompts'
+                    )
+                "
+            ></v-switch>
+            <v-text-field
+                v-model="block.metadata.config.filename"
+                :label="
+                    $t(
+                        'windward.core.components.settings.open_response_collate.filename'
+                    )
+                "
+            ></v-text-field>
+            <v-list>
+                <v-list-item-group
+                    v-model="linked"
+                    multiple
+                    color="primary"
+                    @change="onLinkedChange"
+                >
+                    <draggable
+                        v-bind="dragOptions"
+                        :list="contentBlocks"
+                        @change="onDragChange"
+                    >
+                        <v-list-item
+                            v-for="contentBlock in contentBlocks"
+                            :key="contentBlock.id"
+                            :value="contentBlock.id"
+                        >
+                            <template #default="{ active }">
+                                <v-list-item-icon>
+                                    <v-icon>mdi-drag</v-icon>
+                                </v-list-item-icon>
+
+                                <v-list-item-content>
+                                    <v-list-item-title>
+                                        {{
+                                            contentBlock.block.body.replace(
+                                                /<[^>]*>?/gm,
+                                                ''
+                                            )
+                                        }}
+                                    </v-list-item-title>
+                                </v-list-item-content>
+                                <v-list-item-action>
+                                    <v-checkbox
+                                        :input-value="active"
+                                        color="primary"
+                                    ></v-checkbox>
+                                </v-list-item-action>
+                            </template>
+                        </v-list-item>
+                    </draggable>
+                </v-list-item-group>
+            </v-list>
+        </v-form>
+    </v-container>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import draggable from 'vuedraggable'
+import TextEditor from '~/components/Text/TextEditor.vue'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import ContentBlock from '~/models/ContentBlock'
+import Course from '~/models/Course'
+
+export default {
+    name: 'ImageSettings',
+    extends: BaseContentSettings,
+    components: { draggable, TextEditor },
+    props: {
+        settings: { type: Object, required: false, default: null },
+        context: { type: String, required: false, default: 'block' },
+    },
+    data() {
+        return {
+            contentBlocks: [],
+            linked: [],
+        }
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+            enrollment: 'enrollment/get',
+        }),
+        dragOptions() {
+            return {
+                animation: 200,
+            }
+        },
+    },
+    async fetch() {
+        this.contentBlocks = await ContentBlock.where(
+            'tag',
+            'plugin-core-open-response'
+        )
+            .for(new Course({ id: this.course.id }))
+            .get()
+    },
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = ''
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.linked)) {
+            this.block.metadata.config.linked = []
+        }
+        if (_.isEmpty(this.block.metadata.config.filename)) {
+            this.block.metadata.config.filename = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.include_prompts)) {
+            this.block.metadata.config.include_prompts = false
+        }
+
+        this.linked = this.block.metadata.config.linked
+    },
+    watch: {},
+    mounted() {},
+    methods: {
+        // Called when the order changes
+        onDragChange(e) {
+            this.setLinkedBlocks()
+        },
+        // Called when blocks are added / removed
+        onLinkedChange() {
+            this.setLinkedBlocks()
+        },
+        setLinkedBlocks() {
+            const linkedContentIds = []
+
+            // Loop over content blocks since they have the correct order we want to collate
+            this.contentBlocks.forEach((contentBlock) => {
+                // If the unsorted this.linked includes the block id, add it in the right order
+                if (this.linked.includes(contentBlock.id)) {
+                    linkedContentIds.push(contentBlock.id)
+                }
+            })
+
+            // Set the linked and also body for convenience
+            this.block.metadata.config.linked = linkedContentIds
+            this.block.body = linkedContentIds.join()
+        },
+    },
+}
+</script>

package/components/Settings/OpenResponseSettings.vue

@@ -0,0 +1,81 @@
+<template>
+    <v-container>
+        <v-form>
+            <h3 class="pb-2">
+                {{
+                    $t(
+                        'windward.core.components.settings.open_response.question'
+                    )
+                }}
+            </h3>
+            <TextEditor v-model="block.body" :height="200"></TextEditor>
+
+            <h3 class="pb-2">
+                {{
+                    $t(
+                        'windward.core.components.settings.open_response.sample_response'
+                    )
+                }}
+            </h3>
+            <TextEditor
+                v-model="block.metadata.config.sample_response"
+                :height="200"
+            ></TextEditor>
+
+            <h3 class="pb-2">
+                {{
+                    $t(
+                        'windward.core.components.settings.open_response.starting_text'
+                    )
+                }}
+            </h3>
+            <TextEditor
+                v-model="block.metadata.config.starting_text"
+                :height="200"
+            ></TextEditor>
+        </v-form>
+    </v-container>
+</template>
+
+<script>
+import _ from 'lodash'
+import TextEditor from '~/components/Text/TextEditor.vue'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
+
+export default {
+    name: 'ImageSettings',
+    extends: BaseContentSettings,
+    components: { ContentBlockAsset, TextEditor },
+    props: {
+        settings: { type: Object, required: false, default: null },
+        context: { type: String, required: false, default: 'block' },
+    },
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = ''
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.sample_response)) {
+            this.block.metadata.config.sample_response = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.starting_text)) {
+            this.block.metadata.config.starting_text = ''
+        }
+    },
+    data() {
+        return {}
+    },
+    watch: {},
+    mounted() {},
+    methods: {},
+}
+</script>

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>

package/components/utils/FillInBlank/FillInTheBlanksManager.vue

@@ -0,0 +1,98 @@
+<template>
+    <v-container>
+        <v-row align="center" justify="center">
+            <v-col>
+                <v-row align="center" justify="center">
+                    <v-text-field
+                        class="col-10"
+                        :label="
+                            $t(
+                                'windward.core.components.utils.fill_in_the_blank.fill_in_the_blank_manager.answer'
+                            )
+                        "
+                        v-model="answer"
+                        outlined
+                        @input="submit"
+                    ></v-text-field>
+                </v-row>
+
+                <br />
+
+                <v-row align="center" justify="center">
+                    <TextEditor
+                        :key="key"
+                        v-model="feedback"
+                        @input="submit"
+                    ></TextEditor>
+                </v-row>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+<script>
+import TextEditor from '~/components/Text/TextEditor.vue'
+import _ from 'lodash'
+import Crypto from '~/helpers/Crypto'
+export default {
+    name: 'FillInTheBlanksManager',
+    components: { TextEditor },
+    data() {
+        return {
+            answer: '',
+            feedback: '',
+            key: '',
+        }
+    },
+    mounted() {
+        window.parent.postMessage(
+            {
+                mceAction: 'fib-plugin-mounted',
+                status: true,
+            },
+            '*'
+        )
+    },
+    created() {
+        window.parent.addEventListener('message', (event) => {
+            if (event.data.answer)
+                this.init({
+                    answer: event.data.answer,
+                    feedback: event.data.feedback,
+                })
+        })
+    },
+
+    computed: {},
+
+    methods: {
+        init(data) {
+            this.answer = data.answer
+            this.feedback = _.cloneDeep(
+                atob(data.feedback ? data.feedback : 'empty')
+            )
+            this.key = Crypto.id()
+        },
+        submit() {
+            window.parent.postMessage(
+                {
+                    mceAction: 'fib-insert',
+                    content: {
+                        answer: this.answer,
+                        feedback: btoa(this.feedback),
+                    },
+                },
+                '*'
+            )
+        },
+    },
+}
+</script>
+<style scoped>
+.correct,
+p {
+    background: #7c7;
+}
+
+.answer {
+}
+</style>

package/components/utils/MathExpressionEditor.vue

@@ -60,13 +60,13 @@
                                 primary
                                 color="success"
                                 @click="setSRText"
-                                :class="shrinkClass"
+                                :class="fontSize"
                                 >{{ $t('shared.accessibility.default_text') }}
                             </v-btn>
                             <v-btn
                                 :disabled="spokenTextChanged"
                                 color="primary"
-                                :class="shrinkClass"
+                                :class="fontSize"
                                 @click="readSRText"
                                 >{{
                                     $t(
@@ -140,7 +140,6 @@ export default {
             tab: null,
             toggle_exclusive: true,
             panel: [],
-            shrinkClass: '',
         }
     },
     computed: {
@@ -151,6 +150,12 @@ export default {
 
             return plugin[0]
         },
+        fontSize() {
+            if (this.shrinkFont === true) {
+                return 'adjustFont'
+            }
+            return ''
+        },
     },
     beforeMount() {
         if (this.mode === 'standalone') {
@@ -158,9 +163,6 @@ export default {
         }
     },
     mounted() {
-        if (this.shrinkFont === true) {
-            this.shrinkClass = 'adjustFont'
-        }
         if (this.mode === 'plugin') {
             window.parent.postMessage(
                 {