Fab_Blab/WikiLerni
Fab_Blab/WikiLerni
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Debug bouton affichage quiz sur chrome + revue code script JS pages quizs

Browse Source
This commit is contained in:
Fabrice PENHOËT 2020-08-10 16:27:45 +02:00
parent 42db9e5589
commit c9c7ad1bc2
3 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
front/src/questionnaire.js
View File

@ -8,7 +8,7 @@
// Fichier de configuration tirés du backend : // Fichier de configuration tirés du backend :
import { apiUrl, availableLangs, theme } from "../../config/instance.js"; import { apiUrl, availableLangs, theme } from "../../config/instance.js";
const lang=availableLangs[0]; const lang=availableLangs[0];
import { getPreviousAnswers, getQuestionnaireRoutes, questionnaireRoutes, saveAnswersRoute } from "../../config/questionnaires.js"; import { getPreviousAnswers, questionnaireRoutes, saveAnswersRoute } from "../../config/questionnaires.js";
const configTemplate = require("../../views/"+theme+"/config/"+lang+".js"); const configTemplate = require("../../views/"+theme+"/config/"+lang+".js");
import { checkAnswerOuput, saveAnswer } from "./tools/answers.js"; import { checkAnswerOuput, saveAnswer } from "./tools/answers.js";
@ -20,7 +20,7 @@ import { dateFormat, replaceAll } from "../../tools/main";
import { checkSession, getTimeDifference } from "./tools/users.js"; import { checkSession, getTimeDifference } from "./tools/users.js";
// Dictionnaires : // Dictionnaires :
const txt = require("../../lang/"+lang+"/general"); const txtServerError = require("../../lang/"+lang+"/general").serverError;
const txtAnswers = require("../../lang/"+lang+"/answer"); const txtAnswers = require("../../lang/"+lang+"/answer");
// Principaux éléments du DOM manipulés : // Principaux éléments du DOM manipulés :
@ -37,34 +37,38 @@ const initialise = async () =>
try try
{ {
btnShow.style.display="inline";// bouton caché si JS inactif, car JS nécessaire pour vérifier les réponses btnShow.style.display="inline";// bouton caché si JS inactif, car JS nécessaire pour vérifier les réponses
isConnected=await checkSession(["user"]);// seuls les utilisateurs de base peuvent répondre aux quizs isConnected=await checkSession(["user"]);// "user" car seuls les utilisateurs de base peuvent enregistrer leurs réponses aux quizs
// Si l'utilisateur est connecté et a déjà répondu à ce quiz, on affiche ses précédentes réponses à la place du texte servant à expliquer le topo aux nouveaux // Si l'utilisateur est connecté et a déjà répondu à ce quiz, on affiche ses précédentes réponses à la place du texte servant à expliquer le topo aux nouveaux
if(isConnected) if(isConnected)
{ {
user=getLocaly("user", true); user=getLocaly("user", true);
updateAccountLink(user.status, configTemplate); updateAccountLink(user.status, configTemplate);// lien vers le compte adapté pour les utilisateurs connectés
checkPreviousResponses(user); checkPreviousResponses(user);
} }
} }
catch(e) catch(e)
{ {
addElement(divResponse, "p", txt.serverError, "", ["error"]);
console.error(e); console.error(e);
} }
} }
initialise(); initialise();
helloDev(); helloDev();
// Affichage du questionnaire quand l'utilisateur clique sur le bouton ou si l'id du formulaire est passée par l'url // Affichage du questionnaire quand l'utilisateur clique sur le bouton ou si l'id du formulaire est passée par l'url.
// Déclenche en même temps le chronomètre mesurant la durée de la réponse aux questions. // Déclenche en même temps le chronomètre mesurant la durée de la réponse aux questions.
const showQuestionnaire = () => const showQuestionnaire = () =>
{ {
chronoBegin=Date.now(); chronoBegin=Date.now();
myForm.style.display="block"; myForm.style.display="block";
btnShow.style.display="none"; btnShow.style.display="none";
window.location.hash="";// risque d'enchaîner les ancres si on recharge la page const here=window.location;// window.location à ajouter pour ne pas quitter la page en mode "preview".
const here=window.location;// window.location à ajouter pour ne pas quitter la page en mode "preview"... if(window.location.hash!=="")
window.location.assign(here+"questionnaire"); {
window.location.hash="";// ! le "#" reste
window.location.assign(here+"questionnaire");
}
else
window.location.assign(here+"#questionnaire");
} }
let chronoBegin=0; let chronoBegin=0;
btnShow.addEventListener("click", function(e) btnShow.addEventListener("click", function(e)
@ -76,12 +80,12 @@ btnShow.addEventListener("click", function(e)
} }
catch(e) catch(e)
{ {
addElement(divResponse, "p", txt.serverError, "", ["error"]); addElement(divResponse, "p", txtServerError, "", ["error"]);
console.error(e); console.error(e);
} }
}); });
// Lien passé par mail pour voir directement le quiz // Lien passé par mail pour voir directement le quiz
if(location.hash!=undefined && location.hash==="#questionnaire") if(location.hash!="" && location.hash==="#questionnaire")
showQuestionnaire(); showQuestionnaire();
// Traitement de l'envoi de la réponse de l'utilisateur : // Traitement de l'envoi de la réponse de l'utilisateur :
@ -91,19 +95,19 @@ myForm.addEventListener("submit", function(e)
try try
{ {
e.preventDefault(); e.preventDefault();
btnSubmit.style.display="none";// seulement un envoi à la fois :) btnSubmit.style.display="none";// seulement un envoi à la fois, SVP :)
divResponse.innerHTML="";// supprime les éventuels messages déjà affichés divResponse.innerHTML="";// supprime les éventuels messages déjà affichés
const userResponses=getDatasFromInputs(myForm); const userResponses=getDatasFromInputs(myForm);
answer.duration=Math.round((Date.now()-chronoBegin)/1000); answer.duration=Math.round((Date.now()-chronoBegin)/1000);
answer.nbQuestions=0; answer.nbQuestions=0;
answer.nbCorrectAnswers=0; answer.nbCorrectAnswers=0;
answer.QuestionnaireId=document.getElementById("questionnaireId").value; answer.QuestionnaireId=document.getElementById("questionnaireId").value;
// Les réponses sont regroupées par question, donc quand l'idQuestion change, on connaît le résultat pour la question précédente // Les réponses sont regroupées par question, donc quand idQuestion change, on connaît le résultat pour la question précédente.
// Pour qu'une réponse soit bonne, il faut cocher toutes les bonnes réponses (si QCM) à une question et cocher aucune des mauvaises // Pour qu'une réponse soit bonne, il faut cocher toutes les bonnes réponses (si QCM) à la question ET cocher aucune des mauvaises.
let idChoice, idQuestion="", goodResponse=false; let idChoice, idQuestion="", goodResponse=false;
for(let item in userResponses) for(let item in userResponses)
{ {
if(item.startsWith("isCorrect_response_"))// = nouvelle réponse possible if(item.startsWith("isCorrect_response_"))// = Nouvelle réponse possible.
{ {
idChoice = item.substring(item.lastIndexOf("_") + 1); idChoice = item.substring(item.lastIndexOf("_") + 1);
// si on change de queston // si on change de queston
@ -111,19 +115,19 @@ myForm.addEventListener("submit", function(e)
{ {
idQuestion=userResponses["question_id_response_"+idChoice]; idQuestion=userResponses["question_id_response_"+idChoice];
answer.nbQuestions++; answer.nbQuestions++;
if(goodResponse) // résultat pour la question précédente if(goodResponse) // résultat de la question précédente
answer.nbCorrectAnswers++; answer.nbCorrectAnswers++;
goodResponse=true;// réponse bonne jusqu'à la première erreur... goodResponse=true;// réponse bonne jusqu'à la première erreur...
} }
if(userResponses[item]=="true") if(userResponses[item]=="true")
{ {
document.getElementById("response_"+idChoice).parentNode.classList.add("isCorrect"); document.getElementById("response_"+idChoice).parentNode.classList.add("isCorrect");
if(userResponses["response_"+idChoice]===undefined)// bonne réponse non sélectionnée if(userResponses["response_"+idChoice]===undefined)// une bonne réponse n'a pas été sélectionnée
goodResponse=false; goodResponse=false;
} }
else else
{ {
if(userResponses["response_"+idChoice]==="on")// réponse cochée n'étant pas une des bonnes if(userResponses["response_"+idChoice]==="on")// réponse cochée ne faisant pas partie des bonnes
{ {
goodResponse=false; goodResponse=false;
document.getElementById("response_"+idChoice).parentNode.classList.add("isNotCorrect"); document.getElementById("response_"+idChoice).parentNode.classList.add("isNotCorrect");
@ -131,7 +135,7 @@ myForm.addEventListener("submit", function(e)
} }
} }
} }
// si j'ai bien répondu à la dernière question, il faut le traiter ici, car je suis sorti de la boucle : // si j'ai bien répondu à la dernière question, il faut le compter ici, car je suis sorti de la boucle :
if(goodResponse) if(goodResponse)
answer.nbCorrectAnswers++; answer.nbCorrectAnswers++;
@ -139,7 +143,7 @@ myForm.addEventListener("submit", function(e)
let getOuput=checkAnswerOuput(answer); let getOuput=checkAnswerOuput(answer);
if(isConnected) if(isConnected)
{ {
// Si l'utilisateur est connecté on enregistre son résultat sur le serveur. // Si l'utilisateur est connecté, on enregistre son résultat sur le serveur.
const xhrSaveAnswer = new XMLHttpRequest(); const xhrSaveAnswer = new XMLHttpRequest();
xhrSaveAnswer.open("POST", apiUrl+questionnaireRoutes+saveAnswersRoute); xhrSaveAnswer.open("POST", apiUrl+questionnaireRoutes+saveAnswersRoute);
xhrSaveAnswer.onreadystatechange = function() xhrSaveAnswer.onreadystatechange = function()
@ -159,25 +163,25 @@ myForm.addEventListener("submit", function(e)
} }
xhrSaveAnswer.setRequestHeader("Authorization", "Bearer "+user.token); xhrSaveAnswer.setRequestHeader("Authorization", "Bearer "+user.token);
xhrSaveAnswer.setRequestHeader("Content-Type", "application/json"); xhrSaveAnswer.setRequestHeader("Content-Type", "application/json");
answer.timeDifference=getTimeDifference();// on en profite pour mettre les pendules à l'heure answer.timeDifference=getTimeDifference();// on en profite pour mettre les pendules à l'heure.
xhrSaveAnswer.send(JSON.stringify(answer)); xhrSaveAnswer.send(JSON.stringify(answer));
} }
else else
{ // si pas connecté, on enregistre le résultat côté client pour permettre de le retrouver au moment de la création du compte ou de la connexion { // si pas connecté, on enregistre le résultat côté client pour permettre de le retrouver au moment de la création du compte ou de la connexion.
if(saveAnswer(answer)) if(saveAnswer(answer))
{ {
getOuput+="<br><br>"+txtAnswers.wantToSaveResponses; getOuput+="<br><br>"+txtAnswers.wantToSaveResponses;
addElement(divResponse, "p", getOuput, "", ["info"]); addElement(divResponse, "p", getOuput, "", ["info"]);
document.querySelector(".subcribeBtns").style.display="block"; document.querySelector(".subscribeBtns").style.display="block";
} }
else // pas la peine de proposer de créer un compte si le stockage local ne fonctionne pas else // inutile de proposer de créer un compte si le stockage local ne fonctionne pas
addElement(divResponse, "p", getOuput, "", ["info"]); addElement(divResponse, "p", getOuput, "", ["info"]);
// on redirige vers le résultat // on redirige vers le résultat
window.location.hash=""; window.location.hash="";
const here=window.location;// window.location à ajouter pour ne pas quitter la page en mode "preview"... const here=window.location;// window.location à ajouter pour ne pas quitter la page en mode "preview"...
window.location.assign(here+"response"); window.location.assign(here+"response");
} }
// affichage des textes d'explications pour chaque question // + affichage des textes d'explications pour chaque question
const explanations=document.querySelectorAll(".help"); const explanations=document.querySelectorAll(".help");
for(let i in explanations) for(let i in explanations)
{ {
@ -187,7 +191,7 @@ myForm.addEventListener("submit", function(e)
} }
catch(e) catch(e)
{ {
addElement(divResponse, "p", txt.serverError, "", ["error"]); addElement(divResponse, "p", txtServerError, "", ["error"]);
console.error(e); console.error(e);
} }
}) })
@ -213,12 +217,12 @@ const checkPreviousResponses = (user) =>
let totNbQuestions=0, totNbCorrectAnswers=0, totDuration=0, mapLineContent; let totNbQuestions=0, totNbCorrectAnswers=0, totDuration=0, mapLineContent;
for(let i in response) for(let i in response)
{ {
totNbQuestions+=response[i].nbQuestions; totNbQuestions+=response[i].nbQuestions;// ! on ne peut se baser sur la version actuelle du quiz, car le nombre de questions a pu évoluer.
totNbCorrectAnswers+=response[i].nbCorrectAnswers; totNbCorrectAnswers+=response[i].nbCorrectAnswers;
totDuration+=response[i].duration; totDuration+=response[i].duration;
mapLineContent = mapLineContent =
{ {
DATEANSWER : dateFormat(response[i].createdAt),// revoir problème de la langue DATEANSWER : dateFormat(response[i].createdAt, lang),
NBCORRECTANSWERS : response[i].nbCorrectAnswers, NBCORRECTANSWERS : response[i].nbCorrectAnswers,
AVGDURATION : response[i].duration AVGDURATION : response[i].duration
}; };
@ -233,10 +237,8 @@ const checkPreviousResponses = (user) =>
addElement(explanationsContent, "ul", previousAnswersContent); addElement(explanationsContent, "ul", previousAnswersContent);
} }
else else
addElement(explanationsContent, "ul", txtAnswers.noPreviousAnswer.replace("#NOM", user.name)); addElement(explanationsContent, "ul", txtAnswers.noPreviousAnswer);
} }
//else
// addElement(divResponse, "p", txt.serverError, "", ["error"]); // pas forcément utile de prévenir du bug ici ?
} }
} }
xhrPreviousRes.setRequestHeader("Authorization", "Bearer "+user.token); xhrPreviousRes.setRequestHeader("Authorization", "Bearer "+user.token);

