fcad-core-dragon 2.0.1 → 2.0.2-beta.2

package/src/components/AppCompInputTextTableNext.vue

@@ -1,142 +0,0 @@
-<!-- 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) {
-        // const val = newValue.length == 0 ? null : 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

@@ -1,238 +0,0 @@
-<!-- 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"
-          :item-props="true"
-          :disabled="quizLimitActive"
-          :aria-describedby="`${inputDataId}_${singleDropdown.id}-msg-erreur`"
-          :open-text="$t('message.dropdown_list')"
-          close-text=""
-        />
-      </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,
-        selected: 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 {
-          // this.inputData[i].splice(0, 0, defaultAnswer)
-          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>

package/src/components/AppCompInputTextToFillNext.vue

@@ -1,171 +0,0 @@
-<!-- About this Component--
-  * Renders a Series of inputs to collect input for the Quiz component.
-  * Related Quiz to question: TEXTE_TROUE
-  * Receives the a data object defined by user
-  * Used by AppCompQuizNext
-  * Uses useQuiz composable
--->
-<template>
-  <div class="input-box">
-    <div
-      v-for="textInput in theInputData"
-      :key="textInput.id"
-      class="texteatrou"
-    >
-      <span v-if="!textInput.type" v-html="textInput.content"></span>
-      <label
-        :for="`${inputDataId}_${textInput.id}-champ`"
-        style="display: none"
-      >
-        {{ $t('text.quiz') }}
-      </label>
-      <v-text-field
-        v-if="textInput.type == 'inputText'"
-        :id="`${inputDataId}_${textInput.id}-champ`"
-        v-model="quizInputTypeValue[textInput.id]"
-        :placeholder="$t('text.place_holder.for_textarea')"
-        :disabled="quizLimitActive"
-        no-resize
-        :class="classInput(textInput.id, quizInputTypeValue)"
-        class="input-textatrou"
-        :aria-describedby="`${inputDataId}_${textInput.id}-msg-erreur`"
-        :aria-labelledby="`${inputDataId}_${textInput.id}-label`"
-      />
-      <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: 'AppCompInputTextToFillNext',
-  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
-    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: {
-    initQuiz() {
-      this.quizSolution = this.solution
-      if (this.quizSolution !== null) {
-        this.quizSolution.sort(function (a, b) {
-          return a - b
-        })
-      }
-      let textChoices = []
-
-      const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
-      let matchAll = this.textBase.split(regex)
-
-      for (let i = 0; i < matchAll.length - 1; i++) {
-        textChoices.push('')
-      }
-      //apply previous answers
-      if (this.quizInputType && this.quizInputType.length == 0) {
-        this.quizInputTypeValue = textChoices
-      } else {
-        this.quizInputTypeValue = this.quizInputType
-      }
-      this.createTextWithInput(this.textBase)
-    },
-    /**
-     * @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 < matchAll.length - 1; i++) {
-        listInput.push({ id: 't' + i, content: matchAll[i] })
-        listInput.push({ id: i, type: 'inputText' })
-      }
-      let lastItem = matchAll.length - 1
-      listInput.push({ id: 't' + lastItem, content: matchAll[lastItem] })
-      this.theInputData = listInput
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.texteatrou {
-  display: inline;
-  position: relative;
-}
-.texteatrou > input {
-  display: inline;
-  width: auto;
-}
-</style>