JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Quiz Game</h1>

<div id="mainContent">

    <div id="boutonPLay">
        <div id="p1">Mon Image</div>
        <div id="p2"><button id="game">Jouer au Quiz</button></div>    
    </div>
    
    <div id="game1">

        <div id="points">Votre moyenne : </div>
        <div id="contentProgressbar">
        <div id="progressbar"></div>
    
        </div>
        <div id="question">La question à répondre</div>
        <div id="questionPicture"></div>
        <div id="response">***</div> 

        <div id="show_Hide"> 
            <div><button id="a" class="buttonQ">Réponse A</button></div>
            <div><button id="b" class="buttonQ">Réponse B</button></div>
            <div><button id="c" class="buttonQ">Réponse C</button></div>
        </div>
    
            <div id="nextPrev">
                <button id="previous">Question précédente</button>
                <button id="next">Question suivante</button>  
                  
            </div> 
    </div>
</div>

<div id="End">
    <h2>Jeu terminé : Ton score est de</h2>
</div>


<input id="rep" type="hidden" value="-1"/>
<!-- <script  type='module' src="set/js/script.js" async></script> -->
<!-- <script  type='module' src="set/js/script.js"></script> -->
<div id="bonIndex"></div>

CSS

h1{
    font-size: 25px;
}

#contentProgressbar{
    height: 20px;
}

#progressbar{
    width: 0%;
    height: 20px;
    background-color: green;
}

#question{
font-size: 14px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

div{
    border: 1px solid black;
    text-align: center;
}

#points{
    height: 25px;
}

#question{
    height: 40px;
}

#response{
    height: 40px;
}

.buttonQuestion{
 background-color: rgb(189, 197, 212);
 text-align: center;
 border-radius: 6px;
 padding: 1em;
 width: 80%;
 cursor: grab;
}

.buttonQuestion:hover{
    background-color: rgb(158, 169, 190);
   }

   button[disabled]
   {
    cursor: not-allowed; /* affiche interdit*/
    /* pointer-events:none; */
   }

   #questionPicture{

       background-image: url("../img/quiz.jpg");
       background-repeat: no-repeat;
       background-size: contain;
       background-position: center;
       background-color: white;
       min-height: 300px;
       border: 5px red solid;

   }

   #game1{

    border: 5px solid green;
    /* display: none; */

   }

   #p1, #p2{
       height: 300px;
       width: 50%;
   }

   #p2{
    display: inline-block;
    vertical-align: top;   
   }


   #boutonPLay{
       border: 1px solid yellow;
       background-color: aqua;
   }

   #End{
    position: absolute;
    top:0;
    z-index: 10;
    width: 100%;
    height: 100%;
    /* background-color: blue; */
    display: none;
    color: white

   }

/* button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
  background-color: #ddd;
  background: #ddd;
} */

JavaScript

// import{mesDonnees} from './data.js';
// console.log(mesDonnees[0][1]); // Affiche data.js

let mesDonnees = {
  0: ["Peux-tu me donner la race de ce chien ?", "0", "Berger Malinois", "Berger Australien", "0 Faux, ..."],
  1: ["Peux-tu me donner la race de ce chien ?", "1", "Berger Malinois", "Berger Australien", "1 Faux, ..."],
  2: ["Peux-tu me donner la race de ce chien ?", "2", "Berger Malinois", "Berger Australien", "2 Faux, ..."],
  3: ["Peux-tu me donner la race de ce chien ?", "3", "Berger Malinois", "Berger Australien", "3 Faux, ..."],
  4: ["Peux-tu me donner la race de ce chien ?", "4", "Berger Malinois", "Berger Australien", "4 Faux, ..."],
  5: ["Peux-tu me donner la race de ce chien ?", "5", "Berger Malinois", "Berger Australien", "5 Faux, ..."],
  6: ["Peux-tu me donner la race de ce chien ?", "6", "Berger Malinois", "Berger Australien", "6 Faux, ..."],
  7: ["Peux-tu me donner la race de ce chien ?", "7", "Berger Malinois", "Berger Australien", "7 Faux, ..."],
  8: ["Peux-tu me donner la race de ce chien ?", "8", "Berger Malinois", "Berger Australien", "8 Faux, ..."],
  9: ["Peux-tu me donner la race de ce chien ?", "6", "Berger Malinois", "Berger Australien", "9 Faux, ..."],
  10: ["Peux-tu me donner la race de ce chien ?", "10", "Berger Malinois", "Berger Australien", "10 Faux, ..."],
}

let currentItemIndex = 0

const toggleAnswerButtons = (enabled = true) => {
  const buttons = document.querySelectorAll("#a,#b,#c")
  for (const button of buttons) button.disabled = !enabled
}

// ------------------------------------Preload images----------------------------------------

class Images {
  constructor(mesDonnees, objectLength) {
    this.mesDonnees = mesDonnees
    this.objectLength = objectLength
    this.creationListeImage()
    this.preload()
  }

  creationListeImage() {
    console.log(Object.keys(mesDonnees).length + " Nombre de questions data.js")
    this.objectLength = Object.keys(mesDonnees).length // 3

    let images = [] // tableau...