fcad-core-dragon 2.0.0-beta.1 → 2.0.0-beta.3

package/src/components/AppCompInputTextTableNext.vue

@@ -0,0 +1,141 @@
+<!-- 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 AppCompQuizNext
+  * Uses useQuiz composable
+-->
+<template>
+  <div class="input-box">
+    <div v-for="textInput in quizInputDataValue" :key="textInput.id">
+      <label
+        :id="`${inputDataId}_${textInput.id}-label`"
+        aria-hidden="true"
+        v-html="textInput.ennonce"
+      ></label>
+      <div
+        class="cnt-input-text"
+        :class="classInput(textInput.id, quizInputTypeValue)"
+      >
+        <v-text-field
+          :id="`${inputDataId}_${textInput.id}-champ`"
+          v-model="quizInputTypeValue[textInput.id]"
+          :placeholder="$t('text.place_holder.for_textarea')"
+          :disabled="quizLimitActive"
+          no-resize
+          :aria-describedby="`${inputDataId}_${textInput.id}-msg-erreur`"
+          :aria-labelledby="`${inputDataId}_${textInput.id}-label`"
+        />
+      </div>
+      <span :id="`${inputDataId}_${textInput.id}-msg-erreur`" class="sr-only">
+        {{ messageAccessibility(textInput.id, quizInputTypeValue) }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { toRefs } from 'vue'
+export default {
+  name: 'AppCompInputTextTableNext',
+
+  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
+    }, //use to set if quiz should be active or not
+    shuffleAnswers: {
+      type: Boolean,
+      default: false
+    },
+    quizSubmit: {
+      type: Boolean,
+      default: false
+    } //use to call a submit
+  },
+  emits: ['input-change'],
+  setup(props) {
+    const { classInput, containsValue, shuffleArray, messageAccessibility } =
+      useQuiz(toRefs(props))
+
+    return { classInput, containsValue, shuffleArray, messageAccessibility }
+  },
+  data() {
+    return {
+      quizInputDataValue: [],
+      quizInputTypeValue: [],
+      quizSolution: null
+    }
+  },
+
+  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.initQuiz()
+  },
+
+  methods: {
+    initQuiz() {
+      this.quizSolution = this.solution
+      if (this.quizSolution !== null) {
+        this.quizSolution.sort(function (a, b) {
+          return a - b
+        })
+      }
+
+      //apply previous answers
+      if (this.quizInputType && this.quizInputType.length == 0) {
+        this.quizInputTypeValue = []
+      } else {
+        this.quizInputTypeValue = this.quizInputType
+      }
+
+      if (this.shuffleAnswers)
+        return (this.quizInputDataValue = this.shuffleArray(this.inputData))
+
+      this.quizInputDataValue = this.inputData
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.cnt-input-text {
+  position: relative;
+}
+</style>

package/src/components/AppCompInputTextToFillDropdownNext.vue

@@ -0,0 +1,230 @@
+<!-- About this Component--
+  * Renders a Series of inputs to collect input for the Quiz component.
+  * Related Quiz to question: TEXTE_TROUE_SELECT
+  * Receives the a data object defined by user
+  * Used by AppCompQuizNext
+  * Uses useQuiz composable
+-->
+<template>
+  <div class="input-box">
+    <div
+      v-for="singleDropdown in theInputData"
+      :key="singleDropdown.id"
+      class="texteatrou"
+    >
+      <span v-if="!singleDropdown.type" v-html="singleDropdown.content"></span>
+      <label
+        :for="`${inputDataId}_${singleDropdown.id}-champ`"
+        style="display: none"
+      >
+        {{ $t('text.quiz') }}
+      </label>
+      <div
+        class="cnt-input"
+        :class="classInput(singleDropdown.id, quizInputTypeValue)"
+      >
+        <v-select
+          v-if="singleDropdown.type == 'dropdown'"
+          :id="`${inputDataId}_${singleDropdown.id}-champ`"
+          v-model="quizInputTypeValue[singleDropdown.id]"
+          item-title="text"
+          class="dropdown"
+          :items="singleDropdown.option"
+          :disabled="quizLimitActive"
+          :aria-describedby="`${inputDataId}_${singleDropdown.id}-msg-erreur`"
+        />
+      </div>
+
+      <span
+        v-if="showSolution"
+        :id="`${inputDataId}_${singleDropdown.id}-msg-erreur`"
+        class="sr-only"
+      >
+        {{ messageAccessibility(singleDropdown.id, quizInputTypeValue) }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { toRefs } from 'vue'
+export default {
+  name: 'AppCompInputTextToFillDropdownNext',
+
+  props: {
+    quizType: {
+      type: String,
+      default: ''
+    },
+    inputDataId: {
+      type: String,
+      default: ''
+    },
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+    inputType: {
+      type: String,
+      default: ''
+    },
+    textBase: {
+      type: String,
+      default: ''
+    },
+    quizInputType: {
+      type: Array,
+      default: () => []
+    },
+
+    solution: {
+      type: Array,
+      default: () => []
+    },
+    showSolution: {
+      type: Boolean,
+      default: false
+    },
+    quizLimitActive: {
+      type: Boolean,
+      default: false
+    }, //use to set if quiz should be active or not
+    shuffleAnswers: {
+      type: Boolean,
+      default: false
+    },
+    quizSubmit: {
+      type: Boolean,
+      default: false
+    } //use to call a submit
+  },
+  emits: ['input-change'],
+  setup(props) {
+    const { shuffleArray, classInput, messageAccessibility } = useQuiz(
+      toRefs(props)
+    )
+    return { shuffleArray, classInput, messageAccessibility }
+  },
+  data() {
+    return {
+      quizInputTypeValue: [], //not using quizInputType because quizInputType is a prop
+      theInputData: [], //to create the list of drop down and text mixed togeter
+      quizSolution: null
+    }
+  },
+
+  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.initQuiz()
+  },
+
+  methods: {
+    /**
+     * @description create the object to genate the text and inputs
+     * @param {String} str the text with holes to fill
+     */
+    createTextWithInput(str) {
+      const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
+      let matchAll = str.split(regex)
+      let listInput = []
+      for (let i = 0; i < this.inputData.length; i++) {
+        const element = this.inputData[i]
+        listInput.push({ id: 't' + i, content: matchAll[i] })
+        listInput.push({
+          id: i,
+          type: 'dropdown',
+          option: Object.values(element)[0]
+        })
+      }
+      let lastItem = matchAll.length - 1
+      listInput.push({ id: 't' + lastItem, content: matchAll[lastItem] })
+      this.theInputData = listInput
+    },
+    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[Object.keys(this.inputData[i])[0].toString()] =
+            this.shuffleArray(Object.values(this.inputData[i])[0])
+        } else {
+          singleDropdown = this.inputData[i]
+        }
+        for (
+          let index = 0;
+          index < Object.values(singleDropdown)[0].length;
+          index++
+        ) {
+          const element = Object.values(singleDropdown)[0][index]
+          if (
+            element.text &&
+            element.text == this.$t('message.first_option_dropdown')
+          ) {
+            Object.values(singleDropdown)[0].splice(index, 1)
+          }
+        }
+        Object.values(singleDropdown)[0].unshift(defaultAnswer)
+
+        selectedChoices.push(null)
+      }
+      if (this.quizInputType.length == 0) {
+        this.quizInputTypeValue = selectedChoices
+      } else {
+        this.quizInputTypeValue = this.quizInputType
+      }
+
+      this.createTextWithInput(this.textBase)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+select {
+  &.custom-select {
+    background-image: inherit;
+
+    &:focus {
+      border-color: inherit;
+      box-shadow: inherit;
+    }
+  }
+}
+
+/***** style dev  *****/
+.texteatrou {
+  display: inline;
+}
+.texteatrou > select {
+  display: inline;
+  width: auto;
+}
+
+.cnt-input {
+  position: relative;
+}
+</style>