Intégrer une simulation dans WordPress : deux méthodes

Si vous tenez un blog pédagogique, gérez le site d'un département ou publiez des devoirs sur un site scolaire construit avec WordPress, vous pouvez intégrer une simulation dans WordPress pour que les lecteurs lancent une expérience en direct dans l'article. Il y a deux façons de faire : coller le code d'intégration dans un bloc HTML personnalisé, ou coller le lien de lecture seul sur une ligne et laisser WordPress construire l'intégration. Ce guide présente les deux avec Simulic, explique laquelle choisir, comment régler la bonne hauteur et que faire quand WordPress supprime discrètement le cadre. Il se termine par des idées d'articles pédagogiques qui exploitent bien une simulation.

Ce dont vous avez besoin

• Un compte enseignant Simulic gratuit. Les lecteurs et les élèves n'en ont jamais besoin.
• Un site WordPress où vous pouvez modifier des articles ou des pages.
• Pour la méthode du bloc HTML personnalisé, un rôle d'utilisateur autorisé à enregistrer du HTML comme les iframes. Sur un site WordPress unique standard, les Administrateurs et les Éditeurs le peuvent en général ; les Auteurs et les Contributeurs en général non. Demandez à l'administrateur de votre site si vous n'êtes pas sûr.
• Une simulation et un lien de partage pour elle.

Quelle méthode choisir ?

	Coller le lien de lecture	Bloc HTML personnalisé
Effort	Coller une ligne	Coller le code d'intégration
Hauteur	Choisie par WordPress et votre thème	Vous la réglez
Questions sous la simulation	Défilement parfois nécessaire dans le cadre	Le cadre s'agrandit avec le contenu, ou vous augmentez la hauteur
Fonctionne pour tous les rôles	En général	Seulement les rôles autorisés à enregistrer du HTML

Commencez par le lien de lecture. Si le résultat est trop court, ou si le lien reste un simple lien, passez au bloc HTML personnalisé.

Étape 1 : créer un lien de partage dans Simulic

1. Ouvrez la page de la simulation et cliquez sur Partager.
2. Dans l'onglet Simulation, réglez les valeurs de départ avec lesquelles les lecteurs doivent commencer. Elles sont enregistrées dans le nouveau lien.
3. Passez à l'onglet Liens de partage. Sous Nouveau lien, nommez le lien d'après l'article, par exemple « Blog · Article planche de Galton », choisissez la Langue et cliquez sur Créer le lien.
4. Dans la fiche du lien, cliquez sur Copier le lien pour la méthode A, ou ouvrez Code d'intégration et cliquez sur Copier le code d'intégration pour la méthode B.

Utilisez un lien distinct pour chaque article. Chaque lien garde son propre compteur de lectures et ses propres réponses : vous voyez ainsi quel article les lecteurs utilisent vraiment.

Méthode A : coller le lien de lecture (oEmbed)

Simulic prend en charge oEmbed, le standard que WordPress utilise pour transformer un lien collé en cadre intégré.

