La Bibliothèque Open eLearning possède des objets Pédagogiques qui suffisent pour la plupart des projets.

Cependant pour optimiser vos créations pédagogiques il peut être utile de créer vos propres objets et vos propres fonctions directement implémentés dans l’interface du logiciel.

Open eLearning vous offre la possibilité de vous créer vos propres objets grâces aux plugins.

Ce tutoriel est là pour vous expliquer le développement et l’intégration automatiques de ceux-ci.

Les prérequis :

Tout d’abord, vérifier si le plug-in existe dans les plugins existants, s’il n’existe pas : vérifier si un plug-in se rapproche du vôtre, de façon à limiter votre travail.

Ensuite, il vous faudra connaître le JavaScript et le CSS. L’avoir pratiqué en ayant créé des programmes ou applications est un plus, car vous saurez comment organiser votre code.

Si vous ne connaissez pas le JavaScript, vous pouvez suivre les tutoriels du site CODE ACADEMY.

Pas obligatoire mais pratique le Framework JQUERY qui est implémenté par défaut dans Open eLearning

Par ailleurs, je vous conseille l’environnement de travail Visual Studio Code Je vous le recommande véritablement, car il est très simple à utiliser et met en évidence les erreurs de programmation.

La structure d’un plugin :

Un plugin est simplement un dossier système avec les fichiers suivant:

• run.js
• run.css
• plugin.xml
• folder resources
• folder form (optional)
• icon.png (see on Toolbar Open eLearning)

Le fichier icon.png

Le fichier icon.jpg est l’image affichée dans Open eLearning  il faut une image de taille 60px par 60px.

Le fichier run.css

Le code CSS nécessaire a votre plugin

Le fichier run.js

Les méthodes onPaint () et onZoom () sont appelés respectivement à l’exécution du plugin

onPaint permet de créer le DOM

onZoom permet de redimensionner les éléments en fonction de la variable zoom  de l’écran

isOK permet de savoir si l’objet est bon ou mauvais (pour le score si haveScore/conditionalObject est a 1 dans le fichier plugin.xml) Dans le cas où il s’agit d’un objet conditionnel, cette fonction renvoi True ou False pour le rendre valide ou non. ( Voir action sur bouton « next page is OK »)

viewResults (facultatif) permet voir les résultats 

viewErrors (facultatif) permet voir les erreurs

sendObjMemory (facultatif) mémorise les interactions

retrieveObjMemory (facultatif) récupère les interactions

Le dossier forms :

Fenêtre d’édition dans le logiciel (libre a vous de la personnaliser)

Exemple de fenêtre d’édition :

Je recommande bootstrap.css pour la mise en forme.

Voir exemple de code : https://github.com/open-elearning/open-elearning-plugins/tree/master/simulsmartphone/forms

Le fichier plugin.xml (exemple)

Ce fichier contient les informations de paramétrage du plugin et la définition des fichiers qui vont être intégrés.

Descriptif des balises :

var h = ”;

h += ‘<div id=”bloc’ + obj.id + ‘” ‘;

h +=  ‘ style=”border: solid 1px red; position:absolute;” ‘;

h += ‘ class=”bloc’ + obj.id + ‘” >’;

h += ‘</div>’;

return h ;

}

Note : La classe bloc + obj.id est une classe reconnue automatiquement qui redimensionne l’objet proportionnellement au zoom de l’écran.

function onZoom(obj){

var largw = parseInt(obj.w * zoom);

var largh  = parseInt(obj.h * zoom);

$(“.votreid” + obj.id) .css(“height”,largh + “px”).css(“width”,largw + “px”);

}

function isOK(obj)(

return true;

)

Plugins Samples :

https://github.com/open-elearning/open-elearning-plugins

Test your “Plugin Code” directly on Open eLearning :

On Windows :

C:\Users\UserName\AppData\Roaming\Electron\openelearning\plugins

On Linux :

/home/UserName/.config/OpenElearning/openelearning/plugins

On Mac OS :

/Users/UserName/OpenElearning/openelearning/plugins

Source : https://www.openelearning.org/docs/files/ContributorCode.html