@windward/core 0.0.5 → 0.0.7

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 {
@@ -26,6 +26,17 @@ export default {
         value: { type: String, required: true, default: '' },
         api_key: { type: String, required: true, default: '' },
         height: { type: Number, required: false, default: null },
+        menubar: {
+            type: String,
+            required: false,
+            default: 'file edit insert format view table windward help',
+        },
+        toolbar: {
+            type: String,
+            required: false,
+            default:
+                'undo redo | formatselect | bold italic | alignleft aligncenter alignright | table bullist numlist outdent indent | mathButton ',
+        },
     },
     beforeMount() {
         this.text = this.value
@@ -50,11 +61,11 @@ export default {
             return {
                 height: 500,
                 visual: false,
-                menubar: 'file edit insert format view table help',
+                menubar: this.menubar,
                 menu: {
                     insert: {
                         title: 'Insert',
-                        items: ' link inserttable | charmap | anchor  | math | insertdatetime',
+                        items: ' link inserttable | charmap | anchor  | math | FIB | insertdatetime',
                     },
                     table: {
                         title: 'Table',
@@ -65,10 +76,9 @@ 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',
+                toolbar: this.toolbar,
                 table_advtab: false,
                 table_cell_advtab: false,
                 table_row_advtab: false,
@@ -149,8 +159,8 @@ export default {
                 setup() {
                     // Here we can add plugin
                     window.tinymce.PluginManager.add(
-                        'MathEditor',
-                        MathEditorPlugin
+                        'WindwardToolKit',
+                        WindwardPlugins
                     )
                 },
                 formats: {
@@ -163,6 +173,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 +195,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 +228,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/content/blocks/index.ts

@@ -4,6 +4,8 @@ import video from './video'
 import table from './table'
 import tab from './tab'
 import feedback from './feedback'
+import open_response from './open_response'
+import open_response_collate from './open_response_collate'
 
 export default {
     user_upload,
@@ -12,4 +14,6 @@ export default {
     table,
     tab,
     feedback,
+    open_response,
+    open_response_collate,
 }

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

@@ -0,0 +1,5 @@
+export default {
+    initial_setup: 'Enter a prompt for this open response block to get started',
+    your_response: 'Your Response',
+    sample_response: 'Suggested/Sample Response',
+}

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

@@ -0,0 +1,6 @@
+export default {
+    download_document: 'Download Word Document',
+    no_response: '[no response]',
+    initial_setup:
+        'Open the block settings and select Open Response blocks you want to collate for download',
+}

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/settings/index.ts

@@ -3,11 +3,15 @@ import user_upload from './user_upload'
 import text_editor from './text_editor'
 import video from './video'
 import clickable_icon from './clickable_icon'
+import open_response from './open_response'
+import open_response_collate from './open_response_collate'
 
 export default {
     image,
     user_upload,
     text_editor,
     video,
-    clickable_icon
+    clickable_icon,
+    open_response,
+    open_response_collate,
 }

package/i18n/en-US/components/settings/open_response.ts

@@ -0,0 +1,5 @@
+export default {
+    question: 'Question',
+    sample_response: 'Suggested/Sample Response',
+    starting_text: 'Starting Text',
+}

package/i18n/en-US/components/settings/open_response_collate.ts

@@ -0,0 +1,6 @@
+export default {
+    instructions:
+        'Check off open responses to collate. Drag the prompts to set the order you want the responses collated',
+    include_prompts: 'Include Prompts',
+    filename: 'Filename (Blank for current page name)',
+}

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',
+}

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

@@ -0,0 +1,6 @@
+import fill_in_blank_input from './FillInBlankInput'
+import fill_in_the_blank_manager from './FillInTheBlanksManager'
+export default {
+    fill_in_blank_input,
+    fill_in_the_blank_manager,
+}

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

@@ -1,5 +1,6 @@
 import tiny_mce_wrapper from './tiny_mce_wrapper'
-
+import fill_in_the_blank from './FillInBlank/index'
 export default {
     tiny_mce_wrapper,
+    fill_in_the_blank,
 }

package/i18n/en-US/components/utils/tiny_mce_wrapper.ts

@@ -4,6 +4,7 @@ export default {
     alternate_forms: 'Alternate Forms',
     definition: 'definition',
     related_terms: 'related terms',
+    fill_blank: 'Fill in the blank',
     table: {
         default: 'Default Table',
         default_white_line: 'Default Table white lines',

package/i18n/en-US/shared/content_blocks.ts

@@ -7,6 +7,8 @@ export default {
         rich_text: 'Rich Text',
         math: 'Math',
         accordion: 'Accordion',
+        open_response: 'Open Response',
+        open_response_collate: 'Open Response Collate',
         image: 'Image',
         user_upload: 'User Upload',
         clickable_icons: 'Clickable Icons',

package/i18n/en-US/shared/menu.ts

@@ -1,3 +1,4 @@
 export default {
     course_glossary: 'Course Glossary',
+    ask_the_expert: 'Ask the Expert',
 }