27 janvier, 2025 • Paul • E-learning

Genially : créer des variables et un compteur avec Java Script

Si vous utilisez régulièrement Genially pour la création de vos ressources pédagogiques, vous vous êtes sans doute déjà retrouvés bloqués lorsque vous souhaitiez mémoriser et faire évoluer une information à l'intérieur même de votre ressource (typiquement un score dans le cadre d'un serious game). 
En effet, pour pouvoir mener à bien cela, il est nécessaire de manipuler des variables. Fonctionnalité malheureusement non disponible ce jour dans Genially. 

Pour pouvoir contourner ce problème il est malgré tout possible d'injecter du code Java Script directement dans son Genially. C'est ce que nous allons voir en détail dans cet article ! 
Pas de panique pour les non-développeurs, la démarche reste très accessible et nous veillerons à l'expliquer étape par étape. 

Au menu

 Le compteur que l'on souhaite créer
 Comment intégrer du code Java Script dans Génially
 Créer ses variables
 Créer ses fonctions
 Vérification du fonctionnement du compteur

Le compteur que l'on souhaite créer 

Afin de vous présenter la démarche, fixons nous un cas d'étude simple : créer un compteur de points (cf visuel joint) qu'il sera possible d'incrémenter ou décrémenter directement à l'intérieur du Genially. Ce type de compteur pourrait ainsi se retrouver sur un jeu de plateau digital.  

Ce compteur se compose d'un afficheur central en gris donnant le nombre de point du joueur ainsi que de 2 boutons de part et d'autre de l'écran et permettant d'augmenter de 1 (le bouton + vert) ou diminuer de 1 le nombre de points (le bouton - rouge). 

Pour mener à bien se projet, il sera nécessaire de créer 3 variables : 
  • La variable "Score" qui donnera comme son nom l'indique le nombre de point
  • La variable "BoutonPlus" qui correspondra à la zone + permettant d'incrémenter de 1 le score
  • La variable "BoutonMoins" qui correspondra à la zone - permettant décrémenter de 1 le score

De même, pour décrire le fonctionnement de notre compteur, il sera nécessaire de créer 2 fonctions : 

  • La fonction "scorePlus" qui incrémentera le score de 1 lorsque qu'un clic sera réalisé sur la zone "BoutonPlus"

  • La fonction "scoreMoins" qui décrémentera le score de 1 lorsque qu'un clic sera réalisé sur la zone "BoutonMoins"

Empty space, drag to resize

  Besoin d'aide ? 
Vous souhaitez être assisté dans la création de modules e-learning ? Les équipes Pairenne vous accompagnent sur l'ensemble des étapes de la conception de vos formations en ligne.
Contactez nous pour en discuter ou soyez recontacté ! 

Comment injecter du code Java Script dans Genially ? 

Pour ajouter du code dans Genially, il suffit de se rendre dans l'onglet "Insérer" puis cliquer sur "Autres" (cf carrés jaunes sur le visuel de droite).

Si vous utilisez régulièrement Genially, vous avez sans doute déjà utilisé cette fonctionnalité pour intégrer des contenus externes dans votre ressource pédagogique (map, contenu facebook...). 

Dans notre cas, nous allons l'utiliser non pas pour ajouter des liens externes mais directement pour créer les variables et les fonctions nécessaires à notre compteur. 

Empty space, drag to resize

  Besoin d'aide ? 
Vous souhaitez être assisté dans la création de modules e-learning ? Les équipes Pairenne vous accompagnent sur l'ensemble des étapes de la conception de vos formations en ligne.
Contactez nous pour en discuter ou soyez recontacté ! 

Ne manquez pas !

Découvrez notre boîte à outils de la formation

+ 100 outils incontournables

Créer ses variables

Tel que mentionné précédemment, il est nécessaire pour notre projet de créer dans un premier temps trois variables. La création de ces variables se fait en injectant les lignes de code ci-dessous dans l'encart d'intégration de contenus externes présenté dans la section précédente.  

 Variable score

Ce code permet de créer une variable intitulée "Score", dont la valeur par défaut est : 30. 
Le style de cette variable est par ailleurs : 

  • Taille du texte : 40 pixels

  • Alignement : centré

  • Style police : gras

 Variable BoutonPlus

