dans le template
    1. -   une ligne centrée  de la  class "Manchette"  contient 
        un bouton de la  clas ="velage"
          représenté par  "./Images/Bouton_rouge.gif" width="37" height="37"
       suivi de l'intitulé " Intrigue n°1 : cherche un peu " 
   
    2. Dans un tableau  centré 
        
        2.1 Un première ligne en trois colonnes 
          2.1.1 La colonne de gauche  contient l'image "./Images/sacado.png"
          2.1.2 La deuxième colonne de  class "didascalie" width: 600px
          affiche le champ Présentation  de la ligne en cours d'édition 
                ( v-html="editedData.Présentation" ? ) 
          2.1.3 La troisième cellule widthernviron "17.5%" contient deux lignes 
            <div style="background-color: #fff; border: 2px solid darkblue; text-align: center;">
             2.1.3.1  Le numéro de l'étape editedData.Etape sur 10 
             2.1.3.2  Le numéro de l'essai editedData.Essai sur 4
        
        2.2 le deuxième ligne du tabeau 
             2.2.1 un bouton contenant l'image  "./Images/aide.png" qui, quand il est cliqué remplace 
                   la présentation de la première ligne (editedData.Présentation) par le champ editedData.Cconseil 
             2.2.2 contient une cellule occupant les 2 colonnes de droite,  affichant un texte centré       
                    
                   «  On considère deux nombres <vue-mathjax :formula="nUn" /> et
                    <vue-mathjax :formula="nDeux" /> tels que :<br />
                    <vue-mathjax :formula="somme" />
                    <strong> {{ NbSVal }}</strong> &nbsp; &nbsp; et &nbsp;
                    &nbsp; <vue-mathjax :formula="produit" />
                    <strong> {{ NbPVal }}</strong
                    >.<br />
                    Retrouve ces nombres.  On saute une ligne 
                Que proposes-tu ?
                  » 
           2.3 Une troisième ligne  
           2.3.1 Composée d'une cellule vide 
           2.3.2 Puis dans la deuxième cellule 
                deux champs de saisie des nombres
                2.3.2.1   vue-mathjax :formula="nUn" 
                   style="background-color: lightblue; width: 75px"
                  type="number"
                  size="100"
                  v-model="NbUnProp"
                et
                2.3.2.2 vue-mathjax :formula="nDeux"
                  style="background-color: lightblue; width: 75px"
                  type="number"
                  v-model="NbDeuxProp"
              </td>
           2.3.3 la celleule de droite  contient un bouton callé à gauche 
                 class "boutons Valider"
                  @click "Poursuivre"
                  indiqu&nt Valider </span>
        
    3. Dans un deuxième tableau  centré 
        3.1 on laise une ligne vide pour aérer 
        
        3.2.1.1 Si le champ  "dessin" contient une image idu répertoire "./Images/" 
          on l'affiche   
        3.2.1.2  sinon, Si le champ  "dessin" contient "monAnime"
            on appel le composant <anime  ref="animeCanvas" :largeur="nbUnVal"  :longueur="nbDeuxVal" ></anime> </span>
        3.2.1.2 sinon onaffiche rien
        3.2 Si la réponse est bonne (questionMessage === 2), la zone de dessin ou d'animation ci-dessus et sremplacée par
            une zone centrée de message affichant 
                    « Tu as proposé : {{  NbUnProp2  }} et {{ NbDeuxProp2  }} <br/>
                    Les réponses étaient : {{ NbUnVal }} et {{ NbDeuxVal }} <br/> <br/>
                    »
       puis  editedData.Bravo  et un bouton "Continuer" 
   4. Si la variable "Edition" est vraie      
            on affiche 
           «  Réponses : {{ NbUnVal }} et {{ NbDeuxVal }} »
          <p style="text-align: center">{{ Conseil }}</p>
          <p style="text-align: center">Trouve : {{ Trouve }}</p>
          <p style="text-align: center">Question : {{ questionMessage }}</p>
          <p style="text-align: center">Conseil : {{ conseilMessage }}</p>
          <p style="text-align: center">Bravo : {{ bravoMessage }}</p>
          <p style="text-align: center">Message : {{ leMessage }}</p>
  
