JSFiddle - React, Tailwind, and code Playground

by sam_ba

HTML

<div class="global">
<button id="close">X</button>
    <button id="show">&radic;</button>
  <div id = "frame"
    role = "content" >

CSS

/***********************************************************/
/*                   Quizz Frame                        */
/***********************************************************/
#frame {
  max-width:100% !important;
  max-height:100% !important;
  width:auto;
  height: auto;
  background: #ccc;
  border-radius: 30px;
  margin-top:5%;
  padding-bottom:10px;
}

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 {
  float:right;
  margin-top:-60px;
  margin-right:10px;
  font-family:'londontwo';
}

#submitbutton:hover {
  color:#fff;
}

#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;
}
@media (min-width:480px) {
  #frame {
    padding:10px 10px 10px 10px;
  }

  #question {
    font-family:'londonbetween';
    font-size:14pt;
    padding:0;
    width:auto;
    max-width:500px;
    text-align:center;
    line-height:18pt;
    margin:auto;
    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": "",
            },
            {
                "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" : "",
                "choices" : [
                        "L'Île de France... C'est quoi ?",
                        "Elle a en partie raison",
                        "C’est totalement faux !"
                ],
                 "correct" : "C’est totalement faux !",
                 "explanation" : "",
            },
            {
               "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" : "",
               "choices" : [
                        "1 janvier 2016",
                        "1 janvier 2017",
                        "1 janvier 2018"
                            ],
                "correct" : "1 janvier 2016",
                "explanation" : "",
            },
            {
                "question" : "4: Anna cherche désespérément comment s'appelle le nouveau métro automatique du Grand Paris. A ton avis, tu dirais quoi toi ? ",

                 "image" : "",
                "choices"  : [
                        "L'Autometro",
                        "Le Grand Paris...