Skip to content

Commit b7baed8

Browse files
author
aryan
committed
Added GeoGebra and Desmos Graphs functionality
1 parent 97ae8b7 commit b7baed8

6 files changed

Lines changed: 220 additions & 1 deletion

File tree

‎content/blog/math/add-geogebra-graphs-in-HUGO-as-shortcode.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
---
2+
title: Integrate GeoGebra into a Hugo website as a shortcode
3+
description: 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:-
4+
date: 2025-05-17
5+
authors:
6+
- name: Aryan
7+
link: https://github.com/simplearyan
8+
image: https://github.com/simplearyan.png
9+
tags:
10+
- Math
11+
excludeSearch: true
12+
width: nomral
13+
image: "/images/svg/github-wallpaper.svg"
14+
---
15+
16+
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:
17+
18+
<!-- more -->
19+
20+
---
21+
22+
## 1. Create a Custom GeoGebra Shortcode
23+
24+
**A. Using iframe Embed (Simplest Method)**
25+
26+
1. **Create the shortcode file:**
27+
- In your Hugo project, go to `layouts/shortcodes/geogebra.html` (or `layouts/shortcodes/geogebra-iframe.html` if you want to distinguish methods).
28+
2. **Add the following code:**
29+
30+
```html
31+
{{ $materialID := .Get "id" | default "" }}
32+
{{ $width := .Get "width" | default "800" }}
33+
{{ $height := .Get "height" | default "600" }}
34+
<iframe
35+
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"
36+
width="{{ $width }}"
37+
height="{{ $height }}"
38+
style="border:0;"
39+
allowfullscreen>
40+
</iframe>
41+
```
42+
43+
3. **Use the shortcode in your content:**
44+
45+
````html
46+
{{< geogebra id="YOUR_MATERIAL_ID" width="800" height="600" >}}
47+
````
48+
49+
50+
**B. Using the JavaScript Method (More Flexible, Requires Script)**
51+
52+
1. **Create the shortcode file:**
53+
- Go to `layouts/shortcodes/geogebra-js.html`.
54+
2. **Add the following code:**
55+
56+
```html
57+
{{ $materialID := .Get "id" | default "" }}
58+
{{ $width := .Get "width" | default "800" }}
59+
{{ $height := .Get "height" | default "600" }}
60+
<div id="ggb-element-{{ $materialID }}"></div>
61+
<script src="https://www.geogebra.org/apps/deployggb.js"></script>
62+
<script>
63+
var params = {
64+
"appName": "graphing",
65+
"width": {{ $width }},
66+
"height": {{ $height }},
67+
"showToolBar": true,
68+
"showAlgebraInput": true,
69+
"showMenuBar": true,
70+
"material_id": "{{ $materialID }}"
71+
};
72+
var applet = new GGBApplet(params, true);
73+
window.addEventListener("load", function() {
74+
applet.inject('ggb-element-{{ $materialID }}');
75+
});
76+
</script>
77+
```
78+
79+
3. **Use the shortcode in your content:**
80+
81+
````markdown
82+
<!-- {{< geogebra-js id="YOUR_MATERIAL_ID" width="800" height="600" >}} -->
83+
````
84+
85+
86+
---
87+
88+
## Graph
89+
90+
{{< geogebra-js id="fe9vckwu" width="800" height="600" >}}
91+
92+
93+
## 2. How Hugo Shortcodes Work
94+
95+
- **Shortcodes** are templates that allow you to insert dynamic content into your Markdown files[^1][^2][^4].
96+
- **Custom shortcodes** are placed in the `layouts/shortcodes` directory and can accept both named and positional arguments[^2][^4].
97+
- **Usage** is straightforward: just call the shortcode name in your content, optionally passing parameters[^1][^2].
98+
99+
---
100+
101+
## 3. Additional Notes
102+
103+
- **Security:** If you use inline shortcodes, ensure you trust your content authors and enable `enableInlineShortcodes` in your Hugo config if needed[^1].
104+
- **Naming:** You can name your shortcode anything you like (e.g., `geogebra`, `geogebra-iframe`, `geogebra-js`)[^2][^4].
105+
- **Parameters:** Use named parameters (like `id`, `width`, `height`) for clarity and flexibility[^2].
106+
107+
---
108+
109+
This approach allows you to easily embed GeoGebra applets in your Hugo site using shortcodes, making your content more interactive and visually engaging.
110+
111+
<div style="text-align: center">⁂</div>
112+
113+
[^1]: https://gohugo.io/content-management/shortcodes/
114+
115+
[^2]: https://gohugo.io/templates/shortcode/
116+
117+
[^3]: https://github.com/mfg92/hugo-shortcode-gallery/blob/master/README.md
118+
119+
[^4]: https://www.angela1c.com/posts/2021/03/shortcodes-in-hugo/
120+
121+
[^5]: https://jimfrenette.com/hugo/shortcodes/
122+
123+
[^6]: https://roneo.org/en/hugo-install-shortcode-collection/
124+
125+
[^7]: https://stackoverflow.com/questions/71736142/changing-hugos-built-in-figure-shortcode-to-add-lazy-loading-to-images
126+
127+
[^8]: https://www.siyavula.com/book-downloads/maths/Gr10_Mathematics_Learner_Eng_v11.pdf
128+
129+
[^9]: https://dynamicland.org/archived-media/2016/02/DL2016-02-17-3eaae2.pdf
130+

