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);