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

package/src/components/AppCompInputAssociation.vue

@@ -1,332 +0,0 @@
-<template>
-  <div class="input-box">
-    <div style="display:flex">
-      <div
-        v-for="singleAssociationZone in inputData.zone_depots"
-        :key="singleAssociationZone.id"
-        :class="
-          `associationlist-${singleAssociationZone.id} ` +
-            classInput(singleAssociationZone.id)
-        "
-      >
-        <label
-          :for="`${inputDataId}_${singleAssociationZone.id}`"
-          v-html="singleAssociationZone.contenu.alt"
-        ></label>
-        <div
-          :class="
-            quizClickedZone == singleAssociationZone.id
-              ? 'quizZoneActive'
-              : 'quizZone'
-          "
-          @click="activateChoice(singleAssociationZone.id)"
-        >
-          <!--zone is img-->
-          <div
-            v-if="singleAssociationZone.contenu.type == 'img'"
-            class="quizZoneIsImg"
-          >
-            <img
-              :src="singleAssociationZone.contenu.affichage"
-              :alt="singleAssociationZone.contenu.alt"
-            />
-          </div>
-          <!--zone is text-->
-          <div
-            v-if="singleAssociationZone.contenu.type == 'str'"
-            class="quizZoneIsText"
-          >
-            <p v-html="singleAssociationZone.contenu.affichage"></p>
-          </div>
-          <!--selected item-->
-          <!---selected is img--->
-          <div
-            v-if="
-              quizAssociation[singleAssociationZone.id] &&
-                quizAssociation[singleAssociationZone.id] !== '' &&
-                inputData.choix_deplaceable[
-                  quizAssociation[singleAssociationZone.id]
-                ].contenu.type == 'img'
-            "
-            class="quizZoneWithImg"
-          >
-            <img
-              :src="
-                inputData.choix_deplaceable[
-                  quizAssociation[singleAssociationZone.id]
-                ].contenu.affichage
-              "
-              :alt="
-                inputData.choix_deplaceable[
-                  quizAssociation[singleAssociationZone.id]
-                ].contenu.alt
-              "
-            />
-          </div>
-          <!---selected is text--->
-          <div
-            v-if="
-              quizAssociation[singleAssociationZone.id] &&
-                quizAssociation[singleAssociationZone.id] !== '' &&
-                inputData.choix_deplaceable[
-                  quizAssociation[singleAssociationZone.id]
-                ].contenu.type == 'str'
-            "
-            class="quizZoneWithText"
-          >
-            <p
-              v-html="
-                inputData.choix_deplaceable[
-                  quizAssociation[singleAssociationZone.id]
-                ].contenu.affichage
-              "
-            ></p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!--choices-->
-    <div
-      style="display:flex"
-      :class="quizClickedZone ? 'parentQuizChoicesActive' : 'parentQuizChoices'"
-    >
-      <div
-        v-for="singleAssociationChoice in inputData.choix_deplaceable"
-        :key="singleAssociationChoice.id"
-        :class="`associationlist-${singleAssociationChoice.id}`"
-      >
-        <label
-          :for="`${inputDataId}_${singleAssociationChoice.id}`"
-          v-html="singleAssociationChoice.contenu.alt"
-        ></label>
-        <div
-          class="quizAssociationChoice"
-          @click="assignValueToZone(singleAssociationChoice.id)"
-        >
-          <!---is img--->
-          <div
-            v-if="singleAssociationChoice.contenu.type == 'img'"
-            class="quizChoiceWithImg"
-          >
-            <img
-              :src="singleAssociationChoice.contenu.affichage"
-              :alt="singleAssociationChoice.contenu.alt"
-            />
-          </div>
-          <!---is text--->
-          <div
-            v-if="singleAssociationChoice.contenu.type == 'str'"
-            class="quizChoiceWithText"
-          >
-            <p v-html="singleAssociationChoice.contenu.affichage"></p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import $extendsQuiz from '../mixins/$quizMixins'
-export default {
-  mixins: [$extendsQuiz],
-
-  props: {
-    inputType: {
-      type: String,
-      default: ''
-    },
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-    inputData: {
-      type: Object,
-      default: () => {}
-    },
-    quizCompleted: {
-      type: Boolean,
-      default: false
-    },
-    solution: {
-      type: Object,
-      default: () => []
-    },
-    showSolution: {
-      type: Boolean,
-      default: false
-    },
-    shuffleAnswers: {
-      type: Boolean,
-      default: false
-    },
-    quizAssociation: {
-      type: Object,
-      default: () => {}
-    }, //use to pass the value of the input
-    quizSubmit: {
-      type: Boolean,
-      default: false
-    } //use to call a submit
-  },
-
-  data() {
-    return {
-      quizClickedZone: '', //for the id of the last clicked zone to assign the choice
-      quizAssociationValue: [] //not using quizAssociation because quizAssociation is a prop
-    }
-  },
-
-  computed: {
-    /**
-     * @description
-     *
-    quizZoneContent(zoneId) {
-      //check if zone is filled
-      if (zoneId == false) {
-        // check if zone has image
-
-      }
-      return zoneId
-    }*/
-  },
-
-  watch: {
-    /**
-     * @description to pass value to AppCompQuiz
-     * @fires input-change to AppCompQuiz.vue
-     */
-    quizAssociationValue(newValue) {
-      this.$emit('input-change', newValue)
-    },
-
-    /**
-     * @description to pass the value from AppCompQuiz
-     */
-    quizAssociation(newValue) {
-      this.quizAssociationValue = newValue
-    }
-  },
-
-  mounted() {
-    let associatedChoices = []
-    for (let i = 0; i < this.inputData.length; i++) {
-      let singleAssociation
-      if (this.shuffleAnswers) {
-        singleAssociation = this.inputData[i]
-        //@todo shuffle
-        singleAssociation.option = this.shuffleArray(singleAssociation.option)
-      } else {
-        singleAssociation = this.inputData[i]
-      }
-    }
-    if (this.quizAssociation.length == 0) {
-      this.quizAssociationValue = associatedChoices
-    } else {
-      this.quizAssociationValue = this.quizAssociation
-    }
-  },
-
-  methods: {
-    /**
-     * @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}
-     * @todo redo shuffle
-     */
-    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 activates choices to assign to that zone
-     * @param {String} zoneId
-     */
-    activateChoice(zoneId) {
-      if (this.quizClickedZone == zoneId) {
-        this.quizClickedZone = ''
-      } else {
-        this.quizClickedZone = zoneId
-      }
-    },
-
-    /**
-     * @description remove current uses of value and assign value to quiz
-     * @param {String} choiceId
-     */
-    assignValueToZone(choiceId) {
-      if (this.quizClickedZone !== '' && choiceId !== '') {
-        //remove current uses of value
-        for (const singleKey in this.quizAssociationValue) {
-          if (
-            Object.hasOwnProperty.call(this.quizAssociationValue, singleKey)
-          ) {
-            const element = this.quizAssociationValue[singleKey]
-            if (element == choiceId) {
-              this.$set(this.quizAssociationValue, singleKey, '')
-            }
-          }
-        }
-        /*
-        let listKeys = Object.keys(this.quizAssociationValue)
-        for (let index = 0; index < listKeys.length; index++) {
-          if (this.quizAssociationValue[listKeys[index]] == choiceId) {
-            this.$set(this.quizAssociationValue, listKeys[index], '')
-          }
-        }*/
-        //assing value
-        this.$set(this.quizAssociationValue, this.quizClickedZone, choiceId)
-        //deactivate choices
-        this.quizClickedZone = ''
-      }
-    }
-  }
-}
-</script>
-<style scoped>
-.quizZone,
-.quizZoneActive {
-  height: 300px;
-  width: 300px;
-  border: solid 1px;
-}
-
-.quizZone {
-  border-color: black;
-}
-.quizZoneActive {
-  border-color: red;
-}
-
-.parentQuizChoicesActive {
-  background: yellow;
-}
-
-.quizAssociationChoice {
-  height: 300px;
-  width: 300px;
-  border: solid black 1px;
-}
-</style>