2
front/src/tools/everywhere.js
View File

@ -2,7 +2,7 @@
export const helloDev = () => export const helloDev = () =>
{ {
console.log("**** Hello ami développeur :-)\n Le code de WikiLerni est libre et vous pouvez le trouver si Gitlab :\n\nhttps://gitlab.com/lefablab/wikilerni\nPour les suggestions d'amélioration ou questions : dev@wililerni.com ****"); console.log("**** Hello ami développeur :-)\n\nLe code de WikiLerni est libre et vous pouvez le trouver si Gitlab :\nhttps://gitlab.com/lefablab/wikilerni\n\nPour les suggestions d'amélioration ou questions : dev@wililerni.com ****");
return true; return true;
} }

8
lang/fr/answer.js
View File

@ -10,9 +10,9 @@ module.exports =
needMaxNumberCorrectResponses : "Le nombre de réponses correctes ne peut être supérieur au nombre de questions.", needMaxNumberCorrectResponses : "Le nombre de réponses correctes ne peut être supérieur au nombre de questions.",
needIntegerNumberSecondesResponse : "La durée de la réponse doit être un nombre entier de secondes.", needIntegerNumberSecondesResponse : "La durée de la réponse doit être un nombre entier de secondes.",
needMinNumberSecondesResponse : "La durée de la réponse ne peut être négative.", needMinNumberSecondesResponse : "La durée de la réponse ne peut être négative.",
checkResponsesOuputFail : "Vous avez répondu en DURATION secondes et avez NBCORRECTANSWERS bonne(s) réponse(s) sur NBQUESTIONS. C'est certain, vous ferez mieux la prochaine fois !", checkResponsesOuputFail : "Vous avez répondu en DURATION secondes et avez NBCORRECTANSWERS bonne(s) réponse(s) sur NBQUESTIONS questions. C'est certain, vous ferez mieux la prochaine fois !",
checkResponsesOuputMedium : "Vous avez répondu en DURATION secondes et avez NBCORRECTANSWERS bonne(s) réponse(s) sur NBQUESTIONS. C'est pas mal du tout !", checkResponsesOuputMedium : "Vous avez répondu en DURATION secondes et avez NBCORRECTANSWERS bonne(s) réponse(s) sur NBQUESTIONS questions. C'est pas mal du tout !",
checkResponsesOuputSuccess : "Vous avez répondu en DURATION secondes et avez NBCORRECTANSWERS bonne(s) réponse(s) sur NBQUESTIONS. Bravo ! Rien ne vous échappe !", checkResponsesOuputSuccess : "Vous avez répondu en DURATION secondes et avez NBCORRECTANSWERS bonne(s) réponse(s) sur NBQUESTIONS questions. Bravo ! Rien ne vous échappe !",
wantToSaveResponses: "Si vous le souhaitez, vous pouvez sauvegarder votre résultat en vous connectant à votre compte.", wantToSaveResponses: "Si vous le souhaitez, vous pouvez sauvegarder votre résultat en vous connectant à votre compte.",
responseSavedMessage : "Votre résultat a été enregistré. <a href='/#URL'>Accèder à tous vos quizs</a>.", responseSavedMessage : "Votre résultat a été enregistré. <a href='/#URL'>Accèder à tous vos quizs</a>.",
responseSavedError : "Cependant une erreur a été rencontrée durant l'enregistrement de votre résultat. <a href='/#URL'>Accèder à tous vos quizs</a>.", responseSavedError : "Cependant une erreur a été rencontrée durant l'enregistrement de votre résultat. <a href='/#URL'>Accèder à tous vos quizs</a>.",
@ -22,5 +22,5 @@ module.exports =
previousAnswersTitle: "Bonjour #NOM, voici vos précédents résultats à ce quiz", previousAnswersTitle: "Bonjour #NOM, voici vos précédents résultats à ce quiz",
previousAnswersStats: "En moyenne, vous avez répondu à ce quiz en AVGDURATION secondes, en ayant <b>AVGCORRECTANSWERS % de bonnes réponses</b>.", previousAnswersStats: "En moyenne, vous avez répondu à ce quiz en AVGDURATION secondes, en ayant <b>AVGCORRECTANSWERS % de bonnes réponses</b>.",
previousAnswersLine: "Le DATEANSWER, vous avez répondu correctement à NBCORRECTANSWERS questions en AVGDURATION secondes.", previousAnswersLine: "Le DATEANSWER, vous avez répondu correctement à NBCORRECTANSWERS questions en AVGDURATION secondes.",
noPreviousAnswer: "Bonjour #NOM, c'est la première fois que vous répondez à ce quiz. Bonne lecture !" noPreviousAnswer: "On dirait que c'est la première fois que vous répondez à ce quiz. Bonne lecture !"
}; };