Ce code permet de créer une variable intitulée "BoutonPlus", dont la valeur par défaut est : +. 
Le style de cette variable est par ailleurs : 

  • Taille du texte : 30 pixels

  • Alignement : centré

  • Style police : gras

  • Couleur texte : blanc

 Variable BoutonPlus

Ce code permet de créer une variable intitulée "BoutonMoins", dont la valeur par défaut est : -. 
Le style de cette variable est par ailleurs : 

  • Taille du texte : 30 pixels

  • Alignement : centré

  • Style police : gras

  • Couleur texte : blanc

Empty space, drag to resize

  Besoin d'aide ? 
Vous souhaitez être assisté dans la création de modules e-learning ? Les équipes Pairenne vous accompagnent sur l'ensemble des étapes de la conception de vos formations en ligne.
Contactez nous pour en discuter ou soyez recontacté ! 

Création des fonctions du compteur

De même, tel que mentionné précédemment, afin de rendre fonctionnel notre compteur, il est nécessaire de créer deux fonctions. Leur création se fait en également injectant les lignes de code suivantes dans l'encart d'intégration de contenus externes.  

Empty space, drag to resize

  Attention
Lors de la création d'une fonction, une fenêtre vide apparait sur le Genially. Il est important de la conserver sur le Genially pour le fonctionnement de la fonction
Nous vous recommandons alors de réduire celle-ci au minium et de la positionner dans les coins afin de ne pas perturber l'utilisation de votre ressource Genially. 

Empty space, drag to resize

 Fonction scorePlus

Grâce à ce code, lorsqu'un utilisateur clic sur la zone "BoutonPlus", la fonction "scorePlus" est lancée.

Celle-ci a ensuite simplement pour mission de récupérer la valeur de la variable "Score", de la sauvegarder dans une variable temporaire "currentScore", puis de l'incrémenter de 1. 

Empty space, drag to resize

 Fonction scoreMoins

De la même manière, grâce à ce code, lorsqu'un utilisateur clic sur la zone "BoutonMoins", la fonction "scoreMoins" est lancée.
Celle-ci récupère la valeur de la variable "Score", la sauvegarde dans la variable temporaire "currentScore" puis la diminue de 1. 

Empty space, drag to resize

  Besoin d'aide ? 
Vous souhaitez être assisté dans la création de modules e-learning ? Les équipes Pairenne vous accompagnent sur l'ensemble des étapes de la conception de vos formations en ligne.
Contactez nous pour en discuter ou soyez recontacté ! 

Ne manquez pas !

Découvrez notre boîte à outils de la formation

+ 100 outils incontournables

Vérification du fonctionnement du compteur

Nous venons donc d'intègre toutes les briques de code permettant de faire fonctionner en théorie notre compteur. 

Il ne reste donc plus qu'à le tester ! Et pour ce faire rien de mieux que de vérifier par soit même le résultat interagissant avec le Génially de droite !
Pas mal non ?!  

Notre compteur peut ainsi conserver la valeur du nombre de points au cours d'une session et il peut être augmenté et diminué à notre guise. 

Si nous rechargeons la page (ou si quelqu'un d'autre charge le même Genially sur un autre appareil) le compteur de point sera réinitialisé automatiquement à sa valeur par défaut. 
Cela permet ainsi à plusieurs apprenants d'utiliser le même Genially en parallèle et de manière indépendante (chacun aura alors son propre compteur) ! 
A vous de jouer maintenant ! 🙂

Write your awesome label here.
Empty space, drag to resize

  Besoin d'aide ? 
Vous souhaitez être assisté dans la création de modules e-learning ? Les équipes Pairenne vous accompagnent sur l'ensemble des étapes de la conception de vos formations en ligne.
Contactez nous pour en discuter ou soyez recontacté ! 

Nos autres articles qui pourraient vous intéresser 

Digitalisation de la formation pro : définition et méthode

Comment créer un scénario pédagogique efficace pour une formation?

Créer une formation en ligne : le guide

Les meilleurs outils pour la formation en ligne