fcad-core-dragon 2.0.0-beta.0 → 2.0.0-beta.2

package/src/components/AppCompQuiz.vue

@@ -21,11 +21,7 @@
         },
         {
           'container-quiz-texte-troue': quizData.type_question == 'texte_troue'
-        },
-        {
-          'container-quiz-association': quizData.type_question == 'association'
-        },
-        { 'container-quiz-drag-drop': quizData.type_question == 'dragdrop' }
+        }
       ]"
     >
       <div
@@ -39,16 +35,14 @@
               quizData.type_question == 'texte_troue_select'
           },
           { 'quiz-texte-tableau': quizData.type_question == 'texte_tableau' },
-          { 'quiz-texte-troue': quizData.type_question == 'texte_troue' },
-          { 'quiz-association': quizData.type_question == 'association' },
-          { 'quiz-drag-drop': quizData.type_question == 'dragdrop' }
+          { 'quiz-texte-troue': quizData.type_question == 'texte_troue' }
         ]"
       >
         <div
           :id="`${quizData.type_question}_${quizData.id}`"
           class="quiz-question"
         >
-          <span class="sr-only">question:</span>
+          <span class="sr-only">question :</span>
           <div v-html="quizEnnonce" />
         </div>
 
@@ -75,7 +69,6 @@
 
         <div class="btn-ctrl-quiz">
           <app-base-button
-            v-show="$store.state.$appStore.isDr"
             :id="`btn_quiz_${quizData.id}`"
             ref="quiz"
             class="btn-quiz"
@@ -85,21 +78,23 @@
           >
             {{ txtBtnSubmit }}
           </app-base-button>
-
-          <!-- REMOVE FROM PHASE 3 -->
-          <!-- <app-base-button
-            v-if="$store.state.$appStore.isDr"
-            id="btn-reset"
-            ref="quiz"
-            :is-active="quizIsNotStarted"
-            @click="resetQuiz"
-          >
-            {{ $t('button.reset') }}
-          </app-base-button> -->
-          <!--TO DOULBE CHCEK...-->
         </div>
       </div>
     </b-col>
+    <b-col cols="12" aria-live="polite">
+      <transition name="fade" mode="in-out">
+        <div
+          v-if="showSolution && showRetro"
+          :class="`retro_inline_wrapper retro_inline_${retroType}`"
+          :aria-label="retroAriaLabel"
+        >
+          <div class="retro-title-container">
+            <span class="retro-title">{{ retroTitle }}</span>
+          </div>
+          <div class="retro-text-container" v-html="retroHtml"></div>
+        </div>
+      </transition>
+    </b-col>
   </b-row>
   <b-row v-else-if="errorQuizItems" class="warning-error">
     <b-col class="box-error">
@@ -118,7 +113,7 @@
           </li>
         </ul>
       </div>
-      <div class="box ">
+      <div class="box">
         <p class="doc">
           Visitez
           <a href="https://fcaddocumentation.netlify.app/" target="blank">