‎content/blog/math/desmos-vs-geogebra.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Side-by-Side comparison of **Desmos** and **GeoGebra** across key criteria
3+
description: Integrates with Google Classroom, Coursify.me, and remote learning systems
34
date: 2025-05-17
45
authors:
56
- name: Aryan
@@ -10,6 +11,7 @@ tags:
1011
excludeSearch: true
1112
width: nomral
1213
image: "/images/hello.jpg"
14+
toc: false
1315
---
1416

1517
<img src="https://r2cdn.perplexity.ai/pplx-full-logo-primary-dark%402x.png" class="logo" width="120"/>
@@ -40,6 +42,18 @@ Here is a detailed, side-by-side comparison of **Desmos** and **GeoGebra** acros
4042

4143
---
4244

45+
## Embed Graphs
46+
47+
#### Desmos Graph
48+
49+
<iframe src="https://www.desmos.com/calculator/j7o6cj1fil?embed" width="800" height="600" style="border: 1px solid #ccc" frameborder=0></iframe>
50+
51+
<iframe src="https://www.desmos.com/calculator/u7j7ai1klt?embed" width="500" height="500" style="border: 1px solid #ccc" frameborder=0></iframe>
52+
53+
#### GeoGebra Graph
54+
55+
<iframe src="https://www.geogebra.org/graphing/qhqxxhp9?embed" width="800" height="600" allowfullscreen style="border: 1px solid #e4e4e4;border-radius: 4px;" frameborder="0"></iframe>
56+
4357
## Key Takeaways
4458

4559
**Desmos:**
@@ -70,6 +84,33 @@ Here is a detailed, side-by-side comparison of **Desmos** and **GeoGebra** acros
7084

7185
Both are free, widely used, and highly respected in education. Many teachers use both, depending on the topic and classroom needs[^6][^14][^8].
7286