1. Dans l'éditeur d'article, placez le curseur sur une nouvelle ligne vide.
2. Collez le lien de lecture (il ressemble à https://simulic.com/p/…) seul, sans rien d'autre sur la ligne.
3. Patientez un instant. Si WordPress reconnaît le lien, il affiche un aperçu de la simulation dans l'éditeur.
4. Prévisualisez l'article, puis publiez-le ou mettez-le à jour.

Si le lien reste du texte brut, votre site ou votre éditeur n'a pas créé l'intégration. Cela dépend de la configuration de WordPress, pas du lien. Utilisez alors la méthode B.

Le cadre créé ainsi a une taille fixe choisie par WordPress et votre thème. Cela convient à une simulation seule. Si vous associez des questions au lien, le cadre peut être trop court pour les afficher sans défilement.

Méthode B : bloc HTML personnalisé

1. Dans l'éditeur de blocs, ajoutez un bloc Custom HTML (HTML personnalisé) à l'endroit où la simulation doit apparaître (cherchez « HTML personnalisé » dans l'inséreur de blocs).
2. Collez le code d'intégration de Simulic.
3. Passez le bloc en aperçu pour vérifier que la simulation se charge.
4. Prévisualisez l'article entier, puis publiez-le ou mettez-le à jour.

Dans l'éditeur classique, passez l'éditeur en vue HTML (code) avant de coller, puis revenez et enregistrez. Les noms de menus diffèrent selon les versions de WordPress, les thèmes et les constructeurs de pages : cherchez l'option qui permet de modifier le HTML.

Le code d'intégration commence par une iframe de 640 px de haut et se termine par un petit script qui agrandit le cadre avec son contenu, plus une ligne « Simulation by Simulic ». Quand WordPress garde le script, le cadre se redimensionne tout seul à l'apparition des questions. Quand il le supprime, le cadre reste à 640 px de haut :

• Simulation seule : 640 px suffisent.
• Avec 2 à 3 questions : remplacez height="640" par environ 850.
• Avec 5 questions et des prédictions : essayez 1000–1100.

Quand WordPress supprime l'iframe

Si l'article semble correct dans l'éditeur mais que la simulation est absente après l'enregistrement, quelque chose a supprimé l'iframe. Les causes habituelles :

• Votre rôle d'utilisateur. WordPress supprime les iframes et les scripts pour les utilisateurs qui n'ont pas le droit de publier du HTML non filtré. Sur les réseaux multisites, souvent seul le super administrateur du réseau le peut. Demandez à un administrateur de coller le code pour vous, ou utilisez la méthode A.
• Une extension de sécurité ou un constructeur de pages qui filtre le HTML. Vérifiez ses paramètres pour les iframes ou les intégrations, ou demandez à la personne qui gère le site.
• Une offre hébergée qui limite le code personnalisé. Certaines offres WordPress hébergées n'autorisent ni iframes ni scripts dans les articles.

Si seul le script est supprimé, la simulation fonctionne toujours. Augmentez simplement la hauteur comme indiqué plus haut.

Idées d'articles pédagogiques qui fonctionnent

Une simulation transforme un article que les élèves lisent en un article qu'ils testent. Quelques formats qui marchent :

• Problème de la semaine. Une question, une simulation, des réponses recueillies sur le lien.
• Page de révision par unité. Trois ou quatre simulations, chacune avec une tâche d'une ligne.
• Classe inversée. Une courte explication, une simulation avec des questions de prédiction, puis « apportez votre réponse en classe ».
• Explication pour les parents. « Voici ce que nous avons fait en classe aujourd'hui », avec la même simulation que celle utilisée par les élèves.

Voici un article de type problème de la semaine en situation, avec la simulation de la planche de Galton :

Sur l'écran Intro, des billes tombent à travers 12 rangées de clous et rebondissent à droite avec une probabilité de 0,5 à chaque clou. Demandez aux lecteurs de prédire quelle case recevra le plus de billes avant d'appuyer sur Lâcher 100 billes. D'après la théorie, la case du milieu (k = 6) reçoit environ 22,6 % des billes, les trois cases centrales ensemble environ 61 %, et chaque case d'extrémité seulement environ 0,02 %, soit à peu près 1 bille sur 4 096. Sur l'écran Labo, réglez p = 0,7 : le pic se déplace vers k = 8,4 environ, la moyenne de 12 × 0,7.

Questions pour le lien (composez-les dans l'onglet Questions de la page de partage) :

• Prédiction (non notée) : « Quelle case recueillera le plus de billes ? » Réponse attendue : celle du milieu, k = 6.
• Nombre : « Environ quel pourcentage de billes tombe dans la case 6 ? » Réponse 22,6, marge d'erreur ± 1,5, unité %.
• Texte court : « Pourquoi si peu de billes atteignent-elles les cases d'extrémité ? » Exemple de réponse : une bille doit rebondir du même côté sur les 12 clous, et un seul chemin sur 4 096 le fait.

Demandez aux élèves un pseudo ou un prénom seulement. Vous voyez les réponses sur la fiche du lien et pouvez les télécharger en CSV. Pour un pas à pas complet, lisez recueillir les réponses des élèves sans comptes élèves. Pour des idées au-delà des probabilités, voir activités mathématiques interactives.

Dépannage

Le cadre est vide

Ouvrez directement le lien de lecture. S'il échoue uniquement sur les appareils de l'école, un filtre web bloque simulic.com. S'il fonctionne directement, vérifiez le HTML de l'article : si la ligne iframe a disparu, voir la section sur les iframes supprimées ci-dessus.

Le cadre indique que le lien n'est pas disponible ou a expiré

« This Simulic link is no longer available » signifie que le lien est désactivé : cliquez sur Activer le lien dans la page de partage. « This Simulic link has expired » signifie qu'une date limite a été fixée dans les Options Pro ; modifiez-la ou effacez-la.

La simulation est coupée en bas

Augmentez height dans le bloc HTML personnalisé, ou passez de la méthode A à la méthode B.

Pour les autres plateformes, voir le guide pour intégrer une simulation dans votre LMS et la page d'aide sur l'intégration de l'application.

Questions fréquentes

La simulation intégrée dépose-t-elle des cookies sur mon site WordPress ?

Non. L'intégration ne dépose aucun cookie et continue de fonctionner quand les navigateurs bloquent les cookies tiers.

Les lecteurs sans compte peuvent-ils utiliser la simulation ?

Oui. Personne n'a besoin d'un compte pour lancer une simulation. Si vous associez des questions, les lecteurs saisissent un pseudo pour répondre.

Pourquoi coller le lien fonctionne-t-il sur un site WordPress mais pas sur un autre ?

Les intégrations automatiques dépendent de la configuration de WordPress, des extensions et de l'éditeur du site. Quand le lien reste simple, utilisez un bloc HTML personnalisé.

Puis-je intégrer la même simulation dans plusieurs articles ?

Oui. Créez un lien par article pour que les compteurs de lectures et les réponses restent séparés.

L'intégration cessera-t-elle de fonctionner si je modifie le jeu de questions plus tard ?

Non. Le code d'intégration reste le même. Les modifications faites dans la page de partage apparaissent automatiquement dans l'article.