@windward/core 0.15.0 → 0.17.0

package/components/utils/GenerateAIQuestionButton.vue

@@ -0,0 +1,345 @@
+<template>
+    <div>
+        <v-row class="container-generate-ai mt-2">
+            <v-col>{{
+                $t(
+                    'windward.core.components.content.blocks.generate_questions.ai_assistance'
+                )
+            }}</v-col>
+            <v-col>
+                <v-select
+                    v-model="selectedContent"
+                    :items="flattenedContent"
+                    class="btn-selector"
+                    outlined
+                    hide-details
+                    dense
+                    :label="
+                        $t(
+                            'windward.core.components.content.blocks.generate_questions.selected_pages'
+                        )
+                    "
+                    item-text="content.name"
+                    return-object
+                ></v-select>
+            </v-col>
+            <v-col>
+                <v-select
+                    v-model="selectedDifficulty"
+                    :items="taxonomyLevels"
+                    item-text="text"
+                    class="btn-selector"
+                    outlined
+                    hide-details
+                    dense
+                    :label="
+                        $t(
+                            'windward.core.components.content.blocks.generate_questions.blooms.blooms_taxonomy'
+                        )
+                    "
+                    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"
+                    color="secondary"
+                    class="mb-1 btn-selector"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                    @click="generateAIQuestion"
+                >
+                    <v-icon v-if="!isLoading" class="pr-1"
+                        >mdi-magic-staff</v-icon
+                    >
+                    {{
+                        $t(
+                            'windward.core.components.content.blocks.generate_questions.button_label'
+                        )
+                    }}
+                    <template v-slot:loader>
+                        <v-progress-circular
+                            indeterminate
+                            size="23"
+                        ></v-progress-circular>
+                    </template>
+                </v-btn>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import AssessmentQuestion from '~/models/AssessmentQuestion'
+import Course from '~/models/Course'
+import Assessment from '~/models/Assessment'
+import Content from '~/models/Content'
+import Activity from '../../models/Activity'
+
+export default {
+    name: 'GenerateAIQuestionButton',
+    props: {
+        course: { type: Object, required: true },
+        content: { type: Object, required: true },
+        block: { type: Object, required: true },
+        questionType: { type: String, required: true },
+        replaceExistingMode: { type: Boolean, default: false },
+    },
+    data() {
+        return {
+            isLoading: false,
+            selectedContent: '',
+            selectedDifficulty: {
+                value: 'None',
+                text: this.$t(
+                    '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()
+            if (!_.isEmpty(homepage)) {
+                cloneContentTree.unshift(homepage)
+            }
+            let fullTree = []
+            // flatten content tree to get nested children pages
+            cloneContentTree.forEach((content) => {
+                fullTree.push(content)
+                if (content.children.length > 0) {
+                    fullTree = fullTree.concat(_.flatten(content.children))
+                    // check if children have children
+                    content.children.forEach((child) => {
+                        fullTree = fullTree.concat(_.flatten(child.children))
+                    })
+                }
+            })
+            //
+            if (_.isEmpty(this.selectedContent)) {
+                // returns array so hold here to pluck out below
+                const currentPage = fullTree.filter(
+                    (contentPage) => contentPage.id === this.content.id
+                )
+                this.selectedContent = currentPage[0] ? currentPage[0] : ''
+            }
+            return fullTree
+        },
+        taxonomyLevels() {
+            // Basic Bloom's taxonomy levels available to all question types
+            let basicBloomTaxonomy = [
+                {
+                    value: 'None',
+                    text: this.$t(
+                        'windward.core.components.content.blocks.generate_questions.blooms.none'
+                    ),
+                },
+                {
+                    value: 'Remember',
+                    text: this.$t(
+                        'windward.core.components.content.blocks.generate_questions.blooms.remember'
+                    ),
+                },
+                {
+                    value: 'Understand',
+                    text: this.$t(
+                        'windward.core.components.content.blocks.generate_questions.blooms.understand'
+                    ),
+                },
+                {
+                    value: 'Apply',
+                    text: this.$t(
+                        'windward.core.components.content.blocks.generate_questions.blooms.apply'
+                    ),
+                },
+            ]
+
+            // Only add higher-level Bloom's taxonomy for supported question types
+            // Flashcards use only basic levels
+            if (
+                !this.isFlashcardType &&
+                (this.questionType === 'multi_choice_single_answer' ||
+                    this.questionType === 'ordering' ||
+                    this.questionType === 'multi_choice_multi_answer')
+            ) {
+                const multiBlooms = [
+                    {
+                        value: 'Analyze',
+                        text: this.$t(
+                            'windward.core.components.content.blocks.generate_questions.blooms.analyze'
+                        ),
+                    },
+                    {
+                        value: 'Evaluate',
+                        text: this.$t(
+                            'windward.core.components.content.blocks.generate_questions.blooms.evaluate'
+                        ),
+                    },
+                ]
+                basicBloomTaxonomy = basicBloomTaxonomy.concat(multiBlooms)
+            }
+            return basicBloomTaxonomy
+        },
+    },
+    methods: {
+        async generateAIQuestion() {
+            this.isLoading = true
+            try {
+                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 =
+                    'windward.core.components.content.blocks.generate_questions.error'
+
+                let errorText =
+                    this.$t(`${basePath}.${errorType}`) +
+                    '\n\n' +
+                    this.$t(`${basePath}.${errorType}_support`)
+
+                if (errorType === 'technical') {
+                    const errorCode =
+                        error.response?.data?.error?.details?.error_type ||
+                        'UNKNOWN'
+                    errorText = errorText.replace('[ERROR_CODE]', errorCode)
+                }
+
+                this.$dialog.error(errorText, {
+                    duration: 5000,
+                    keepOnHover: true,
+                    singleton: true,
+                    type: 'error',
+                })
+            } finally {
+                this.isLoading = false
+            }
+        },
+    },
+}
+</script>
+
+<style scoped>
+.btn-selector {
+    width: 100%;
+}
+.container-generate-ai {
+    outline: 1px solid var(--v-secondary-base);
+    border-radius: 15px;
+}
+</style>

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/components/utils/glossary/CourseGlossary.vue

@@ -1,11 +1,14 @@
 <template>
-    <v-container justify="center">
+    <v-container justify="center" class="pa-0">
         <v-row justify="center" align="center">
             <v-col cols="12">
                 <v-data-table
                     :key="tableKey"
                     :headers="headers"
                     :items="glossaryTerms"
+                    :footer-props="{
+                        'items-per-page-options': [5, -1],
+                    }"
                     :search="search"
                     class="elevation-1"
                 >
@@ -35,9 +38,13 @@
                             >
                                 <template #title>
                                     {{
-                                        $t(
-                                            'windward.core.pages.glossary.add_term'
-                                        )
+                                        selectedTerm.id
+                                            ? $t(
+                                                  'windward.core.pages.glossary.edit_term'
+                                              )
+                                            : $t(
+                                                  'windward.core.pages.glossary.add_term'
+                                              )
                                     }}
                                 </template>
                                 <template #trigger>
@@ -159,18 +166,16 @@
 <script>
 import { mapGetters, mapMutations, mapActions } from 'vuex'
 import _ from 'lodash'
-import { encode } from 'he'
+import CourseGlossaryTerm from '../../../models/CourseGlossaryTerm'
 import CourseGlossaryForm from './CourseGlossaryForm'
 import DialogBox from '~/components/Core/DialogBox.vue'
 import Crypto from '~/helpers/Crypto'
 import Course from '~/models/Course'
-import CourseGlossaryTerm from '../../../models/CourseGlossaryTerm'
 import SpeedDial from '~/components/Core/SpeedDial.vue'
-import TextViewer from '~/components/Text/TextViewer.vue'
 
 export default {
     name: 'CourseGlossary',
-    components: { DialogBox, CourseGlossaryForm, SpeedDial, TextViewer },
+    components: { DialogBox, CourseGlossaryForm, SpeedDial },
     layout: 'course',
     middleware: ['auth'],
     props: {

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/i18n/en-US/components/content/blocks/generate_questions.ts

@@ -1,20 +1,35 @@
 export default {
     error: {
         default: 'Could not generate question from provided content.',
-        default_support: 'Please try again or contact support if the issue persists.',
-        
+        default_support:
+            'Please try again or contact support if the issue persists.',
+
         insufficient_content: 'More content needed to generate questions.',
-        insufficient_content_support: 'Please add more text, examples, or explanations to this section. We recommend at least 2-3 paragraphs of content to generate relevant questions.',
-        
-        content_mismatch: 'Content doesn\'t match question type.',
-        content_mismatch_support: 'The current content isn\'t suitable for this type of question. Consider adding more specific examples, numerical data, or comparable items depending on your desired question type.',
-        
+        insufficient_content_support:
+            'Please add more text, examples, or explanations to this section. We recommend at least 50 words of relevant content to generate appropriate questions.',
+
+        content_mismatch: "Content doesn't match question type.",
+        content_mismatch_support:
+            "The current content isn't suitable for this type of question. Consider adding more specific examples, numerical data, or comparable items depending on your desired question type.",
+
         llm_unavailable: 'Question generation temporarily unavailable.',
-        llm_unavailable_support: 'We\'re unable to connect to our AI service at the moment. Please try again in a few minutes or contact support if the issue persists.',
-        
+        llm_unavailable_support:
+            "We're unable to connect to our AI service at the moment. Please try again in a few minutes or contact support if the issue persists.",
+
         technical: 'Unable to process request.',
-        technical_support: 'Something went wrong on our end. Please try again or contact support if this continues. Reference code: [ERROR_CODE]'
+        technical_support:
+            'Something went wrong on our end. Please try again or contact support if this continues. Reference code: [ERROR_CODE]',
     },
     button_label: 'Generate Question',
-    selected_pages: 'Selected Page'
+    selected_pages: 'Selected Page',
+    ai_assistance: 'AI Assistance',
+    blooms: {
+        blooms_taxonomy: "Bloom's Taxonomy Level",
+        none: 'None selected',
+        remember: 'Remember',
+        understand: 'Understand',
+        apply: 'Apply',
+        analyze: 'Analyze',
+        evaluate: 'Evaluate',
+    },
 }

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

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

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

@@ -2,7 +2,7 @@ export default {
     title: {
         assessment: 'Assessment Settings',
         open_response: 'Open Response Settings',
-        open_response_collate: 'Open Response Collate Settings',
+        open_response_collate: 'Open Response Download Settings',
         image: 'Image Settings',
         user_upload: 'User Upload Settings',
         file_download: 'File Download Settings',

package/i18n/es-ES/components/content/blocks/generate_questions.ts

@@ -12,7 +12,7 @@ export default {
 
         content_mismatch: 'El contenido no coincide con el tipo de pregunta.',
         content_mismatch_support:
-            'El contenido actual no es adecuado para este tipo de pregunta. Considere agregar ejemplos más específicos o elementos comparables.',
+            'Por favor, añada más texto, ejemplos o explicaciones a esta sección. Recomendamos al menos 50 palabras de contenido relevante para generar preguntas apropiadas.',
 
         llm_unavailable:
             'La generación de preguntas no está disponible temporalmente.',
@@ -25,4 +25,14 @@ export default {
     },
     button_label: 'Generar pregunta',
     selected_pages: 'Página seleccionada',
+    ai_assistance: 'Asistencia de IA',
+    blooms: {
+        blooms_taxonomy: 'Nivel de taxonomía de Bloom',
+        none: 'Ninguno seleccionado',
+        remember: 'Recordar',
+        understand: 'Entender',
+        apply: 'Aplicar',
+        analyze: 'Analizar',
+        evaluate: 'Evaluar',
+    },
 }

package/i18n/es-ES/shared/content_blocks.ts

@@ -8,7 +8,7 @@ export default {
         math: 'Matemáticas',
         accordion: 'Acordeón',
         open_response: 'Respuesta abierta',
-        open_response_collate: 'Intercalación de respuesta abierta',
+        open_response_collate: 'Módulo de descarga de respuestas',
         image: 'Imagen',
         user_upload: 'Carga de usuario',
         clickable_icons: 'Iconos en los que se puede hacer clic',