main.js

let quiz = {
  // (A) PROPRIETA'
  // (A1) DOMANDE E RISPOSTE
  // Q = DOMANDE, O = OPZIONI, A = RISPOSTA GIUSTA
  data: [
    {
      q : "Nelle Olimpiadi, qual è la distanza tra bersaglio e arcere?",
      o : [
        "50 metri",
        "70 metri",
        "100 metri",
        "120 metri"
      ],
      a : 1 // gli array iniziano con 0, per cui la risposta è 70!!
    },
    {
      q : "Nella roulette, qual è il numero massimo?",
      o : [
        "22",
        "24",
        "32",
        "36"
      ],
      a : 3
    },
    {
      q : "Quanti mesi hanno 28 giorni?",
      o : [
        "dipende",
        "1",
        "6",
        "12"
      ],
      a : 3 // Nel senso: tutti hanno ALMENO 28 giorni
    },
    {
      q : "Qual è il settimo pianeta del sistema solare?",
      o : [
        "Urano",
        "Nettuno",
        "Plutone",
        "Eris"
      ],
      a : 0
    },
    {
      q : "Qual è l'oceano più grande?",
      o : [
        "Atlantico",
        "Indiano",
        "Artico",
        "Pacifico"
      ],
      a : 3
    }
  ],

  // (A2)  ELEMENTI HTML
  hWrap: null, // contenitore del quiz
  hQn: null, // contenitore delle domande
  hAns: null, // contenitore delle  risposter

  // (A3) FLAGS
  now: 0, // domanda corrente
  score: 0, // punteggio corrente

  // (B) Inizializzazione
  init: function(){
    // (B1) CONTENITORE
    quiz.hWrap = document.getElementById("quizWrap");

    // (B2) DOMANDE
    quiz.hQn = document.createElement("div");
    quiz.hQn.id = "quizQn";
    quiz.hWrap.appendChild(quiz.hQn);

    // (B3) RISPOSTE
    quiz.hAns = document.createElement("div");
    quiz.hAns.id = "quizAns";
    quiz.hWrap.appendChild(quiz.hAns);

    // (B4) VIA!
    quiz.draw();
  },

  // (C) SCRIVERE DOMANDE
  draw: function(){
    // (C1) DOMANDA
    quiz.hQn.innerHTML = quiz.data[quiz.now].q;

    // (C2) OPZIONI
    quiz.hAns.innerHTML = "";
    for (let i in quiz.data[quiz.now].o) {
      let radio = document.createElement("input");
      radio.type = "radio";
      radio.name = "quiz";
      radio.id = "quizo" + i;
      quiz.hAns.appendChild(radio);
      let label = document.createElement("label");
      label.innerHTML = quiz.data[quiz.now].o[i];
      label.setAttribute("for", "quizo" + i);
      label.dataset.idx = i;
      label.addEventListener("click", quiz.select);
      quiz.hAns.appendChild(label);
    }
  },

  // (D) OPZIONE SELEZIONATA
  select: function(){
    // (D1) Al click, eliminare tutto.
    let all = quiz.hAns.getElementsByTagName("label");
    for (let label of all) {
      label.removeEventListener("click", quiz.select);
    }

    // (D2) Controllo se corretto.
    let correct = this.dataset.idx == quiz.data[quiz.now].a;
    if (correct) {
      quiz.score++;
      this.classList.add("correct");
    } else {
      this.classList.add("wrong");
    }

    // (D3) Domanda successiva o fine gioco
    quiz.now++;
    setTimeout(function(){
      if (quiz.now < quiz.data.length) { quiz.draw(); }
      else {
        quiz.hQn.innerHTML = `Hai dato ${quiz.score} risposte giuste su ${quiz.data.length} .`;
        quiz.hAns.innerHTML = "";
      }
    }, 1000);
  }
};
window.addEventListener("load", quiz.init);