@windward/core 0.0.5 → 0.0.6

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

package/helpers/tinymce/plugin.ts

@@ -1,5 +1,6 @@
-const MathEditorPlugin = function (editor: any) {
+const WindwardPlugins = function (editor: any) {
     let formula: any
+    let fillInBlank: any
     // ----- Events ----- //
     editor.ui.registry.addIcon('insertMath', '<svg  x="0px" y="0px"width="20px" height="20px" viewBox="0 0 445.878 445.878" style="enable-background:new 0 0 445.878 445.878;">' +
         '<path d="M426.024,86.447H209.705l-84.911,298.911c-2.568,7.967-9.854,13.482-18.22,13.771c-0.236,0-0.464,0.006-0.688,0.006 c-8.092,0-15.41-4.924-18.436-12.478l-34.714-86.782H19.851C8.884,299.876,0,290.986,0,280.022 c0-10.965,8.893-19.854,19.851-19.854H66.18c8.109,0,15.421,4.941,18.436,12.483l19.237,48.09l72.472-260.218 c2.639-8.213,10.279-13.781,18.903-13.781h230.798c10.97,0,19.854,8.89,19.854,19.851S436.988,86.447,426.024,86.447z M436.723,353.227l-78.259-87.904l74.576-82.783c1.318-1.454,1.638-3.547,0.857-5.341c-0.804-1.791-2.577-2.946-4.54-2.946h-47.18 c-1.442,0-2.802,0.629-3.759,1.72l-50.059,58.047l-49.674-58.029c-0.939-1.103-2.317-1.738-3.771-1.738h-49.334 c-1.956,0-3.729,1.149-4.521,2.929c-0.81,1.785 0.479,3.875,0.824,5.332l73.743,82.81l-77.641,87.923 c-1.297,1.465-1.605,3.552 0.813,5.325c0.813,1.785,2.586,2.92,4.528,2.92h48.9c1.472,0,2.867-0.65,3.807-1.785l51.819-62.181 l53.05,62.229c0.951,1.11,2.328,1.743,3.782,1.743h49.97c1.962,0,3.735-1.141,4.527-2.926 C438.354,356.779,438.035,354.692,436.723,353.227z"/>' +
@@ -41,7 +42,7 @@ const MathEditorPlugin = function (editor: any) {
                         formula = message.content
                         break
                     case 'math-plugin-mounted':
-                        window.parent.postMessage({ latex: data.latex }, '*')
+                        window.postMessage({ latex: data.latex ?? '' }, '*')
                         break
                 }
             },
@@ -63,6 +64,11 @@ const MathEditorPlugin = function (editor: any) {
     })
     editor.on('init', function () {
         setOnClickEquationContent(editor)
+        setOnClickFillInBlank(editor)
+    })
+    editor.on('change', function () {
+        setOnClickEquationContent(editor)
+        setOnClickFillInBlank(editor)
     })
     function setOnClickEquationContent(editor: any) {
         const tinymceDoc = editor.getDoc()
@@ -86,7 +92,96 @@ const MathEditorPlugin = function (editor: any) {
             }
         }
     }