@@ -151,7 +146,6 @@ import $extendsQuiz from '../mixins/$quizMixins'
 export default {
   name: 'AppCompQuiz',
   components: {
-    AppBaseInstruction: () => import('./AppBaseInstruction.vue'),
     AppCompInputTextBox: () => import('./AppCompInputTextBox.vue'),
     AppCompInputDropdown: () => import('./AppCompInputDropdown.vue'),
     AppCompInputCheckBox: () => import('./AppCompInputCheckBox.vue'),
@@ -159,10 +153,9 @@ export default {
     AppCompInputTextToFillDropdown: () =>
       import('./AppCompInputTextToFillDropdown.vue'),
     AppCompInputTextTable: () => import('./AppCompInputTextTable.vue'),
-    AppCompInputTextToFillText: () =>
-      import('./AppCompInputTextToFillText.vue'),
-    AppCompInputAssociation: () => import('./AppCompInputAssociation.vue'),
-    AppCompInputDragDrop: () => import('./AppCompDragAndDrop.vue')
+    AppCompInputTextToFillText: () => import('./AppCompInputTextToFillText.vue')
+    //AppCompInputAssociation: () => import('./AppCompInputAssociation.vue'),
+    //AppCompInputDragDrop: () => import('./AppCompDragAndDrop.vue')
   },
   mixins: [$extendsQuiz],
   props: {
@@ -177,7 +170,7 @@ export default {
 
     quizData: {
       type: Object,
-      validator: function(value) {
+      validator: function (value) {
         //verify that element has all required properties
         if (
           value.id &&
@@ -239,15 +232,35 @@ export default {
       quizDragDrop: {},
       quizSubmit: false, //added to explod comp^
       initQuizSelected: [], //value of the saved answers of the dropdown quiz
-      initQuizTable: [] //value of the saved answers of the table quiz
+      initQuizTable: [], //value of the saved answers of the table quiz
+      retroType: '',
+      retroTitle: '',
+      retroHtml: '',
+      showRetro: false
     }
   },
   computed: {
     ...mapGetters([
       'getUserInteraction',
       'getCurrentPage',
-      'getConnectionInfo'
+      'getConnectionInfo',
+      'getDataFromServer'
     ]),
+    retroAriaLabel() {
+      let label = ''
+      switch (this.retroType) {
+        case 'neutral':
+          label = this.$t('quizState.neutralAnswer')
+          break
+        case 'positive':
+          label = this.$t('quizState.goodAnswer')
+          break
+        case 'negative':
+          label = this.$t('quizState.badAnswer')
+          break
+      }
+      return label
+    },
     /**
      * @description To control whether or not the submit button is disabled
      * @returns {Boolean} true if the quiz is not yet answered, false the button is enable
@@ -1231,13 +1244,12 @@ export default {
                           }
                           if (
                             !this.isEqual(
-                              Object.keys(theQuiz.solution).sort(function(
-                                a,
-                                b
-                              ) {
-                                return a - b
-                              }),
-                              listIdZone.sort(function(a, b) {
+                              Object.keys(theQuiz.solution).sort(
+                                function (a, b) {
+                                  return a - b
+                                }
+                              ),
+                              listIdZone.sort(function (a, b) {
                                 return a - b
                               })
                             ) &&
@@ -1268,13 +1280,12 @@ export default {
                           }
                           if (
                             !this.isEqual(
-                              Object.values(theQuiz.solution).sort(function(
-                                a,
-                                b
-                              ) {
-                                return a - b
-                              }),
-                              listIdChoice.sort(function(a, b) {
+                              Object.values(theQuiz.solution).sort(
+                                function (a, b) {
+                                  return a - b
+                                }
+                              ),
+                              listIdChoice.sort(function (a, b) {
                                 return a - b
                               })
                             ) &&
@@ -1789,10 +1800,10 @@ export default {
                         }
                         if (
                           !this.isEqual(
-                            Object.keys(theQuiz.solution).sort(function(a, b) {
+                            Object.keys(theQuiz.solution).sort(function (a, b) {
                               return a - b
                             }),
-                            listIdZone.sort(function(a, b) {
+                            listIdZone.sort(function (a, b) {
                               return a - b
                             })
                           ) &&
@@ -2322,37 +2333,11 @@ export default {
      * */
     txtBtnSubmit() {
       let str = ''
-      const { type_question, solution } = this.quizData
-      //Is the quiz one of these
-      let isMulti = [
-        'dropdown',
-        'texte_tableau',
-        'texte_troue',
-        'texte_troue_select'
-      ].includes(type_question)
-        ? true
-        : false
+      const { solution } = this.quizData
 
-      if (isMulti) {
-        if (solution === null)
-          str = `${this.$t('button.save')} ${this.$t('button.quiz_multiple')}`
-        //There is more than on element in the solution
-        else if (solution.length > 1)
-          str = `${this.$t('button.quiz_verify')} ${this.$t(
-            'button.quiz_multiple'
-          )}`
-        //only one element in the solution
-        else
-          str = `${this.$t('button.quiz_verify')} ${this.$t(
-            'button.quiz_single'
-          )}`
-      } else {
-        //Quiz text area
-        if (solution === null)
-          str = `${this.$t('button.save')} ${this.$t('button.quiz_single')}`
-        //None of the above case
-        else str = this.$t('button.submit')
-      }
+      if (solution === null) str = this.$t('button.save')
+      //There is more than on element in the solution
+      else str = this.$t('button.quiz_verify')
 
       return str
     },
@@ -2364,7 +2349,9 @@ export default {
     quizEnnonce() {
       const { ennonce, id } = this.quizData
       let _ennonce = ennonce
-
+      /**
+       *Image in quiz enonce is disabled for now
+       *
       const regex = /\$img__[\S|\s]*\$/i // regex pattern to match exp: $img__myimage$
       let matchAll = _ennonce.match(regex)
 
@@ -2378,15 +2365,17 @@ export default {
 
           const imgName = imgString.substring(0, splitPosition) //get the name of the image
           const imgAlt = imgString.substring(splitPosition + 1) // get the alt define for the image
+          
 
-          const imgFile = require(`@/assets/img/${imgName.trim()}`) // require the image file
+          const imgFile = import(`@/assets/img/${imgName.trim()}`)
 
           _ennonce = _ennonce.replace(
             regex,
             `<img src=${imgFile} alt='${imgAlt}' id='img_for_en_${id}' class='img-ennonce'>`
           ) //replace with correct img tag
+          
         })
-
+        */
       return _ennonce
     }
   },
@@ -2455,22 +2444,18 @@ export default {
         this.showSolution = false
       }
     },
-    getConnectionInfo: {
+    getUserInteraction: {
       //in development environment (localhost), don't wait for the axios call
-      immediate: process.env.NODE_ENV === 'development',
+      // immediate: import.meta.env.DEV,
+      immediate: true,
       handler() {
-        if (!this.getConnectionInfo) return
+        if (!this.getUserInteraction) return
         this.getPreviousAnswers()
       }
     }
   },
-  created() {
-    this.getPreviousAnswers(),
-      this.$bus.$on('validateQuiz', () => {
-        this.quizSubmit = true
-      })
-  },
-
+  created() {},
+  beforeUnmount() {},
   mounted() {},
   methods: {
     showNoAnswerPopup() {
@@ -2494,13 +2479,11 @@ export default {
             let theSolution = theQuiz.solution
             if (theSolution == null) {
               //Create the popup with the content of the retrotaction neutre
-              this.createPopUp(
-                {
-                  type: 'popup-retro',
-                  value: theQuiz.retroaction.retro_neutre
-                },
-                'retro_neutre'
-              )
+              this.retroType = 'neutral'
+              this.retroTitle = theQuiz.retroaction.retro_neutre.title
+              this.retroHtml = theQuiz.retroaction.retro_neutre.hypertext_1
+              this.showSolution = true
+              this.showRetro = true
             } else {
               let correctAnswer = false
               switch (theQuiz.type_question) {
@@ -2509,10 +2492,10 @@ export default {
                   break
                 case 'choix_mult':
                   correctAnswer = this.isEqual(
-                    theAnswer[theQuiz.id].sort(function(a, b) {
+                    theAnswer[theQuiz.id].sort(function (a, b) {
                       return a - b
                     }),
-                    theSolution.sort(function(a, b) {
+                    theSolution.sort(function (a, b) {
                       return a - b
                     })
                   )
@@ -2569,23 +2552,17 @@ export default {
                 }
               }
               if (correctAnswer) {
+                this.retroTitle = theQuiz.retroaction.retro_positive.title
+                this.retroHtml = theQuiz.retroaction.retro_positive.hypertext_1
+                this.retroType = 'positive'
                 this.showSolution = true
-                this.createPopUp(
-                  {
-                    type: 'popup-retro',
-                    value: theQuiz.retroaction.retro_positive
-                  },
-                  'retro_positive'
-                )
+                this.showRetro = true
               } else {
+                this.retroTitle = theQuiz.retroaction.retro_negative.title
+                this.retroHtml = theQuiz.retroaction.retro_negative.hypertext_1
+                this.retroType = 'negative'
                 this.showSolution = true
-                this.createPopUp(
-                  {
-                    type: 'popup-retro',
-                    value: theQuiz.retroaction.retro_negative
-                  },
-                  'retro_negative'
-                )
+                this.showRetro = true
                 this.totalAttempts++
                 if (
                   this.totalAttempts >= theQuiz.max_essai &&

package/src/components/AppCompQuizRecall.vue

@@ -0,0 +1,277 @@
+<!--
+ @ Description: This component is used to display a quiz and its answer from a previous page if it has been completed by the user. The only quiz type supported is open answer (textarea) and the quiz must be in the same lesson. 
+ @ What it does: Retrieve the quizData specific to an activity ID and pageID. Then, retrieve the answers previously saved by the user to this quiz. After, create an html element including title and conditional content. If the answer have been previously saved, a specific hypertext, the question and the answer (disabled textarea) are displayed. If the answer have not been saved, another hypertext is displayed. 
+-->
+
+<template>
+  <section class="quizRecall">
+    <!--Optionnal title, out of quiz-answer-conditionning, default tag H4, but can be change by user-->
+    <component
+      :is="quizRecall.titletag"
+      v-if="quizRecall.title"
+      class="quizRecall-title"
+    >
+      {{ quizRecall.title }}
+    </component>
+    <!--Quiz answer conditionning-->
+    <template v-if="quizRecall.done == true">
+      <div
+        v-if="quizRecall.hypertext_done"
+        class="quizRecall-text-done"
+        v-html="quizRecall.hypertext_done"
+      ></div>
+      <div class="quizRecall-ennonce" v-html="quizRecall.ennonce"></div>
+      <textarea
+        v-model="quizRecall.answer"
+        disabled
+        class="form-control"
+      ></textarea>
+    </template>
+    <template v-if="quizRecall.done == false">
+      <div
+        v-if="quizRecall.hypertext_undone"
+        class="quizRecall-text-undone"
+        v-html="quizRecall.hypertext_undone"
+      ></div>
+    </template>
+  </section>
+</template>
+
+<script>
+//Recall mixins has the necessary datas and functions to give back quizRecall statu
+import { mapGetters } from 'vuex'
+export default {
+  name: 'AppCompQuizRecall',
+  props: {
+    quizRecallData: { type: Object, required: true } //{activityId,pageId,hypertext_done,hypertext_undone,title, titletag}
+  },
+  data() {
+    return {
+      quizRecall: {
+        done: false,
+        answer: '',
+        ennonce: '',
+        title: '',
+        titletag: 'h4',
+        hypertext_done: `<p>${this.$t(
+          'message.recall_done'
+        )}</p>` /*String traduite par défaut*/,
+        hypertext_undone: `<p>${this.$t(
+          'message.recall_undone'
+        )}</p>` /*String traduite par défaut*/
+      },
+      quizData: null
+    }
+  },
+  computed: {
+    ...mapGetters(['getAllCompleted', 'getUserInteraction', 'getPageData'])
+  },
+  watch: {
+    //Change quizRecall when userData is changed (it is where answer are saved)
+    getUserInteraction(newUserData, oldUserData) {
+      if (this.quizRecallData && this.quizData) {
+        this.getQuizRecallAnswer(this.quizRecallData, this.quizData)
+      } else {
+        this.quizRecall.done == false
+      }
+    }
+  },
+  mounted() {},
+  created() {
+    //Validate quizRecall data
+    //(no validation to the quiz, only to the new datas)
+    this.validateQuizRecallData(this.quizRecallData)
+
+    //Get quizData and validate the quiz type
+    if (this.quizRecallData.activityId && this.quizRecallData.pageId) {
+      this.getQuizData(
+        this.quizRecallData.activityId,
+        this.quizRecallData.pageId
+      )
+    }
+
+    //Get quizRecall answer
+    if (this.quizRecallData && this.quizData) {
+      this.getQuizRecallAnswer(this.quizRecallData, this.quizData)
+    } else {
+      this.quizRecall.done == false
+    }
+  },
+  methods: {
+    /**
+     * @description Finds a reponse_ouverte quiz data with specified ID
+     * @param {Object} searchObject Object that will be iterated over to find the quiz data (The page "data" object)
+     * @param {String} quizID ID of the quiz we are looking for
+     */
+    findQuizdataObject(searchObject, quizID) {
+      for (let property in searchObject) {
+        // Check if the current property is an object and has the required properties
+        if (
+          typeof searchObject[property] === 'object' &&
+          searchObject[property] !== null
+        ) {
+          if (
+            searchObject[property].id === quizID &&
+            searchObject[property].type_question === 'reponse_ouverte'
+          ) {
+            return searchObject[property] // Valid Quiz data found
+          }
+        }
+      }
+
+      // No reponse_ouverte quiz data with specified ID was found
+      return null
+    },
+    //Get datas from the original open answer quiz
+    getQuizData(activityId, pageId) {
+      if (pageId && activityId) {
+        let pageData = this.getPageData(activityId, pageId)
+        if (pageData && pageData.content) {
+          this.quizData = this.findQuizdataObject(
+            pageData.content,
+            this.quizRecallData.quizId
+          )
+          //Warn that the specified quiz could not be found
+          if (this.quizData === null) {
+            console.warn(
+              `%c WARNING!>>> Quiz Recall: Unable to find a quiz with type_question 'reponse_ouverte' and id '${this.quizRecallData.quizId}' in ${pageId} of ${activityId}`,
+              'background: orange; color: white; display: block; margin:5px;'
+            )
+          }
+        } else {
+          this.quizRecall.done == false
+          console.warn(
+            `%c WARNING!>>> AppCompQuizRecall : QuizData ActivityID and PageID combinaison is invalid.`,
+            'background: orange; color: white; display: block; margin:5px;'
+          )
+        }
+      } else {
+        this.quizRecall.done == false
+      }
+    },
+    //Get datas from quizRecallData and userData and add them to quizRecall object
+    getQuizRecallAnswer(quizRecallData, quizData) {
+      //Get userData
+      let userData = this.getUserInteraction
+      //Get quizId
+      let quizId = quizData.id
+      //Get activityId
+      let activityId = quizRecallData.activityId
+      //Get pageId
+      let pageId = quizRecallData.pageId
+      //Add hypertext_done and undone to quizRecall
+      if (quizRecallData.hypertext_done) {
+        this.quizRecall.hypertext_done = quizRecallData.hypertext_done
+      }
+      if (quizRecallData.hypertext_undone) {
+        this.quizRecall.hypertext_undone = quizRecallData.hypertext_undone
+      }
+      //Add the title if it exists
+      if (quizRecallData.title) {
+        this.quizRecall.title = quizRecallData.title
+        //Modify le titletag
+        if (quizRecallData.titletag) {
+          let validator = this.validateTitleTag(this.quizRecallData.titletag)
+          if (validator) {
+            this.quizRecall.titletag = this.quizRecallData.titletag
+          }
+        }
+      }
+
+      //If quiz answer exists in userData, quizRecall done is true and add the quiz answer to quizRecall
+      if (
+        userData &&
+        userData[activityId] &&
+        userData[activityId][pageId] &&
+        userData[activityId][pageId].userInteraction &&
+        userData[activityId][pageId].userInteraction.quizAnswers &&
+        userData[activityId][pageId].userInteraction.quizAnswers[quizId]
+      ) {
+        this.quizRecall.done = true
+        this.quizRecall.answer =
+          userData[activityId][pageId].userInteraction.quizAnswers[quizId]
+        this.quizRecall.ennonce = quizData.ennonce
+      } else {
+        //If the quiz answer doesn't exist
+        this.quizRecall.done = false
+      }
+    },
+
+    //Validate quizRecallData
+    /*Validate if the required properties are present in the object and that there is not invalid properties */
+    validateQuizRecallData(value) {
+      let requiredProperties = [
+        'quizId',
+        'activityId',
+        'pageId',
+        'hypertext_done',
+        'hypertext_undone'
+      ]
+      let optionalProperties = ['title', 'titletag']
+      let allProperties = requiredProperties.concat(optionalProperties)
+
+      //Verify if the properties are valid
+      let recallDataProperties = Object.keys(value)
+      let wrongProperties = []
+      let missingRequired = []
+
+      //Get all the invalids properties from recallQuizData
+      /*Add element from target array that are NOT in arr to the wrongArray*/
+      let checkerWrong = (arr, target, wrongArray) =>
+        target.every((v) => {
+          if (arr.includes(v)) {
+            return true
+          } else {
+            wrongArray.push(v)
+            return true
+          }
+        })
+      //Get all the required properties that are missing from recallQuizData
+      /*Add element from the arr that are NOT in target arr to the missingArray*/
+
+      let checkerMissing = (arr, target, missingArray) =>
+        arr.every((v) => {
+          if (target.includes(v)) {
+            return true
+          } else {
+            missingArray.push(v)
+            return true
+          }
+        })
+
+      checkerWrong(allProperties, recallDataProperties, wrongProperties)
+      checkerMissing(requiredProperties, recallDataProperties, missingRequired)
+
+      //Validate if all properties in quizRecallData are valid
+      if (wrongProperties.length > 0) {
+        console.warn(
+          `%c WARNING!>>> AppCompQuizRecall : QuizRecallData ${wrongProperties} invalid. Required properties: ${requiredProperties} . Optional properties: ${optionalProperties}`,
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+      }
+      //Validate if all required properties are present in quizRecallData
+      if (missingRequired.length > 0) {
+        console.warn(
+          `%c WARNING!>>>  AppCompQuizRecall : QuizRecallData missing required ${missingRequired} property. Required properties: activityId and pageId. Optional properties:  title, titletag, hypertext_done and hypertext_undone.`,
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+      }
+    },
+    /*Get a title tag (string). Return true if the tag is valid and false is it's not*/
+
+    validateTitleTag(value) {
+      let tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span']
+      let lowerValue = value.toLowerCase()
+      if (tags && value && tags.find((element) => element == lowerValue))
+        return true
+      else {
+        console.warn(
+          '%c WARNING!>>> recallMixins: Your quizRecallData titletag is not valid. You can use h1,h2,h3,h4,h5,h6,p,or span',
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+        return false
+      }
+    }
+  }
+}
+</script>