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

package/src/components/{AppCompInputCheckBox.vue → AppCompInputCheckBoxNext.vue}

@@ -1,3 +1,9 @@
+<!-- About this Component--
+ * Renders a checkboxe input type  for the Quiz component
+ * Related Quiz to question: REPONSE_MULTIPLE
+ * Receives the a data object defined by user
+ * Used by AppCompQuizNext
+-->
 <template>
   <div class="input-box">
     <fieldset>
@@ -8,11 +14,11 @@
         v-html="$t('quizState.answers')"
       />
 
-      <template v-for="choixReponse in inputDataValue">
-        <div
-          :Key="`div_chx_${inputDataId}_${choixReponse.id}`"
-          class="box-checkbox"
-        >
+      <template
+        v-for="choixReponse in inputDataValue"
+        :Key="`div_chx_${inputDataId}_${choixReponse.id}`"
+      >
+        <div class="box-checkbox" role="group">
           <label
             :key="`lbl_chx_${inputDataId}-${choixReponse.id}`"
             :for="`chx_${inputDataId}_${choixReponse.id}`"
@@ -26,7 +32,7 @@
               type="checkbox"
               :value="choixReponse.id"
               :name="`btn-checkbox-${inputDataId}`"
-              :disabled="quizCompleted"
+              :disabled="quizLimitActive"
               class="checkbox-input"
               :aria-labelledby="`span_${inputDataId}_${choixReponse.id}`"
             />
@@ -50,15 +56,17 @@
   </div>
 </template>
 <script>
