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

package/src/components/AppCompInputRadioNx.vue

@@ -0,0 +1,284 @@
+<!-- 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 AppCompQuiz
+ * Uses useQuiz composable
+-->
+
+<template>
+  <div v-if="inputData.length > 0" :id="id" class="input-box">
+    <fieldset :aria-label="fieldsetLabel">
+      <template
+        v-for="(choixReponse, index) in quizInputDataValue"
+        :Key="`div_chx_${id}-${choixReponse.id}`"
+      >
+        <div class="box-radio">
+          <label
+            :key="`lbl_chx_${id}_${choixReponse.id}`"
+            :for="`chx_${id}_${choixReponse.id}`"
+            class="radio-label"
+            :class="[
+              { answerSlct: selected == choixReponse.value },
+              `${retro[index] || ''}`
+            ]"
+          >
+            <input
+              :id="`chx_${id}_${choixReponse.id}`"
+              :key="`chx_${id}_${choixReponse.id}`"
+              v-model="selected"
+              type="radio"
+              :name="`btn-radios-${id}`"
+              class="radio-input"
+              :aria-labelledby="`span_${id}_${choixReponse.id}`"
+              :aria-describedby="`${id}_${choixReponse.id}-msg-erreur`"
+              :value="choixReponse.value"
+            />
+
+            <span
+              :id="`span_${id}_${choixReponse.id}`"
+              class="radio-contenu"
+              v-html="choixReponse.value"
+            />
+            <span
+              :id="`${id}_${choixReponse.id}-msg-erreur`"
+              :key="`msg_chx_${id}_${choixReponse.id}`"
+              class="sr-only"
+            >
+              {{ messageAccessibility[index] }}
+            </span>
+          </label>
+        </div>
+      </template>
+    </fieldset>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { validateObjType } from '../shared/validators'
+export default {
+  name: 'AppCompInputRadioNx',
+  /* PROPS USED FOR PARENT TO COMMUNICATE DATA TO CHILD */
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+
+    solution: {
+      type: Array,
+      default: () => []
+    },
+
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  /* EVENT EMITTED WHEN MODELVALUE CHANGES|UPDATE */
+  emits: ['update:modelValue', 'enable-submit'],
+
+  setup(props) {
+    const { retroType, addRetroStyle, resetRetroStyle } = useQuiz()
+
+    return { retroType, addRetroStyle, resetRetroStyle }
+  },
+  data() {
+    return {
+      quizInputDataValue: [],
+      result: null,
+      retro: [],
+      messageAccessibility: []
+    }
+  },
+  computed: {
+    fieldsetLabel() {
+      return `${this.$t('quizState.radioFieldset')} ${this.inputData.length} ${this.$t('quizState.options')}`
+    },
+    /* INTERNAL REACTIVE VALUE THAT BIND WITH MODELVALUE PROPS */
+    inputValue: {
+      get() {
+        return this.modelValue
+      },
+
+      set(newValue) {
+        this.$emit('update:modelValue', [...newValue])
+      }
+    },
+    /**
+     * internal reactive value that map the options to add SELECTED attribute on each option
+     * this attribute value can be changed when user select the option
+     */
+    mappedOptions() {
+      const options = this.inputData.map(
+        (op) => (op = { ...op, selected: false })
+      )
+
+      return options
+    },
+    selected: {
+      /**
+       * Return the value of the selected element in the modelValue
+       */
+      get() {
+        // return this.modelValue
+        const selectedItem = this.modelValue.find((item) => {
+          return item.selected
+        })
+
+        return selectedItem ? selectedItem.value : ''
+      },
+      /**
+       * Modify the value of a item in the array model and return the array
+       */
+      set(newValue) {
+        this.resetRetroStyle([this.retro, this.messageAccessibility])
+
+        // create change THE SELECTED attribute OF THE selected option
+        const updatedModelValue = this.mappedOptions
+          .map((option) => ({
+            ...option,
+            selected: option.value === newValue
+          }))
+          .filter((e) => e.selected)
+
+        this.inputValue = updatedModelValue // trigger the reactivity of the inputVAlue
+      }
+    }
+  },
+  watch: {
+    inputValue: {
+      handler(newValue, oldValue) {
+        if (this.$el && this.$el.id !== this.id) return
+
+        const selectedItem = this.modelValue.some((e) => e.selected)
+        this.$emit('enable-submit', selectedItem)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+
+  created() {
+    if (import.meta.env.DEV) {
+      let errors = this.validateInputData()
+
+      if (errors && errors.errorList.length)
+        return this.$bus.$emit('input-error', { e: this.id, errors })
+    }
+
+    this.quizInputDataValue = this.inputData
+  },
+  mounted() {},
+
+  methods: {
+    /**
+     * @description validate the raw data received by the component to render is view
+     * @returns {Object} errors - errorList: to display in view and errorConsole, to be displayed in console
+     */
+    validateInputData() {
+      let errors = null //array for errors dectected
+      let stringType = ['id', 'value']
+
+      if (!this.inputData.length) return errors
+      for (let i = 0; i < this.inputData.length; i++) {
+        errors = validateObjType(
+          this.inputData[i],
+          { stringType },
+          null,
+          `choix_reponse #${i + 1}`
+        )
+        const { errorList, errorInConsole } = errors
+
+        if (errorList.length || errorInConsole.length) return errors
+      }
+
+      return errors
+    },
+    /**
+     * @description Component validation method to validate the user input against the solution
+     * can handle logic of Css style to apply (correct/wrong Answer)
+     */
+    validateAnswer() {
+      //Validate the user answer
+      let validatedResults
+      if (this.solution != null) {
+        validatedResults = this.inputValue.map(
+          (a) =>
+            (a = {
+              ...a,
+              correct: this.solution.includes(a.id)
+            })
+        )
+      } else {
+        validatedResults = this.inputValue.map(
+          (a) =>
+            (a = {
+              ...a,
+              correct: null
+            })
+        )
+      }
+
+      const mappedResults = this.mappedOptions.map((a) => {
+        if (this.solution != null) {
+          if (a.id == validatedResults[0].id) a = validatedResults[0]
+          a.correct = this.solution.includes(a.id)
+          return a
+        } else {
+          if (a.id == validatedResults[0].id) a = validatedResults[0]
+          a.correct = null
+          return a
+        }
+      })
+
+      //Set the valition style
+      let { classRetro, mesA11y } = this.addRetroStyle(
+        this.solution,
+        mappedResults,
+        this.inputData.length
+      )
+      this.retro = classRetro
+      this.messageAccessibility = mesA11y
+
+      //Retrive the user response from validation
+      this.result = mappedResults.filter((a) => a.selected)
+
+      let retro = this.retroType(this.solution, this.result)
+
+      const { correct, ...answer } = this.result[0]
+
+      return {
+        userAnswer: answer,
+        correctAnswer: correct,
+        retroType: retro
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.custom-control-input:focus ~ .custom-control-label::before {
+  border: inherit;
+}
+
+.custom-control-input:focus ~ .custom-control-label::before {
+  box-shadow: inherit;
+  -webkit-box-shadow: inherit;
+}
+
+fieldset {
+  border: inherit;
+}
+
+.radio-label {
+  //position: relative;
+  span {
+    width: 90%;
+  }
+}
+</style>

package/src/components/AppCompInputTextNx.vue

@@ -0,0 +1,153 @@
+<!-- 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 AppCompQuiz
+ * Uses useQuiz composable
+-->
+<template>
+  <div :id="id" class="input-box box-reponse-ouverte">
+    <v-textarea
+      :id="`textArea_${id}`"
+      :value="modelValue"
+      :aria-labelledby="`textArea_${id}`"
+      :placeholder="$t('text.place_holder.for_textarea')"
+      rows="3"
+      no-resize
+      :aria-describedby="`${id}-msg-erreur`"
+      @update:model-value="onInputUpdate($event)"
+    />
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+export default {
+  name: 'AppCompInputTextNx',
+  /* PROPS USED FOR PARENT TO COMMUNICATE DATA TO CHILD */
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+    solution: {
+      type: Array,
+      default: () => []
+    },
+    userAnswer: {
+      type: Array,
+      default: () => []
+    },
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['update:modelValue', 'enable-submit'],
+  setup(props) {
+    const { retroType, addRetroStyle, resetRetroStyle } = useQuiz()
+    return { retroType, addRetroStyle, resetRetroStyle }
+  },
+  data() {
+    return {
+      quizInputDataValue: [],
+      result: null,
+      retro: [],
+      messageAccessibility: [],
+      textBox: null
+    }
+  },
+  computed: {
+    /* INTERNAL REACTIVE VALUE THAT BIND WITH MODELVALUE PROPS */
+
+    inputValue: {
+      get() {
+        return this.modelValue
+      },
+
+      set(newValue) {
+        this.$emit('update:modelValue', [newValue])
+      }
+    }
+  },
+  watch: {
+    inputValue: {
+      handler(newValue) {
+        if (this.$el && this.$el.id !== this.id) return
+        this.$emit('enable-submit', newValue[0] && newValue[0].trim() !== '')
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    if (import.meta.env.DEV) {
+      let errors = this.validateInputData()
+      if (errors && errors.errorList.length) {
+        return this.$bus.$emit('input-error', { e: this.id, errors })
+      }
+    }
+
+    this.quizInputDataValue = this.inputData
+  },
+  methods: {
+    validateInputData() {
+      let errors = null //array for errors dectected
+
+      if (this.inputData != undefined) return errors
+
+      return errors
+    },
+    /**
+     * @description Method to force update of this.inputsValue.
+     * this force the old value and new value of the input to be tracked by VUE.
+     * @param newValue, the new value of the input
+     */
+
+    onInputUpdate(newValue) {
+      if (this.$el && this.$el.id !== this.id) return //prevent event from firing on other input
+      this.resetRetroStyle([this.retro, this.messageAccessibility])
+
+      this.inputValue = newValue //trigger vue reactivity for inputsValue
+    },
+    /**
+     * @description Component validation method to validate the user input against the solution
+     * can handle logic of Css style to apply (correct/wrong Answer)
+     */
+    validateAnswer() {
+      this.result = this.inputValue.map(
+        (a) =>
+          (a = {
+            filled: a,
+            correct: true
+          })
+      )
+
+      let { classRetro, mesA11y } = this.addRetroStyle(
+        this.solution,
+        this.result,
+        this.inputValue.length
+      )
+
+      this.retro = classRetro
+      this.messageAccessibility = mesA11y
+
+      let tr = this.retroType(this.solution, this.result)
+
+      return {
+        userAnswer: this.result,
+        correctAnswer: null,
+        retroType: tr
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+fieldset {
+  border: inherit;
+}
+</style>

package/src/components/AppCompInputTextTableNx.vue

@@ -0,0 +1,202 @@
+<!-- About this Component--
+  * Renders a Series of SELECTS inputs to collect input for the Quiz component.
+  * Related Quiz to question: TEXTE_TABLEAU
+  * Receives the a data object defined by user
+  * Used by AppCompQuiz
+  * Uses useQuiz composable
+-->
+<template>
+  <div :id="id" class="input-box">
+    <fieldset :aria-label="fieldsetLabel">
+      <div v-for="(textInput, index) in inputData" :key="textInput.id">
+        <label
+          :id="`${id}_${textInput.id}-label`"
+          aria-hidden="true"
+          v-html="textInput.ennonce"
+        ></label>
+
+        <div class="cnt-input-text" :class="`${retro[index]}`">
+          <v-text-field
+            :id="`${id}_${textInput.id}-champ`"
+            :model-value="inputsValue[textInput.id]"
+            :placeholder="$t('text.place_holder.for_textarea')"
+            :aria-describedby="`${id}_${textInput.id}-msg-erreur`"
+            :aria-labelledby="`${id}_${textInput.id}-label`"
+            no-resize
+            @update:model-value="onSelectUpdate($event, textInput.id)"
+          />
+        </div>
+        <span :id="`${id}_${textInput.id}-msg-erreur`" class="sr-only">
+          {{ messageAccessibility[index] }}
+        </span>
+      </div>
+    </fieldset>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { validateObjType } from '../shared/validators'
+export default {
+  name: 'AppCompInputTextTableNx',
+  /* PROPS USED FOR PARENT TO COMMUNICATE DATA TO CHILD */
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+    solution: {
+      type: Array,
+      default: () => []
+    },
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['update:modelValue', 'enable-submit'],
+  setup() {
+    const { retroType, addRetroStyle, resetRetroStyle } = useQuiz()
+
+    return { retroType, addRetroStyle, resetRetroStyle }
+  },
+  data() {
+    return {
+      quizInputDataValue: [],
+      textInputs: [],
+      quizSolution: null,
+      inputElements: [],
+      result: null,
+      retro: [],
+      messageAccessibility: []
+    }
+  },
+  computed: {
+    fieldsetLabel() {
+      return `${this.$t('quizState.textTableFieldset1')} ${this.inputData.length} ${this.$t('quizState.textTableFieldset2')}`
+    },
+    /* INTERNAL REACTIVE VALUE THAT BIND WITH MODELVALUE PROPS */
+    inputsValue: {
+      get() {
+        return this.modelValue
+      },
+      set(newValue) {
+        this.$emit('update:modelValue', [...newValue])
+      }
+    }
+  },
+  watch: {
+    inputsValue: {
+      handler() {
+        const filled = this.modelValue.filter((val) => val && val.trim() !== '')
+
+        this.$emit('enable-submit', filled.length == this.inputData.length)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    if (import.meta.env.DEV) {
+      let errors = this.validateInputData()
+      if (errors && errors.errorList.length) {
+        return this.$bus.$emit('input-error', { e: this.id, errors })
+      }
+    }
+
+    this.quizInputDataValue = this.inputData
+  },
+  mounted() {},
+
+  methods: {
+    validateInputData() {
+      let errors = { errorInConsole: [], errorList: [] }
+      let stringType = ['id', 'ennonce']
+      let e = null
+
+      if (!this.inputData.length) return errors
+      for (let i = 0; i < this.inputData.length; i++) {
+        e = validateObjType(
+          this.inputData[i],
+          { stringType },
+          null,
+          `texte tableau #${i + 1}`
+        )
+
+        if (e.errorInConsole.length && e.errorList.length) {
+          errors.errorInConsole.push(e.errorInConsole[0])
+          errors.errorList.push(e.errorList[0])
+        }
+      }
+
+      return errors
+    },
+    /**
+     * @description Method to force update of this.inputsValue.
+     * this force the old value and new value of the input to be tracked by VUE.
+     * @param newValue, the new value of the input
+     * @param index index of the selected element
+     */
+
+    onSelectUpdate(newValue, index) {
+      if (this.$el && this.$el.id !== this.id) return
+      this.resetRetroStyle([this.retro, this.messageAccessibility])
+
+      const updated = [...this.inputsValue] //create new array from inputsValue
+      updated[index] = newValue
+      this.inputsValue = updated //trigger vue reactivity for inputsValue
+    },
+    validateAnswer() {
+      let mappedResults
+
+      if (this.solution != null) {
+        mappedResults = this.inputsValue.map(
+          (a, i) =>
+            (a = {
+              filled: a,
+              correct: this.solution[i].reponse_value.includes(a)
+            })
+        )
+      } else {
+        mappedResults = this.inputsValue.map(
+          (a) =>
+            (a = {
+              filled: a,
+              correct: false
+            })
+        )
+      }
+
+      let { classRetro, mesA11y } = this.addRetroStyle(
+        this.solution,
+        mappedResults,
+        this.inputData.length
+      )
+
+      this.retro = classRetro
+      this.messageAccessibility = mesA11y
+
+      this.result = mappedResults.filter((a) => a.filled)
+      let tr = this.retroType(this.solution, mappedResults)
+
+      return {
+        userAnswer: this.result,
+        correctAnswer: this.solution,
+        retroType: tr
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.cnt-input-text {
+  position: relative;
+}
+
+fieldset {
+  border: inherit;
+}
+</style>