réalise une explication du fonctionnement de l'appli vue js quel choix de conception ect dans le cadre d'une évaluation orale qui vise à voir si l'on a bien comprit : <script>
export default {
  data() {
    return {
      questionnaires: [],
      selectedQuestionnaire: null,
      isEditing: false,
      selectedQuestionnaireId: null, 
      title: "Mes Questionnaires: ",
      name: "",
      newQuestion: {
        title: "",
        type: "Question simple",
        proposition1: "",
        proposition2: "",
        reponse: "",
      },
    };
  },
  methods: {
    selectQuestionnaire(questionnaire) {
      fetch(
        `http://127.0.0.1:5000/quiz/api/v1.0/quiz/${questionnaire.id}/questions`
      )
        .then((response) => response.json())
        .then((json) => {
          this.selectedQuestionnaire = json;
          this.selectedQuestionnaireId = questionnaire.id; // set the id here
        });
    },
    startEditingQuizTitre(questionnaire) {
      this.isEditing = true;
      this.selectedQuestionnaireId = questionnaire.id;
      this.name = questionnaire.name;
    },
    modif(question) {
      // ...
    },

    updateQuiz(id, name) {
      fetch(`http://127.0.0.1:5000/quiz/api/v1.0/quiz/${id}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ name: name }),
      })
        .then((response) => response.json())
        .then((json) => {
          console.log(json);
          this.fetchQuestionnaires();
          this.isEditing = false;
        });
    },


    creerQuiz(name) {
      fetch("http://127.0.0.1:5000/quiz/api/v1.0/quiz", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ name: name }),
      })
        .then((response) => response.json())
        .then((json) => {
          console.log(json);
          this.fetchQuestionnaires();
        });
    },

    fetchQuestionnaires() {
      fetch("http://127.0.0.1:5000/quiz/api/v1.0/quiz")
        .then((response) => response.json())
        .then((json) => {
          this.questionnaires = json;
        });
    },

    supprimerQuestionnaire(questionnaire) {
      fetch(`http://127.0.0.1:5000/quiz/api/v1.0/quiz/${questionnaire.id}`, {
        method: 'DELETE',
      })
      .then(response => response.json())
      .then(json => {
        console.log(json);
        if (json.result) {
          this.questionnaires = this.questionnaires.filter(q => q.id !== questionnaire.id);
        }
      });
    },

    
    supprimerQuestion(question) {
  fetch(`http://127.0.0.1:5000/quiz/api/v1.0/quiz/${this.selectedQuestionnaireId}/questions/${question.id}`, {
    method: "DELETE",
  })
  .then((response) => {
    if (!response.ok) {
      throw new Error('La suppression de la question a échoué');
    }
    return response.json();
  })
  .then((json) => {
    console.log(json);
    if (json.result) {
      // Mise à jour de l'affichage en filtrant les questions restantes
      this.selectedQuestionnaire = this.selectedQuestionnaire.filter(
        (q) => q.id !== question.id
      );
    }
  })
  .catch(error => {
    console.error('Erreur lors de la suppression de la question:', error);
  });
},

    // fonction a changer pour ajouter question a un questionnaire

    ajouterQuestion() {
  let requestBody = {
    contenu: this.newQuestion.title,
    question_type: this.newQuestion.type,
  };
  if (this.newQuestion.type === 'Question multiple') {
    requestBody.proposition1 = this.newQuestion.proposition1;
    requestBody.proposition2 = this.newQuestion.proposition2;
    requestBody.reponse = this.newQuestion.reponse;
  } else {
    requestBody.reponse = this.newQuestion.reponse;
  }

  fetch(`http://127.0.0.1:5000/quiz/api/v1.0/quiz/${this.selectedQuestionnaireId}/questions`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(requestBody),
  })
    .then(response => response.json())
    .then(json => {
      console.log(json);
      if (json.result) {
        this.selectedQuestionnaire.push(json.question);
      }
    });
  
  // Réinitialiser le formulaire
  this.newQuestion = {
    title: "",
    type: "Question simple",
    reponse: "",
    proposition1: "",
    proposition2: "",
  };
}
  
    },
  mounted() {
    this.fetchQuestionnaires();
  },
};
</script>
<template>
  <div>
    <h1>{{ title }}</h1>
    <h2>Creer un Quiz</h2>
    <input type="text" v-model="name" />
    <button @click="creerQuiz(name)">Creer Quiz</button>

    <ul>
      <li v-for="questionnaire in questionnaires" :key="questionnaire.id">
        <div v-if="isEditing && selectedQuestionnaireId === questionnaire.id">
          <input type="text" v-model="name" />
          <button @click="updateQuiz(questionnaire.id, name)">Mettre à jour le titre</button>
          <button @click="isEditing = false">Annuler</button>
        </div>
        <div v-else>
          {{ questionnaire.name }}
          <button @click="startEditingQuizTitre(questionnaire)">Modifier le titre</button>
        </div>
        <button @click="selectQuestionnaire(questionnaire)">
          Voir les question
        </button>
        <button @click="supprimerQuestionnaire(questionnaire)">
          Supprimer Questionnaire
        </button>
        <div v-if="selectedQuestionnaireId === questionnaire.id">
          <select v-model="newQuestion.type">
            <option value="Question simple">Question simple</option>
            <option value="Question multiple">Question multiple</option>
          </select>

<input type="text" v-model="newQuestion.title" placeholder="Intitulé de la question"/>
<input v-if="newQuestion.type === 'Question simple'" type="text" v-model="newQuestion.reponse" placeholder="Réponse"/>
<input v-if="newQuestion.type === 'Question multiple'" type="text" v-model="newQuestion.proposition1" placeholder="Proposition 1"/>
<input v-if="newQuestion.type === 'Question multiple'" type="text" v-model="newQuestion.proposition2" placeholder="Proposition 2"/>

          <button @click="ajouterQuestion">Ajouter une question</button>
          <div v-if="selectedQuestionnaire">
            <div v-for="question in selectedQuestionnaire" :key="question.id">
              <p v-if="question.type === 'SimpleQuestion'">
                Question : {{ question.contenu }} Reponse :
                {{ question.reponse }}
              </p>
              <p v-else-if="question.type === 'QuestionMultiple'">
                {{ question.contenu }} - Option 1: {{ question.proposition1 }} -
                Option 2: {{ question.proposition2 }} - Reponse
                {{ question.reponse }}
              </p>
              <button @click="supprimerQuestion(question)">Supprimer</button>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>