FB-tentative debug-nettoyage

déclencheur AUTO ET FEEDBACKS

Déclenchement automatique d'interactivités d'objets (exemple 2)

Fenêtre

Audio

Changement de page

10

Autodéclencheur visibilité sur le Global-on du DND

Déclenchement automatique et retardé suite à l'affichage d'un feedback d'une autre extension

3.5

Passage à la page suivante dans 3,5 secondes

Bravo !

Faites glisser les noms des couleurs sur les tâches correspondantes

VERT

ROUGE

BLEU

VOIR POUR LE BUG

Déclencheurs au clic et Feedbacks simples

FeedBACKS

Poissons

Reptiles

Oiseaux

Mammifères

Requin-scie

Impala

Lionne

Poisson papillon

Tortue marine

Chouette effraie

Mouette rieuse

Braque de Weimar

Chauve-souris

<div class="aCacher" id="fb" style="background-color:grey;color:white;width:100%; height:100%;overflow:hidden;">FONCTION FEEDBACKS - V1 02/08/23 <br> OBLIGATOIRE</div><script>if (document.querySelector('.container-wrapper-genially')){var tousLesFB = document.querySelector('.genially-view-slide-container').querySelectorAll('.fb'); /* Fonction qui utilise une promesse pour être sûr qu'un élément est chargé dans la page*/ function waitForElement(selector) { return new Promise(function(resolve, reject) { var element = document.querySelector('.genially-view-slide-container').querySelector(selector); if (element) { resolve(element); // Résout la promesse avec l'élément } else { var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { var nodes = Array.from(mutation.addedNodes); for (var node of nodes) { if (node.matches && node.matches(selector)) { observer.disconnect(); resolve(node); // Résout la promesse avec l'élément return; } } }); }); observer.observe(document.querySelector('.genially-view-slide-container').documentElement, { childList: true, subtree: true }); // Rejette la promesse après un délai de timeout (par exemple, 4 secondes) setTimeout(function() { observer.disconnect(); reject(new Error('Timeout: Élément non trouvé après 4s')); }, 4000); } }); } /* Fonction qui ne permet qu'une seule exécution d'une autre fonction*/ function once(fn, context) { var result; return function() { if(fn) { result = fn.apply(context || this, arguments); fn = null; } return result; }; } /* Fonction qui déclenche le feedBack d'un élément et gère le feedback global, le compteur, le compteur d'erreurs si présents*/ /*TODO: boucle infinie sur déclencheur + fb ??? fixé pour autoVisibilité, autoFB et autoFB-erreur*/ const declencheFb = (groupe) => { console.log('déclenchement de ' + groupe.querySelector('.fb').classList); //groupe.style.pointerEvents = 'auto'; groupe.click(); //groupe.style.pointerEvents = 'none'; //console.log('déclenchement de ' + groupe.className); if(document.querySelector('.genially-view-slide-container').querySelector('.fg_global')){ //console.log('fg_global'); document.querySelector('.genially-view-slide-container').querySelector('.fg_global').dispatchEvent(feedBackGlobal); } if(document.querySelector('.genially-view-slide-container').querySelector('.compteur')){ //console.log('compteur'); document.querySelector('.genially-view-slide-container').querySelector('.compteur').dispatchEvent(feedBackGlobal); } if(document.querySelector('.genially-view-slide-container').querySelector('.compteurErreur')){ //console.log('compteurErreur'); document.querySelector('.genially-view-slide-container').querySelector('.compteurErreur').dispatchEvent(feedBackErreur); } }; /*Définitions des évènements feedBackGlobal, feedBackGenially, feedBackErreur personnalisés*/ let feedBackGlobal = new CustomEvent('feedBackGlobal', {detail: {message: 'feedBackGlobal', tous: tousLesFB.length, trouve :document.querySelector('.genially-view-slide-container').querySelectorAll('.fb.active').length}, bubbles: true, cancelable: true}); let feedBackGenially = new CustomEvent('feedBackGenially', {detail: {message: 'feedBackGenially', trouve: tousLesFB.length}, bubbles: true, cancelable: true}); let feedBackErreur = new CustomEvent('feedBackErreur', {detail: {message: 'feedBackErreur'}, bubbles: true, cancelable: true}); /*Fonction qui déclenche les feedBacks Genially une fois que ceux-ci sont chargés dans la page, délai par défaut avant déclenchement*/ const attendDeclencheFB= (cla, delai=400) => { //const unseulFb = once(declencheFb); if(document.querySelector('.container-wrapper-genially')){ waitForElement('.fb'+cla).then(function(element) { //console.log('L\'élément est chargé :', element); let classes = element.classList; if(!classes.contains('erreur')){ setTimeout(() => { classes.add('active'); if(element){ //console.log('Déclenchement', element); declencheFb(element.closest('.genially-view-group')); } }, delai); } else{ //else if(classes.contains('erreur')){ //console.log('Elément contient la classe "erreur', element); setTimeout(() => { classes.add('err'); if(element){ //console.log('Erreur déclenchée', element); declencheFb(element.closest('.genially-view-group')); } }, delai); } }) .catch(function(error) { console.error('Erreur :', error); }); } }; /*Fonction qui donne la même couleur aux éléments déclencheurs et éléments de feedback et les incrémente suivant l'ordre de groupage dans la page*/ const marqueElements = (classe) => { let elts = document.querySelector('.genially-view-slide-container').querySelectorAll(classe); const aleatoire = () => { return Math.floor(Math.random() * 256); } let i= 0; if(classe === '.fb' && elts.length > 0){ //console.log('fb dans marqueElements'); for(let elt of elts){ if(!elt.classList.contains('autoFB')){ elt.style.backgroundColor = 'rgb(' + aleatoire() + ',' + aleatoire() + ',' + aleatoire() + ')'; let classes = elt.classList; classes.add('fb'+i); elt.innerHTML = 'fb-'+i; i++; } } } if(classe === '.fire' && elts.length > 0){ //console.log('fire dans marqueElements'); for(let elt of elts){ if(document.querySelector('.fb.fb'+i) && !elt.classList.contains('autoFB')){ elt.style.backgroundColor = document.querySelector('.fb.fb'+i).style.backgroundColor; } else if(elt.classList.contains('autoFB')){ elt.style.backgroundColor = 'rgb(' + aleatoire() + ',' + aleatoire() + ',' + aleatoire() + ')'; } else{ console.log('Il manque un élément feedBack de même indice pour attribuer la couleur correspondante à ' + elt.innerHTML); elt.style.backgroundColor = 'rgb(' + aleatoire() + ',' + aleatoire() + ',' + aleatoire() + ')'; } //elt.style.backgroundColor = document.querySelector('.fb'+i).style.backgroundColor; let classes = elt.classList; classes.add('fb'+i); if(classes.contains('auto')){ elt.innerHTML = 'fire-auto-time'+i; } else if (classes.contains('autoFB')) { elt.style.backgroundColor = 'rgb(' + aleatoire() + ',' + aleatoire() + ',' + aleatoire() + ')'; if(classes.contains('erreur')){ elt.innerHTML = 'fire-autoFB-erreur-'+i; } else{ elt.innerHTML = 'fire-autoFB-'+i; } //elt.innerHTML = 'autoFB-' + i; } else if(classes.contains('visibilite')){ elt.innerHTML = 'fire-visibilite-'+i; } else if(classes.contains('hover')){ elt.innerHTML = 'fire-hover-'+i; } else{ elt.innerHTML = 'fire-clic-'+i; } //elt.innerHTML = 'fire'+i; i++; } } } /*Marquer et incrémenter les elements de feedbacks et déclencheurs*/ if(document.querySelector('.genially-view-slide-container').querySelectorAll('.fb').length > 0){ marqueElements('.fb'); } if(document.querySelector('.genially-view-slide-container').querySelectorAll('.fire').length > 0){ marqueElements('.fire'); } /*Gérer le feedback global et le compteur associé s'ils existent en mode view et preview*/ if(document.querySelector('.genially-view-slide-container').querySelector('.compteur')){ let compteur = document.querySelector('.genially-view-slide-container').querySelector('.compteur'); if(document.querySelector('.container-wrapper-genially') && compteur){ var compteurZt = compteur.closest('.genially-view-group').querySelector('.genially-view-text'); } // Initialisation du compteur if(document.querySelector('.container-wrapper-genially') && compteurZt){ compteurZt.textContent = '0'; } // Gestion du compteur compteur.addEventListener('feedBackGlobal', () => { if(document.querySelector('.container-wrapper-genially') && compteurZt){ compteurZt.textContent = document.querySelector('.genially-view-slide-container').querySelectorAll('.fb.active').length.toString(); } }); } /*Gérer le feedback erreur et le compteur erreur associé s'ils existent en mode view et preview*/ if(document.querySelector('.genially-view-slide-container').querySelector('.compteurErreur')){ let compteur = document.querySelector('.genially-view-slide-container').querySelector('.compteurErreur'); if(document.querySelector('.container-wrapper-genially') && compteur){ var compteurZtE = compteur.closest('.genially-view-group').querySelector('.genially-view-text'); } // Initialisation du compteur Erreur if(document.querySelector('.container-wrapper-genially') && compteurZtE){ compteurZtE.textContent = '0'; } // Gestion du compteur compteur.addEventListener('feedBackErreur', () => { if(document.querySelector('.container-wrapper-genially') && compteurZtE){ compteurZtE.textContent = document.querySelector('.genially-view-slide-container').querySelectorAll('.fb.err').length.toString(); } }); } /*Gérer le total s'il existe*/ if(document.querySelector('.genially-view-slide-container').querySelector('.total')){ const total = document.querySelector('.genially-view-slide-container').querySelector('.total'); if(document.querySelector('.container-wrapper-genially') && total){ var totalZtt = total.closest('.genially-view-group').querySelector('.genially-view-text'); } //Afficher le total de bonnes réponses sans les erreurs si elles existent if(document.querySelector('.container-wrapper-genially') && totalZtt){ if(document.querySelector('.genially-view-slide-container').querySelector('.fb.erreur')){ totalZtt.textContent = (tousLesFB.length - document.querySelector('.genially-view-slide-container').querySelectorAll('.fb.erreur').length).toString(); } else{ totalZtt.textContent = tousLesFB.length.toString(); } } } /*Gérer le feedback global s'il existe*/ if(document.querySelector('.genially-view-slide-container').querySelector('.fg_global')){ let global = document.querySelector('.genially-view-slide-container').querySelector('.fg_global'); const unSeulClic = once(function() { global.click(); }); global.addEventListener('feedBackGlobal', (event) => { //console.log(event.detail.message); if(document.querySelector('.genially-view-slide-container').querySelector('.fb.erreur')){ if(event.detail.tous-document.querySelector('.genially-view-slide-container').querySelectorAll('.fb.erreur').length === document.querySelectorAll('.fb.active').length){ //global.click(); unSeulClic() } } else{ if(event.detail.tous === document.querySelector('.genially-view-slide-container').querySelectorAll('.fb.active').length){ //global.click(); unSeulClic() } } }); } /* Abonnement de tous les éléments feedback à l'événement feedBackGenially et gestions des éléments de délai.*/ for(let i=0; i<tousLesFB.length; i++){ document.querySelector('.genially-view-slide-container').querySelector('.fb.fb'+i).addEventListener('feedBackGenially', (e) => { //console.log(e.target.classList); if(document.querySelector('.genially-view-slide-container').querySelector('.delay')){ var delai = +document.querySelector('.genially-view-slide-container').querySelector('.delay').closest('.genially-view-group').querySelector('.genially-view-text').textContent; } if(document.querySelector('.genially-view-slide-container').querySelector('.delai')){ attendDeclencheFB('.fb'+i, delai*1000) } else if(document.querySelector('.genially-view-slide-container').querySelector('.delaiInc')){ attendDeclencheFB('.fb'+i, delai*i*1000) } else if(document.querySelector('.genially-view-slide-container').querySelector('.delaiDec')){ attendDeclencheFB('.fb'+i, delai*(tousLesFB.length-i)*1000) } else if(document.querySelector('.genially-view-slide-container').querySelector('.delaiAlea')){ attendDeclencheFB('.fb'+i, delai*Math.floor(Math.random() * tousLesFB.length)*1000) } else if(document.querySelector('.genially-view-slide-container').querySelector('.delaiAleaInc')){ attendDeclencheFB('.fb'+i, delai*Math.floor(Math.random() * tousLesFB.length)*i*1000) } else if(document.querySelector('.genially-view-slide-container').querySelector('.delaiAleaDec')){ attendDeclencheFB('.fb'+i, delai*Math.floor(Math.random() * tousLesFB.length)*(tousLesFB.length-i)*1000) } else{ attendDeclencheFB('.fb'+i); } }, {once: true}); /*Déclencheurs auto : s'ils existent, les écouter et envoyer l'événement feedbackGenially sur les éléments feedbacks associés*/ if(document.querySelector('.genially-view-slide-container').querySelector('.auto.fb'+i)){ let groupe =document.querySelector('.genially-view-slide-container').querySelector('.auto.fb'+i).closest('.genially-view-group'); if (groupe){ let zoneTexte = groupe.querySelector('.genially-view-text'); if(zoneTexte){ zoneTexte.style.display = 'none'; let delaiSecondes = +zoneTexte.textContent*1000; setTimeout(function(){ document.querySelector('.genially-view-slide-container').querySelector('.fb.fb'+i).dispatchEvent(feedBackGenially); }, delaiSecondes); } } } /*Déclencheurs de visibilité : détecter le changement de visibilité avec MutationObserver sur l'élément parent de classe genially-animated-wrapper. Si l'attribut visibility ou display change envoyer l'événement feedbackGenially sur les éléments associés*/ else if(document.querySelector('.genially-view-slide-container').querySelector('.visibilite.fb'+i)){ let groupe =document.querySelector('.genially-view-slide-container').querySelector('.visibilite.fb'+i).closest('.genially-view-group'); if (groupe){ //console.log('groupe trouvé'); let parent = groupe.closest('.genially-animated-wrapper'); if(parent){ //console.log('parent trouvé'); let ancienVisible = parent.style.visibility; let ancienDisplay = parent.style.display; let observer = new MutationObserver(function(mutations) { //console.log(mutations); mutations.forEach(function(mutationRecord) { if(mutationRecord.attributeName === 'style' && (ancienVisible !== parent.style.visibility || ancienDisplay !== parent.style.display)){ //console.log('visibility ou display ont changés'); document.querySelector('.genially-view-slide-container').querySelector('.fb.fb'+i).dispatchEvent(feedBackGenially); } }); }); observer.observe(parent, { attributes : true, attributeFilter : ['style'] }); } } } /*AutoDéclencheurs de visibilité : détecter le changement de visibilité avec MutationObserver sur l'élément parent de classe genially-animated-wrapper. Si l'attribut visibility ou display change envoyer l'événement feedbackGenially sur les éléments associés*/ else if (document.querySelector('.genially-view-slide-container').querySelector('.autoFB.fb' + i)) { const unSeulDispatch = once(function () { //document.querySelector('.genially-view-slide-container').querySelector('.fb.fb' + i).dispatchEvent(feedBackGenially); let groupe = document.querySelector('.genially-view-slide-container').querySelector('.autoFB.fb' + i).closest('.genially-view-group') groupe.dispatchEvent(feedBackGenially); }); let groupe = document.querySelector('.genially-view-slide-container').querySelector('.autoFB.fb' + i).closest('.genially-view-group'); if (groupe) { //console.log('groupe trouvé'); let parent = groupe.closest('.genially-animated-wrapper'); if (parent) { //console.log('parent trouvé'); let ancienVisible = parent.style.visibility; let ancienDisplay = parent.style.display; let observer = new MutationObserver(function (mutations) { //console.log(mutations); mutations.forEach(function (mutationRecord) { if (mutationRecord.attributeName === 'style' && (ancienVisible !== parent.style.visibility || ancienDisplay !== parent.style.display)) { groupe.querySelector('.fb.fb' + i).dispatchEvent(feedBackGenially); } }); }); observer.observe(parent, {attributes: true, attributeFilter: ['style']}); } groupe.addEventListener('click', () => { groupe.querySelector('.fb.fb' + i).dispatchEvent(feedBackGenially); }); } } /* Déclencheurs au survol des éléments fire contenant la classe hover : les écouter et envoyer l'événement feedbackGenially au survol des éléments feedbacks associés*/ else if(document.querySelector('.genially-view-slide-container').querySelector('.hover.fb'+i)){ let groupe =document.querySelector('.genially-view-slide-container').querySelector('.hover.fb'+i).closest('.genially-view-group'); if (groupe){ groupe.addEventListener('mouseover', () => { document.querySelector('.genially-view-slide-container').querySelector('.fb.fb'+i).dispatchEvent(feedBackGenially); }); groupe.addEventListener('mouseout', () => { !document.querySelector('.genially-view-slide-container').querySelector('.fb.fb'+i).dispatchEvent(feedBackGenially); }); } } /*Déclencheurs de clic : s'ils existent, les écouter et envoyer l'événement feedbackGenially au click sur les éléments feedbacks associés*/ else if(document.querySelector('.genially-view-slide-container').querySelector('.fire.fb'+i)){ let groupe =document.querySelector('.genially-view-slide-container').querySelector('.fire.fb'+i).closest('.genially-view-group'); if (groupe){ groupe.addEventListener('click', () => { document.querySelector('.genially-view-slide-container').querySelector('.fb.fb'+i).dispatchEvent(feedBackGenially); }); } } } // fin abonnements /*Fonction desactiveClicDirect(elt) : ajoute le style pointer-events :none s'il n'existe pas*/ const desactiveClicDirect = elt => { //console.log('desactiveClicDirect', elt); if(!elt.style.pointerEvents){ elt.style.pointerEvents = 'none'; } }; /*Fonction remonteArbre(depart, arrive, callback) : remote l'arbre DOM depuis l'élément DOM depart jusqu'à element arrive en applicant un callback à chaque noeud parent*/ const remonteArbre = (depart, arrive, callback) => { let noeud = depart; while(noeud && noeud !== arrive){ callback(noeud); noeud = noeud.parentNode; } }; /*Masquer les elements en mode view et preview, attendre que genially ait compilé*/ if(document.querySelector('.container-wrapper-genially')){ waitForElement('.aCacher').then(function(){ let eltsAcacher = document.querySelector('.genially-view-slide-container').querySelectorAll('.aCacher'); for(let elt of eltsAcacher){ //elt.style.display = 'none'; if(!elt.classList.contains('fire')){ elt.closest('.genially-view-rich-content').style.display ='none'; } else{ elt.style.display = 'none'; } //elt.closest('.genially-view-rich-content').style.display ='none'; if(elt.closest(' .genially-view-cursor-pointer')){ //console.log('cacher le curseur sur :', elt.closest(' .genially-view-cursor-pointer')); elt.closest(' .genially-view-cursor-pointer').classList.remove('genially-view-cursor-pointer'); } } if(document.querySelector('.genially-view-slide-container').querySelector('.delay')){ document.querySelector('.genially-view-slide-container').querySelector('.delay').closest('.genially-view-group').querySelector('.genially-view-text').style.display = 'none'; } if(document.querySelector('.genially-view-slide-container').querySelector('.invisible')){ for(let fb of tousLesFB){ // À vérifier : suffisant pour cacher les éléments fb avec invisible ? fb.closest('.genially-view-group').style.display = 'none'; } } /*Pour tous les éléments de classe fb qui ne contiennent qui ne contiennent pas la classe autoFB remonter l'arbre en appliquant le callback desactiveClicDirect*/ for(let fb of tousLesFB){ if(!fb.classList.contains('autoFB')){ remonteArbre(fb, fb.closest('.genially-animated-wrapper'), desactiveClicDirect); } } if(document.querySelector('.genially-view-slide-container').querySelector('.fg_global')){ let fgGlobal = document.querySelector('.genially-view-slide-container').querySelector('.fg_global'); remonteArbre(fgGlobal, fgGlobal.closest('.genially-animated-wrapper'), desactiveClicDirect); } });// fin de then /*ancienne version cacher : v.044 du01/08*/ } // fin masquer les elements en mode view et preview}else{var tousLesFB = document.querySelectorAll('.fb'); /*Fonction qui donne la même couleur aux éléments déclencheurs et éléments de feedback et les incrémente suivant l'ordre de groupage dans la page*/ const marqueElements = (classe) => { let elts = document.querySelectorAll(classe); const aleatoire = () => { return Math.floor(Math.random() * 256); } let i= 0; if(classe === '.fb' && elts.length > 0){ //console.log('fb dans marqueElements'); for(let elt of elts){ if(!elt.classList.contains('autoFB')){ elt.style.backgroundColor = 'rgb(' + aleatoire() + ',' + aleatoire() + ',' + aleatoire() + ')'; let classes = elt.classList; classes.add('fb'+i); elt.innerHTML = 'fb-'+i; i++; } } } if(classe === '.fire' && elts.length > 0){ //console.log('fire dans marqueElements'); for(let elt of elts){ if(document.querySelector('.fb.fb'+i) && !elt.classList.contains('autoFB')){ elt.style.backgroundColor = document.querySelector('.fb.fb'+i).style.backgroundColor; } else if(elt.classList.contains('autoFB')){ elt.style.backgroundColor = 'rgb(' + aleatoire() + ',' + aleatoire() + ',' + aleatoire() + ')'; } else{ console.log('Il manque un élément feedBack de même indice pour attribuer la couleur correspondante à ' + elt.innerHTML); elt.style.backgroundColor = 'rgb(' + aleatoire() + ',' + aleatoire() + ',' + aleatoire() + ')'; } //elt.style.backgroundColor = document.querySelector('.fb'+i).style.backgroundColor; let classes = elt.classList; classes.add('fb'+i); if(classes.contains('auto')){ elt.innerHTML = 'fire-auto-time'+i; } else if (classes.contains('autoFB')) { elt.style.backgroundColor = 'rgb(' + aleatoire() + ',' + aleatoire() + ',' + aleatoire() + ')'; if(classes.contains('erreur')){ elt.innerHTML = 'fire-autoFB-erreur-'+i; } else{ elt.innerHTML = 'fire-autoFB-'+i; } //elt.innerHTML = 'autoFB-' + i; } else if(classes.contains('visibilite')){ elt.innerHTML = 'fire-visibilite-'+i; } else if(classes.contains('hover')){ elt.innerHTML = 'fire-hover-'+i; } else{ elt.innerHTML = 'fire-clic-'+i; } //elt.innerHTML = 'fire'+i; i++; } } } /*Marquer et incrémenter les elements de feedbacks et déclencheurs*/ if(document.querySelectorAll('.fb').length > 0){ marqueElements('.fb'); } if(document.querySelectorAll('.fire').length > 0){ marqueElements('.fire'); }}</script>

TEXTE

Consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Sed do eiusmod tempor incididunt ut.

Lorem ipsum dolor sit

FONCTION FEEDBACKS obligatoire dans la page

Groupe image de l'animal avec animation Battement au Cliquer

Interactivité Révéler la zone de texte Mammifères sur le groupe image de l'animal

DECLENCHEUR groupé au nom de l'animal

La zone de texte Mammifères avec animation Disparaître en Sortie

FEEDBACK groupé à l'image de l'animal

Déclenche l'interactivité et l'animation du groupe FEEDBACK de même indice.

FEEDBACK déclenché par l'AUTODECLENCHEUR de même indice

FONCTION FEEDBACKS obligatoire dans la page

AUTODECLENCHEUR groupé à une zone de texte indiquant le delai en secondes

Chaque groupe FEEDBACKS possède une interactivité différente (Fenêtre, Audio, Page suivante)