un selecteur de ligne du fichier data.json 
      <label for="etapeSelect">Sélectionner Étape:</label>
      <select id="etapeSelect" v-model="selectedEtape">
        <option value="">Nouvelle Ligne</option>
        <option v-for="item in data" :key="item.Etape" :value="item.Etape">{{ item.Etape }}</option>
      </select>
Si une ligne est sélectionnée  
  
     v-if="selectedEtape !== null && selectedEtape !== ''"
      afficher l'un en dessous de l'autre les champs de la ligne sélectionnée 
      en faisant attention aux longues lignes comme editedData.Présentation
      pour lesqueles on créera une zone dei width 900px maximum et de hauteur suffisante pour le champ
      soit affiché entièrment
      {{ editedData.Etape }} <br/>
      {{ editedData.Type }}<br/>
      ... etc 
      <p><strong>Présentation:</strong> {{ editedData.Présentation }}</p>
       si nous ne somme pas en mode édition ie "!editing"
        <bouton @click="startEditing">Modifier</bouton>
       sinon  
        les zones ci-dessus deviennent modifiables jusqu"à confirmation 
        ua moyen du bouton @click="confirmEditing">Confirmer</bouton>
    
    on ajoutera un bouton @click="addNewLine">Ajouter une nouvelle ligne

    et un bouton @click="saveDataLocally">Sauvegarder localement
fin du template 

<script>
//import jsonData from '@/components/data.json';
import jsonData from '@/components/output_2.json';
import anime from "../components/anime";

