@windward/core 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+### Release [0.17.0] created - 2025-05-13
+
+
 ### Release [0.16.0] created - 2025-04-29
 
 

package/components/Content/Blocks/Accordion.vue

@@ -1,11 +1,11 @@
 <template>
     <div>
         <v-container
-            class="pa-0"
             v-if="
                 block.metadata.config.title ||
                 block.metadata.config.instructions
             "
+            class="pa-0"
         >
             <h2 v-if="block.metadata.config.title" tabindex="0">
                 {{ block.metadata.config.title }}
@@ -31,9 +31,10 @@
                 :key="itemIndex"
             >
                 <v-expansion-panel-header
+                    :ref="'expansion-panel-' + itemIndex"
                     class="expansion-panel-header"
                     color="primary"
-                    :ref="'expansion-panel-' + itemIndex"
+                    role="button"
                     @click="onOpenAccordion(itemIndex)"
                 >
                     {{
@@ -43,8 +44,8 @@
                     }}
                 </v-expansion-panel-header>
                 <v-expansion-panel-content
-                    class="expansion-panel-body"
                     :key="expansionPanelKey"
+                    class="expansion-panel-body"
                 >
                     <v-container
                         class="px-0 d-flex"
@@ -87,9 +88,9 @@
 import _ from 'lodash'
 import Crypto from '~/helpers/Crypto'
 import ImageAssetViewer from '~/components/Content/ImageAssetViewer.vue'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import TextEditor from '~/components/Text/TextEditor'
 import TextViewer from '~/components/Text/TextViewer'