87+
## GeoGebra Shortcode
88+
89+
{{< geogebra material_id="qhqxxhp9" width="700" height="500" app="graphing" toolbar="false" algebra="false" menu="false" >}}
90+
91+
## GeoGebra Shortcode 2
92+
93+
{{< geogebra material_id="qhqxxhp9" width="700" height="500" app="graphing" toolbar="true" algebra="true" menu="true" >}}
94+
95+
## i frame
96+
97+
<iframe src="https://www.geogebra.org/material/iframe/id/qhqxxhp9/width/800/height/600/border/888888/sfsb/false/smb/false/stb/false/stbh/false/ai/false/sdz/false/sfbl/false" width="800" height="600" style="border:0px;"></iframe>
98+
99+
<iframe src="https://www.geogebra.org/material/iframe/id/qhqxxhp9/width/800/height/600/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/sdz/false/sfbl/false" width="800" height="600" style="border:0px;"></iframe>
100+
101+
## i frame 2
102+
103+
<iframe scrolling="no"
104+
src="https://www.geogebra.org/material/iframe/id/qhqxxhp9/width/800/height/715/border/888888/rc/false/ai/false/sdz/false/smb/false/stb/false/stbh/false/ld/false/sri/false"
105+
width="800px"
106+
height="715px"
107+
style="border:0px;" allowfullscreen>
108+
</iframe>
109+
110+
<iframe src="https://www.geogebra.org/graphing/fe9vckwu?embed" width="800" height="600" allowfullscreen style="border: 1px solid #e4e4e4;border-radius: 4px;" frameborder="0"></iframe>
111+
112+
<iframe src="https://www.geogebra.org/material/iframe/id/fe9vckwu/width/800/height/600/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/sdz/false/sfbl/false" width="800" height="600" style="border:0px;"></iframe>
113+
73114
<div style="text-align: center">⁂</div>
74115

75116
[^1]: https://teaching.cambriancollege.ca/technologies/desmos-for-the-classroom/

‎content/exercises/graded-assignments/mathematics-1/W5GA1.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,9 @@ To determine which statements about the function \$ y = x^n \$ (where \$ n \$ is
3030
---
3131

3232
**Final Answer:**
33-
\boxed{Statements 4 and 5 are true.}
33+
34+
$\boxed{ Statements 4 and 5 are true. }$
35+
36+
$\boxed{3}$
37+
3438
{{< /border >}}

‎layouts/partials/custom/head-end.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
{{/* Venn Diagrams with Chart.js */}}
2828
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-venn"></script>
2929

30+
31+
<!-- GeoGebra integration -->
32+
<script src="https://www.geogebra.org/scripts/deployggb.js"></script>
33+
3034
{{/* KaTeX */}}
3135
<!-- https://katex.org/ -->
3236

‎layouts/shortcodes/geogebra-js.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{{ $materialID := .Get "id" | default "" }}
2+
{{ $width := .Get "width" | default "800" }}
3+
{{ $height := .Get "height" | default "600" }}
4+
<div id="ggb-element-{{ $materialID }}"></div>
5+
<script src="https://www.geogebra.org/apps/deployggb.js"></script>
6+
<script>
7+
var params = {
8+
"appName": "graphing",
9+
"width": {{ $width }},
10+
"height": {{ $height }},
11+
"showToolBar": true,
12+
"showAlgebraInput": true,
13+
"showMenuBar": true,
14+
"material_id": "{{ $materialID }}"
15+
};
16+
var applet = new GGBApplet(params, true);
17+
window.addEventListener("load", function() {
18+
applet.inject('ggb-element-{{ $materialID }}');
19+
});
20+
</script>

‎layouts/shortcodes/geogebra.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!-- filepath: d:\Code\hextra-notes\layouts\shortcodes\geogebra.html -->
2+
{{ $id := delimit (slice "ggb_%d" (partial "functions/uid.html" .)) "-" }}
3+
4+
{{/* {{ $id := printf "ggb_%d" now.UnixNano }} */}}
5+
<div id="{{ $id }}"></div>
6+
<script>
7+
var applet = new GGBApplet({
8+
{{ with .Get "material_id" }}"material_id": "{{ . }}",{{ end }}
9+
"appName": "{{ .Get "app" | default "graphing" }}",
10+
"width": {{ .Get "width" | default "600" }},
11+
"height": {{ .Get "height" | default "400" }},
12+
"showToolBar": {{ .Get "toolbar" | default "false" }},
13+
"showAlgebraInput": {{ .Get "algebra" | default "false" }},
14+
"showMenuBar": {{ .Get "menu" | default "false" }}
15+
}, true);
16+
window.addEventListener("load", function() {
17+
applet.inject('{{ $id }}');
18+
});
19+
</script>
20+

0 commit comments

Comments
 (0)