Insertion de code iframe

Comment insérer un code iframe

Lors de la création d’une leçon, vous pouvez utiliser un code iframe pour l’enrichir avec des contenus provenant de services tiers, comme Google Sheets, Google Forms, Wordwall ou des présentations créées avec Canva, Genial.ly et d’autres services permettant d’intégrer du code dans une page. Les élèves peuvent ainsi remplir des formulaires et consulter des présentations directement dans la leçon, sans quitter la page.

Vous trouverez un exemple de leçon en suivant le lien.

Comment insérer du code dans une leçon

Pour insérer du code dans une leçon, ajoutez simplement l’élément Texte, image, intégration de code.

Sélectionnez ensuite le bouton Intégration de code dans la barre d’outils et collez le code.

Pour modifier la hauteur ou la largeur d’un élément intégré (présentation, feuille de calcul, jeu, etc.), ajoutez les dimensions au code width="640" height="1000", en saisissant des valeurs numériques adaptées à l’élément intégré.

Comment trouver le code d’intégration

Google Forms

Ouvrez le formulaire que vous souhaitez intégrer dans une leçon ou un devoir. Cliquez sur Envoyer, sélectionnez l’icône de code et copiez le code. Vous pouvez également ajuster les dimensions du formulaire dans la même fenêtre.

Google Sheets

Ouvrez la feuille de calcul que vous souhaitez partager. Accédez à Fichier – Partager – Publier sur le Web – Intégrer, puis choisissez d’intégrer une seule feuille ou l’ensemble du document. Après confirmation, un code sera généré. Vous pourrez l’utiliser dans une leçon ou un devoir sur Kwiga. N’oubliez pas que vous pouvez ajuster les dimensions à l’aide de width="640" height="1000" (saisissez les valeurs de votre choix).

Canva

Ouvrez la présentation ou le design Canva que vous souhaitez utiliser dans une leçon ou un quiz. Cliquez sur Partager – Plus – Intégrer, acceptez de rendre la présentation publique et publiez-la. Utilisez le code d’intégration HTML.

Genial.ly

Assurez-vous d’avoir publié votre présentation sur Genial.ly. Vous ne pouvez pas partager un brouillon ni une présentation privée.

Cliquez ensuite sur Partager à côté du bouton Présenter , sélectionnez Intégrer et copiez le code iframe.

Pour modifier les dimensions de la présentation intégrée, modifiez les paramètres de hauteur et de largeur.

WordWall

Ouvrez le contenu que vous souhaitez ajouter à une leçon ou à un devoir sur Kwiga, puis cliquez sur Partager, sélectionnez l’icône de code, puis choisissez iframe (sélectionné par défaut). Copiez le code et utilisez-le sur Kwiga.

Comme toujours, vous pouvez ajuster les dimensions du contenu intégré en modifiant les valeurs de largeur et de hauteur.

Quizlet

Ouvrez la page du quiz sur Quizlet et repérez le bouton Partager ainsi que le bouton à trois points situé à côté. Cliquez sur les trois points et sélectionnez Intégrer:

Dans la fenêtre qui s’ouvre, vous pouvez changer de mode d’étude et copier le code en bas pour l’ajouter à la page de votre leçon (surligné en jaune) :

Dropbox

Vous pouvez intégrer dans une leçon des vidéos téléversées sur Dropbox. Pour ce faire, obtenez un lien direct vers le fichier vidéo (et non le lien fourni par le bouton Partager dans Dropbox !) et intégrez-le à l’aide d’une iframe.

Acceptez les cookies pour afficher le contenu intégré. Ouvrir dans un nouvel onglet

Voici les étapes à suivre :

1. Ouvrez votre compte Dropbox, trouvez le fichier et cliquez sur Partager. Assurez-vous que toute personne disposant du lien peut voir le fichier, puis copiez le lien dans un éditeur de texte.

2. À la fin du lien, vous trouverez dl=0, que vous devez remplacer par raw=1. La capture d’écran ci-dessous montre deux liens : le lien d’origine copié à l’étape 1, et le lien modifié en dessous.

3. Copiez le lien modifié (celui du bas) dans la barre d’adresse de votre navigateur et appuyez sur Entrée. La barre d’adresse affichera alors une autre URL. Il s’agit du lien direct vers le fichier dont vous avez besoin pour la leçon.

4. Ouvrez la leçon et ajoutez un bloc Texte, Image, Code intégré à l’endroit où vous souhaitez insérer la vidéo. Cliquez sur +, ajoutez du code HTML , sélectionnez iframe, puis collez l’URL de la vidéo (obtenue à l’étape 3) dans le champ du lien :

Veuillez noter que la vidéo est diffusée depuis les serveurs de Dropbox. La vitesse et la qualité de lecture dépendent entièrement de Dropbox. Dropbox peut également imposer des restrictions, décrites ici : limitations de bande passante.