-import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 
 export default {
     name: 'ContentBlockAccordion',
@@ -99,40 +100,6 @@ export default {
         ImageAssetViewer,
     },
     extends: BaseContentBlock,
-    beforeMount() {
-        if (_.isEmpty(this.block)) {
-            this.block = {}
-        }
-        if (_.isEmpty(this.block.metadata)) {
-            this.block.metadata = {}
-        }
-        if (_.isEmpty(this.block.metadata.config)) {
-            this.block.metadata.config = {}
-        }
-        if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
-        }
-        if (_.isEmpty(this.block.metadata.config.items)) {
-            const defaultObject = {
-                header: '',
-                expand: false,
-                content: '',
-                fileConfig: {
-                    display: {
-                        width: 100,
-                        margin: '',
-                        padding: '',
-                    },
-                    hideBackground: true,
-                },
-            }
-            this.block.metadata.config.items = []
-            this.block.metadata.config.items.push(defaultObject)
-        }
-        this.block.body = this.$t(
-            'windward.core.shared.content_blocks.title.accordion'
-        )
-    },
     data() {
         return {
             expansionPanelKey: '0',
@@ -184,6 +151,40 @@ export default {
             }
         },
     },
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            const defaultObject = {
+                header: '',
+                expand: false,
+                content: '',
+                fileConfig: {
+                    display: {
+                        width: 100,
+                        margin: '',
+                        padding: '',
+                    },
+                    hideBackground: true,
+                },
+            }
+            this.block.metadata.config.items = []
+            this.block.metadata.config.items.push(defaultObject)
+        }
+        this.block.body = this.$t(
+            'windward.core.shared.content_blocks.title.accordion'
+        )
+    },
     mounted() {
         if (this.render) {
             // ensure panels are always loaded closed

package/components/Content/Blocks/OpenResponse.vue

@@ -1,11 +1,11 @@
 <template>
     <div>
         <v-container
-            class="pa-0"
             v-if="
                 block.metadata.config.title ||
                 block.metadata.config.instructions
             "
+            class="pa-0"
         >
             <h2 v-if="block.metadata.config.title" tabindex="0">
                 {{ block.metadata.config.title }}
@@ -23,6 +23,7 @@
             <div v-if="block.body && !submitted">
                 <TextViewer v-model="block.body" :height="200"></TextViewer>
                 <TextEditor
+                    :key="updateKey"
                     v-model="response"
                     :height="200"
                     menubar=""
@@ -104,23 +105,25 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
-import TextViewer from '~/components/Text/TextViewer'
-import TextEditor from '~/components/Text/TextEditor'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import UserContentBlockState from '~/models/UserContentBlockState'
+import Crypto from '~/helpers/Crypto'
+import TextViewer from '~/components/Text/TextViewer'
+import TextEditor from '~/components/Text/TextEditor'
 
 export default {
     name: 'ContentBlockOpenResponse',
-    extends: BaseContentBlock,
     components: {
         TextViewer,
         TextEditor,
     },
+    extends: BaseContentBlock,
     data() {
         return {
             stateLoaded: false,
             response: '',
             submitted: false,
+            updateKey: Crypto.id(),
         }
     },
     computed: {
@@ -135,6 +138,13 @@ export default {
             )
         },
     },
+    watch: {
+        render(newVal) {
+            if (newVal) {
+                this.onAfterSetContentBlockState()
+            }
+        },
+    },
     beforeMount() {
         if (_.isEmpty(this.block.body)) {
             this.block.body = ''
@@ -155,13 +165,6 @@ export default {
             this.block.metadata.config.starting_text = ''
         }
     },
-    watch: {
-        render(newVal) {
-            if (newVal) {
-                this.onAfterSetContentBlockState()
-            }
-        },
-    },
     mounted() {},
     methods: {
         async onAfterSetContentBlockState() {
@@ -194,6 +197,7 @@ export default {
                 // If we don't have a block_id then we are in the initial setup state
                 this.response = this.block.metadata.config.starting_text
             }
+            this.updateKey = Crypto.id()
             this.stateLoaded = true
         },
         onSubmit() {

package/components/Navigation/Items/UserUploadNav.vue

@@ -2,6 +2,7 @@
     <v-tooltip right>
         <template #activator="{ on, attrs }">
             <v-list-item
+                :class="color"
                 :to="
                     '/course/' +
                     course.id +
@@ -38,6 +39,9 @@ import { mapGetters } from 'vuex'
 export default {
     components: {},
     middleware: ['auth'],
+    props: {
+        color: { type: String, required: false, default: '' },
+    },
     data() {
         return {}
     },

package/components/Settings/TextEditorSettings.vue

@@ -5,6 +5,7 @@
             autofill
             :disabled="render"
             allow-read
+            root-block="p"
             show-glossary
             :hide-text-editor="hideTextEditor"
         >

package/components/utils/ContentViewer.vue

@@ -67,6 +67,9 @@ export default {
 </script>
 
 <style lang="scss">
+.text-viewer {
+    overflow-x: auto !important;
+}
 .text-viewer table tr td {
     padding: 10px !important;
 }

package/components/utils/FillInBlank/FillInBlankInput.vue

@@ -30,7 +30,8 @@
                                 color="primary"
                                 elevation="0"
                                 outlined
-                                @click="show = false"
+                                @click="close"
+                                @keydown.esc="close"
                             >
                                 {{
                                     $t(
@@ -46,12 +47,11 @@
 
         <div class="fib">
             <v-text-field
+                v-model="userInput"
                 :disabled="false"
                 outlined
                 dense
-                v-model="userInput"
                 clear-icon="mdi-close-circle-outline"
-                @click:append-outer="toggleToolTip"
                 clearable
                 :background-color="feedback"
                 :placeholder="
@@ -59,18 +59,19 @@
                         'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.add_answer'
                     )
                 "
-                @input="showAnswer = false"
-                @keydown="onPressEnter"
                 :aria-label="
                     $t(
                         'windward.core.components.utils.tiny_mce_wrapper.fill_in_blank'
                     )
                 "
+                @click:append-outer="toggleToolTip"
+                @input="showAnswer = false"
+                @keydown="onPressEnter"
             ></v-text-field>
             &nbsp;
             <v-btn
                 v-if="userInput && userInput.length > 0"
-                @click="toggleToolTip"
+                ref="btnCheck"
                 elevation="0"
                 color="primary"
                 outlined
@@ -79,25 +80,22 @@
                         'windward.core.components.utils.fill_in_the_blank.fill_in_blank_input.check_answer'
                     )
                 "
+                @click="toggleToolTip"
                 >{{
-                    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'
-                          )
+                    $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 },
+    components: {},
     props: {
         answer: { type: String, required: true },
         description: {
@@ -144,6 +142,20 @@ export default {
             return ''
         },
     },
+    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)
+                }
+            }
+        },
+    },
     methods: {
         setFocusAction() {
             this.$refs.action_button_1.$el.focus()
@@ -171,19 +183,11 @@ export default {
 
             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)
-                }
-            }
+        close() {
+            this.show = false
+            this.$nextTick(() => {
+                this.$refs.btnCheck.$el.focus()
+            })
         },
     },
 }

package/components/{Content/Blocks → utils}/GenerateAIQuestionButton.vue

@@ -40,6 +40,25 @@
                     return-object
                 ></v-select>
             </v-col>
+            <v-col
+                cols="auto"
+                class="d-flex align-center"
+                v-if="isFlashcardType"
+            >
+                <v-switch
+                    v-model="replaceExisting"
+                    hide-details
+                    dense
+                    color="secondary"
+                    class="mt-0 pt-0"
+                    :label="
+                        $t(
+                            'windward.games.components.settings.flashcard.form.replace_existing'
+                        )
+                    "
+                    :disabled="isLoading"
+                ></v-switch>
+            </v-col>
             <v-col>
                 <v-btn
                     elevation="0"
@@ -76,7 +95,7 @@ import AssessmentQuestion from '~/models/AssessmentQuestion'
 import Course from '~/models/Course'
 import Assessment from '~/models/Assessment'
 import Content from '~/models/Content'
-import Crypto from '~/helpers/Crypto'
+import Activity from '../../models/Activity'
 
 export default {
     name: 'GenerateAIQuestionButton',
@@ -85,6 +104,7 @@ export default {
         content: { type: Object, required: true },
         block: { type: Object, required: true },
         questionType: { type: String, required: true },
+        replaceExistingMode: { type: Boolean, default: false },
     },
     data() {
         return {
@@ -96,12 +116,16 @@ export default {
                     'windward.core.components.content.blocks.generate_questions.blooms.none'
                 ),
             },
+            replaceExisting: this.replaceExistingMode,
         }
     },
     computed: {
         ...mapGetters({
             contentTree: 'content/getTree',
         }),
+        isFlashcardType() {
+            return this.questionType === 'flashcard'
+        },
         flattenedContent() {
             let cloneContentTree = _.cloneDeep(this.contentTree)
             const homepage = this.$ContentService.getHomepage()
@@ -131,6 +155,7 @@ export default {
             return fullTree
         },
         taxonomyLevels() {
+            // Basic Bloom's taxonomy levels available to all question types
             let basicBloomTaxonomy = [
                 {
                     value: 'None',
@@ -158,10 +183,13 @@ export default {
                 },
             ]
 
+            // Only add higher-level Bloom's taxonomy for supported question types
+            // Flashcards use only basic levels
             if (
-                this.questionType === 'multi_choice_single_answer' ||
-                this.questionType === 'ordering' ||
-                this.questionType === 'multi_choice_multi_answer'
+                !this.isFlashcardType &&
+                (this.questionType === 'multi_choice_single_answer' ||
+                    this.questionType === 'ordering' ||
+                    this.questionType === 'multi_choice_multi_answer')
             ) {
                 const multiBlooms = [
                     {
@@ -185,32 +213,96 @@ export default {
     methods: {
         async generateAIQuestion() {
             this.isLoading = true
-            let bloomsRequest = ''
-            if (
-                this.selectedDifficulty.text !==
-                this.$t(
-                    'windward.core.components.content.blocks.generate_questions.blooms.none'
-                )
-            ) {
-                // send value to api call so its not changing with language
-                bloomsRequest = `?blooms_level=${this.selectedDifficulty.value}`
-            }
             try {
-                const response = await AssessmentQuestion.custom(
-                    new Course(this.course),
-                    new Content(this.selectedContent),
-                    new Assessment({ id: this.block.id }),
-                    new AssessmentQuestion(),
-                    `suggest/${this.questionType}${bloomsRequest}`
-                ).get()
-
-                if (response && response.length > 0) {
-                    const generatedQuestion = response[0]
-                    this.$emit('click:generate', generatedQuestion)
+                let bloomsRequest = ''
+                if (
+                    this.selectedDifficulty.text !==
+                    this.$t(
+                        'windward.core.components.content.blocks.generate_questions.blooms.none'
+                    )
+                ) {
+                    bloomsRequest = `?blooms_level=${this.selectedDifficulty.value}`
+                }
+
+                const course = new Course(this.course)
+                const content = new Content(
+                    this.selectedContent || this.content
+                )
+
+                let response
+                if (this.questionType === 'flashcard') {
+                    // FLASHCARD GENERATION
+                    const activity = new Activity()
+
+                    const endpoint = `suggest/flashcard${bloomsRequest}`
+
+                    // Call the endpoint exactly like FlashCardSlidesManager does
+                    response = await Activity.custom(
+                        course,
+                        content,
+                        activity,
+                        endpoint
+                    ).get()
+
+                    let activityData = null
+
+                    if (response && response.activity) {
+                        activityData = response.activity
+                    } else if (
+                        response &&
+                        response.length > 0 &&
+                        response[0] &&
+                        response[0].activity
+                    ) {
+                        activityData = response[0].activity
+                    } else if (Array.isArray(response) && response.length > 0) {
+                        activityData = response[0]
+                    }
+
+                    if (
+                        activityData &&
+                        activityData.metadata &&
+                        activityData.metadata.config &&
+                        activityData.metadata.config.cards &&
+                        Array.isArray(activityData.metadata.config.cards)
+                    ) {
+                        // We pass the activity data and the replace flag to the parent component
+                        this.$emit(
+                            'click:generate',
+                            activityData,
+                            this.replaceExisting
+                        )
+                    } else {
+                        throw new Error(
+                            'Invalid response from flashcard generation'
+                        )
+                    }
+                } else {
+                    // ASSESSMENT QUESTION GENERATION
+                    const assessment = new Assessment({ id: this.block.id })
+                    const question = new AssessmentQuestion()
+
+                    response = await AssessmentQuestion.custom(
+                        course,
+                        content,
+                        assessment,
+                        question,
+                        `suggest/${this.questionType}${bloomsRequest}`
+                    ).get()
+
+                    if (response && response.length > 0) {
+                        const generatedQuestion = response[0]
+                        this.$emit('click:generate', generatedQuestion)
+                    } else {
+                        throw new Error(
+                            'Invalid response from question generation'
+                        )
+                    }
                 }
             } catch (error) {
                 const errorMessage =
                     error.response?.data?.error?.message ||
+                    error.message ||
                     'assessment.error.technical'
                 const errorType = errorMessage.split('.').pop()
                 const basePath =

package/components/utils/TinyMCEWrapper.vue

@@ -138,7 +138,7 @@ export default {
             type: String,
             required: false,
             default:
-                'undo redo | styles | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table tablerowprops tablecellprops |bullist numlist outdent indent |glossaryButton fibFormatButton mathButton a11yButton',
+                'styles | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | table tablerowprops tablecellprops |bullist numlist outdent indent |glossaryButton fibFormatButton mathButton a11yButton | undo redo',
         },
         rootBlock: { type: String, required: false, default: 'div' },
         label: { type: String, required: false, default: '' },
@@ -212,7 +212,7 @@ export default {
                     },
                     format: {
                         title: 'Format',
-                        items: ' bold italic underline strikethrough superscript subscript codeformat | formats align | language | removeformat',
+                        items: ' bold italic underline strikethrough superscript subscript codeformat | formats align | language | removeformat | glossary',
                     },
                 },
                 autoresize_min_height: 100,
@@ -337,6 +337,9 @@ export default {
                 },
                 formats: {
                     glossary: {
+                        title: this.$t(
+                            'windward.core.components.utils.tiny_mce_wrapper.glossary'
+                        ),
                         inline: 'span',
                         attributes: {
                             'aria-label': this.$t(
@@ -378,67 +381,22 @@ export default {
                     ],
                 },
                 style_formats: [
-                    {
-                        title: 'Headings',
-                        items: [
-                            { title: 'Heading 2', format: 'h2' },
-                            { title: 'Heading 3', format: 'h3' },
-                            { title: 'Heading 4', format: 'h4' },
-                            { title: 'Heading 5', format: 'h5' },
-                            { title: 'Heading 6', format: 'h6' },
-                        ],
-                    },
-                    {
-                        title: 'Inline',
-                        items: [
-                            { title: 'Bold', format: 'bold' },
-                            { title: 'Italic', format: 'italic' },
-                            { title: 'Underline', format: 'underline' },
-                            { title: 'Strikethrough', format: 'strikethrough' },
-                            { title: 'Superscript', format: 'superscript' },
-                            { title: 'Subscript', format: 'subscript' },
-                            { title: 'Code', format: 'code' },
-                        ],
-                    },
-                    {
-                        title: 'Blocks',
-                        items: [{ title: 'Paragraph', format: 'p' }],
-                    },
-                    {
-                        title: 'Align',
-                        items: [
-                            { title: 'Left', format: 'alignleft' },
-                            { title: 'Center', format: 'aligncenter' },
-                            { title: 'Right', format: 'alignright' },
-                            { title: 'Justify', format: 'alignjustify' },
-                        ],
-                    },
-                    {
-                        title: 'LearningEdge',
-                        items: [
-                            {
-                                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',
-                            },
-                        ],
-                    },
+                    { title: 'Normal Text', format: 'div' },
+                    { title: 'Paragraph', format: 'p' },
+                    { title: 'Heading 2', format: 'h2' },
+                    { title: 'Heading 3', format: 'h3' },
+                    { title: 'Heading 4', format: 'h4' },
+                    { title: 'Heading 5', format: 'h5' },
+                    { title: 'Heading 6', format: 'h6' },
                 ],
                 placeholder: this.label
                     ? this.label
                     : this.$t('components.content.settings.base.placeholder'),
-                //required as it will be displayed as inline style in tinymce renderer
+                // required as it will be displayed as inline style in tinymce renderer
                 skin: false,
                 content_css: this.$vuetify.theme.isDark ? 'dark' : 'default',
 
-                //we need to inject the glossary style directly
+                // we need to inject the glossary style directly
                 content_style:
                     ContentCss +
                     EditorCss +
@@ -477,7 +435,6 @@ export default {
             this.text = this.value
         }
     },
-
     methods: {
         getEditor() {
             if (this.$refs.editor && this.$refs.editor.editor) {

package/helpers/tinymce/WindwardPlugins.ts

@@ -142,7 +142,17 @@ export class WindwardPlugins {
             'glossaryIcon',
             this.$t('windward.core.components.utils.tiny_mce_wrapper.glossary'),
             () => {
-                this.editor.formatter.apply('glossary')
+                if (
+                    this.editor.selection
+                        .getSel()
+                        .anchorNode.parentElement.classList.contains(
+                            'glossary-word'
+                        )
+                ) {
+                    this.editor.formatter.remove('glossary')
+                } else {
+                    this.editor.formatter.apply('glossary')
+                }
             }
         )
         this.addButtonToEditor(
@@ -210,13 +220,29 @@ export class WindwardPlugins {
         itemKey: string,
         itemText: string,
         command: string,
-        icon: string
+        icon: string,
+        type: string = 'command'
     ): void {
         this.editor.ui.registry.addMenuItem(itemKey, {
             text: itemText,
             icon,
             onAction: () => {
-                this.editor.execCommand(command, true)
+                switch (type) {
+                    case 'format':
+                        if (
+                            this.editor.selection
+                                .getNode()
+                                .classList.contains('glossary-word')
+                        ) {
+                            this.editor.formatter.remove(command)
+                        } else {
+                            this.editor.formatter.apply(command)
+                        }
+                        break
+                    default:
+                        this.editor.execCommand(command, true)
+                        break
+                }
             },
         })
     }
@@ -233,6 +259,13 @@ export class WindwardPlugins {
             'fib-window',
             'fibIcon'
         )
+        this.addEditorMenuItem(
+            'glossary',
+            'Glossary',
+            'glossary',
+            'glossaryIcon',
+            'format'
+        )
     }
 
     /**

package/models/Activity.ts

@@ -0,0 +1,9 @@
+// @ts-ignore
+import BaseModel from './BaseModel'
+
+export default class Activity extends BaseModel {
+    // Set the resource route of the model
+    resource() {
+        return 'activities'
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/core",
-    "version": "0.16.0",
+    "version": "0.17.0",
     "description": "Windward UI Core Plugins",
     "main": "plugin.js",
     "scripts": {

package/utils/index.js

@@ -7,7 +7,7 @@ import TinyMCEWrapper from '../components/utils/TinyMCEWrapper.vue'
 import MathExpressionEditor from '../components/utils/MathExpressionEditor'
 import CourseGlossary from '../components/utils/glossary/CourseGlossary.vue'
 import CourseGlossaryForm from '../components/utils/glossary/CourseGlossaryForm.vue'
-import GenerateAIQuestionButton from '../components/Content/Blocks/GenerateAIQuestionButton.vue'
+import GenerateAIQuestionButton from '../components/utils/GenerateAIQuestionButton.vue'
 
 export {
     MathHelper,