在 Hexo 页面中嵌入多个 geogebra 动态图

本文最后更新于：2022年7月4日 上午

geogebra 动态图可以在网页中显示数学公式，本文记录显示多个geogebra的方法。

实现原理

  • 需要在 hexo 中可以嵌入 geogebra 图像
  • 在 script 语句中建立多个 GGBApplet 对象
  • 在 window.onload 函数中调用多个函数

实现方法

  1. 引入 js 文件
  • 本地文件
1
<script src="/vvd_js/deployggb.js"></script>  //路径指向自己建立的js文件
  • 官网文件
1
<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>
  1. 建立 GGBApplet 对象并显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>

// 建立自己的 ggb 参数
var parameters = {
"id": "ggbApplet",
"width":800,
"height":500,
"enableShiftDragZoom":true,
"showZoomButtons":true,
"appletOnLoad":function(api){ /* api.evalCommand('Segment((1,2),(3,4))');*/ },
"showFullscreenButton":true,
"language":"en",
 "filename":"https://101.43.39.125/HexoFiles/image_canglan/20210417165539.ggb",
};

// views 参数
var views = {'is3D': 0,'AV': 1,'SV': 0,'CV': 0,'EV2': 0,'CP': 0,'PC': 0,'DA': 0,'FI': 0,'macro': 0};

// GGBApplet 对象
var applet = new GGBApplet(parameters, '5.0', views);

// 展示 geogebra 图像
window.onload = function()
{applet.inject('ggbApplet');};

</script>

//展示对象
<div id="ggbApplet"></div>
  1. 多个 geogebra 图像显示
  • 建立多个 parameters 对象，对象中指定不同的 id，定制不同的 geogebra 内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var parameters1 = {
"id": "ggbApplet1",
"width":800,
"height":500,
"enableShiftDragZoom":true,
"showZoomButtons":true,
"appletOnLoad":function(api){ /* api.evalCommand('Segment((1,2),(3,4))');*/ },
"showFullscreenButton":true,
"language":"en",
 "filename":"https://101.43.39.125/HexoFiles/image_canglan/20210417165539.ggb",
};

var parameters2 = {
"id": "ggbApplet2",
"width":800,
"height":500,
"enableShiftDragZoom":true,
"showZoomButtons":true,
"appletOnLoad":function(api){ /* api.evalCommand('Segment((1,2),(3,4))');*/ },
"showFullscreenButton":true,
"language":"en",
 "filename":"https://101.43.39.125/HexoFiles/image_canglan/20210417220853.ggb",
};
  • 建立views对象（可以复用）
1
var views = {'is3D': 0,'AV': 1,'SV': 0,'CV': 0,'EV2': 0,'CP': 0,'PC': 0,'DA': 0,'FI': 0,'macro': 0};
  • 建立多个GGBApplet 对象
1
2
3
4
// GGBApplet 对象 applet1
var applet1 = new GGBApplet(parameters1, '5.0', views);
// GGBApplet 对象 applet2
var applet2 = new GGBApplet(parameters2, '5.0', views);
  • window.onload 展示多个函数
1
2
3
4
// 展示 geogebra 图像
window.onload = function()
{applet1.inject('ggbApplet1'); // 参数与 parameters 中的 id 对应
applet2.inject('ggbApplet2');};
  • 在 Hexo页面引用对象

效果展示

  • geogebra 图像 1
  • geogebra 图像 2

参考代码

示例代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script src="/vvd_js/deployggb.js"></script>
<script>
// 参数 parameters1
var parameters1 = {
"id": "ggbApplet1",
"width":800,
"height":500,
"enableShiftDragZoom":true,
"showZoomButtons":true,
"appletOnLoad":function(api){ /* api.evalCommand('Segment((1,2),(3,4))');*/ },
"showFullscreenButton":true,
"language":"en",
 "filename":"https://101.43.39.125/HexoFiles/image_canglan/20210417165539.ggb",
};
// 参数 parameters2
var parameters2 = {
"id": "ggbApplet2",
"width":800,
"height":500,
"enableShiftDragZoom":true,
"showZoomButtons":true,
"appletOnLoad":function(api){ /* api.evalCommand('Segment((1,2),(3,4))');*/ },
"showFullscreenButton":true,
"language":"en",
 "filename":"https://101.43.39.125/HexoFiles/image_canglan/20210417220853.ggb",
};
// views 参数
var views = {'is3D': 0,'AV': 1,'SV': 0,'CV': 0,'EV2': 0,'CP': 0,'PC': 0,'DA': 0,'FI': 0,'macro': 0};

// GGBApplet 对象 applet1
var applet1 = new GGBApplet(parameters1, '5.0', views);
// GGBApplet 对象 applet2
var applet2 = new GGBApplet(parameters2, '5.0', views);

// 展示 geogebra 图像
window.onload = function()
{applet1.inject('ggbApplet1');
applet2.inject('ggbApplet2');};
</script>

- geogebra 图像 1
<div id="ggbApplet1"></div>

- geogebra 图像 2
<div id="ggbApplet2"></div>

参考资料



文章链接：
https://www.zywvvd.com/notes/tools/geogebra/multi-geogebra/multi-geogebra/

Tools > Geogebra
#Tools #Geogebra
在 Hexo 页面中嵌入多个 geogebra 动态图
https://www.zywvvd.com/notes/tools/geogebra/multi-geogebra/multi-geogebra/
作者
Yiwei Zhang
发布于
2021年4月17日
许可协议