export default {
  name: 'Editeur',
   components: {
   anime
  },
  data() {
    return {
      animeLe : false, 
      Bravo: null,
      bravo: 2,
      bravoMessage: 2,
      Conseil: null,
      conseil: 1,
      conseilMessage: 1,
      data: jsonData,
      debug : true, 
      dessin: null,
      editedData: {},
      editing: false,
      essai: 1,
      EssaiNb: 0,
      essaiSuivant: 1,
      EssaiVu: 0,
      etape: 1,
      EtapeNb: 0,
      finalImage: null, 
      largeur: 0,
      ligneTrouvee: null,
      longueur: 0,
      Max_1: 0,
      Max_2: 0,
      NbDeuxProp2: 0,
      NbDeuxProp: 0,
      NbDeuxVal: 0,
      nbDeuxVal: 0,
      nbEtape: null ,
      NbPVal: 0,
      NbSVal: 0,
      NbUnProp2: 0,
      NbUnProp: 0,
      NbUnVal: 0,
      nbUnVal: 0,
      nDeux: "$ \\mathbf {n_2}$",
      nUn: "$ \\mathbf {n_1}$",
      presentation: null,
      produit: "$ \\mathbf {n_1 \\times  n_2 = \\; } $",
      question: 1,
      questionMessage: 1,
      questionSuivante: 10,
      questionVue: 0,
      reponse: 1,
      selectedEtape: '1',
      somme: "$ \\mathbf {n_1 + n_2 = \\; }$",
      tagada:1, 
      Trouve: 0,
      Type: null,
//      myJson: json,
      Premiers: [
        2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67,
        71, 73, 79, 83, 89, 97,
      ],
      leMessage: "Defaut",
      messageStyle:
        "color:red; font-size: 30px; text-align: center; width:300px ",
    };
  },
    created() {
    this.editedData = { ...this.data[0] };
  },
  methods: {
    startEditing() {
      this.editing = true;
      const selectedItem = this.data.find(item => item.Etape === this.selectedEtape);
      if (selectedItem) {
        this.editedData = { ...selectedItem };
        this.tagada = 2 * this.editedData.Etape ;  
      }
    },

    confirmEditing() {
  this.editing = false;
  const index = this.data.findIndex(item => item.Etape === this.etape);
  if (index !== -1) {
    // Mettre à jour la ligne à l'index trouvé ici.
    this.data[index] = { ...this.editedData };
  }
},

    addNewLine() {
      const newEtape = this.data.length > 0 ? this.data[this.data.length - 1].Etape + 1 : 1;
      const newLine = {
        Etape: newEtape,
        Essai: 1,
        Type: '',
        Présentation: '',
      };
      this.data.push(newLine);
      this.selectedEtape = newEtape.toString();
    },
    saveDataLocally() {
      const dataBlob = new Blob([JSON.stringify(this.data, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(dataBlob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'data.json';
      link.click();
      URL.revokeObjectURL(url);
    },
    NbUn() {
      let nombreDecimalAleatoire = Math.random() * 20;
      let nombreEntierAleatoire = Math.floor(nombreDecimalAleatoire);
      this.NbUnVal = nombreEntierAleatoire + 1;
    },
    NbDeux() {
      let nombreDecimalAleatoire = Math.random() * 20;
      let nombreEntierAleatoire = Math.floor(nombreDecimalAleatoire);
      this.NbDeuxVal = nombreEntierAleatoire + 1;
    },

questionForcee() {
  console.log("Je vais à : " + this.etape);
  this.question = Math.floor(this.etape / 10);
  this.etape =  this.question  ; 
  this.suivante(this.nbEtape);
  this.nbEtape = null ; 
}, 
    Poursuivre() {
      let num = 0;
      this.NbDeuxProp2 = this.NbDeuxProp  ; 
      this.NbUnProp2 = this.NbUnProp  ; 
      if (this.questionVue == 0) { // Cette question n'est âs terminée
       if (this.debug) {console.log ("On passe, questionVue : " + this.questionVue
                            + " question: " + this.questionVue) ; }
        if ( // Est-ce la bonne réponse ? 
          (this.NbUnProp == this.NbUnVal && this.NbDeuxProp == this.NbDeuxVal) ||
          (this.NbUnProp == this.NbDeuxVal && this.NbDeuxProp == this.NbUnVal)
        ) { // Oui, Bravo 
          this.Trouve = 1;
          this.leMessage = this.Bravo;
          this.messageStyle =
            "width:300px ;  background-color: #67ee67;  display: inline-block; text-align: center;";
          this.questionMessage = 2;
      console.log ("Trouve message pas lu ")     ; 
        } else if (
          this.Type == "+/-/±1/-1/-P" &&
          ((-1 * this.NbUnProp == this.NbUnVal && -1 * this.NbDeuxProp == this.NbDeuxVal) ||
            (-1 * this.NbUnProp == this.NbDeuxVal && -1 * this.NbDeuxProp == this.NbUnVal))
        ) {
          this.leMessage = this.Bravo;
          this.messageStyle =
            "width:300px ; background-color: #67ee67; text-align: center;  display: inline-block; ";
          this.Trouve = 1;
          this.questionMessage = 1;
      console.log ("Trouve au deuxième et message pas lu ")     ; 
        } else {
          this.leMessage = this.Conseil;
          this.messageStyle =
            "width:335px ; background-color:  #deb56a; text-align: left;  display: inline-block;  ";
          this.Trouve = 0;
          this.questionMessage = 2;
  if ( this.animeLe
   && ((this.NbUnVal + this.NbDeuxVal) > 5)
   &&  ((this.NbUnVal + this.NbDeuxVal) < 35)
   && ((this.NbUnVal * this.NbDeuxVal) != 0 )
  ) 
    { this.$refs.animeCanvas.reinitialiserAnime(this.NbUnVal, this.NbDeuxVal); }
        }
        this.questionVue = 1;
      } else {
        // Question suivante
        this.questionVue = 0; // Message pas vu
        if (this.Trouve == 1 || this.essai >= 3) {
      //    this.question = this.inEtape + 10 ;
          num = (this.question +1) * 10;
          this.essai = 0;
        } else {
          // Encore un essai
          this.essai++;
          num = this.question * 10  + this.essai;
        }
        this.suivante  (num); 
      }
      this.NbUnProp = null;
      this.NbDeuxProp = null;
    },
suivante (num)     {
        console.log ("Question suivante") ; 
        this.questionMessage = 1;
        console.log(this.data); 
       const selectedItem = this.data.find(item => item.Etape === num);
      if (selectedItem) {
        this.editedData = { ...selectedItem };
      }
        this.etape = this.editedData.Etape;
        this.question =  Math.floor(this.etape / 10) ;  
        // this.essai = this.editedData.Essai;
        this.Max_1 = this.editedData.Max_1;
        this.Max_2 = this.editedData.Max_2;
        this.Bravo = this.editedData.Bravo;
        this.presentation = this.editedData.Présentation;
        this.Conseil = this.editedData.Conseil;
        this.leMessage = this.editedData.Precision;
        this.Type = this.editedData.Type;
        this.Propose(this.Max_1, this.Max_2, this.Type);
        this.dessin = this.editedData.dessin;
        this.animeLe = this.dessin.includes("monAnime") ? true : false;
        this.Trouve = 0;
        console.log ("Question num :  " + this.etape ) ; 
},  
    generateRandomPrimeInRange(min, max) {
      var Nb = min + max;
      Nb = Math.floor(Math.random() * 10);
      return this.Premiers[Nb];
    },
    Propose(Lun, max, type) {
     this.animeLe = false ; 
      var NbUnValDeci = Math.random() * Lun;
      var NbUnValEntier = Math.floor(NbUnValDeci);
      this.NbUnVal = NbUnValEntier + 1;
      var NbDeuxValDeci = Math.random() * max ; 
      var NbDeuxValEntier = Math.floor(NbDeuxValDeci);
      switch (type) {
        // ----------------------------
        case "fixes":
          this.NbUnVal = Lun;
          this.NbDeuxVal = max;
          break;
        // ----------------------------
        case "egaux":
          this.NbDeuxVal = this.NbUnVal;
          break;
        // ----------------------------
        case "pZero":
          this.NbUnVal = this.generateRandomPrimeInRange(Lun, max);
          this.NbDeuxVal = this.NbUnVal * 3;
          break;
        // ----------------------------
        case "pTrois":
          this.NbUnVal = this.generateRandomPrimeInRange(Lun, max);
          this.NbDeuxVal = this.NbUnVal * 3;
          break;
        // ----------------------------
        case "pOnze":
          this.NbUnVal = this.generateRandomPrimeInRange(Lun, max);
          this.NbDeuxVal = this.NbUnVal * 11;
          break;
        // ----------------------------
        case "pSomNeg":
          this.NbUnVal = -1 * this.NbUnVal;
          NbDeuxValDeci = Math.random() * parseFloat(max);
          NbDeuxValEntier = Math.floor(NbDeuxValDeci);
          this.NbDeuxVal = -1 * (NbDeuxValEntier + 1);
          break;
        // ----------------------------
        case "pProdNeg":
          this.NbUnVal = -1 * this.NbUnVal;
          NbDeuxValDeci = Math.random() * parseFloat(max);
          NbDeuxValEntier = Math.floor(NbDeuxValDeci);
          this.NbDeuxVal = NbDeuxValEntier + 1;
          break;
        // ----------------------------
        case "pDeuxNeg":
          NbDeuxValDeci = Math.random() * parseFloat(max);
          NbDeuxValEntier = Math.floor(NbDeuxValDeci);
          this.NbDeuxVal = NbDeuxValEntier + 1;
          if (this.NbUnVal < this.NbDeuxVal) {
            var tmp = this.NbUnVal;
            this.NbUnVal = this.NbDeuxVal;
            this.NbDeuxVal = tmp;
          }
          this.NbUnVal = -1 * this.NbUnVal;
          break;
        // ----------------------------
        case "pQuatre":
          this.NbUnVal = this.generateRandomPrimeInRange(Lun, max);
          break;
        // ----------------------------
        case "pCinq":
          this.NbUnVal = this.generateRandomPrimeInRange(Lun, max);
          this.NbDeuxVal = this.NbUnVal * 5;
          break;
        // ----------------------------
        case "pDix":
          this.NbUnVal = this.generateRandomPrimeInRange(Lun, max);
          this.NbDeuxVal = this.NbUnVal * 10;
          break;
        // ----------------------------
        case "pNeuf":
          this.NbUnVal = this.generateRandomPrimeInRange(Lun, max);
          this.NbDeuxVal = parseFloat(max);
          break;
        // ----------------------------
        case "pPlus":
          this.NbUnVal = this.generateRandomPrimeInRange(Lun, max);
          this.NbDeuxVal = parseFloat(max);
          break;
        // ----------------------------
        case "pSubstitution":
          this.NbUnVal = this.generateRandomPrimeInRange(Lun, max);
          this.NbDeuxVal = parseFloat(max);
          break;
        // ---
        case "pElimination":
          this.NbUnVal = this.generateRandomPrimeInRange(Lun, max);
          this.NbDeuxVal = parseFloat(max);
          break;
        // --- -2 et 1 => {-1, -1}
        case "-2/1/*/-1/-1":
          this.NbUnVal = -1;
          this.NbDeuxVal = -1;
          break;
        // --- P=0   =>   {0, a}
        case "*/0/*/0/*":
          this.NbUnVal = 0;
          this.NbDeuxVal = parseFloat(max);
          break;
        // ---  S > 0 & P=n²  =>    {√P, √P}
        case "+/2/*/+/+":
          this.NbUnVal = this.generateRandomPrimeInRange(Lun, max);
          this.NbDeuxVal = this.NbUnVal;
          break;
        // ---  S=P+1 =>  {1, P}
        case "+/+/±1/+/1":
          this.NbUnVal =
            parseInt(Math.floor(Math.random() * Lun)) + parseInt(max);
          this.NbDeuxVal = 1;
          break;
        // --- P= |S|-1 {-1, -P}
        case "+/-/±1/-1/-P":
          this.NbUnVal =
            parseInt(Math.floor(Math.random() * Lun)) + parseInt(max);
          this.NbDeuxVal = -1;
          break;
        // --- Un pos et un neg
        case "+/-/*/-/+":
          this.NbUnVal =
            parseInt(Math.floor(Math.random() * Lun)) + parseInt(max);
          this.NbDeuxVal = -1 * parseInt(this.NbUnVal);
          break;
        // --- S=0 => {√P, -√P}
        case "0/2/*/-/+":
          this.NbUnVal =
            parseInt(Math.floor(Math.random() * Lun)) + parseInt(max);
          this.NbDeuxVal = -1 * parseInt(this.NbUnVal);
          break;
        // ---  S < 0 & P=n²  =>  {-√P, -√P}
        case "-/2/*/-/-":
          this.NbUnVal =
            parseInt(this.generateRandomPrimeInRange(Lun, max)) * parseInt(-1);
          this.NbDeuxVal = this.NbUnVal;
          break;
        // --- P=S-1 => (1, P)
        case "-/-/?/-/+ ":
          this.NbUnVal = parseInt(Math.floor(Math.random() * Lun));
          this.NbDeuxVal = 1;
          break;
        // --- a > 0 et b > 0
        case "+/+/*/+/+":
          this.NbUnVal = parseInt(Math.floor(Math.random() * Lun));
          this.NbDeuxVal = parseInt(Math.floor(Math.random() * max));
          break;
        // --- a < 0 et b < 0
        case "-/+/*/-/-":
          this.NbUnVal = -1 * parseInt(Math.floor(Math.random() * Lun));
          this.NbDeuxVal = parseInt(Math.floor(Math.random() * max));
          break;
        // --- a < 0 et b > 0
        case "-/-/*/-/+":
          this.NbUnVal = -1 * this.generateRandomPrimeInRange(Lun, max);
          this.NbDeuxVal = -1 * parseInt(Math.floor(Math.random() * max));
          break;
        // --- a < 0 et b > 0
        case "anime":
          this.NbUnVal = 1+ NbUnValEntier ; 
          this.NbDeuxVal = 1+ NbDeuxValEntier ;  
          break;
        // -----------------------------
        default:
          this.NbUnVal = parseFloat(Lun);
          NbDeuxValDeci = Math.random() * parseFloat(max);
          NbDeuxValEntier = Math.floor(NbDeuxValDeci);
          this.NbDeuxVal = NbDeuxValEntier + 1;
          break;
      }
       //   this.NbUnVal = this.NbUnVal * 1 ; 
       //   this.NbDeuxVal = this.NbDeuxVal * 1 ; 
  if (this.animeLe) {
    this.$nextTick(() => {
      this.$refs.animeCanvas.reinitialiserAnime(this.NbUnVal, this.NbDeuxVal);
    });
  }
      this.NbSVal = parseFloat(this.NbUnVal) + parseFloat(this.NbDeuxVal);
      this.NbPVal = parseFloat(this.NbUnVal) * parseFloat(this.NbDeuxVal);
    }, 
  }, 
  mounted() {
      console.clear();
  //  this.ligneTrouvee = this.myJson.find((ligne) => ligne.Etape == 1);
    this.etape = this.editedData.Etape;
    this.essai = this.editedData.Essai;
    this.Max_1 = this.editedData.Max_1;
    this.Max_2 = this.editedData.Max_2;
    this.Type = this.editedData.Type;
    this.presentation = this.editedData.Présentation;
    this.Bravo = this.editedData.Bravo;
    this.Conseil = this.editedData.Conseil;
    let NbUnValDeci = Math.random() * 6;
    let NbUnValEntier = Math.floor(NbUnValDeci);
    this.NbUnVal = NbUnValEntier + 1;
    this.dessin = this.editedData.dessin;
    this.animeLe = this.dessin.includes("monAnime") ? true : false;

  this.NbUn();
  this.NbDeux();
    this.Propose(this.Max_1, this.Max_2, this.Type);
  },
  };
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: darkblue;
  text-align: left;
  color: darkblue;
  margin-top: 40px;
  margin-left: 20px;
}
.Decor {
     background: url('Images/Fond.jpg');
    margin: -100px auto;
    padding-top : 100px ;
    float: center;
    width: 950px;
    height: 650px;
    color: #666666;
    /*  z-index: 2; */
    text-align: center;
}
.Manchette {
position: relative;
    width: 100%; 
    margin: auto   ;
    margin-top : 0px ;
    margin-bottom: 0px;
    padding: 1px 200px;
    text-align: center;
    font: 25pt tahoma;
    color: white;
    background-color: #77617a;
    border : solid 2px black ;
    border :  none ;
}
.velage {
    width: 50px;
    height: 40px;
    position: relative;
    top: 4px;
    left: -151px;
    background-color: #77617a;
    outline: none;
    border : solid 2px black ;
    border : none ;
}

.didascalie {
    width: 600px;
    padding: 0px 5px ;
    text-align: left ;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 15px;
    font: 14pt tahoma;
    background-color: #a1e1dd;
}

.boutons {
    color: white;
    font: 17pt tahoma;
    padding: 2px 10px;
    text-align: center;
    outline: none;
}

.Valider {
    background-color: #007B00;
    margin: auto;
    text-align: center;
    visibility: visible;
}
.Score {
    text-decoration: underline;
    font: bold 17pt tahoma;
}
</style>