<template>
  <div>

    <p>{{intituleQuestion}} (Note sur {{noteDefaut}})</p>
    <p>Réponses possibles : ({{(reponses.length)}}) </p>
    <div v-for="i in reponses.length" :key="i">
      <ul>

      <li>  {{reponses[i - 1]}} ({{notes [i - 1]}} %)</li>
      </ul>
    </div>

  </div>
</template>

<script>

export default {
  name: "Question_Reponse_Courte",
  props: {
    questionParsee: {}
  },
  data: function () {
    return {
      intituleQuestion: '',
      noteDefaut: '',
      reponses: [],
      notes: []
    }
  },
  watch: {
    /**
     * @vuese
     * Dès qu'une question est récupérée, on extrait ses éléments
     */
    questionParsee: function () {
      //this.intituleQuestion = this.questionParsee.intitule_question
      if (this.questionParsee.type_question === 'shortanswer') {

        this.noteDefaut = this.questionParsee.note_defaut

        let div = document.createElement("div");
        div.innerHTML = this.questionParsee.intitule_question;
        this.intituleQuestion = div.innerText
        div.remove()

        this.reponses = this.questionParsee.liste_reponse.filter(note => note)
        this.notes = this.questionParsee.liste_note
        // alert("reponses : " + this.reponses)
      }
    }
  }
}
</script>

<style scoped>

</style>