fcad-core-dragon 2.0.0-beta.4 → 2.0.0-beta.6

package/src/components/AppCompInputDropdownNext.vue

@@ -22,9 +22,12 @@
         :id="inputDataId + '_' + singleDropdown.id"
         v-model="quizInputTypeValue[singleDropdown.id]"
         item-title="text"
+        :item-props="true"
         :items="singleDropdown.option"
         :disabled="quizLimitActive"
-      />
+        :open-text="$t('message.dropdown_list') + ' ' + singleDropdown.ennonce"
+        close-text=""
+      ></v-select>
     </div>
   </div>
 </template>
@@ -124,17 +127,15 @@ export default {
       const defaultAnswer = {
         value: null,
         disabled: true,
-        text: this.$t('message.first_option_dropdown')
+        text: this.$t('message.first_option_dropdown'),
+        selected: true
       }
       let selectedChoices = []
       for (let i = 0; i < this.inputData.length; i++) {
-        let singleDropdown
-        if (this.shuffleAnswers) {
-          singleDropdown = this.inputData[i]
+        let singleDropdown = this.inputData[i]
+        if (this.shuffleAnswers)
           singleDropdown.option = this.shuffleArray(singleDropdown.option)
-        } else {
-          singleDropdown = this.inputData[i]
-        }
+
         if (
           this.inputData[i].option[0].text !==
           this.$t('message.first_option_dropdown')
@@ -156,4 +157,45 @@ export default {
 .dropdown-container {
   position: relative;
 }
+
+.texteatrou {
+  display: inline !important;
+  .cnt-input {
+    display: inline;
+
+    .v-input {
+      display: inline-block !important;
+
+      .v-input__control,
+      .v-field {
+        width: 240px !important;
+        grid-area: inherit !important;
+
+        .v-field__field {
+          height: 25px !important;
+          padding: 0 !important;
+          min-height: inherit !important;
+
+          .v-field__input {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+            min-height: inherit !important;
+
+            .v-select__selection {
+              min-height: inherit !important;
+            }
+          }
+        }
+
+        .v-field__append-inner {
+          margin-right: 6px;
+        }
+      }
+
+      .v-input__details {
+        display: none;
+      }
+    }
+  }
+}
 </style>

package/src/components/AppCompInputRadioNext.vue

@@ -1,152 +1,152 @@
-<!-- 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 AppCompQuizNext
- * Uses useQuiz composable
--->
-
-<template>
-  <div class="input-box">
-    <fieldset>
-      <legend
-        :id="`lgd_${inputDataId}`"
-        class="sr-only"
-        tabindex="-1"
-        v-html="$t('quizState.answers')"
-      />
-
-      <template
-        v-for="choixReponse in quizInputDataValue"
-        :Key="`div_chx_${inputDataId}-${choixReponse.id}`"
-      >
-        <div class="box-radio" role="group">
-          <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="inputUniqueValue"
-              :disabled="quizLimitActive"
-              type="radio"
-              :value="choixReponse.id"
-              :name="`btn-radios-${inputDataId}`"
-              class="radio-input"
-              :aria-labelledby="`span_${inputDataId}_${choixReponse.id}`"
-            />
-
-            <span
-              :id="`span_${inputDataId}_${choixReponse.id}`"
-              aria-hidden="true"
-              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 { useQuiz } from '../composables/useQuiz'
-import { toRefs } from 'vue'
-export default {
-  name: 'AppCompInputRadioNext',
-
-  props: {
-    quizType: {
-      type: String,
-      default: ''
-    },
-    inputDataId: {
-      type: String,
-      default: ''
-    },
-
-    inputData: {
-      type: Array,
-      default: () => []
-    },
-    quizInputType: {
-      type: String,
-      default: ''
-    },
-    solution: {
-      type: String,
-      default: ''
-    }, //may be null
-    showSolution: {
-      type: Boolean,
-      default: false
-    },
-    shuffleAnswers: {
-      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 {
-      quizInputDataValue: [],
-      inputUniqueValue: null //not using quizInputUnique because quizInputUnique is a prop
-    }
-  },
-
-  computed: {},
-
-  watch: {
-    // /**
-    //  * @description to pass value to AppCompQuiz
-    //  * @fires input-change to AppCompQuiz.vue
-    //  */
-    inputUniqueValue: {
-      deep: true,
-      handler(newValue) {
-        this.$emit('input-change', newValue)
-      }
-    }
-  },
-
-  mounted() {
-    this.initQuiz()
-  },
-
-  methods: {
-    initQuiz() {
-      this.inputUniqueValue = this.quizInputType
-      if (this.shuffleAnswers) {
-        this.quizInputDataValue = this.shuffleArray(this.inputData)
-      } else {
-        this.quizInputDataValue = this.inputData
-      }
-    }
-  }
-}
-</script>
+<!-- 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 AppCompQuizNext
+ * Uses useQuiz composable
+-->
+
+<template>
+  <div class="input-box">
+    <fieldset>
+      <legend
+        :id="`lgd_${inputDataId}`"
+        class="sr-only"
+        tabindex="-1"
+        v-html="$t('quizState.answers')"
+      />
+
+      <template
+        v-for="choixReponse in quizInputDataValue"
+        :Key="`div_chx_${inputDataId}-${choixReponse.id}`"
+      >
+        <div class="box-radio" role="group">
+          <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="inputUniqueValue"
+              :disabled="quizLimitActive"
+              type="radio"
+              :value="choixReponse.id"
+              :name="`btn-radios-${inputDataId}`"
+              class="radio-input"
+              :aria-labelledby="`span_${inputDataId}_${choixReponse.id}`"
+            />
+
+            <span
+              :id="`span_${inputDataId}_${choixReponse.id}`"
+              aria-hidden="true"
+              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 { useQuiz } from '../composables/useQuiz'
+import { toRefs } from 'vue'
+export default {
+  name: 'AppCompInputRadioNext',
+
+  props: {
+    quizType: {
+      type: String,
+      default: ''
+    },
+    inputDataId: {
+      type: String,
+      default: ''
+    },
+
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+    quizInputType: {
+      type: String,
+      default: ''
+    },
+    solution: {
+      type: String,
+      default: ''
+    }, //may be null
+    showSolution: {
+      type: Boolean,
+      default: false
+    },
+    shuffleAnswers: {
+      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 {
+      quizInputDataValue: [],
+      inputUniqueValue: null //not using quizInputUnique because quizInputUnique is a prop
+    }
+  },
+
+  computed: {},
+
+  watch: {
+    // /**
+    //  * @description to pass value to AppCompQuiz
+    //  * @fires input-change to AppCompQuiz.vue
+    //  */
+    inputUniqueValue: {
+      deep: true,
+      handler(newValue) {
+        this.$emit('input-change', newValue)
+      }
+    }
+  },
+
+  mounted() {
+    this.initQuiz()
+  },
+
+  methods: {
+    initQuiz() {
+      this.inputUniqueValue = this.quizInputType
+      if (this.shuffleAnswers) {
+        this.quizInputDataValue = this.shuffleArray(this.inputData)
+      } else {
+        this.quizInputDataValue = this.inputData
+      }
+    }
+  }
+}
+</script>

package/src/components/AppCompInputTextNext.vue

@@ -100,7 +100,26 @@ export default {
   }
 }
 </script>
-<style>
-.box-reponse-ouverte {
+<style lang="scss">
+.quiz-texte-troue {
+  .texteatrou {
+    .v-input {
+      display: inline-block !important;
+      width: 150px;
+
+      .v-field {
+        height: 25px;
+
+        input {
+          padding: 0 24px;
+          min-height: 25px !important;
+        }
+      }
+
+      .v-input__details {
+        display: none;
+      }
+    }
+  }
 }
 </style>

package/src/components/AppCompInputTextTableNext.vue

@@ -101,6 +101,7 @@ export default {
     quizInputTypeValue: {
       deep: true,
       handler(newValue) {
+        // const val = newValue.length == 0 ? null : newValue
         this.$emit('input-change', newValue)
       }
     }

package/src/components/AppCompInputTextToFillDropdownNext.vue

@@ -30,8 +30,11 @@
           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>
 
@@ -163,16 +166,20 @@ export default {
       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 (
@@ -188,6 +195,7 @@ export default {
             Object.values(singleDropdown)[0].splice(index, 1)
           }
         }
+
         Object.values(singleDropdown)[0].unshift(defaultAnswer)
 
         selectedChoices.push(null)