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

package/src/components/AppCompInputCheckBox.vue

@@ -1,227 +0,0 @@
-<template>
-  <div class="input-box">
-    <fieldset>
-      <legend
-        :id="`lgd_${inputDataId}`"
-        class="sr-only"
-        tabindex="-1"
-        v-html="getQuizQuestion()"
-      />
-
-      <template v-for="choixReponse in inputDataValue">
-        <div
-          :Key="`div_chx_${inputDataId}_${choixReponse.id}`"
-          class="box-checkbox"
-        >
-          <label
-            :key="`lbl_chx_${inputDataId}-${choixReponse.id}`"
-            :for="`chx_${inputDataId}_${choixReponse.id}`"
-            :class="classInput(choixReponse.id)"
-            class="checkbox-label"
-          >
-            <input
-              :id="`chx_${inputDataId}_${choixReponse.id}`"
-              :key="`chx_${inputDataId}_${inputDataId}-${choixReponse.id}`"
-              v-model="quizInputMultipleValue"
-              type="checkbox"
-              :value="choixReponse.id"
-              :name="`btn-checkbox-${inputDataId}`"
-              :disabled="quizCompleted"
-              class="checkbox-input"
-            />
-            <span class="checkbox-contenu" v-html="choixReponse.value"></span>
-            <span
-              :id="`${inputDataId}_${choixReponse.id}-msg-erreur`"
-              :key="`msg_chx_${inputDataId}_${choixReponse.id}`"
-              class="sr-only"
-            >
-              {{ messageAccessibility(choixReponse.id) }}
-            </span>
-          </label>
-        </div>
-      </template>
-    </fieldset>
-  </div>
-</template>
-<script>
-import $extendsQuiz from '../mixins/$quizMixins'
-export default {
-  name: 'AppCompInputCheckBox',
-  mixins: [$extendsQuiz],
-  props: {
-    inputType: {
-      type: String,
-      default: ''
-    },
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-    inputData: {
-      type: Array,
-      default: () => []
-    },
-    quizCompleted: {
-      type: Boolean,
-      default: false
-    },
-    solution: {
-      type: Array,
-      default: () => []
-    },
-    showSolution: {
-      type: Boolean,
-      default: false
-    },
-    shuffleAnswers: {
-      type: Boolean,
-      default: false
-    },
-    quizInputMultiple: {
-      type: Array,
-      default: () => []
-    }, //use to pass the value of the input
-    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
-  },
-
-  data() {
-    return {
-      inputDataValue: [],
-      quizInputMultipleValue: [] //not using quizInputMultiple because quizInputMultiple is a prop
-    }
-  },
-
-  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
-    }
-  },
-
-  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
-    }
-  },
-
-  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
-      }
-    },
-
-    /**
-     * @description check if a values exists in a array
-     * @param {Array} array
-     * @param value
-     * @returns {Boolean}
-     */
-    containsValue(array, value) {
-      return array.includes(value)
-    },
-
-    /**
-     * @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
-    }
-  }
-}
-</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;
-}
-
-.custom-checkbox {
-  width: 100%;
-  height: 100%;
-  padding-left: 0;
-
-  input {
-    width: 100%;
-    height: 100%;
-  }
-
-  label {
-    width: 100%;
-    height: 100%;
-
-    &:after,
-    &:before {
-      border: inherit;
-      top: 0px;
-      left: 0px;
-      height: 0;
-      width: 0;
-      background-color: inherit;
-      border: inherit;
-    }
-  }
-}
-</style>

package/src/components/AppCompInputDropdown.vue

@@ -1,184 +0,0 @@
-<template>
-  <div class="input-box">
-    <div
-      v-for="singleDropdown in inputData"
-      :key="singleDropdown.id"
-      :class="
-        `dropdownlist-${singleDropdown.id} ${classInput(singleDropdown.id)}`
-      "
-    >
-      <label
-        :for="`${inputDataId}_${singleDropdown.id}`"
-        v-html="singleDropdown.ennonce"
-      ></label>
-      <b-form-select
-        :id="inputDataId + '_' + singleDropdown.id"
-        v-model="quizSelectedValue[singleDropdown.id]"
-        :options="singleDropdown.option"
-        :disabled="quizCompleted"
-      ></b-form-select>
-    </div>
-  </div>
-</template>
-<script>
-import $extendsQuiz from '../mixins/$quizMixins'
-export default {
-  name: 'AppCompInputDropdown',
-  mixins: [$extendsQuiz],
-
-  props: {
-    inputType: {
-      type: String,
-      default: ''
-    },
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-    inputData: {
-      type: Array,
-      default: () => []
-    },
-    quizCompleted: {
-      type: Boolean,
-      default: false
-    },
-    solution: {
-      type: Array,
-      default: () => []
-    },
-    showSolution: {
-      type: Boolean,
-      default: false
-    },
-    shuffleAnswers: {
-      type: Boolean,
-      default: false
-    },
-    quizSelected: {
-      type: Array,
-      default: () => []
-    }, //use to pass the value of the input
-    quizSubmit: {
-      type: Boolean,
-      default: false
-    } //use to call a submit
-  },
-
-  data() {
-    return {
-      quizSelectedValue: [] //not using quizSelected because quizSelected is a prop
-    }
-  },
-
-  computed: {},
-
-  watch: {
-    /**
-     * @description to pass value to AppCompQuiz
-     * @emits input-change
-     */
-    quizSelectedValue(newValue) {
-      this.$emit('input-change', newValue)
-    },
-
-    /**
-     * @description to pass the value from AppCompQuiz
-     */
-    quizSelected(newValue) {
-      this.quizSelectedValue = newValue
-    }
-  },
-
-  mounted() {
-    if (this.solution !== null)
-      this.solution.sort(function(a, b) {
-        return a.question_id - b.question_id
-      })
-    //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.quizSelected.length == 0) {
-      this.quizSelectedValue = selectedChoices
-    } else {
-      this.quizSelectedValue = this.quizSelected
-    }
-  },
-
-  methods: {
-    /**
-     * @description used by the dropdown quiz
-     * @param {Array} answers what the user has answered
-     * @param {Array} solution the correct choices
-     * @returns {Boolean}
-     * @todo Add a catching for error if the 2 question_id dont match
-     */
-    compareSelectedAnswers(answers, solution) {
-      for (let index = 0; index < answers.length; index++) {
-        const elementAnswers = answers[index]
-        const elementSolution = solution[index]
-        if (elementAnswers.question_id == elementSolution.question_id) {
-          if (elementAnswers.reponse_id !== elementSolution.reponse_id) {
-            return false
-          }
-        } else {
-          return //if it return nothing there is a bug since this means the 2 question_id dont match
-        }
-      }
-      return true
-    },
-
-    /**
-     * @description check if a values exists in a array
-     * @param {Array} array
-     * @param value
-     * @returns {Boolean}
-     */
-    containsValue(array, value) {
-      return array.includes(value)
-    },
-
-    /**
-     * @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
-    }
-  }
-}
-</script>

package/src/components/AppCompInputRadio.vue

@@ -1,169 +0,0 @@
-<template>
-  <div class="input-box">
-    <fieldset>
-      <legend
-        :id="`lgd_${inputDataId}`"
-        class="sr-only"
-        tabindex="-1"
-        v-html="getQuizQuestion()"
-      />
-
-      <template v-for="choixReponse in inputDataValue">
-        <div
-          :Key="`div_chx_${inputDataId}-${choixReponse.id}`"
-          class="box-radio"
-        >
-          <label
-            :key="`lbl_chx_${inputDataId}_${choixReponse.id}`"
-            :for="`chx_${inputDataId}_${choixReponse.id}`"
-            :class="classInput(choixReponse.id)"
-            class="radio-label"
-          >
-            <input
-              :id="`chx_${inputDataId}_${choixReponse.id}`"
-              :key="`chx_${inputDataId}_${choixReponse.id}`"
-              v-model="quizInputUniqueValue"
-              type="radio"
-              :value="choixReponse.id"
-              :name="`btn-radios-${inputDataId}`"
-              :disabled="quizCompleted"
-              class="radio-input"
-            />
-
-            <span class="radio-contenu" v-html="choixReponse.value" />
-            <span
-              :id="`${inputDataId}_${choixReponse.id}-msg-erreur`"
-              :key="`msg_chx_${inputDataId}_${choixReponse.id}`"
-              class="sr-only"
-            >
-              {{ messageAccessibility(choixReponse.id) }}
-            </span>
-          </label>
-        </div>
-      </template>
-    </fieldset>
-  </div>
-</template>
-<script>
-import $extendsQuiz from '../mixins/$quizMixins'
-export default {
-  name: 'AppCompInputRadio',
-  mixins: [$extendsQuiz],
-
-  props: {
-    inputType: {
-      type: String,
-      default: ''
-    },
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-
-    inputData: {
-      type: Array,
-      default: () => []
-    },
-    quizCompleted: {
-      type: Boolean,
-      default: false
-    },
-    solution: {
-      type: String,
-      default: ''
-    }, //may be null
-    showSolution: {
-      type: Boolean,
-      default: false
-    },
-    shuffleAnswers: {
-      type: Boolean,
-      default: false
-    },
-    quizInputUnique: {
-      type: String,
-      default: ''
-    }, //use to pass the value of the input
-    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
-  },
-
-  data() {
-    return {
-      inputDataValue: [],
-      quizInputUniqueValue: 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
-    }
-  },
-
-  mounted() {
-    this.quizInputUniqueValue = this.quizInputUnique
-    if (this.shuffleAnswers) {
-      this.inputDataValue = this.shuffleArray(this.inputData)
-    } else {
-      this.inputDataValue = this.inputData
-    }
-  },
-
-  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)
-      }
-      return newArray2
-    },
-
-    /**
-     * @description - Method to get the question
-     */
-    getQuizQuestion() {
-      const el = document.querySelector(`#${this.aBy}`)
-      if (!el || !el.innerHTML) return
-      const labelFor =
-        this.$i18n.locale === 'fr'
-          ? 'Choix de reponse pour la'
-          : 'Answers available for the'
-      return `${labelFor} ${el.innerText}`
-    }
-  }
-}
-</script>

