@windward/core 0.16.0 → 0.18.0

package/components/Settings/TabSettings.vue

@@ -1,27 +1,10 @@
 <template>
     <div>
         <v-row class="pl-3 pr-3">
-            <v-text-field
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                :autofocus="true"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                outlined
-                :label="
-                    $t('windward.core.components.settings.clickable_icon.title')
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                outlined
-                :label="$t('components.content.settings.base.instructions')"
-                :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-row>
         <v-divider class="my-4 primary"></v-divider>
         <p>{{ $t('windward.core.components.settings.tab.tabs') }}</p>
@@ -130,16 +113,30 @@
 <script>
 import _, { get } from 'lodash'
 import Crypto from '~/helpers/Crypto'
-import TextEditor from '~/components/Text/TextEditor'
 import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
+import TextEditor from '~/components/Text/TextEditor'
 
 export default {
     name: 'TabSettings',
-    components: { TextEditor, ImageAssetSettings, SortableExpansionPanel },
+    components: {
+        TextEditor,
+        ImageAssetSettings,
+        SortableExpansionPanel,
+        BaseContentBlockSettings,
+    },
     extends: BaseContentSettings,
+    data() {
+        return {
+            expansionPanelKey: '0',
+            textEditorUpdateKey: Crypto.id(),
+            valid: true,
+            loading: false,
+        }
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -158,6 +155,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&
@@ -188,14 +188,6 @@ export default {
             this.block.metadata.config.items.push(defaultObject)
         }
     },
-    data() {
-        return {
-            expansionPanelKey: '0',
-            textEditorUpdateKey: Crypto.id(),
-            valid: true,
-            loading: false,
-        }
-    },
     mounted() {
         if (this.block.metadata.config.items.length <= 0) {
             this.onAddElement()

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/Settings/UserUploadSettings.vue

@@ -1,24 +1,11 @@
 <template>
     <div>
-        <v-text-field
-            id="block-settings-title"
-            v-model="block.metadata.config.title"
-            outlined
-            :rules="$Validation.getRule('block.title')"
-            :counter="$Validation.getLimit('block.title')"
-            :autofocus="true"
-            :label="$t('components.content.settings.base.title')"
-            :disabled="render"
-        ></v-text-field>
-        <v-textarea
-            id="block-settings-instructions"
-            v-model="block.metadata.config.instructions"
-            :rules="$Validation.getRule('block.instructions')"
-            :counter="$Validation.getLimit('block.instructions')"
-            outlined
-            :label="$t('components.content.settings.base.instructions')"
-            :disabled="render"
-        ></v-textarea>
+        <v-container>
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
+                :disabled="render"
+            ></BaseContentBlockSettings>
+        </v-container>
         <v-switch
             v-model="block.metadata.config.uploadSettings.multiple"
             :label="
@@ -45,15 +32,15 @@
 </template>
 <script>
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
-import Crypto from '~/helpers/Crypto'
-import TextEditor from '~/components/Text/TextEditor'
 import _ from 'lodash'
 import Uuid from '~/helpers/Uuid'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
+import TextEditor from '~/components/Text/TextEditor'
 
 export default {
     name: 'UserUploadSettings',
+    components: { TextEditor, BaseContentBlockSettings },
     extends: BaseContentSettings,
-    components: { TextEditor },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -73,6 +60,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&

package/components/Settings/VideoSettings.vue

@@ -2,29 +2,18 @@
     <div>
         <v-row>
             <v-col cols="12">
-                <v-text-field
-                    id="block-settings-title"
-                    v-model="block.metadata.config.title"
-                    :rules="$Validation.getRule('block.title')"
-                    :counter="$Validation.getLimit('block.title')"
-                    outlined
-                    :label="$t('windward.core.components.settings.video.title')"
+                <BaseContentBlockSettings
+                    v-model="block.metadata.config"
                     :disabled="render"
-                ></v-text-field>
-                <v-textarea
-                    id="block-settings-instructions"
-                    v-model="block.metadata.config.description"
-                    outlined
-                    auto-grow
-                    :rules="$Validation.getRule('block.instructions')"
-                    :counter="$Validation.getLimit('block.instructions')"
-                    :label="
+                    :title-label="
+                        $t('windward.core.components.settings.video.title')
+                    "
+                    :instructions-label="
                         $t(
                             'components.content.settings.base.description_optional'
                         )
                     "
-                    :disabled="render"
-                ></v-textarea>
+                ></BaseContentBlockSettings>
 
                 <h4 class="mb-3">
                     {{ $t('windward.core.components.settings.video.sources') }}
@@ -404,11 +393,12 @@ import _ from 'lodash'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
 import SourcePicker from './VideoSettings/SourcePicker.vue'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 
 export default {
     name: 'VideoSettings',
+    components: { ContentBlockAsset, SourcePicker, BaseContentBlockSettings },
     extends: BaseContentSettings,
-    components: { ContentBlockAsset, SourcePicker },
     data() {
         return {
             fileTab: null,
@@ -450,6 +440,9 @@ export default {
             this.onAddPlaylistItem()
             this.playlistPaginator = 1
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
     },
     mounted() {
         this.reloadMedia()

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