fcad-core-dragon 2.2.0 → 2.3.0-test.1

package/.gitlab-ci.yml

@@ -18,11 +18,11 @@ cache:
 # Global variables to ensure clean clones and token-based authentication
 variables:
   GIT_STRATEGY: clone
-  GIT_CHECKOUT: "true"
+  GIT_CHECKOUT: 'true'
   GIT_SUBMODULE_STRATEGY: recursive
   GIT_DEPTH: 1 # Faster, shallow clone
-  GIT_SSL_NO_VERIFY: "true" # Optional: if your GitLab server uses self-signed SSL
-  NPM_TOKEN: "$NPM_ACCESS_KEY" # hold value of Auth key for npm access
+  GIT_SSL_NO_VERIFY: 'true' # Optional: if your GitLab server uses self-signed SSL
+  NPM_TOKEN: '$NPM_ACCESS_KEY' # hold value of Auth key for npm access
 
 # Install stage
 install_dependencies:
@@ -41,8 +41,7 @@ lint_code:
 #unit-test stage
 run_tests_unit:
   stage: test
-  dependencies:
-    - install_dependencies
+  needs: ['install_dependencies', 'lint_code']
   script:
     - echo "🏃 Running tests..."
     - npm run test:unit:coverage -- --reporter=junit --outputFile=junit-report.xml
@@ -62,23 +61,19 @@ run_tests_unit:
 #Components-test stage with playwright
 run_components_test:
   stage: test
-  image: mcr.microsoft.com/playwright:v1.48.0-jammy
-  dependencies:
-    - install_dependencies
+  needs: ['install_dependencies', 'lint_code']
   script:
     - echo "🏃 Running Components tests..."
+    - npm ci
     - npx playwright install
     - npm run test-ct
-    - mkdir -p artifacts
-    - cp -r playwright-report artifacts/playwright-report || true
-    - if [ -f results.xml ]; then cp results.xml artifacts/results.xml; fi
   artifacts:
     when: always
     reports:
-      junit: artifacts/results.xml # for reporting in GitLab
+      junit: results.xml
     paths:
-      - artifacts/playwright-report/
-      - artifacts/results.xml
+      - playwright-report/
+      - results.xml
   allow_failure: true
 
 #Deploy to npm
@@ -86,21 +81,12 @@ publish_to_npm:
   stage: deploy
   #image: node:22
   script:
-    # Get version from package.json
-    - VERSION=$(node -p "require('./package.json').version")
-    - echo "Detected version => $VERSION"
-    # Set the right tag (next or latest) according to version
-    - if [[ "$VERSION" == *beta* ]]; then TAG="next"; else TAG="latest"; fi
-    - echo "Using dist-tag => $TAG"
     - echo " //registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc
-    - echo "👀 Check token -  ${NPM_TOKEN} "
-    - cat ~/.npmrc
-    - npm whoami || true
+    - npm ci
+    - npx semantic-release # Check semantic-release version
     - echo "🚀 Publishing package version from tag $CI_COMMIT_TAG"
-    - npm publish --access public --tag "$TAG" # scoped of publication (public)
-  when: on_success
   rules:
     - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH # Deploy only from the default branch (e.g., main)
-      changes:
-        - package.json # run job only when package.json is modified
-
+    - if: $CI_COMMIT_BRANCH == "beta" # Deploy from branch (e.g., beta)
+    - if: $CI_COMMIT_BRANCH == "alpha" # Deploy from branch (e.g., alpha)
+    - if: $CI_COMMIT_BRANCH == "test" # Deploy from branch (e.g., test)

package/.releaserc