package/src/components/AppCompInputTextBox.vue

@@ -1,91 +0,0 @@
-<template>
-  <div class="input-box">
-    <b-form-textarea
-      :id="`textArea_${inputDataId}`"
-      v-model="quizTextAreaValue"
-      :aria-labelledby="`textArea_${inputDataId}`"
-      :class="classInput()"
-      :placeholder="$t('text.place_holder.for_textarea')"
-      :disabled="quizCompleted"
-      rows="3"
-      no-resize
-      :aria-describedby="`${inputDataId}-msg-erreur`"
-    ></b-form-textarea>
-    <span :id="`${inputDataId}-msg-erreur`" class="sr-only">
-      {{ messageAccessibility() }}
-    </span>
-  </div>
-</template>
-<script>
-import $extendsQuiz from '../mixins/$quizMixins'
-export default {
-  name: 'AppCompInputTextBox',
-  mixins: [$extendsQuiz],
-
-  props: {
-    inputType: {
-      type: String,
-      default: ''
-    },
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-    inputData: {
-      type: Array,
-      default: () => []
-    }, //not used just here to be the same
-    quizCompleted: {
-      type: Boolean,
-      default: false
-    },
-    solution: {
-      type: String,
-      default: ''
-    },
-    showSolution: {
-      type: Boolean,
-      default: false
-    },
-    quizTextArea: {
-      type: String,
-      default: ''
-    }, //use to pass the value of the input
-    quizSubmit: {
-      type: Boolean,
-      default: false
-    } //use to call a submit
-  },
-
-  data() {
-    return {
-      quizTextAreaValue: '' //not using quizTextArea because quizTextArea is a prop
-    }
-  },
-
-  computed: {},
-
-  watch: {
-    /**
-     * @description to pass value to AppCompQuiz
-     * @fires input-change to AppCompQuiz.vue
-     */
-    quizTextAreaValue(newValue) {
-      this.$emit('input-change', newValue)
-    },
-
-    /**
-     * @description to pass the value from AppCompQuiz
-     */
-    quizTextArea(newValue) {
-      this.quizTextAreaValue = newValue
-    }
-  },
-
-  mounted() {
-    this.quizTextAreaValue = this.quizTextArea
-  },
-
-  methods: {}
-}
-</script>