GGB数学云 在Markdown中嵌入GeoGebra图形

在Markdown中嵌入GeoGebra图形

2017年7月13日 人阅读 Markdown»GeoGebra

摘要: 基于 GeoGebra Math Apps Bundle 在网页展示动态图形，在 Markdown 正文中嵌入GeoGebra图形内容。

1
2
3
4
5
6
7
<div id="applet_container"></div>
<script>
  injectGGBApplets(createGGBApplet('applet_container', 'preview.png', {
    width: 400, height: 184, borderColor: 'none',
    ggbBase64: 'UEsDBBQACAAIAPl5ZEM...AAA=='
  }))
</script>

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
<style>.applet { display: inline-block; margin-right: 4px } #xy { text-align: center }</style>
<p id="xy">此处将显示点坐标</p>
<div id="applet1" class="applet"></div><div id="applet2" class="applet"></div>
<script>
  injectGGBApplets(createGGBApplet('applet1', 'preview.png', {
    width: 400, height: 184,
    ggbBase64: 'UEsDBBQACAAIAPl5ZEM...AAA==',
    appletOnLoad: function() {
      applet1.registerUpdateListener('pointChanged1');
    }
  }), {
    width: 400, height: 184, id: 'applet2',
    ggbBase64: 'UEsDBBQACAAIAPl5ZEM...AAA==',
    appletOnLoad: function() {
      applet2.registerUpdateListener('pointChanged2');
    }
  });
  function pointChanged(name, ggbApplet) {
    if (ggbApplet.getObjectType(name) === 'point') {
      document.getElementById('xy').innerText = name + ': (' + ggbApplet.getXcoord(name) +
       ', ' + ggbApplet.getYcoord(name) + ')';
    }
  }
  function pointChanged1(name) { pointChanged(name, applet1) }
  function pointChanged2(name) { pointChanged(name, applet2) }
</script>

此处将显示点坐标

Hexo Markdown GeoGebra
基于Hexo对网站改版
分享到： 更多