Einzelschritte zur Erzeugung eines GeoGebra HTML-Applets

Diese lassen sich einfach automatisiseren mit ggb2html

A Vorbereitung

  1. Download der aktuellen Geogebra-Version
  2. Öffnen des Geogebra-Programms und speichern einer leeren Vorlagen-Datei
    Datei > Speichern unter > geogebra_leer.ggb
    ODER einer eigenen bereits veränderten Geogebra-Datei ODER einer geeigneten Vorlage von GeoGebraTube z.B. für die 5. oder 6. Jahrgangsstufe Mathematik

B HTML-Seitenvorlage erstellen

Mit einem einfachen Texteditor wie Gedit, Geany oder Notepad++ wird eine Datei mit dem Namen geogebra_web.html mit folgendem Inhalt erstellt:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Geogebra-Applet in HTML-Seite</title>
    <script type="text/javascript" src="https://www.geogebra.org/web/5.0/web/web.nocache.js"></script>
  </head>
  <body>
    <h1>Geogebra-Applet<h1>
    <article class="geogebraweb"
             id="applet1"
             data-param-id="applet1"
             data-param-showMenubar="true"
             data-param-showToolbar="true"
             data-param-showAlgebraInput="true"
             data-param-showResetIcon="true"
             data-param-width="640"
             data-param-height="480"
             data-param-language="de" 
             data-param-ggbbase64="..."></article>
  </body>
</html>

Dabei kann man das spätere Aussehen des Applets wie folgt über die Parameter des article-Elements steuern:

ParameterBedeutungmögliche Werte
id
data-param-id		ID für späteren DOM-Zugriff über JavaScriptz.B. applet1 (keine Leerzeichen, keine Umlaute, keine Minuszeichen!)
data-param-showMenubarHauptmenüleiste anzeigen?true oder false
data-param-showToolbarWerkzeugleiste anzeigen?true oder false
data-param-showAlgebraInput Untere Algebra-Eingabezeile anzeigen?true oder false
data-param-showResetIcon Zurücksetzen-Icon anzeigen?true oder false
data-param-widthBreite in Pixelnz.B. 640
data-param-heightHöhe in Pixelnz.B. 480
data-param-languageSprachez.B. de, en, fr, es
data-param-ggbbase64Geogebra GGB-Datei als Base64 codierte DataURLs.u.

Quelle:
[1] Applet_Parameters

C Gespeicherte GGB-Datei in DataURL umwandeln und in HTML-Seitenvorlage einfügen

  1. Gehe auf die Seite alles2dataurl
  2. Lade die gespeicherte Datei geogebra_leer.ggb dort hinein
  3. Kopiere die gesamte dort angezeigte, sehr lange Zeichenkette in die Zwischenablage
  4. Füge diese sehr lange Zeichenkette in der HTML-Vorlagendatei als Wert zu der Eigenschaft data-param-ggbbase64="" zwischen die doppelten Hochkommata ein.

Vorschau:

Geogebra-Applet

D Das eingebette Applet kann anschließend noch mit JavaScript und Formularfeldern gesteuert werden

Tipp: Mit dem neuen Scripting-Tutorial kann man das eingebettete GGB-Applet anschließend auch über HTML-Buttons steuern oder eine eigene GGB-Fernsteuerung bauen!