JSFiddle - React, Tailwind, and code Playground

by sam_ba

HTML

<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
<!-- Section: Quizz -->
  <section id="about" class="home-section text-center">
    <div class="heading-about">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-lg-offset-2">
            <div class="wow bounceInDown" data-wow-delay="0.4s">
					    <div class="section-heading">
					      <h2 id="title">Quizz</h2>
                <i class="fa fa-2x fa-angle-down"></i>
					    </div>
					  </div>

            <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
              <div class="global">
                <div class="bar">
                  <select name="level" id="level" onchange="choix(this)">
                    <option name="none" id="none" value="none">Aucun</option>
                    <option name="niveau_1" id="niv1" value="niveau_1">Niveau 1</option>
                    <option name="niveau_2" id="niv2" value="niveau_2">Niveau 2</option>
                  </select>
                </div>
                <div id="frame" role="content">
                  <a id="reload" href="javascript:window.location.reload();">
                    <i class="fa fa-refresh fa-2x"></i>
                  </a>
                </div>
              </div>
            </html>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- /Section: Quizz -->

CSS

/***********************************************************/
/*                   Quizz Frame                        */
/***********************************************************/
#frame {
  max-width:100%;
  max-height:100%;
  width:auto;
  height: auto;
  background: url(/Fond-bleu.png);
  border-radius: 30px;
  margin-top:5%;
  padding-bottom:25px !important;
}

h1 {
  font-family:'londontwo';
  text-align:center;
  padding-top:30px;
  width:auto;
  color: #ffbe92;
  margin-top:-50px;
}

#question {
  font-family:'londonbetween';
  font-size:14pt;
  padding:0;
  width:auto;
  max-width:500px;
  text-align:center;
  line-height:18pt;
  margin:auto;
  color: #fff;
  opacity:1.4;
}

#reload{
  float:right;
  margin-right:20px;
  margin-top:27px;
}

img.question-image {
  display:block;
  max-width:600px;
  max-height:340px;
  margin:10px auto;
  border-radius: 10px;
  opacity:1.2;
  width:auto;
  height:auto;
}

#choice-block {
  display:block;
  list-style:none;
  width:auto;
  margin:0;
  padding:0;
  margin-top: -2%;
  margin-left: -3.5%;
  color: #000;
  font-family:'londonmm';
}

#submitbutton {
  text-transform:uppercase;
  float:right;
  margin-top:-60px;
  margin-right:10px;
  font-family:'londontwo';
  border:2px solid #fff;
  padding:10px !important;
}

#submitbutton:hover {
  color:#fff;
  opacity:1.2;
}

#explanation {
  font-size:1.2em;
  margin:0px auto;
  padding:20px;
  width:75%;
  color:#fff;
  font-family:'londonmm';
}

.choice-box {
  max-width:500px;
  width:auto;
  height:auto;
  display:block;
  text-align:center;
  font-size:1.2em;
  background:#f6f5fb;
  font-family:'londonmm';
  margin:10px auto;
  margin-left:auto;
  margin-right:auto;
  opacity:0.7;
  padding:10px 0;
  cursor:pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 30px;
}

.choice {
  background-color:#fff;
}

.choice:hover {
  background-color:#e1e1e1;
}
.choice.active {
  border: 1px solid #000;
  font-weight: bold;
  background-color:...

JavaScript

var niveaux = [
    {
        "title": "Niveau 1",
        "questions": [
            {
                "question" : "1:  En fait, le Grand Paris, c’est quoi ?",

                "image" : "",
                "choices" : [
                    "La fin de la banlieue.",
                    "Un projet réunissant Paris et la petite couronne.",
                    "Ça n’existera jamais !"
                ],
                "correct" : "Un projet réunissant Paris et la petite couronne.",
                "explanation": "Le grand Paris existe-t-il ? En tout cas il est en train de se faire. Certains y voient la fin des banlieues de Paris. D’autres aimeraient que Paris aille jusqu’au Havre. Tout çà n’est ni faux ni vrai. La réponse la plus sûre c’est qu'il réunira Paris et les communes autour.",
            },
            {
                "question" : "2: Du coup tout le monde s’y met. Selon Ludivine, le Grand Paris c'est la transformation de l’Île-de-France en une seule ville, le Grand Paris. T’en penses quoi ?",

                "image" : "/Q2.png",
                "choices" : [
                        "L'Île de France... C'est quoi ?",
                        "Elle a en partie raison",
                        "C’est totalement faux !"
                ],
                 "correct" : "C’est totalement faux !",
                 "explanation" : "Ludivine doit réviser ses cours d'éducation civique. L’Ile de France c’est une Région. Le Grand Paris ce sera une métropole c’est à dire un regroupement des villes des 3 départements de la petite couronne (92, 93, 94) et de Paris(75) soit au moins 124 communes.",
            },
            {
               "question" : "3: Mince alors !! Jean a perdu son livret de présentation du Grand Paris. Lui qui voulait impressionner ses potes en annonçant la date de lancement de la métropole du Grand Paris !! D’après toi, laquelle de ces dates est la bonne?",

               "image" : "/Q3.png",
               "choices" : [
                  ...