Cette fonctionnalité nécessite un site web et quelques connaissances en HTML / CSS / JavaScript
Vous pouvez intégrer l'interface Proglab dans une zone de votre page web, puis la contrôler complètement avec javascript : vous pouvez décider quels boutons de l'éditeur doivent apparaître, insérer une algorithme dans l'éditeur, récupérer dans une chaîne de caractères le contenu de l'éditeur, lancer l'algorithme, récupérer sa sortie dans une chaîne de caractères, et même contrôler complètement ses entrées-sorties.
Il devient ainsi possible de créer des exercices et de vérifier que l'algorithme entré par un élève est correct.
Vous devez insérer le script de contrôle et l'iframe de proglab dans votre code html :
Vous aurez sans doute besoin d'un peu de CSS pour dimensionner l'iframe et l'intégrer correctement au flux de la page :
Cela suffit pour commencer. Mais vous pouvez ajouter des paramètres à l'URL de source de l'iframe pour personnaliser l'interface.
Vous pourrez ensuite contrôler cette interface grâce à une API javascript.
Vous n'aurez probablement pas besoin de l'interface proglab en entier. En ajoutant des paramètres à la source de l'iframe, vous pouvez supprimer un à un chaque élément de l'interface. Par exemple si vous ne voulez garder que l'éditeur :
Les paramètres (tous optionnels) sont donnés sous la forme classique, avec un point d'interrogation suivi d'une liste de paires clé=valeur séparées par le symbole & :
| Paramètre | Signification |
|---|---|
&langages=0 | Supprime les boutons de changement de langage (traduction d'un langage à l'autre) |
&onglets=0 | Supprime les onglets d'aide à la frappe qui contiennent les instructions les plus utilisées |
&aide=0 | Supprime le panneau d'aide. Le panneau de sortie de l'algorithme, situé au même endroit, doit être supprimé séparément. |
&sortie=0 | Supprime le panneau de sortie de l'algorithme. Le panneau d'aide, situé au même endroit, doit être supprimé séparément. |
&boutons=liste | Liste séparée par des virgules des boutons à afficher (par défaut ils le sont tous) Exemple pour afficher uniquement les boutons , et F1 : &boutons=nouveau,run,f1La liste complète est donnée ci-dessous. |
&a=code ou | Charge l'éditeur avec un algorithme préalablement enregistré sur le site proglab.fr. Le code est celui qui a été attribué au moment de l'enregistrement, et qui est utilisé dans les URL comme http://proglab.fr/ftg807 Par exemple, &a=ftg807 charge l'éditeur avec cet algorithme de résolution d'équation du second degré. |
&lang=js | Permet de démarrer en JavaScript au lieu d'AlgoBox. |
Les panneaux d'aide et de sortie sont gérés indépendamment : par défaut ils sont présents tous les deux au même endroit, et les boutons
et permettent de basculer de l'un à l'autre.
Vous pouvez supprimer l'un des deux, ou les deux à la fois. Dans ce cas l'éditeur sera élargi et prendra toute la largeur de l'iframe, au lieu de la seule moitié gauche.
Voici la liste des options pour le paramètre &boutons= à mettre à la suite, séparées par des virgules. Au début les valeurs qui contrôle des groupes entiers de boutons,
puis les valeurs pour contrôler chaque bouton individuellement.
| Paramètre | Signification |
|---|---|
tous | Affiche tous les boutons, c'est le comportement par défaut. |
aucun | Supprime tous les boutons. Les fonctions défaire/refaire ou de retrait du code restent disponibles avec les contrôles clavier standards. |
edition | Affiche tous les boutons d'édition : nouveau, défaire/refaire, augmenter/diminuer le retrait, lancer l'algorithme. |
algobox | Affiche les boutons spécifiques à algobox : configuration du repère, F1 et F2. |
nouveau | Affiche le bouton nouvel algorithme |
undo | Affiche les boutons défaire/refaire. Même si ces boutons ne sont pas affichés, ces fonctionnalités peuvent être utilisées au clavier (Ctrl-z et Ctrl-y) |
indent | Affiche les boutons augmenter/diminuer le retrait. Même si ces boutons ne sont pas affichés, ces fonctionnalités peuvent être utilisées au clavier (Tab et shift-Tab) |
run | Affiche le bouton pour lancer l'algorithme |
repere | Affiche le bouton de configuration du repère algobox |
f1 | Affiche le bouton de configuration de la fonction algobox F1 F1 |
f2 | Affiche le bouton de configuration de la fonction algobox F2 F2 |
Les boutons ouvrir et enregistrer ne sont pas disponible en mode intégration sur une page web.
Exemples :
| Paramètre | Signification |
|---|---|
&boutons=aucun | Aucun bouton ne sera affiché. |
&boutons=algobox | Aucun bouton d'édition ne sera affiché, seuls les boutons d'algobox (,
F1, F2) le seront. Synonyme de &boutons=repere,f1,f2 |
&boutons=run,repere,f1 | Seuls les boutons , et F1 sont affichés. |
&boutons=run,algobox | Le bouton et les boutons algobox ( , F1 et F2) sont affichés. |
La communication entre votre page et l'iframe de Proglab ne peut se faire, pour des raisons liées au fonctionnement des navigateurs, qu'en mode asynchrone. C'est-à-dire que les fonctions de l'API ne renvoient aucune valeur. Leur retour se fait via une fonction callback passée en paramètre.
L'API comporte 8 fonctions, toutes accessibles via l'objet global Proglab qui a été créé par le script integration.js :
Exécute une fonction dès que la connexion est prête entre Proglab et la page principale.
Exemple :Cette fonction renvoie true si Proglab est prêt, false sinon.
Exemple :Demande le texte de l'algorithme courant (le contenu de l'éditeur) sous forme d'une chaîne.
Exemple :Remplace le texte de l'algorithme courant (le contenu de l'éditeur) par la chaîne donnée.
Exemple :Insère du texte dand l'éditeur à la position courante du curseur.
Exemple :Demande le texte produit par l'algorithme lors de sa dernière exécution, sous forme d'une chaîne. Ceci n'est valable que si le panneau de sortie a été supprimé. Si le panneau de sortie est présent, la sortie de l'algorithme n'est pas interceptée, et le message de retour est vide.
Exemple :Demande la traduction en JavaScript du code de l'éditeur.
Exemple :Lance l'algorithme avec en option les valeurs d'entrée, et renvoie le contenu de la sortie via le callback.
Valable uniquement si le panneau de sortie a été supprimé. Si le panneau de sortie est présent, la sortie de l'algorithme n'est pas interceptée, et le message de retour est vide.
| Paramètre facultatif | Statut | Valeur | Signification |
|---|---|---|---|
| input | facultatif | chaîne ou tableau de chaînes | Toutes les valeurs demandées par l'algorithme par les instructions LIRE (en algobox)
ou input (en javascript). Chaque chaîne représente une entrée. S'il n'y en a pas assez pour satisfaire l'algorithme, il recevra des valeurs undefined pour les entrées manquantes. Si ce paramètre n'est pas utilisé, les entrées ne sont pas interceptées et l'algorithme utilise la boîte de dialogue standard pour interagir avec l'utilisateur. |
| custom | facultatif | n'importe quoi | Cet objet, quel qu'il soit, sera renvoyé à l'identique avec la valeur de retour. On l'utilise (typiquement un nombre) pour identifier la sortie reçue dans le callback, quand on lance plusieurs fois l'exécution d'un algorithme avec le même callback. Dans ce cas en effet, à cause de la nature asynchrone de la communication, il n'y a aucune garantie que les différentes exécutions se fassent ni au fur et à mesure qu'elles sont demandées (il peut y avoir un délai indéterminé) ni même dans le même ordre. (Voir la démo) |
Voir la démo.