Différences entre versions de « Référence:Appliquettes imbriquées »
Ligne 6 : | Ligne 6 : | ||
Afin d'imbriquer des applis GeoGebra dans vos pages, vous devez inclure les trois parties suivantes dans votre fichier HTML : | Afin d'imbriquer des applis GeoGebra dans vos pages, vous devez inclure les trois parties suivantes dans votre fichier HTML : | ||
+ | {{Step|num=1}} Pour que le dimensionnement soit correct, assurez vous que la section <code><head></code> contienne : | ||
+ | <pre> <meta name=viewport content="width=device-width,initial-scale=1"></pre> | ||
− | {{Step|num= | + | {{Step|num=2}} La bibliothèque javascript ''deployggb.js'' doit être appelée par cette balise : |
<pre> <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre> | <pre> <script src="https://cdn.geogebra.org/apps/deployggb.js"></script></pre> | ||
− | {{Step|num= | + | {{Step|num=3}} Pour chaque appliquette, un objet javaScript de type GGBApplet doit être créé. |
<pre> <div id="ggb-element"></div></pre> | <pre> <div id="ggb-element"></div></pre> | ||
− | {{Step|num= | + | {{Step|num=4}} Configurer et imbriquer les appliquettes |
<pre><script> | <pre><script> | ||
Ligne 26 : | Ligne 28 : | ||
Dans ces exemples, le paramètre 'showtoolbar:true' modifie la configuration des fichiers. | Dans ces exemples, le paramètre 'showtoolbar:true' modifie la configuration des fichiers. | ||
− | |||
=Exemples= | =Exemples= |
Version du 27 avril 2018 à 08:07
Cette page explique comment imbriquer GeoGebra Applis dans votre site web.
Pour plus d'informations sur la manière d'interagir sur les appliquettes imbriquées, consulter GeoGebra Applis API.
Démarrage rapide
Afin d'imbriquer des applis GeoGebra dans vos pages, vous devez inclure les trois parties suivantes dans votre fichier HTML :
1 Pour que le dimensionnement soit correct, assurez vous que la section <head>
contienne :
<meta name=viewport content="width=device-width,initial-scale=1">
2 La bibliothèque javascript deployggb.js doit être appelée par cette balise :
<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>
3 Pour chaque appliquette, un objet javaScript de type GGBApplet doit être créé.
<div id="ggb-element"></div>
4 Configurer et imbriquer les appliquettes
<script> var ggbApp= new GGBApplet({appName: "graphing", width:800, height:600, showToolBar:true, showAlgebraInput:true, showMenuBar:true }, true); window.addEventListener("load", function() { ggbApp.inject('ggb-element'); }); </script>
Modifier simplement le nom de l'application dans le paramètre appName de "graphing" en "geometry" ou "3d" pour obtenir une autre de nos applis.
Vous pouvez personnaliser nos applications en utilisant l'un des nombreux paramètres . Voir Référence:Paramètres_Appliquette la liste de tous les paramètres.
Dans ces exemples, le paramètre 'showtoolbar:true' modifie la configuration des fichiers.
Exemples
Les exemples suivants et leur code html montrent comment imbriquer des appliquettes GeoGebra :
GeoGebra Apps API
Les exemples suivants montrent comment vous pouvez interagir avec des appliquettes imbriquées via l' GeoGebra Apps API:
- Afficher & Cacher des objets à l'aide de boutons
- Sauvegarder & Charger des états
- Écouter des événements : actualisation, addition , suppressions
Imbriquer en tant qu'iframe
La méthode décrite sur cette page offre de meilleures performances, plus de flexibilité et permet une intégration plus profonde.
Vous pouvez récupérer automatiquement le code pour l'iframe. Voici un exemple :
<iframe scrolling="no" title="Patron Soma1" src="https://www.geogebra.org/material/iframe/id/Y7AtGKpU/width/976/height/916/border/888888/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/true/ctl/false" width="976px" height="916px" style="border:0px;"> </iframe>
La langue de l'interface utilisateur de GeoGebra (barre d'outils, menu, ...) est déterminée par la langue par défaut du navigateur. Pour utiliser une autre langue, vous pouvez ajouter le paramètre ?ggbLang=<lang_code> à la fin de l'URL, par ex. : ?ggbLang=fr, ?ggbLang=zh_CN, ?ggbLang=zh_TW
Description | Code | Exemple |
---|---|---|
Autorise Clic droit, Zoom et Édition au clavier | rc | /rc/true |
Affiche le champ de saisie | ai | /ai/true |
Autorise Glisser/Déposer & Zoom | sdz | /sdz/true |
Affiche la barre de menus | smb | /smb/true |
Affiche la barre d'outils | stb | /stb/true |
Affiche l'aide de la barre d'outils | stbh | /stbh/true |
Autorise le déplacement des étiquettes | ld | /ld/true |
Affiche l'icône de réinitialisation (coin supérieur droit) | sri | /sri/true |
Affiche un bouton pour démarrer la construction | ctl | /ctl/true |
Définit la langue de l'interface utilisateur (Notez le format différent pour ce paramètre ) | ggblang | ?ggblang=en |
Imbriquer en utilisant deployggb.js
Vous pouvez utiliser JavaScript pour intégrer facilement GeoGebra Math Apps dans votre site Web et interagir avec en utilisant l' API JavaScript .
Cette méthode est recommandée lorsque plusieurs appliquettes HTML5 sont imbriquées dans une page.
Dans ce cas elle peuvent partager une seule instance du code de base GeoGebraWeb et être chargées plus rapidement.
Voici un exemple de page web pour montrer comment imbriquer des appliquettes :
Exemples (sans traductions)
Les exemples suivant montrent comment interagir avec des appliquettes imbriquées via GeoGebra Applis API:
- Unique appliquette
- Unique appliquette 3D
- Deux appliquettes
- Unique appliquette + API
- Deux appliquettes + API
- Unique appliquette + API pour sauvegarde
- Apps avec barre d'outils
- Apps avec barre d'outils dans un dialogue
- Mouchards d'événements
- Communication entre appliquettes
- Math Apps dans pop-up
- Exercice(beta)
Solution hors ligne et autonome
Nous vous suggérons d'utiliser les ressources à partir de notre réseau de diffusion de contenu (cdn.geogebra.org) comme indiqué ci-dessus, mais au cas où vous devriez utiliser les ressources hors ligne ou héberger tous les fichiers nécessaires vous-même, vous pouvez le faire en utilisant le «Paquet GeoGebra Math Apps» . Télécharger Paquet GeoGebra Math Apps
Les codes d'imbriquation sont presque identiques à ceux ci-dessus, avec deux différences : la balise pour inclure deployggb.js doit être modifiée ainsi :
<script src="GeoGebra/deployggb.js"></script>
et vous devez inclure la ligne suivante avant l'appel à inject()
ggbApp.setHTML5Codebase('GeoGebra/HTML5/5.0/web3d/');
Les paramètres de la méthode inject()
sont :
Paramètre | Description |
---|---|
containerID | Une chaîne avec l'id de l'objet HTML devant être le parent de l'appliquette. |
appletType | l'un des mots-clés suivants :
|
es:Referencia:Applet Embebido
en:Reference:GeoGebra Apps Embedding