Comme il nous a été possible d’injecter des scripts dans Genially, il est envisageable de modifier certains aspects des exercices Learning Apps, voire d’y ajouter des éléments. En effet, les champs proposés, notamment ceux pour créer la consigne, les feedbacks et les indices, acceptent le code HTML.

Nous nous étions essayés à créer un Cadenas à trous à partir d’un exercice à trous, on peut faire sûrement mieux. Benjamin Lagarrigue et Valérie Perreaut recensent les exemples les plus intéressants, après que Marie Allirot ait partagé une astuce de Jenny Skene sur le groupe Facebook Enseigner et former avec Genially

Ainsi, on peut saisir quelques lignes de code pour modifier le style des éléments de l’application, mais aussi insérer des iframes, ajouter des images, des liens, des boutons... Cependant, la méthode nécessite une inspection souvent profonde du code source de la page et des connaissances en HTML et CSS.

Voici une liste d’astuces que nous complèterons au fur et à mesure de nos découvertes.

Rendre le fond transparent

Une astuce souvent réclamée afin de supprimer le fond jaunâtre de l’exercice et de l’intégrer plus harmonieusement dans une page web ou d’un Genially. Il suffit de saisir (ou de copier-coller) le code suivant dans le champ Tâche, correspondant à la consigne de l’exercice :

On définit ici une balise style et attribue une couleur transparente (rgba(0,0,0,0)) au fond (background) à la page HTML, au corps de la page (body), à un conteneur nommé wrapper qu’affichent certains exercices tels que les Grilles de lettres et les Mots croisés, et à un conteneur nommé content que l’on retrouve dans les QCM.

Changer la couleur du texte

De la même façon, toujours dans le champ Tâche, on peut attribuer une couleur au texte de la page. Pour le sélecteur body, on définit la couleur que doit prendre la propriété color. La valeur pour être le nom d’une couleur en anglais, son code hexadécimal ou RGB. Le site HtmlColorCodes vous sera d’une grande aide.

Supprimer les consignes

Si vous ne voulez pas faire apparaître les consignes afin de transformer votre exercice en énigme, le code suivant permet de ne pas afficher la fenêtre correspondante (#AppClientTaskPanel) ainsi que l’icône en haut à gauche (#AppClientTaskButton) permettant d’ouvrir de nouveau la fenêtre (code à ajouter dans le champ Tâche).

Supprimer le bouton "Afficher l’appli en plein écran"

Si vous voulez empêcher la mise en plein écran de l’application, il suffit de ne pas afficher le bouton correspondant #AppClientFullscreenButton (code à ajouter dans le champ Tâche).

Masquer les solutions

Certaines applications, comme les Textes à trous, affichent, après trois tentatives infructueuses, un bouton qui fournit la solution au survol de la souris. Le code suivant (dans le champ Tâche), permet de le masquer.

Empêcher l’identification des bonnes et mauvaises réponses

Les applications comme les Textes à trous permettent d’identifier les bonnes et mauvaises réponses. Le code suivant impose la couleur de fond, du texte et de la bordure des champs réponses après validation. Ainsi on peut (comme dans notre exemple) conserver le style des champs de départ avec un fond blanc, le texte noir et une bordure grise, que la réponse donnée soit bonne btn-success ou fausse btn-danger. Bien sûr, vous pouvez choisir d’autres couleurs.

Pour l’exercice Regroupement, le code à utiliser est le suivant :