Blog
Integrate GeoGebra into a Hugo website as a shortcode

Integrate GeoGebra into a Hugo website as a shortcode

To integrate GeoGebra into a Hugo website as a shortcode, you can create a custom shortcode that embeds the GeoGebra applet using either the JavaScript method or an iframe. Here’s a step-by-step guide for both options:-

Integrate GeoGebra into a Hugo website as a shortcode
May 17, 2025·Aryan
Aryan

To integrate GeoGebra into a Hugo website as a shortcode, you can create a custom shortcode that embeds the GeoGebra applet using either the JavaScript method or an iframe. Here’s a step-by-step guide for both options:

1. Create a Custom GeoGebra Shortcode

A. Using iframe Embed (Simplest Method)

  1. Create the shortcode file:
    • In your Hugo project, go to layouts/shortcodes/geogebra.html (or layouts/shortcodes/geogebra-iframe.html if you want to distinguish methods).
  2. Add the following code:
{{ $materialID := .Get "id" | default "" }}
{{ $width := .Get "width" | default "800" }}
{{ $height := .Get "height" | default "600" }}
<iframe
  src="https://www.geogebra.org/material/iframe/id/{{ $materialID }}/width/{{ $width }}/height/{{ $height }}/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/sdz/false/sfbl/false"
  width="{{ $width }}"
  height="{{ $height }}"
  style="border:0;"
  allowfullscreen>
</iframe>
  1. Use the shortcode in your content:

B. Using the JavaScript Method (More Flexible, Requires Script)

  1. Create the shortcode file:
    • Go to layouts/shortcodes/geogebra-js.html.
  2. Add the following code:
{{ $materialID := .Get "id" | default "" }}
{{ $width := .Get "width" | default "800" }}
{{ $height := .Get "height" | default "600" }}
<div id="ggb-element-{{ $materialID }}"></div>
<script src="https://www.geogebra.org/apps/deployggb.js"></script>
<script>
  var params = {
    "appName": "graphing",
    "width": {{ $width }},
    "height": {{ $height }},
    "showToolBar": true,
    "showAlgebraInput": true,
    "showMenuBar": true,
    "material_id": "{{ $materialID }}"
  };
  var applet = new GGBApplet(params, true);
  window.addEventListener("load", function() {
    applet.inject('ggb-element-{{ $materialID }}');
  });
</script>
  1. Use the shortcode in your content:
<!-- 









  
  


 -->

GeoGebra-JS Graph

Math/GeoGebra

i-frame

2. How Hugo Shortcodes Work

  • Shortcodes are templates that allow you to insert dynamic content into your Markdown files123.
  • Custom shortcodes are placed in the layouts/shortcodes directory and can accept both named and positional arguments23.
  • Usage is straightforward: just call the shortcode name in your content, optionally passing parameters12.

3. Additional Notes

  • Security: If you use inline shortcodes, ensure you trust your content authors and enable enableInlineShortcodes in your Hugo config if needed1.
  • Naming: You can name your shortcode anything you like (e.g., geogebra, geogebra-iframe, geogebra-js)23.
  • Parameters: Use named parameters (like id, width, height) for clarity and flexibility2.

This approach allows you to easily embed GeoGebra applets in your Hugo site using shortcodes, making your content more interactive and visually engaging.

⁂

  1. https://gohugo.io/content-management/shortcodes/ ↩︎ ↩︎ ↩︎

  2. https://gohugo.io/templates/shortcode/ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎

  3. https://www.angela1c.com/posts/2021/03/shortcodes-in-hugo/ ↩︎ ↩︎ ↩︎

Recommended Articles 📂🔥

Create Interactive Math Examples with GeoGebra

Math

Create Interactive Math Examples with GeoGebra

How to Use GeoGebra to Create Interactive Math Examples GeoGebra is a powerful, free online tool for creating dynamic, interactive math examples and lessons. It supports visualizations in geometry, algebra, calculus, and statistics, making abstract concepts more concrete and engaging for students123. Below is a step-by-step guide to help you get started, including best practices for layout, interactivity, and classroom use. Step 1: Choose Your Math Concept Decide what topic you want to illustrate (e.g., triangle properties, function graphs, transformations, calculus concepts)3. Example: Visualizing the effect of changing coefficients in a quadratic function. Step 2: Open GeoGebra and Start a New File Go to GeoGebra.org and select the appropriate app (Geometry, Graphing Calculator, etc.). Click “New” to create a blank workspace13. Step 3: Add Mathematical Objects Points: Click the point tool and place points on the canvas. Lines/Segments/Rays: Use the line, segment, or ray tools to connect points. Shapes: Select polygon, circle, or other shape tools as needed. Functions: Enter equations directly (e.g., y = ax^2 + bx + c). Sliders: Insert sliders to make variables interactive (e.g., for coefficients or angle measures)45. Example: Create a slider for a in y = a(x-2)^2 + 1 to let students see how changing a affects the parabola.

Integrating GeoGebra with Other Educational Tools and Platforms

Math

Integrating GeoGebra with Other Educational Tools and Platforms

Here’s how you can integrate GeoGebra with other platforms, along with practical examples and best practices.

Side-by-Side comparison of **Desmos** and **GeoGebra** across key criteria

Math

Side-by-Side comparison of **Desmos** and **GeoGebra** across key criteria

Integrates with Google Classroom, Coursify.me, and remote learning systems

Steps to Integrate GeoGebra with Microsoft OneNote

Math

Steps to Integrate GeoGebra with Microsoft OneNote

Integrating GeoGebra with Microsoft OneNote is straightforward and allows you (and your students) to embed interactive math applets directly into your notebooks.