Want to make creations as awesome as this one?

Une combinaison sur une seule diapositive.

Transcript

Ce texte sert à intégrer la police dans le genially

code : 1234

5478

Plus de détails sur le site https://scape.enepe.frNe pas hésiter à nous contacter scape@enepe.fret à nous rejoindre sur Twitter https://twitter.com/ScapEduou sur Facebook https://url.enepe.fr/leclub

Du code intégré par Insérer, puis </>AUTRES <img id="ferme" src="https://scape.enepe.fr/image/boutoncoffre.png" style="width:100%; height:auto;"><script></script> En rouge : l'identifiant de la fenêtre indispensable pour la faire disparaître si la combinaison est bonne. En vert : le lien de l'image. Il est possible d'intégrer l'image dans la page (et de la mettre en arrière-plan pour la cacher) puis d'en récupérer le chemin par un clic-croit en mode visualisation. Adresse de type https://images.genial.ly/5de3e5f6d118ca0fa8bc48ac/9a861652-ce79-4d21-81a4-13bc9eda258f.png

Sur chaque touche une zone invisible (Éléments interactifs) avec une interactivité FENÊTRE.Dans la fenêtre, code intégré en mode HTML (</> dans la barre d'édition de la fenêtre) :<script>setTimeout(function(){document.getElementsByClassName('icon-close')[0].click()}, 100);document.getElementById('genially-view-modal').style.visibility = "hidden";var ecran = document.getElementById('ecran').innerHTML;var code = document.getElementById('code').innerHTML;var solution = document.getElementById('solution').innerHTML;if (ecran.length < solution.length){code = code + "1";document.getElementById('ecran').innerHTML = document.getElementById('ecran').innerHTML + "*";document.getElementById('code').innerHTML = code;if (code == solution){document.getElementById('ecran').innerHTML = "OUVERT";document.getElementById('ferme').parentNode.parentNode.parentNode.parentNode.style.display = "none";}else if (code.length == solution.length){document.getElementById('ecran').innerHTML = "ERREUR";}}else{code = "1";document.getElementById('ecran').innerHTML = "*";document.getElementById('code').innerHTML = code;}</script>Ce code :

  • bloque l'affichage de la fenêtre
  • tant que la combinaison saisie est plus courte que la solution (#solution) :
    • ajoute la valeur de la touche à la combinaison (#code)
    • ajoute une étoile à l'affichage (#ecran)
    • teste la combinaison :
      • affiche OUVERT et efface de la page l'image du bouton (#ferme)
      • sinon affiche ERREUR
  • sinon réinitialise l'affichage (première étoile) et la combinaison (valeur de la touche)

Texte écrit avec la police utilisée pour afficher les informations sur le cadran du coffre.Il est rendu invisible en le plaçant en arrière-plan ou en dehors de la page. Indispensable, sinon les informations seront avec une police par défaut.

Code, intégré par Insérer </>AUTRES, qui permet d'afficher le cadran du coffre (#ecran), de définir la combinaison-solution (#solution) et de définir une zone d'enregistrement de la combinaison saisie (#code). Les éléments visibles servent à placer les étoiles sur l'afficheur du coffre. Ils disparaissent par la suite. Pensez à modifier la combinaison-solution en remplaçant celle indiquée en rouge (pas d'espace - de 1 à 6 chiffres compte tenu de la taille de la police mais cela peut être modifié). En vert : les étoiles servant de repère pour placer l'affichage. Il est possible de modifier leur nombre mais c'est facultatif. Ne changez pas les noms des éléments (#solution #ecran #code). <div id="solution" style="border:solid red 2px; width:100%; height:33%;">1234</div><div id="ecran" style="font-family:VT323; line-height:50px; font-size:50px; color: #8DFB1F; width:100%; height:33%; text-align:left;">****</div><div id="code" style="border:solid green 2px; width:100%; height:33%;"></div><script>document.getElementById('ecran').innerHTML="";document.getElementById('code').style.visibility="hidden";document.getElementById('solution').style.visibility="hidden";</script> Le code :

  • affiche une zone encadrée de rouge pour enregistrer la combinaison-solution (#solution).
  • affiche les étoiles avec la police VT323 (#ecran).
  • affiche une zone encadrée de vert destinée à recevoir la combinaison saisie par le joueur (#code).
  • vide le contenu de #ecran (pas d'étoile au lancement).
  • cache les zones #solution et #code.

Une zone interactive invisible permettant d'aller à la page du trésor.

Image intégrée classiquement dans genially et placée en arrière-plan.Verrouillage nécessaire si vous utilisez le glissement des objets.

Contactez nous.