-}
 
 
-export { MathEditorPlugin }
+    editor.addCommand('fib-window', function (data: any) {
+
+        return editor.windowManager.openUrl({
+            url: '/plugins/tinymce/FIB',
+            title: 'Fill in the blank',
+            width: 1024,
+            height: 768,
+            buttons: [
+                {
+                    type: 'cancel',
+                    text: 'cancel',
+                },
+                {
+                    type: 'custom',
+                    text: 'submit',
+                    primary: true,
+                },
+            ],
+            onAction: () => {
+                if (data.currentTarget) {
+                    editor.selection.select(data.currentTarget);
+                }
+                editor.selection.setContent(
+                    `<span class='windward-fill-blank' data-feedback =`+ fillInBlank.feedback +` >` +
+                    fillInBlank.answer +
+                    `</span>`
+                )
+
+                editor.windowManager.close()
+                setOnClickFillInBlank(editor);
+            },
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            onMessage: (instance: any, message: any) => {
+                switch (message.mceAction) {
+                    case 'fib-insert':
+                        fillInBlank = { answer: message.content.answer, feedback: message.content.feedback }
+                        break
+                    case 'fib-plugin-mounted':
+                        window.parent.postMessage({ answer: data.answer ,
+                            feedback: data.feedback, }, '*')
+                        break
+                }
+            },
+        })
+    })
+
+    editor.ui.registry.addIcon('insertFIB', '<svg   width="20px" height="20px" viewBox="0 0 24 24"><path d="M17,7H22V17H17V19A1,1 0 0,0 18,20H20V22H17.5C16.95,22 16,21.55 16,21C16,21.55 15.05,22 14.5,22H12V20H14A1,1 0 0,0 15,19V5A1,1 0 0,0 14,4H12V2H14.5C15.05,2 16,2.45 16,3C16,2.45 16.95,2 17.5,2H20V4H18A1,1 0 0,0 17,5V7M2,7H13V9H4V15H13V17H2V7M20,15V9H17V15H20Z" /></svg>' );
+    /* Add a button that opens a window */
+    editor.ui.registry.addButton('fibButton', {
+        icon: 'insertFIB',
+        onAction: function () {
+            /* Open window */
+                editor.execCommand('fib-window', true)
+
+        }
+    });
+    editor.ui.registry.addMenuItem('FIB', {
+        text: 'FIll in the blank',
+        icon: 'insertFIB',
+        onAction: () => {
+            editor.execCommand('fib-window', true)
+        },
+    })
+
+    function setOnClickFillInBlank(editor: any) {
+        const tinymceDoc = editor.getDoc()
+        const mqSpan = tinymceDoc.getElementsByClassName(
+            'windward-fill-blank'
+        )
+
+        // Add onclick listener to all equation content
+        for (const fib of mqSpan) {
+            fib.contentEditable = 'true'
+            if (fib.onclick) {
+                continue
+            }
+
+            fib.onclick = (event: any) => {
+                event.stopPropagation()
+                editor.execCommand('fib-window', {
+                    answer: event.target.innerText,
+                    feedback: event.target.getAttribute('data-feedback'),
+                    currentTarget: event.target,
+                })
+            }
+        }
+    }
+
+}
+
+export { WindwardPlugins }

package/i18n/en-US/components/content/blocks/feedback.ts

@@ -4,6 +4,8 @@ export default {
     module: 'Module',
     preset: 'Presets',
     likert: 'Add standart likert questions',
+    likert_directions:
+        'Click to choose first option and then use tab to switch button groups and then arrows to navigate between options.',
     contact_mindedge: 'Contact Mindedge question',
     open_response: 'Open Response',
     response_prompt: 'Provide course feedback below',
@@ -14,6 +16,7 @@ export default {
     fill_out: 'Please fill out all fields',
     yes: 'Yes',
     no: 'No',
+    enter: 'Enter Text',
     description:
         "This feedback form is optional. However, we would love to hear your thoughts on this learning experience. We take your feedback very seriously, reading and reviewing each entry every day, and we are always trying to improve. Thank you for any comments you'd like to share.",
     sent_feedback:

package/i18n/en-US/components/index.ts

@@ -3,7 +3,6 @@ import settings from './settings'
 import navigation from './navigation/index'
 import utils from './utils/index'
 
-
 export default {
     content,
     settings,

package/i18n/en-US/components/navigation/ask_the_expert.ts

@@ -0,0 +1,11 @@
+export default {
+    ask_expert: 'Ask the Expert',
+    config: 'Configuration',
+    recipient_email: 'Recipient Email',
+    course_info: 'Course and Page Name',
+    student_section: 'Student Section',
+    subject: 'Subject',
+    question: 'Question',
+    description:
+        'Ask an expert a question that is specific to the course content',
+}

package/i18n/en-US/components/navigation/index.ts

@@ -1,7 +1,9 @@
+import ask_the_expert from './ask_the_expert'
 import user_upload from './user_upload'
 import image from './image'
 
 export default {
     user_upload,
     image,
+    ask_the_expert,
 }

package/i18n/en-US/components/utils/FillInBlank/FillInBlankInput.ts

@@ -0,0 +1,13 @@
+export default {
+    add_answer: 'Add Answer',
+    answer: 'Answer',
+    check: 'Check',
+    check_answer: 'Click to check answer',
+    close: 'Close',
+    correct: 'Correct',
+    default_description: 'default description',
+    incorrect: 'Incorrect',
+    input_incorrect: "'{0}' is incorrect",
+    reset: 'reset',
+    try_again: 'Try Again',
+}

package/i18n/en-US/components/utils/FillInBlank/FillInTheBlanksManager.ts

@@ -0,0 +1,11 @@
+export default {
+    close: 'Close',
+    try_again: 'Try Again',
+    correct: 'Correct',
+    incorrect: 'Incorrect',
+    reset: 'reset',
+    check: 'Check',
+    add_answer: 'Add Answer',
+    default_description: 'default description',
+    answer: 'Answer',
+}