@windward/core 0.0.3 → 0.0.6

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(
                 {

package/components/utils/TinyMCEWrapper.vue

@@ -14,7 +14,7 @@
 <script>
 import _ from 'lodash'
 import Editor from '@tinymce/tinymce-vue'
-import { MathEditorPlugin } from '../../helpers/tinymce/plugin'
+import { WindwardPlugins } from '../../helpers/tinymce/plugin'
 import contentCss from '!raw-loader!sass-loader!./assets/tinymce/css/content.scss'
 import Crypto from '~/helpers/Crypto'
 export default {
@@ -50,11 +50,11 @@ export default {
             return {
                 height: 500,
                 visual: false,
-                menubar: 'file edit insert format view table help',
+                menubar: 'file edit insert format view table windward help',
                 menu: {
                     insert: {
                         title: 'Insert',
-                        items: ' link inserttable | charmap | anchor  | math | insertdatetime',
+                        items: ' link inserttable | charmap | anchor  | math | FIB | insertdatetime',
                     },
                     table: {
                         title: 'Table',
@@ -65,10 +65,10 @@ export default {
                     'advlist autolink lists link  charmap',
                     'searchreplace visualblocks code fullscreen',
                     'anchor insertdatetime ',
-                    'paste code wordcount table MathEditor ',
+                    'paste code wordcount table WindwardToolKit ',
                 ],
                 toolbar:
-                    'undo redo | formatselect | bold italic | alignleft aligncenter alignright | table bullist numlist outdent indent | mathButton',
+                    'undo redo | formatselect | bold italic | alignleft aligncenter alignright | table bullist numlist outdent indent | mathButton ',
                 table_advtab: false,
                 table_cell_advtab: false,
                 table_row_advtab: false,
@@ -149,8 +149,8 @@ export default {
                 setup() {
                     // Here we can add plugin
                     window.tinymce.PluginManager.add(
-                        'MathEditor',
-                        MathEditorPlugin
+                        'WindwardToolKit',
+                        WindwardPlugins
                     )
                 },
                 formats: {
@@ -163,6 +163,21 @@ export default {
                         },
                         classes: 'glossary-word',
                     },
+                    fib: {
+                        title: this.$t(
+                            'windward.core.components.utils.tiny_mce_wrapper.fill_blank'
+                        ),
+                        inline: 'span',
+                        classes: 'windward-fill-blank',
+                        attributes: {
+                            contenteditable: 'true',
+                            'data-feedback': btoa(
+                                this.$t(
+                                    'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.default.description'
+                                )
+                            ),
+                        },
+                    },
                     removeformat: [
                         // Configures `clear formatting` to remove the class glossary-word from spans and if the element then becomes empty it's left intact
                         {
@@ -170,15 +185,30 @@ export default {
                             classes: 'glossary-word',
                             remove: 'all',
                         },
+                        {
+                            selector: 'span',
+                            classes: 'windward-fill-blank',
+                            remove: 'all',
+                            split: true,
+                            expand: false,
+                            deep: true,
+                        },
                     ],
                 },
                 style_formats: [
+                    { title: 'Windward formats' },
                     {
                         title: this.$t(
                             'windward.core.components.utils.tiny_mce_wrapper.term'
                         ),
                         format: 'glossary',
                     },
+                    {
+                        title: this.$t(
+                            'windward.core.components.utils.tiny_mce_wrapper.fill_blank'
+                        ),
+                        format: 'fib',
+                    },
                 ],
                 style_formats_merge: true,
                 placeholder: this.$t(
@@ -188,7 +218,17 @@ export default {
 
                 skin: this.$vuetify.theme.isDark ? 'oxide-dark' : 'oxide',
                 content_css: this.$vuetify.theme.isDark ? 'dark' : 'default',
-                content_style: contentCss,
+                //we need to inject the glossary style directly
+                content_style:
+                    contentCss +
+                    ' .glossary-word {\n' +
+                    '    display: inline-block;\n' +
+                    '    border-radius: 12px;\n' +
+                    '    padding: 0px 7px;\n' +
+                    '    background-color: #ffd269;\n ' +
+                    '    font-weight: bold;\n' +
+                    '    color: #1a1d1e;' +
+                    '}',
                 importcss_append: true,
             }
         },

package/components/utils/assets/tinymce/css/content.scss

@@ -183,6 +183,15 @@ table {
     }
 }
 
+span.windward-fill-blank{
+    display: inline-block;
+    cursor: pointer;
+    border: 2px solid #206e8c;
+    border-radius: 5px;
+    padding: 2px 5px;
+    margin: 0 2px;
+    color: #000000;
+}
 
 
 

package/components/utils/glossary/CourseGlossary.vue

@@ -140,14 +140,14 @@ export default {
                 {
                     text: this.$t('windward.core.pages.glossary.term'),
                     align: 'start',
-                    sortable: false,
-                    value: 'glossaryTerms.term',
+                    sortable: true,
+                    value: 'term',
                 },
                 {
                     text: this.$t('windward.core.pages.glossary.definition'),
                     align: 'start',
                     sortable: true,
-                    value: 'glossaryTerms.definition',
+                    value: 'definition',
                 },
                 {
                     text: this.$t(
@@ -155,13 +155,13 @@ export default {
                     ),
                     align: 'start',
                     sortable: true,
-                    value: 'glossaryTerms.alternate_forms',
+                    value: 'alternate_forms',
                 },
                 {
                     text: this.$t('windward.core.pages.glossary.related_term'),
                     align: 'start',
                     sortable: true,
-                    value: 'glossaryTerms.related_term',
+                    value: 'related_term',
                 },
             ],
             dialog: false,
@@ -207,12 +207,16 @@ export default {
             } else {
                 this.glossaryTerms.push(this.selectedTerm)
             }
-            const course = new Course(this.course)
-            if (!_.isSet(course.metadata)) {
+            const course = new Course(_.cloneDeep(this.course))
+            if (
+                !course.hasOwnProperty('metadata') ||
+                course.metadata === null
+            ) {
                 course.metadata = {}
                 course.metadata.glossary = {}
             }
-            if (!_.isSet(course.metadata.glossary)) {
+
+            if (course.metadata.glossary !== undefined) {
                 course.metadata.glossary = this.glossaryTerms
             }
             const updatedCourse = await course.save()

package/components/utils/glossary/CourseGlossaryForm.vue

@@ -10,19 +10,31 @@
         <br />
         <v-textarea
             v-model="selectedTerm.definition"
-            :counter="255"
             :label="$t('windward.core.pages.glossary.definition')"
             outlined
             required
             :rules="validation.definitionRules"
         ></v-textarea>
         <br />
-        <v-textarea
+        <v-combobox
             v-model="selectedTerm.alternate_forms"
-            :counter="50"
+            chips
+            clearable
             :label="$t('windward.core.pages.glossary.alternate_forms')"
-            outlined
-        ></v-textarea>
+            multiple
+            solo
+        >
+            <template v-slot:selection="{ attrs, item, select, selected }">
+                <v-chip
+                    v-bind="attrs"
+                    :input-value="selected"
+                    close
+                    @click:close="removeAlternateForm(item)"
+                >
+                    <strong>{{ item }}</strong>
+                </v-chip>
+            </template>
+        </v-combobox>
         <br />
         <v-select
             v-model="selectedTerm.related_term"
@@ -97,6 +109,13 @@ export default {
                 return true
             }
         },
+        removeAlternateForm(form) {
+            const index = this.selectedTerm.alternate_forms.indexOf(form)
+            if (index > -1) {
+                // only splice array when item is found
+                this.selectedTerm.alternate_forms.splice(index, 1) // 2nd parameter means remove one item only
+            }
+        },
     },
 }
 </script>

package/helpers/FillInBlankHelper.ts

@@ -0,0 +1,55 @@
+import * as _ from "lodash";
+import GlossaryTerm from "~/helpers/GlossaryTerm";
+
+export default class FillInBlankHelper {
+
+    private static FillBlankRegex = /<span.*?.class="windward-fill-blank".*?>(.*?)<\/span>/gi;
+
+    public static containsFillInBlank(content: string): boolean {
+        const regex = new RegExp(this.FillBlankRegex);
+
+        return regex.exec(content) !== null;
+    }
+
+    public static makeToolTip(htmlString: string): string {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(htmlString, "text/html");
+        // doc.body.firstChild can be null
+        let answer = doc.body.firstChild ? doc.body.firstChild.textContent : "";
+        let feedback = "";
+        if (doc.body.getElementsByClassName("windward-fill-blank")[0]["dataset"]["feedback"] !== undefined) {
+            feedback = doc.body.getElementsByClassName("windward-fill-blank")[0]["dataset"]["feedback"];
+        }
+
+        return (
+            "<plugin-core-fill-in-blank-input answer=\"" + answer + "\" description=\"" + feedback + "\">" +
+            "</template>" + "</plugin-core-fill-in-blank-input>");
+
+    }
+
+    public escapeHtml(html) {
+        var text = document.createTextNode(html);
+        var p = document.createElement("p");
+        p.appendChild(text);
+        return p.innerHTML;
+    }
+
+    public static renderFillInTHeBlankHtml(content: string, glossary: any) {
+        const regex = new RegExp(this.FillBlankRegex);
+
+
+        let match;
+        while ((match = regex.exec(content)) !== null) {
+            // This is necessary to avoid infinite loops with zero-width matches
+            if (match.index === regex.lastIndex) {
+                regex.lastIndex++;
+            }
+            content = content.replace(
+                match[0],
+                this.makeToolTip(match[0])
+            );
+        }
+
+        return content;
+    }
+}

package/helpers/GlossaryHelper.ts

@@ -38,13 +38,13 @@ export default class GlossaryHelper {
 
     }
     public static containsGlossaryTerms(content :string): boolean {
-        const regex = this.glossaryRegex
+        const regex = new RegExp(this.glossaryRegex)
 
         return regex.exec(content) !== null
     }
 
     public static getContentVerifiedGlossaryTerms(content :string, glossary :any) {
-        const regex =  this.glossaryRegex
+        const regex =  new RegExp( this.glossaryRegex)
         const currentGlossary = glossary
 
         let match
@@ -74,7 +74,7 @@ export default class GlossaryHelper {
     }
 
     public static getContentUnVerifiedGlossaryTerms(content :string, glossary :any) {
-        const regex =  this.glossaryRegex
+        const regex =  new RegExp( this.glossaryRegex)
 
         let match
         const verifiedTerms = this.getContentVerifiedGlossaryTerms(content,glossary)
@@ -110,7 +110,7 @@ export default class GlossaryHelper {
         return unVerifiedTerms
     }
     public static renderGlossaryWordsHtml(content :string, glossary :any) {
-        const regex =  this.glossaryRegex
+        const regex = new RegExp( this.glossaryRegex)
         const currentGlossary = glossary
 
         let match