@@ -0,0 +1,27 @@
+{
+  "branches": [
+    "master",
+    { "name": "beta", "prerelease": true },
+    { "name": "alpha", "prerelease": true },
+    { "name": "test", "prerelease": true }
+  ],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/changelog",
+      {
+        "changelogFile": "CHANGELOG.md"
+      }
+    ],
+    "@semantic-release/npm",
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json", "CHANGELOG.md"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ],
+    "@semantic-release/gitlab"
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# [2.3.0-test.1](https://git.crosemont.qc.ca/fcad/core/fcad-core-2/compare/v2.2.0...v2.3.0-test.1) (2026-03-27)
+
+
+### Bug Fixes
+
+* **ci-config:** fixed the rule for npm deployment on granches beta, apha and test ([38923e7](https://git.crosemont.qc.ca/fcad/core/fcad-core-2/commit/38923e7ad775795f2ea27f0d304915a740185892))
+* **ci-config:** fixed the rule for npm deployment on granches beta, apha and test ([808d3de](https://git.crosemont.qc.ca/fcad/core/fcad-core-2/commit/808d3de37bf1d03d420e05fa13412ce17ca72ad1))
+* **dependencies:** fixed depentencies conflicts causing npm ci to fail ([469918e](https://git.crosemont.qc.ca/fcad/core/fcad-core-2/commit/469918e24d0b2948adf7d2f0135d80aeba2b35a8))
+* remaning release config file to .releaserc ([2a746d0](https://git.crosemont.qc.ca/fcad/core/fcad-core-2/commit/2a746d0b294577128937a22fae8f556984e97fda))
+
+
+### Features
+
+* **core:** expose app-store and app-router via provide for to external plugins and libraries ([42e776f](https://git.crosemont.qc.ca/fcad/core/fcad-core-2/commit/42e776f9af103490d58d067389d28223c61d7ee8))

package/documentation/.vitepress/config.js

@@ -15,8 +15,8 @@ export default defineConfig({
       prev: 'Page précédente',
       next: 'Page suivante'
     },
-    darkModeSwitchTitle : 'Activer le thème sombre',
-    lightModeSwitchTitle : 'Activer le thème clair',
+    darkModeSwitchTitle: 'Activer le thème sombre',
+    lightModeSwitchTitle: 'Activer le thème clair',
     lastUpdated: {
       text: 'Dernière modification ',
       formatOptions: {
@@ -26,7 +26,7 @@ export default defineConfig({
     },
     search: {
       provider: 'local',
-      options:{
+      options: {
         locales: {
           root: {
             translations: {
@@ -42,7 +42,7 @@ export default defineConfig({
                 footer: {
                   selectText: 'accéder à la page',
                   navigateText: 'parcourir les résultats',
-                  closeText: 'quitter la recherche',
+                  closeText: 'quitter la recherche'
                 }
               }
             }
@@ -56,17 +56,24 @@ export default defineConfig({
       { text: 'Accueil', link: '/' },
       { text: 'Démarrage', link: '/demarrage' },
       { text: 'Composants', link: '/composants' },
-      { text: 'Déploiement', link: '/deploiement' },
+      { text: 'Déploiement', link: '/deploiement' }
       // { text: 'Examples', link: '/markdown-examples' }
     ],
     sidebar: [
-      { text: 'Composants critiques',
+      {
+        text: 'Composants critiques',
         collapsed: true,
         items: [
           { text: 'app-base', link: '/composants_critiques/app-base' },
-          { text: 'app-base-module', link: '/composants_critiques/app-base-module' },
-          { text: 'app-base-page', link: '/composants_critiques/app-base-page' },
-          { text: 'main', link: '/composants_critiques/main' },
+          {
+            text: 'app-base-module',
+            link: '/composants_critiques/app-base-module'
+          },
+          {
+            text: 'app-base-page',
+            link: '/composants_critiques/app-base-page'
+          },
+          { text: 'main', link: '/composants_critiques/main' }
         ]
       },
       {
@@ -74,41 +81,111 @@ export default defineConfig({
         collapsed: true,
         items: [
           { text: 'app-base-button', link: '/composants/app-base-button' },
-          { text: 'app-base-error-display', link: '/composants/app-base-error-display' },
+          {
+            text: 'app-base-error-display',
+            link: '/composants/app-base-error-display'
+          },
           { text: 'app-base-popover', link: '/composants/app-base-popover' },
           { text: 'app-comp-audio', link: '/composants/app-comp-audio' },
-          { text: 'app-comp-branch-buttons', link: '/composants/app-comp-branch-buttons' },
-          { text: 'app-comp-button-progress', link: '/composants/app-comp-button-progress' },
+          {
+            text: 'app-comp-branch-buttons',
+            link: '/composants/app-comp-branch-buttons'
+          },
+          {
+            text: 'app-comp-button-progress',
+            link: '/composants/app-comp-button-progress'
+          },
           { text: 'app-comp-carousel', link: '/composants/app-comp-carousel' },
-          { text: 'app-comp-container', link: '/composants/app-comp-container' },
-          { text: 'app-comp-input-checkbox-next', link: '/composants/app-comp-input-checkbox-next' },
-          { text: 'app-comp-input-dropdown-next', link: '/composants/app-comp-input-dropdown-next' },
-          { text: 'app-comp-input-radio-next', link: '/composants/app-comp-input-radio-next' },
-          { text: 'app-comp-input-text-next', link: '/composants/app-comp-input-text-next' },
-          { text: 'app-comp-input-text-table-next', link: '/composants/app-comp-input-text-table-next' },
-          { text: 'app-comp-input-text-to-fill-dropdown-next', link: '/composants/app-comp-input-text-to-fill-dropdown-next' },
-          { text: 'app-comp-input-text-to-fill-next', link: '/composants/app-comp-input-text-to-fill-next' },
+          {
+            text: 'app-comp-container',
+            link: '/composants/app-comp-container'
+          },
+          {
+            text: 'app-comp-input-checkbox-next',
+            link: '/composants/app-comp-input-checkbox-next'
+          },
+          {
+            text: 'app-comp-input-dropdown-next',
+            link: '/composants/app-comp-input-dropdown-next'
+          },
+          {
+            text: 'app-comp-input-radio-next',
+            link: '/composants/app-comp-input-radio-next'
+          },
+          {
+            text: 'app-comp-input-text-next',
+            link: '/composants/app-comp-input-text-next'
+          },
+          {
+            text: 'app-comp-input-text-table-next',
+            link: '/composants/app-comp-input-text-table-next'
+          },
+          {
+            text: 'app-comp-input-text-to-fill-dropdown-next',
+            link: '/composants/app-comp-input-text-to-fill-dropdown-next'
+          },
+          {
+            text: 'app-comp-input-text-to-fill-next',
+            link: '/composants/app-comp-input-text-to-fill-next'
+          },
           { text: 'app-comp-jauge', link: '/composants/app-comp-jauge' },
+          { text: 'app-comp-math', link: '/composants/app-comp-math' },
           { text: 'app-comp-menu', link: '/composants/app-comp-menu' },
-          { text: 'app-comp-menu-item', link: '/composants/app-comp-menu-item' },
-          { text: 'app-comp-navigation', link: '/composants/app-comp-navigation' },
-          { text: 'app-comp-note-call', link: '/composants/app-comp-note-call' },
-          { text: 'app-comp-note-credit', link: '/composants/app-comp-note-credit' },
-          { text: 'app-comp-play-bar-next', link: '/composants/app-comp-play-bar-next' },
-          { text: 'app-comp-play-bar-progress', link: '/composants/app-comp-play-bar-progress' },
-          { text: 'app-comp-pop-up-next', link: '/composants/app-comp-pop-up-next' },
-          { text: 'app-comp-quiz-next', link: '/composants/app-comp-quiz-next' },
-          { text: 'app-comp-quiz-recall', link: '/composants/app-comp-quiz-recall' },
+          {
+            text: 'app-comp-menu-item',
+            link: '/composants/app-comp-menu-item'
+          },
+          {
+            text: 'app-comp-navigation',
+            link: '/composants/app-comp-navigation'
+          },
+          {
+            text: 'app-comp-note-call',
+            link: '/composants/app-comp-note-call'
+          },
+          {
+            text: 'app-comp-note-credit',
+            link: '/composants/app-comp-note-credit'
+          },
+          {
+            text: 'app-comp-play-bar-next',
+            link: '/composants/app-comp-play-bar-next'
+          },
+          {
+            text: 'app-comp-play-bar-progress',
+            link: '/composants/app-comp-play-bar-progress'
+          },
+          {
+            text: 'app-comp-pop-up-next',
+            link: '/composants/app-comp-pop-up-next'
+          },
+          {
+            text: 'app-comp-quiz-next',
+            link: '/composants/app-comp-quiz-next'
+          },
+          {
+            text: 'app-comp-quiz-recall',
+            link: '/composants/app-comp-quiz-recall'
+          },
           // { text: 'app-comp-settings-menu', link: '/composants/app-comp-settings-menu' },
           { text: 'app-comp-svg-next', link: '/composants/app-comp-svg-next' },
-          { text: 'app-comp-table-of-content', link: '/composants/app-comp-table-of-content' },
-          { text: 'app-comp-video-player', link: '/composants/app-comp-video-player' },
+          {
+            text: 'app-comp-table-of-content',
+            link: '/composants/app-comp-table-of-content'
+          },
+          {
+            text: 'app-comp-video-player',
+            link: '/composants/app-comp-video-player'
+          }
         ]
       }
     ],
 
     socialLinks: [
-      { icon: 'gitlab', link: 'https://git.crosemont.qc.ca/fcad/core/fcad-core-2' }
+      {
+        icon: 'gitlab',
+        link: 'https://git.crosemont.qc.ca/fcad/core/fcad-core-2'
+      }
     ]
   }
 })

package/package.json

@@ -1,16 +1,34 @@
 {
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
-  "config": {
-    "projname": ""
+  "name": "fcad-core-dragon",
+  "version": "2.3.0-test.1",
+  "private": false,
+  "type": "module",
+  "main": "./src/main.js",
+  "engines": {
+    "node": ">0.11.9"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "docs:build": "vitepress build documentation",
+    "docs:dev": "vitepress dev documentation",
+    "docs:preview": "vitepress preview documentation",
+    "format": "prettier --write src/",
+    "lintfix": "eslint --fix src",
+    "lintreport": "eslint ./src",
+    "preview": "vite preview",
+    "reset": "rm -rf ./node_modules package-lock.json .cache dist && npm i && npm run watch",
+    "test-ct": "npx playwright test -c playwright-ct.config.js",
+    "test:unit": "vitest",
+    "test:unit:coverage": "vitest --coverage",
+    "vue": "vue",
+    "watch": "nodemon -e js,vue,html,json -x yalc publish --push"
   },
   "dependencies": {
     "axios": "^1.6.8",
     "gsap": "^3.12.5",
     "idb": "^8.0.0",
+    "mathjs": "^15.1.0",
     "mobile-detect": "^1.4.5",
     "pinia": "^3.0.3",
     "tiny-emitter": "^2.1.0",
@@ -19,14 +37,21 @@
   "devDependencies": {
     "@eslint/js": "^9.38.0",
     "@pinia/testing": "^1.0.3",
-    "@playwright/experimental-ct-vue": "^1.56.1",
-    "@playwright/test": "^1.56.1",
+    "@playwright/experimental-ct-vue": "^1.50.1",
+    "@playwright/test": "^1.50.1",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/gitlab": "^13.3.2",
+    "@semantic-release/npm": "^12.0.2",
+    "@semantic-release/release-notes-generator": "^14.1.0",
     "@testing-library/jest-dom": "^6.9.1",
-    "@types/node": "^24.10.0",
+    "@types/node": "^22.10.0",
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vitest/coverage-v8": "^4.0.15",
+    "@vitest/coverage-v8": "^3.0.0",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/test-utils": "^2.4.6",
+    "esbuild": "0.25.12",
     "eslint": "^9.38.0",
     "eslint-plugin-cypress": "^5.1.0",
     "eslint-plugin-vue": "~10.3.0",
@@ -36,35 +61,24 @@
     "nodemon": "^3.1.0",
     "prettier": "^3.6.2",
     "sass-embedded": "^1.91.0",
+    "vite": "^6.0.1",
     "vitepress": "^1.6.3",
-    "vitest": "^4.0.15",
+    "vitest": "^3.0.0",
     "vue-i18n": "^11.1.12",
     "vue-router": "^4.4.5",
     "vuetify": "^3.10.10"
   },
-  "engines": {
-    "node": ">0.11.9"
+  "overrides": {
+    "esbuild": "0.25.12",
+    "vite": "^6.0.1",
+    "@vitejs/plugin-vue": "^6.0.1"
   },
-  "main": "./src/main.js",
-  "name": "fcad-core-dragon",
-  "private": false,
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite",
-    "docs:build": "vitepress build documentation",
-    "docs:dev": "vitepress dev documentation",
-    "docs:preview": "vitepress preview documentation",
-    "format": "prettier --write src/",
-    "lintfix": "eslint --fix src",
-    "lintreport": "eslint ./src",
-    "preview": "vite preview",
-    "reset": "rm -rf ./node_modules package-lock.json .cache dist && npm i && npm run watch",
-    "test-ct": "playwright test -c playwright-ct.config.js",
-    "test:unit": "vitest",
-    "test:unit:coverage": "vitest --coverage",
-    "vue": "vue",
-    "watch": "nodemon -e js,vue,html,json -x yalc publish --push"
-  },
-  "type": "module",
-  "version": "2.2.0"
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "config": {
+    "projname": ""
+  }
 }

package/src/components/AppBase.vue

@@ -131,6 +131,7 @@ export default {
       'getRouteHistory',
       'getBookmarkEnabled',
       'getAppDebugMode',
+      'getLessonPosition',
       'getApplicationSettings'
     ]),
     appDebugMode() {
@@ -373,6 +374,10 @@ export default {
 
     setInitialLoadingDone() {
       this.initialLoading = false
+      if (this.bookmarkActive) {
+        const bookmark = this.getLessonPosition[0]
+        this.$router.push({ name: bookmark })
+      } // navigate to menu to start the app
     },
     /**
      * @description set the desired language for the app default is french
@@ -774,6 +779,14 @@ export default {
 
                 return history.toReversed()
               })(),
+              savedPoint: (() =>
+                this.$route.name == 'menu'
+                  ? this.$helper.getRoutesFromVueRouter().meta.children[0]
+                      ._namedRoute
+                  : this.$route.name)(),
+              playbarValues: {
+                ...this.getMediaPlaybarValues()
+              },
               ...lessonsData
             }
           }
@@ -783,21 +796,7 @@ export default {
 
       const endStmt = { ...stmt }
       endStmt.verb = 'terminated'
-      //================================STATEMENT FOR THE PLAYBAR ===============================================
-      //Creating custom statement
-      const stmtPlaybar = {
-        verb: 'played',
-        definition: text,
-        description: text,
-        extensions: [
-          {
-            id: 'playbar-values',
-            content: {
-              ...this.getMediaPlaybarValues()
-            }
-          }
-        ]
-      }
+
       //================================STATEMENT FOR THE SETTINGS ===============================================
 
       //Creating custom statement
@@ -815,19 +814,12 @@ export default {
             content: {
               ...this.getApplicationSettings
             }
-            // content: {
-            //   bookmark: false
-            // } //for testing
           }
         ]
       }
       //================================END STATEMENT ===============================================
 
-      this.sendXapiStatements(
-        [stmtPlaybar, stmtUserSettings, stmt, endStmt],
-        null,
-        option
-      ) //send xapi statement
+      this.sendXapiStatements([stmtUserSettings, stmt, endStmt], null, option) //send xapi statement
 
       if (this.appTimer.getTimerState() === 'started')
         setTimeout(() => this.stopAppTimer(), 0) //clear the timer
@@ -881,14 +873,6 @@ export default {
         ...baseStmt,
         verb: 'terminated',
         extensions: [
-          {
-            id: 'ending-point',
-            content: (() =>
-              this.$route.name == 'menu'
-                ? this.$helper.getRoutesFromVueRouter().meta.children[0]
-                    ._namedRoute
-                : this.$route.name)()
-          },
           {
             id: 'user-data',
             content: new Object()
@@ -926,51 +910,21 @@ export default {
       const fetchData = async () => {
         //funtion that will make a multiple request on the server
         const requests = async () => {
-          const _url = new URL(activityId)
-          const parentID = `${_url.origin}/${this.getModuleInfo.courseID}` // redefining activity id for statement
-
           const lessonProgressParam = { email: actorMbox, activityId }
           const lessonStateParam = {
             email: actorMbox,
             activityId,
             verb: 'suspended'
           }
-          const lessonPosionParam = {
-            email: actorMbox,
-            activityId
-          }
-          const playbarParam = {
-            email: actorMbox,
-            activityId,
-            verb: 'played'
-          }
-          const preferencesParam = {
-            email: actorMbox,
-            activityId: parentID,
-            verb: 'preferred'
-          }
 
-          const fetchParams = [
-            lessonProgressParam,
-            lessonStateParam,
-            lessonPosionParam,
-            playbarParam,
-            preferencesParam
-          ]
+          const fetchParams = [lessonProgressParam, lessonStateParam]
 
-          // Using Promise.all to make parallel requests
-          const {
-            userData,
-            savedPoint,
-            preferredSettings,
-            playbarValues,
-            lessonStatus
-          } = await this.$xapi._getBulkData(fetchParams)
+          const { userData, savedPoint, playbarValues, lessonStatus } =
+            await this.$xapi._getBulkData(fetchParams)
 
           return {
             userData,
             savedPoint,
-            preferredSettings,
             playbarValues,
             lessonStatus
           }

package/src/components/AppBaseModule.vue

@@ -29,8 +29,6 @@
       />
     </nav>
     <base-module :m-data="$data">
-          
-
       <v-container
         id="wrapper-content"
         fluid
@@ -440,7 +438,6 @@ export default {
           this.getConnectionInfo.remote
         ) {
           const lessonPosition = this.getLessonPosition
-
           const lastReached = lessonPosition.length ? lessonPosition[0] : ''
 
           //only Send savepoint statement when 3 navigation happen and the route is different from last saved
@@ -1067,17 +1064,15 @@ export default {
             this.nextOnboarding('message_1')
           } catch (e) {
             //fetch default values for popups
-            this.onboardingMessages = import(
-              '../assets/data/onboardingMessages.json'
-            )
+            this.onboardingMessages =
+              import('../assets/data/onboardingMessages.json')
             this.nextOnboarding('message_1')
           }
         }
       } else {
         if (this.getOnboardingEnabled) {
-          this.onboardingMessages = import(
-            '../assets/data/onboardingMessages.json'
-          )
+          this.onboardingMessages =
+            import('../assets/data/onboardingMessages.json')
           this.nextOnboarding('message_1')
         }
       }
@@ -1421,7 +1416,21 @@ export default {
               {
                 id: 'user-data',
                 content: {
-                  routeHistory: this.getRouteHistory,
+                  routeHistory: (() => {
+                    const history = this.getRouteHistory.toReversed() //get the route history from the last
+
+                    history[0] = this.$route.meta // change the last recored route to the current route
+
+                    return history.toReversed()
+                  })(),
+                  savedPoint: (() =>
+                    this.$route.name == 'menu'
+                      ? this.$helper.getRoutesFromVueRouter().meta.children[0]
+                          ._namedRoute
+                      : this.$route.name)(),
+                  playbarValues: {
+                    ...this.getMediaPlaybarValues()
+                  },
                   ...lessonsData
                 }
               }
@@ -1469,7 +1478,21 @@ export default {
                 {
                   id: 'user-data',
                   content: {
-                    routeHistory: this.getRouteHistory,
+                    routeHistory: (() => {
+                      const history = this.getRouteHistory.toReversed() //get the route history from the last
+
+                      history[0] = this.$route.meta // change the last recored route to the current route
+
+                      return history.toReversed()
+                    })(),
+                    savedPoint: (() =>
+                      this.$route.name == 'menu'
+                        ? this.$helper.getRoutesFromVueRouter().meta.children[0]
+                            ._namedRoute
+                        : this.$route.name)(),
+                    playbarValues: {
+                      ...this.getMediaPlaybarValues()
+                    },
                     ...lessonsData
                   }
                 }