-import $extendsQuiz from '../mixins/$quizMixins'
+import { useQuiz } from '../composables/useQuiz'
+import { toRefs } from 'vue'
 export default {
-  name: 'AppCompInputCheckBox',
-  mixins: [$extendsQuiz],
+  name: 'AppCompInputCheckBoxNext',
+
   props: {
-    inputType: {
+    quizType: {
       type: String,
       default: ''
     },
+
     inputDataId: {
       type: String,
       default: ''
@@ -67,9 +75,9 @@ export default {
       type: Array,
       default: () => []
     },
-    quizCompleted: {
-      type: Boolean,
-      default: false
+    quizInputType: {
+      type: Array,
+      default: () => []
     },
     solution: {
       type: Array,
@@ -83,118 +91,72 @@ export default {
       type: Boolean,
       default: false
     },
-    quizInputMultiple: {
-      type: Array,
-      default: () => []
-    }, //use to pass the value of the input
+    quizLimitActive: {
+      type: Boolean,
+      default: false
+    }, //use to set if quiz should be active or not
+
     quizSubmit: {
       type: Boolean,
       default: false
-    }, //use to call a submit
-    aBy: {
-      type: String,
-      default: ''
-    } // use to pass id of the related question for the choices
+    } //use to call a submit
+  },
+  emits: ['input-change'],
+  setup(props) {
+    const { containsValue, shuffleArray, classInput, messageAccessibility } =
+      useQuiz(toRefs(props))
+
+    return { containsValue, shuffleArray, classInput, messageAccessibility }
   },
 
   data() {
     return {
       inputDataValue: [],
-      quizInputMultipleValue: [] //not using quizInputMultiple because quizInputMultiple is a prop
+      quizInputMultipleValue: [], //not using quizInputMultiple because quizInputMultiple is a prop
+      quizSolution: null
     }
   },
 
-  computed: {},
-
   watch: {
     /**
      * @description to pass value to AppCompQuiz
      * @fires input-change to AppCompQuiz.vue
      */
-    quizInputMultipleValue(newValue) {
-      this.$emit('input-change', newValue)
-    },
-
-    /**
-     * @description to pass the value from AppCompQuiz
-     */
-    quizInputMultiple(newValue) {
-      this.quizInputMultipleValue = newValue
+    quizInputMultipleValue: {
+      deep: true,
+      handler(newValue) {
+        this.$emit('input-change', newValue)
+      }
     }
   },
 
   mounted() {
-    if (this.solution !== null) {
-      this.solution.sort(function (a, b) {
-        return a - b
-      })
-    }
-    this.quizInputMultipleValue = this.quizInputMultiple
-
-    if (this.shuffleAnswers) {
-      this.inputDataValue = this.shuffleArray(this.inputData)
-    } else {
-      this.inputDataValue = this.inputData
-    }
+    this.initQuiz()
   },
 
   methods: {
-    /**
-     * @description compares 2 array
-     * @param {Array} array1
-     * @param {Array} array2
-     * @returns {Boolean}
-     */
-    isEqual(array1, array2) {
-      // if length is not equal
-      if (array1.length != array2.length) {
-        return false
-      } else {
-        // comapring each element of array
-        for (let i = 0; i < array1.length; i++) {
-          if (array1[i] != array2[i]) {
-            return false
-          }
-        }
-        return true
+    initQuiz() {
+      this.quizSolution = this.solution
+      if (this.quizSolution !== null) {
+        this.quizSolution.sort(function (a, b) {
+          return a - b
+        })
       }
-    },
+      this.quizInputMultipleValue = this.quizInputType
 
-    /**
-     * @description check if a values exists in a array
-     * @param {Array} array
-     * @param value
-     * @returns {Boolean}
-     */
-    containsValue(array, value) {
-      return array.includes(value)
-    },
+      if (this.shuffleAnswers)
+        return (this.inputDataValue = this.shuffleArray(this.inputData))
 
-    /**
-     * @description shuffles an array used to randomized the option order if shuffleAnswers is true
-     * @param {Array} array
-     * @returns {Array}
-     */
-    shuffleArray(array) {
-      let newArray = []
-      let newArray2 = []
-
-      for (let i = 0; i < array.length; i++) {
-        const element = array[i]
-        //todo remove null values
-        newArray.push(element)
-      }
-      while (newArray.length > 0) {
-        let pos = Math.floor(newArray.length * Math.random())
-        newArray2.push(newArray[pos])
-        newArray.splice(pos, 1)
-      }
-      return newArray2
+      this.inputDataValue = this.inputData
     }
   }
 }
 </script>
 <style lang="scss">
+fieldset {
+  border: inherit;
+}
+
 .custom-control-input:focus ~ .custom-control-label::before {
   border: inherit;
 }

package/src/components/AppCompInputDropdownNext.vue

@@ -0,0 +1,159 @@
+<!-- About this Component--
+ * Renders a SELECT input to display choices of response for the Quiz component
+ * Related Quiz to question: DROPDOWN
+ * Receives the a data object defined by user
+ * Used by AppCompQuizNext
+ * Uses useQuiz composable
+-->
+<template>
+  <div class="input-box">
+    <div
+      v-for="singleDropdown in inputData"
+      :key="singleDropdown.id"
+      class="dropdown-container"
+      :class="`dropdownlist-${singleDropdown.id} ${classInput(singleDropdown.id, quizInputTypeValue)}`"
+    >
+      <label
+        :for="`${inputDataId}_${singleDropdown.id}`"
+        v-html="singleDropdown.ennonce"
+      ></label>
+
+      <v-select
+        :id="inputDataId + '_' + singleDropdown.id"
+        v-model="quizInputTypeValue[singleDropdown.id]"
+        item-title="text"
+        :items="singleDropdown.option"
+        :disabled="quizLimitActive"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { toRefs } from 'vue'
+export default {
+  name: 'AppCompInputDropdown',
+
+  props: {
+    quizType: {
+      type: String,
+      default: ''
+    },
+    inputDataId: {
+      type: String,
+      default: ''
+    },
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+    quizInputType: {
+      type: Array,
+      default: () => []
+    },
+    solution: {
+      type: Array,
+      default: () => []
+    },
+    showSolution: {
+      type: Boolean,
+      default: false
+    },
+    quizLimitActive: {
+      type: Boolean,
+      default: false
+    },
+    shuffleAnswers: {
+      type: Boolean,
+      default: false
+    },
+
+    quizSubmit: {
+      type: Boolean,
+      default: false
+    } //use to call a submit
+  },
+  emits: ['input-change'],
+  setup(props) {
+    const { containsValue, shuffleArray, classInput, messageAccessibility } =
+      useQuiz(toRefs(props))
+
+    return {
+      containsValue,
+      shuffleArray,
+      classInput,
+      messageAccessibility
+    }
+  },
+
+  data() {
+    return {
+      quizInputTypeValue: [], //not using quizInputType because quizInputType is a prop
+      quizSolution: null
+    }
+  },
+
+  computed: {},
+
+  watch: {
+    /**
+     * @description to pass value to AppCompQuiz
+     * @emits input-change
+     */
+    quizInputTypeValue: {
+      deep: true,
+      handler(newValue) {
+        this.$emit('input-change', newValue)
+      }
+    }
+  },
+
+  mounted() {
+    this.initQuiz()
+  },
+
+  methods: {
+    initQuiz() {
+      this.quizSolution = this.solution
+      if (this.quizSolution !== null) {
+        this.quizSolution.sort(function (a, b) {
+          return a - b
+        })
+      }
+      //to show the defaultAnswer
+      const defaultAnswer = {
+        value: null,
+        disabled: true,
+        text: this.$t('message.first_option_dropdown')
+      }
+      let selectedChoices = []
+      for (let i = 0; i < this.inputData.length; i++) {
+        let singleDropdown
+        if (this.shuffleAnswers) {
+          singleDropdown = this.inputData[i]
+          singleDropdown.option = this.shuffleArray(singleDropdown.option)
+        } else {
+          singleDropdown = this.inputData[i]
+        }
+        if (
+          this.inputData[i].option[0].text !==
+          this.$t('message.first_option_dropdown')
+        ) {
+          singleDropdown.option.unshift(defaultAnswer)
+        }
+        selectedChoices.push(null)
+      }
+      if (this.quizInputType.length == 0) {
+        this.quizInputTypeValue = selectedChoices
+      } else {
+        this.quizInputTypeValue = this.quizInputType
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.dropdown-container {
+  position: relative;
+}
+</style>

package/src/components/{AppCompInputRadio.vue → AppCompInputRadioNext.vue}

@@ -1,3 +1,11 @@
+<!-- About this Component--
+ * Renders a RADIO BUTTON input to display choices of response for the Quiz component
+ * Related Quiz to question: REPONSE_UNIQUE
+ * Receives the a data object defined by user
+ * Used by AppCompQuizNext
+ * Uses useQuiz composable
+-->
+
 <template>
   <div class="input-box">
     <fieldset>
@@ -8,11 +16,11 @@
         v-html="$t('quizState.answers')"
       />
 
-      <template v-for="choixReponse in inputDataValue">
-        <div
-          :Key="`div_chx_${inputDataId}-${choixReponse.id}`"
-          class="box-radio"
-        >
+      <template
+        v-for="choixReponse in quizInputDataValue"
+        :Key="`div_chx_${inputDataId}-${choixReponse.id}`"
+      >
+        <div class="box-radio" role="group">
           <label
             :key="`lbl_chx_${inputDataId}_${choixReponse.id}`"
             :for="`chx_${inputDataId}_${choixReponse.id}`"
@@ -22,11 +30,11 @@
             <input
               :id="`chx_${inputDataId}_${choixReponse.id}`"
               :key="`chx_${inputDataId}_${choixReponse.id}`"
-              v-model="quizInputUniqueValue"
+              v-model="inputUniqueValue"
+              :disabled="quizLimitActive"
               type="radio"
               :value="choixReponse.id"
               :name="`btn-radios-${inputDataId}`"
-              :disabled="quizCompleted"
               class="radio-input"
               :aria-labelledby="`span_${inputDataId}_${choixReponse.id}`"
             />
@@ -51,13 +59,13 @@
   </div>
 </template>
 <script>
-import $extendsQuiz from '../mixins/$quizMixins'
+import { useQuiz } from '../composables/useQuiz'
+import { toRefs } from 'vue'
 export default {
-  name: 'AppCompInputRadio',
-  mixins: [$extendsQuiz],
+  name: 'AppCompInputRadioNext',
 
   props: {
-    inputType: {
+    quizType: {
       type: String,
       default: ''
     },
@@ -70,9 +78,9 @@ export default {
       type: Array,
       default: () => []
     },
-    quizCompleted: {
-      type: Boolean,
-      default: false
+    quizInputType: {
+      type: String,
+      default: ''
     },
     solution: {
       type: String,
@@ -86,76 +94,58 @@ export default {
       type: Boolean,
       default: false
     },
-    quizInputUnique: {
-      type: String,
-      default: ''
-    }, //use to pass the value of the input
+    quizLimitActive: {
+      type: Boolean,
+      default: false
+    }, //use to set if quiz should be active or not
+
     quizSubmit: {
       type: Boolean,
       default: false
-    }, //use to call a submit
-    aBy: {
-      type: String,
-      default: ''
-    } // use to pass id of the related question for the choices
+    } //use to call a submit
   },
+  emits: ['input-change'],
+  setup(props) {
+    const { shuffleArray, classInput, messageAccessibility } = useQuiz(
+      toRefs(props)
+    )
 
+    return { shuffleArray, classInput, messageAccessibility }
+  },
   data() {
     return {
-      inputDataValue: [],
-      quizInputUniqueValue: null //not using quizInputUnique because quizInputUnique is a prop
+      quizInputDataValue: [],
+      inputUniqueValue: null //not using quizInputUnique because quizInputUnique is a prop
     }
   },
 
   computed: {},
 
   watch: {
-    /**
-     * @description to pass value to AppCompQuiz
-     * @fires input-change to AppCompQuiz.vue
-     */
-    quizInputUniqueValue(newValue) {
-      this.$emit('input-change', newValue)
-    },
-
-    /**
-     * @description to pass the value from AppCompQuiz
-     */
-    quizInputUnique(newValue) {
-      this.quizInputUniqueValue = newValue
+    // /**
+    //  * @description to pass value to AppCompQuiz
+    //  * @fires input-change to AppCompQuiz.vue
+    //  */
+    inputUniqueValue: {
+      deep: true,
+      handler(newValue) {
+        this.$emit('input-change', newValue)
+      }
     }
   },
 
   mounted() {
-    this.quizInputUniqueValue = this.quizInputUnique
-    if (this.shuffleAnswers) {
-      this.inputDataValue = this.shuffleArray(this.inputData)
-    } else {
-      this.inputDataValue = this.inputData
-    }
+    this.initQuiz()
   },
 
   methods: {
-    /**
-     * @description shuffles an array used to randomized the option order if shuffleAnswers is true
-     * @param {Array} array
-     * @returns {Array}
-     */
-    shuffleArray(array) {
-      let newArray = []
-      let newArray2 = []
-
-      for (let i = 0; i < array.length; i++) {
-        const element = array[i]
-        //todo remove null values
-        newArray.push(element)
-      }
-      while (newArray.length > 0) {
-        let pos = Math.floor(newArray.length * Math.random())
-        newArray2.push(newArray[pos])
-        newArray.splice(pos, 1)
+    initQuiz() {
+      this.inputUniqueValue = this.quizInputType
+      if (this.shuffleAnswers) {
+        this.quizInputDataValue = this.shuffleArray(this.inputData)
+      } else {
+        this.quizInputDataValue = this.inputData
       }
-      return newArray2
     }
   }
 }

package/src/components/AppCompInputTextNext.vue

@@ -0,0 +1,106 @@
+<!-- About this Component--
+ * Renders a TEXTAREA input to collect input for the Quiz component
+ * Related Quiz to question: REPONSE_OUVERTE
+ Receives the a data object defined by user
+ * Used by AppCompQuizNext
+ * Uses useQuiz composable
+-->
+<template>
+  <div class="input-box box-reponse-ouverte">
+    <v-textarea
+      :id="`textArea_${inputDataId}`"
+      v-model="quizInputTypeValue"
+      :aria-labelledby="`textArea_${inputDataId}`"
+      :class="classInput()"
+      :placeholder="$t('text.place_holder.for_textarea')"
+      focused
+      rows="3"
+      no-resize
+      :aria-describedby="`${inputDataId}-msg-erreur`"
+      clearable
+    />
+
+    <span :id="`${inputDataId}-msg-erreur`" class="sr-only">
+      {{ messageAccessibility() }}
+    </span>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { toRefs } from 'vue'
+export default {
+  name: 'AppCompInputTextNext',
+  props: {
+    quizType: {
+      type: String,
+      default: ''
+    },
+    inputDataId: {
+      type: String,
+      default: ''
+    },
+
+    inputData: {
+      type: Array,
+      default: () => []
+    }, //not used just here to be the same
+
+    quizInputType: {
+      type: String,
+      default: ''
+    },
+
+    solution: {
+      type: String,
+      default: ''
+    },
+    showSolution: {
+      type: Boolean,
+      default: false
+    },
+    quizLimitActive: {
+      type: Boolean,
+      default: false
+    }, //use to set if quiz should be active or not
+
+    quizSubmit: {
+      type: Boolean,
+      default: false
+    } //use to call a submit
+  },
+
+  emits: ['input-change'],
+
+  setup(props) {
+    const { classInput, messageAccessibility } = useQuiz(toRefs(props))
+
+    return { classInput, messageAccessibility }
+  },
+  data() {
+    return {
+      quizInputTypeValue: '' //not using quizInputType because quizInputType is a prop
+    }
+  },
+
+  watch: {
+    /**
+     * @description to pass value to AppCompQuiz
+     * @fires input-change to AppCompQuiz.vue
+     */
+    quizInputTypeValue: {
+      deep: true,
+      handler(newValue) {
+        this.$emit('input-change', newValue)
+      }
+    }
+  },
+
+  mounted() {
+    this.quizInputTypeValue = this.quizInputType
+  }
+}
+</script>
+<style>
+.box-reponse-ouverte {
+}
+</style>