https://courtprep.ca/fr/games/courtquiz/quiz.js

1const quizContainer = document.querySelector(".quiz-container");
2const quizResult = document.querySelector(".quiz-result-interface");
3const quizFragment = document.getElementById("quiz-fragment");
4const quiztitle = document.getElementById("quiz-title");
5const form = document.getElementById("quiz-form");
6const headertitle = document.getElementById("headertitle");
7//const quizQuestion = document.getElementById("quiz-question-no");
8const submit = document.getElementById("submit");
9const loader = document.getElementById("loader");
10let quizData = [];
11
12const quizFragmentData = (data) => {
13  loader.classList.add("load-state");
14  quizContainer.classList.remove("load-state");
15  quiztitle.innerHTML = 'Le questionnaire sur le tribunal est pour tout le monde. &nbsp;Que savez-vous sur les tribunaux? <br />Essayez et voyez vos résultats!';
16  const quizdata = shuffleArray(data);
17  const quizdata2 = quizdata.slice(0, 10);
18  quizdata2?.map((it, idx) => quizQuestionCard(quizFragment, it, idx));
19  quizAnswerSelctHandler(data);
20};
21
22
23const quizAnswerSelctHandler = (data) => {
24  const selectedAnswers = {};
25  const quizSelectedAnswer = [...document.querySelectorAll(".quiz-answer")];
26  quizSelectedAnswer?.map((it) =>
27    it.addEventListener("click", () =>
28      (selectedAnswers[it.dataset.id] = it.dataset.answer))
29  );
30  submit.addEventListener("click", e => {
31    e.preventDefault();
32    form.checkValidity();
33    const status = form.reportValidity();
34    if (status === true) validateQuizAnswer(data, selectedAnswers);
35  });
36};
37
38const validateQuizAnswer = (data, result) => {
39  let score = 0;
40  Object.entries(result)?.map(it => {
41    const [key, value] = it;
42    data?.map(it => {
43      const { id, answer, options } = it;
44      if (id == key) if (options[answer - 1] == value) score += 1;
45    });
46  });
47  displayScoreData(score, 10);
48};
49
50const quizQuestionCard = (dataPane, data, index) => {
51  const { id, question, options, answer } = data;
52  dataPane.innerHTML += `
53    <!-- Question -->
54    <div id="${'q' + id}" class="quiz-question" role="radiogroup">
55    <img id="${'qimg' + id}" src="/fr/images/button_unanswered.gif" min-height="27" min-width="27" style="position: relative; left: -35px; top: 25px;" />
56    <span>
57      <p>
58        <span>${index + 1}. &nbsp;</span>
59        <span>${question}</span>
60      </p>
61    </span>
62    ${options?.map((it, i) => `<div id="${'div' + id + (parseInt(i) + 1)}" class="form-check quiz-answer" onclick="handleClick(this, '${i}', '${answer}', '${'div' + id + answer}', '${'q' + id}', '${'qimg' + id}')" data-answer="${it}" data-id="${id}">
63    <input type="radio" id="${id + it}" name="${id}" />
64    <label for="${id + it}">${it}</label></div>`).join("")}</div>
65    <!-- end question -->`;
66};
67
68function handleClick(element, i, answer, divId, qid, qimg) {
69  const result = parseInt(i) + 1;
70  var parent = element.parentNode;
71  var child = element.childNodes[1];
72  var elems = parent.querySelectorAll(".wrongAnswer");
73  var div = document.getElementById(divId);
74  var question = document.getElementById(qid);
75  var img = document.getElementById(qimg);
76
77  [].forEach.call(elems, function (el) {
78    el.classList.remove("wrongAnswer");
79  });
80
81  if (result == answer) {
82    element.classList.add("correctAnswer");
83    question.classList.add("questionCorrectAnswer");
84    img.src = "/fr/images/button_correct.gif";
85  }
86  else {
87    element.classList.add("wrongAnswer");
88    question.classList.add("questionWrongAnswer");
89    div.classList.add("correctAnswer");
90    img.src = "/fr/images/button_incorrect.gif";
91  }
92
93  child.checked = true;
94  parent.classList.add("disable");
95}
96
97const scoreUI = (dataPane, score, data, totalQ) => {
98  const { imgSrc, title } = data;
99  quiztitle.innerHTML = 'Nous avons créé ce quiz en utilisant des questions aléatoires. &nbsp;Vous voudrez peut-être en savoir plus en recommençant le quiz!';
100  dataPane.innerHTML = `<div class="result-ui">
101  <div><p><strong>Voici les résultats de votre quiz :</strong></p></div>
102    <div class="result-data">
103    <p>Vous avez obtenu ${score} réponses correctes sur 10 (${Math.round((score / 10) * 100)}%)</p>
104    <h3>${title}</h3><br/>
105
106      <<

107      <span>
108        <a id="retry" class="brown" href="#">Retour au questionnaire</a> | <a class="brown" href="/fr/home.html">Page D'accueil</a>
109      </span>
110      >>
111
112    </div></div>`;
113  const resultui = document.querySelector(".result-ui");
114  const retry = document.getElementById("retry");
115  resultui.classList.remove("quiz-ui-state");
116  postQuizUI(resultui, retry);
117};
118
119const displayScoreData = (score, totalQ) => {
120  if (score == 9 || score == 8) scoreUI(quizResult, score, resultUIData[0], totalQ);
121  else if (score == 7 || score == 6) scoreUI(quizResult, score, resultUIData[1], totalQ);
122  else if (score <= 5) scoreUI(quizResult, score, resultUIData[2], totalQ);
123  form.classList.add("quiz-ui-state");
124  //headertitle.classList.add("quiz-ui-state");
125};
126
127const shuffleArray = (arr) => {
128  const array = [...arr];
129  for (let i = array.length - 1; i > 0; i--) {
130    let j = Math.floor(Math.random() * (i + 1));
131    let temp = array[i];
132    array[i] = array[j];
133    array[j] = temp;
134  }
135  return array;
136};
137
138const postQuizUI = (ui, retry) => {
139  //retry
140  retry.addEventListener("click", () => {
141    form.classList.remove("quiz-ui-state");
142    ui.classList.add("quiz-ui-state");
143    quizFragment.innerHTML = "";
144    quizFragmentData(quizData);
145  });
146};
147//result-data
148const resultUIData = [
149  {
150    imgSrc: "",
151    title: "<i>Excellent!  Vous avez obtenu d'excellentes notes au Quiz Courtprep!</i>"
152  },
153  {
154    imgSrc: "",
155    title: "<i>Pas trop mal, mais tu peux encore t'améliorer.</i>"
156  },
157  {
158    imgSrc: "",
159    title: "<i>Tu devrais aller jeter un autre coup d'oeil au site web.</i>"
160  }
161];
162
163const getQuizData = (URI) => {
164  fetch(URI)
165    .then(res => res.json())
166    .then(data => {
167      quizFragmentData(data);
168      //quizQuestion.innerText = 9; //data.length;
169      quizData = data;
170    })
171    .catch(e => alert("Quiz data is not loaded!", e));
172};
173
174const dataURI = '/fr/games/courtquiz/quiz.json';
175getQuizData(dataURI);