piffy

main.js

Aug 13th, 2021
642
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. let quiz = {
  2.   // (A) PROPRIETA'
  3.   // (A1) DOMANDE E RISPOSTE
  4.   // Q = DOMANDE, O = OPZIONI, A = RISPOSTA GIUSTA
  5.   data: [
  6.     {
  7.       q : "Nelle Olimpiadi, qual è la distanza tra bersaglio e arcere?",
  8.       o : [
  9.         "50 metri",
  10.         "70 metri",
  11.         "100 metri",
  12.         "120 metri"
  13.       ],
  14.       a : 1 // gli array iniziano con 0, per cui la risposta è 70!!
  15.     },
  16.     {
  17.       q : "Nella roulette, qual è il numero massimo?",
  18.       o : [
  19.         "22",
  20.         "24",
  21.         "32",
  22.         "36"
  23.       ],
  24.       a : 3
  25.     },
  26.     {
  27.       q : "Quanti mesi hanno 28 giorni?",
  28.       o : [
  29.         "dipende",
  30.         "1",
  31.         "6",
  32.         "12"
  33.       ],
  34.       a : 3 // Nel senso: tutti hanno ALMENO 28 giorni
  35.     },
  36.     {
  37.       q : "Qual è il settimo pianeta del sistema solare?",
  38.       o : [
  39.         "Urano",
  40.         "Nettuno",
  41.         "Plutone",
  42.         "Eris"
  43.       ],
  44.       a : 0
  45.     },
  46.     {
  47.       q : "Qual è l'oceano più grande?",
  48.       o : [
  49.         "Atlantico",
  50.         "Indiano",
  51.         "Artico",
  52.         "Pacifico"
  53.       ],
  54.       a : 3
  55.     }
  56.   ],
  57.  
  58.   // (A2)  ELEMENTI HTML
  59.   hWrap: null, // contenitore del quiz
  60.   hQn: null, // contenitore delle domande
  61.   hAns: null, // contenitore delle  risposter
  62.  
  63.   // (A3) FLAGS
  64.   now: 0, // domanda corrente
  65.   score: 0, // punteggio corrente
  66.  
  67.   // (B) Inizializzazione
  68.   init: function(){
  69.     // (B1) CONTENITORE
  70.     quiz.hWrap = document.getElementById("quizWrap");
  71.  
  72.     // (B2) DOMANDE
  73.     quiz.hQn = document.createElement("div");
  74.     quiz.hQn.id = "quizQn";
  75.     quiz.hWrap.appendChild(quiz.hQn);
  76.  
  77.     // (B3) RISPOSTE
  78.     quiz.hAns = document.createElement("div");
  79.     quiz.hAns.id = "quizAns";
  80.     quiz.hWrap.appendChild(quiz.hAns);
  81.  
  82.     // (B4) VIA!
  83.     quiz.draw();
  84.   },
  85.  
  86.   // (C) SCRIVERE DOMANDE
  87.   draw: function(){
  88.     // (C1) DOMANDA
  89.     quiz.hQn.innerHTML = quiz.data[quiz.now].q;
  90.  
  91.     // (C2) OPZIONI
  92.     quiz.hAns.innerHTML = "";
  93.     for (let i in quiz.data[quiz.now].o) {
  94.       let radio = document.createElement("input");
  95.       radio.type = "radio";
  96.       radio.name = "quiz";
  97.       radio.id = "quizo" + i;
  98.       quiz.hAns.appendChild(radio);
  99.       let label = document.createElement("label");
  100.       label.innerHTML = quiz.data[quiz.now].o[i];
  101.       label.setAttribute("for", "quizo" + i);
  102.       label.dataset.idx = i;
  103.       label.addEventListener("click", quiz.select);
  104.       quiz.hAns.appendChild(label);
  105.     }
  106.   },
  107.  
  108.   // (D) OPZIONE SELEZIONATA
  109.   select: function(){
  110.     // (D1) Al click, eliminare tutto.
  111.     let all = quiz.hAns.getElementsByTagName("label");
  112.     for (let label of all) {
  113.       label.removeEventListener("click", quiz.select);
  114.     }
  115.  
  116.     // (D2) Controllo se corretto.
  117.     let correct = this.dataset.idx == quiz.data[quiz.now].a;
  118.     if (correct) {
  119.       quiz.score++;
  120.       this.classList.add("correct");
  121.     } else {
  122.       this.classList.add("wrong");
  123.     }
  124.  
  125.     // (D3) Domanda successiva o fine gioco
  126.     quiz.now++;
  127.     setTimeout(function(){
  128.       if (quiz.now < quiz.data.length) { quiz.draw(); }
  129.       else {
  130.         quiz.hQn.innerHTML = `Hai dato ${quiz.score} risposte giuste su ${quiz.data.length} .`;
  131.         quiz.hAns.innerHTML = "";
  132.       }
  133.     }, 1000);
  134.   }
  135. };
  136. window.addEventListener("load", quiz.init);
  137.  
RAW Paste Data