Utiliser un plugin

Guide d'utilisation de plugins pour ePoc

Ce guide vous montrera comment utiliser un plugin JavaScript dans un ePoc.

Installer un plugin

  1. Créer ou télécharger les fichiers d'un plugin
  2. Ajouter un plugin dans les paramètres de l'ePoc
  3. Ajouter le fichier javascript du plugin (obligatoire)
  4. Ajouter le fichier template du plugin (optionnel)

Ajouter un plugin

Intégrer un template

Intégrer dans une page de texte

Si votre plugin déclare un template vous pouvez ensuite l'intégrer à l'aide du shortcode prédéterminé.

Exemple : En repartant de l'exemple "Hello World" du guide de création d'un plugin

// plugin.js

ePoc.onLoad = () => {
    // Executé lorsque le plugin est chargé à l'ouverture de l'ePoc
    console.log('Hello World')

    // Le plugin retourne le nom du template et le shortcode pour l'intégrer dans les pages de texte
    return {
        template: 'plugin_template.html',
        shortcode: '[#hello_world]' // Shortcode à définir ici
    };
}

<!-- plugin_template.html -->

<html lang="en">
<head>
    <!-- Feuille de style pour avoir un affichage identique à l'app mobile -->
    <link rel="stylesheet" href="/assets/css/plugin-embed.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Script pour avoir accès à l'API -->
<script src="/assets/js/plugin-api-embed.js"></script>
<script>
    // Votre logique métier ici
</script>
</body>
</html>

Intégrer un template

Embed plugin hello avec shortcode

Intégrer dans un quiz

Si votre plugin déclare un template vous pouvez aussi l'intégrer dans une question personnalisée.

Exemple : En repartant de l'exemple "Question personnalisée" du guide de création d'un plugin

// plugin.js

ePoc.onLoad = () => {
    // Executé lorsque le plugin est chargé à l'ouverture de l'ePoc
    console.log('Hello World')

    // Le plugin retourne le nom du template et le shortcode pour l'intégrer dans les pages de texte
    return {
        template: 'plugin_template.html',
        shortcode: '[#hello_world]' // Shortcode à définir ici
    };
}

<!-- plugin_template.html -->
<!-- Question personnalisée champ texte libre -->
<html lang="en">
<head>
    <link rel="stylesheet" href="/assets/css/plugin-embed.css">
</head>
<body>
<form>
    <!-- Champ texte -->
    <input type="text"/>
</form>
<script src="/assets/js/plugin-api-embed.js"></script>
<script>
    const userInput = document.querySelector('input');
    // Quand l'utilisateur tape du texte
    userInput.addEventListener('keyup', (event) => {
        // On envoie la réponse à l'app
        plugin.emit('user-responded', userInput.value)
    });
</script>
</body>

Intégrer un plugin dans une question

Ce qui donne comme résultat :

PReview de la question custom

Créer un plugin
Guide de création de plugins pour ePoc
Accueil
ePoc (Electronic Pocket Open Course) est une solution complète de mobile learning libre et ouverte. Gratuite et open source. Développée par Inria.