Geogebra graphics embedded web page, Hexo article

This is the 18th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Geogebra is an excellent mathematical drawing tool for describing and demonstrating mathematical images with interactive and powerful capabilities. This article describes how to embed geogebra in a Web page.

Requirements describe

The power of Geogebra enticed me to implement demo features in my blog, with some self-defined requirements:

• I can show you my own designgeogebraGraphics;
• Interactive control with slider;
• Can support animation automatic demonstration;
• Do not bring other edit controls, can only control my design part;
• Can control the display of graphics buttons;
• Do not rely ongeogebraThe official website, build their own services;
• You can easily insert, edit and delete each demo content in your blog/web page.
• Don’t rely on shared links, only on actual demo information;
• The speed should not be too slow;
• Demo graphics should be centered.

Research report

I did a few days of research in order to meet the above requirements. There is very little and very mixed information on the Internet clearly about this matter. I have gathered the information I obtained here.

geogebra

• Official website: www.geogebra.org/

• The most popular versions are Geogebra 5 and Geogebra 6

• Geogebra 5 is more classic and can export animations, while geogebra 6 does not support animation exports

• Both export GGB files and HTML code

• However, demo diagrams using official HTML code must have editing tool controls, and deletion will invalidate the graphics

desmos

• desmosAlso similar to math sketchpad tool, load quickly, embed link sharing is very convenient, use logic andgeogebraAlmost the same
• One issue that had to be deprecated was that the exported demo didn’t have sliders and couldn’t interact dynamically

Geogebra graphic information

• In fact, there is a fixed format for drawing graphic information
• In order to uniquely identify this information and quote it elsewhere, I am currently aware of four methods:
  • material_idSome in:geogebraThe graphic on the official website has a fixed unique ID, which can be used as the identification to determine the content
  • GGB file: a file that directly records and saves graphic information
  • GgbBase64 code: a form of information storage in which graphic information is encoded as a stringGGB fileAre equivalent
  • Share link: you can upload the edited graphicsgeogebraThe official website, the official website generated a unique link to return for sharing
• Of the four ways, sharing links is the most convenient and does not require any modifications to the blog/web projectiframeInsert reference controls to import graphics directly from the official website
• I do not know how to obtain the material_id. I do not know much about it, and since this ID does not contain any content information, I always feel unreliable
• I trust itgeogebraGraphic reference form orGGB fileandGgbBase64 codeReference mode of
• Select the graphics shared by others and press the shortcut keyctrl + shift + BCan copy the graphggbBase64code

Learning materials

• geogebraThe production of thousands of tutorials, not in this table, this article focuses on graphics embedded web tutorial
• Embedded into the official tutorial: wiki.geogebra.org/en/Referenc…

At present to meet my needs to see the most reliable webmaster, here thank god to share, we need to go to his site to learn

• kz16.top/

Also this big guy, in B station released the video tutorial, very conscience

• www.bilibili.com/video/av803…

Webpage embedding method

iframe

The iframe element creates an inline frame (that is, an inline frame) that contains another document.

To obtaingeogebraThe graphiciframecode

• Open thegeogebra 6(web version, client can be),www.geogebra.org/classicAnd edit the content
• Get share link after share, replacesrcThe content part
• Here to blog.csdn.net/fatty_zhu/a…

<iframe scrolling="no" title=" src="https://www.geogebra.org/material/iframe/id/A25F9Tzs/width/1347/height/598/border/888888/smb/false/stb/false/stbh/f alse/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/true/ctl/false" width="800px" height="400px"> </iframe>Copy the code

• The above code can be run in a separate HTML file

Official website JS parsing GGB file information

• Download the drawn graphics intoGGB fileformat
• To upload the file to the network (reading local files is not allowed), the link must behttp, data, chrome, chrome-extension, chrome-untrusted, httpsOne of the types.
• Get the file link to my link photos.zywvvd.com/images_matr… As an example
• Paste code to an HTML file:

<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>

<div id="ggbApplet"></div>

<script>
var parameters = {
"id": "ggbApplet",
"width":468,
"height":492,
"showToolBar":true,
"language":"zh",
"filename":"https://photos.zywvvd.com/images_matrixtime/20201219164932.ggb",
};
// is3D=is 3D applet using 3D view, AV=Algebra View, SV=Spreadsheet View, CV=CAS View, EV2=Graphics View 2, CP=Construction Protocol, PC=Probability Calculator DA=Data Analysis, FI=Function Inspector, macro=Macros
var views = {'is3D': 0,'AV': 0,'SV': 0,'CV': 0,'EV2': 0,'CP': 0,'PC': 0,'DA': 0,'FI': 0,'macro': 0};
var applet = new GGBApplet(parameters, '5.0', views);
window.onload = function() {applet.inject('ggbApplet')};
applet.setPreviewImage('data:image/gif;base64,R0lGODlhAQABAAAAADs=','https://www.geogebra.org/images/GeoGebra_loading.png','https://www.geogebra.org/images/applet_play.png');
</script>
Copy the code

The official website js parses ggbBase64 information

• Actually follow the official tutorialWiki.geogebra.org/en/Referenc…

• Obtaining ggbBase64 can be mapped on geogebra.kz16.top/ to get the code directly

• You can also download the graphics into a web page. HTML format

• The result is the following code, which is pasted directly into an empty HTML file to run online.

<script src="https://cdn.geogebra.org/apps/deployggb.js"></script>

<div id="ggbApplet"></div>

<script>
var parameters = {
"id": "ggbApplet",
"width":468,
"height":492,
"showToolBar":true,
"language":"zh",
// use this instead of ggbBase64 to load a material from geogebra.org
// "material_id":"RHYH3UQ8",
// use this instead of ggbBase64 to load a .ggb file
// "filename":"myfile.ggb",
"ggbBase64":"UEsDBBQACAgIABxZk1EAAAAAAAAAAAAAAAAXAAAAZ2VvZ2VicmFfZGVmYXVsdHMyZC54bWztmk9z4jYUwM/dT+HRqT0EJIOBZOLsZHem08xks5km0+lV2MKoEZJrycHk01eWjG0WnAZDFpLdHCI/WX9/7+npSeb8YzZjziNJJBXcB6gDgUN4IELKIx+kanIyAh8vPpxHRERknGBnIpIZVj7w8pJlPS11Bi7M83Ac+yBgWEoaACdmWOVVfCAmE0Y5AY6TSXrGxQ2eERnjgNwFUzLD1yLAyrQ1VSo+63bn83ln2WtHJFFXNyy7mQy7UaQ6OgWOHjqXPigeznS7K7XnPVPPhRB1//5ybfs5oVwqzAM9ED2tkExwypTUj4SRGeHKUYuY+CAWlCvgMDwmzAe3ueT8OkkI+Q04RSVNC4KLD7+cy6mYO2L8Dwl0nkpSUtYzQjcvo19/FkwkTuKD4RA4kU3GPnA9T0Nj8RT7ANrCDC9I4jxiVubgVInA1De5E8wkWZbVPX0RIbFv+kV5TmcGpyMV0fqAHQQcGRMS6lGDYo7IqGdhNF1rMRAiCaWT+eAG3wBnUaRPNjVFDJ07+lR06tVz1YKR2tjPuwXYlyEOSUx4qAutcEatOA9GhnOejG3y2phfE3L/tSEPfkJugoy2p/yV19m6rdgi1zNwTfq9XMWbcBRX/E8S6THXGfd+Mt4r41UL7reiCw1b+EbJmiKWocz/67hGzGJGsj2CtzFRAfHaCCV0t118UYcODxRbwNbQcyAWn5rS4IETKXO2Vbv5wx801PuX6U/oGJIq3RIajmwL5F++ojSqdUZ1mecVMUl5oIxLKeB+TpPHujZ6fXgIfVRttl4BDcrYlXQzS0miXCq53C3lyrTbhXQ/ummLVLG85yuu9NGLGIOVa5N7ICS+10195fcJ5jI/f63aUrPmErx4TmveW9Daj6azpefijzgpNVHXWrvIqHHv7rjeoVW3hRuvg9g9iDkq893SNncyokG7pe/C/mZ6neERG9Gjnp6oMPxViFUo8CYCsyPzgxuiaZwoIinm/3c2YYuotqJvl3Kpj6HVx+5j3Pr06PWMTj20Zt8I2j/UP4UIDZB7aDU/D3jlHHJbZlSI0YEQH23I18wzEDy/+16eI6xUkuy/M+exhwMbjQi3Plc6TgZNsQU0lZ9g8VUiQ0ZeIPP2CdlsU18PPKGZc2lrXNqCl65Nejbp28QrAbU7JRrVxtpv1aLkbzaHfrujzVtyJe9S6d8hUufpjCQ113CzlEvj8axz0O2lZEW1L3AFTXbSbBWS0VCb0IxqJZ1o7c1wZrSIx1KwVJG7ICGEV5/mrBnPaaimeWin+57QLDcX26YzFQl9ElyVNJx8FVwy8xFv5Spjk/m4z0WuK8a6m3vGPGLVary0UqUBe1dvCn17jbdJMXWGsEA46LijHhp5PThEw1NvNHghUjSqkNoXLya6bh8I7sFCtlrn7qZ1jpOguiPtwc2OB3YgGva9nnvqeuj0tK8fvP0fBX8vM6pjzTFe6RkLWCv6ard1TASprO6grVQSGr2zcAWnGWUUJ4vdbH0rwopkVcBwb4TajwiOEHDzVDT2qBralZVqX+rtZCZUU+R4pivYTij/hIOHKBEpD9e3ob1MHR3atpqhjYVgBFeO6NNSrn0hXtv4mwAVe+0hV18wJcHDWGQre9XzPobKagVcG6H25XbDCnj5LNf3uZODm0Kbu7mtPig2BCh1BXRrP27qLn9JdfEfUEsHCHwZzHbqBAAA8SUAAFBLAwQUAAgICAAcWZNRAAAAAAAAAAAAAAAAFwAAAGdlb2dlYnJhX2RlZmF1bHRzM2QueG1s7ZjNbts4EMfP7VMQvFciZUmJgiiF0T3sAm2Qope9MtLYZlciVZKOrbxa36HP1BGpOHI3CRojCdCiPmT4NUPy9x9RYk7fbtuGXIGxUquS8ohRAqrStVTLkq7d4s0xfXv2+nQJegmXRpCFNq1wJc2GkTs/rEV5woY20XUlrRphrawo6RrhBpeS6sWikQooIVsrT5Q+Fy3YTlTwqVpBK97rSjgfa+VcdxLHm80mupk10mYZY2Abb20dL5cuQksJLl3Zko6FE4y7572Zeb+EMR7/++F9mOeNVNYJVeFCcFs1LMS6cRaL0EALyhHXd4Ab0EpWM5yjEZfQlPQf5XCvUA1LJNXaXKH/6FzSGc8YPXv96tSu9Iboy884rqTOrGHn7yvxMAa73+lGG2JKmnBKEDNnaC/RFgnya7qVKCmLOAs/nhaM85wnwb8RPRhyJTAoCy1i7XTlQ/rWhWgs3IzFyT/oGkJPOo5XsvWsiXWAYuHktgOofSlsn3nlep8E03go4CfXN0DcSlb/KbCIP5s4DYW/ZV3DkEvBB+QS1BUS0cai9szP0jM//JqNKbflvt5z33vNQ7P3x6UauSXz4DEPA+dJMLNg0mCyHRL4osI67fC3pJ0wmG4YqBr6T+NR7P/JLrbSzv7aqTYfqxOl2ewgpZkXmnmZ2a3IzyUpZs/zino/XzKWAXf97evDuP2DVAnjwEqhJo/bu6HjR/L5r0D+ObnfDxLjK5jwu/D1PX54DB7Eryg8wIQXHqG3uzMqeyqMldamtmRb0nNxjgfBaK9HuwnWD12I4eU0zhbxB2CyA2Hqpl9BbbS65TlpukU6G5Ee8gQ9VgaezbwOGf8xk6N0fFFkRc7SPH0yTQ5N7UeRnZtqJVuoQeyjxdfdS6FNeHgNp0ce7WB+D7YXPZ7Est7n+nIp648KXHwRuCa/Tc5eGGnbfar8Banm4UAOVIv8l6SqwO32eT6Up6dq9udUfQzLL2tR+y+vcasfb+pTpvzAC8r9R2OeFsPvKOfZMU8T/lSAnuOScecVY2gM94g+mOtkF/Cxtw4yz4M5CuY4mOLeG4lsu0ZW0j0srV2bBV6R7/pEHrv2VU4PUxn97vxIjo5+Nu1vA7/IZzL/2S+7eHLDj2/+nXD2HVBLBwgHivsrUgMAAPYQAABQSwMEFAAICAgAHFmTUQAAAAAAAAAAAAAAABYAAABnZW9nZWJyYV9qYXZhc2NyaXB0LmpzSyvNSy7JzM9TSE9P8s/zzMss0dBUqK4FAFBLBwjWN725GQAAABcAAABQSwMEFAAICAgAHFmTUQAAAAAAAAAAAAAAAAwAAABnZW9nZWJyYS54bWzlWOtv2zYQ/9z+FQd92iO2ST2twm6RDsM2IC2KphuGfaMk2uYiS5pIP1L0j98dKcly2mDJWhQY5kSmSB7v9TvekV68OG5L2MtWq7paenzKPJBVXheqWi+9nVlN5t6L508Xa1mvZdYKWNXtVpilFxHlsA5709hnNCaaZunlpdBa5R40pTC0ZOnVq1WpKumBKpZekuaFHyZykkRxOAmjNJykYhVOmJwH0YoxKVLuARy1elbVr8VW6kbk8jrfyK24qnNhrNSNMc2z2exwOEx7/aZ1u56hCnp21MVsvc6m2HqARlZ66XUvz5Dv2epDYNf5jPHZ76+unJyJqrQRVY4qkwN26vnTJ4uDqor6AAdVmM3SC+O5Bxup1hv0SJj6HsyIqEG3NDI3ai81Lh11rfFm23iWTFQ0/8S9QTnY5UGh9qqQ7dJj09BPgoidvgMP6lbJynTEvBM669kt9koeHF96syJDliYIl9IqK+XSW4lSExLVqkXfDn1tbkuZCRRr2h32TxrxC/uHJOq9JHYItHMFzjF2QU+CTxQxp85IdsTRL6auS8uZwQfgEDF8gKdwAXGCIz7wCEIcmeNIAgGNRTyEAIiEBxCG2IY0zGOcoWn8RnHAOc6Az8D3wefgB9iNIoiQLKG1PtLGqeXH8CFq1AifgMaCAB87FoT4+PSGjCLHBvWIgti+RUSN/COfLLCDwRzCFAXRQJRwCFAH7CcMkGNA7Lm1I2RA/xxCYu8n4M8B+aHpxJn5jwGmG7iDTI9L9ClcYnwsYHdwCc9RQRAY2nZBDXcNqRvHboq5MRa4xndN6JrI0YRueehInbUsdDRh8Llm9kYGjzFyPjKSkxEICmlvmwBIb271pybsurHr2mhjnHWjc/pKqYM+ief25TNtCv6VTXwk1W3UR2zkXiJP5w+X+HkhOljpE2sjsqV3efXTjy/fXj7C5s909WB2NHJ0hAmL/u3zkcjgUVbf7+iHS4zPtuRXN5j78y8jM5w/WGbCPpmFXMu79usAsZj1hXPRaQR6Q7TdHjNyq0nHIIUkgNgfCllMdaarZokPSQRJPKppF1TV4uhU2Kiszc8KWzQ/r24xDSa2VKI8KkyuzPlhX+kuulr34aNah6UpPFUnVJBYcQCspjZr9WUKtfCHQuVHVKt8zGtYI32IKU/eU7PwTFdrNfh2I8tmQMG6UVXNzpy5Lt8W/aupkVqU9qzW0Rd1fvNycHbHSQptxmzxeHM6Rbnjztkh68miFJnEA+b6miIBYC9K2kNWwqquDPRR4HuWnT3PLeQuL1WhRPUbQt+fnV7vtplswb7WZKRlQsvh0we/IHUkeV23xfWtxkiB4x+yxcV+zKfp6DPHZHjbTQX+lI0+HHe/zgUFeZieLUpx5rabitjZIhbETrbcX0tj0H4N4ih17+91q4rx+y/6ZV0Wg2ebWlXmB9GYXWsP/KhdS0ZdVutSWk9akPE8nN9k9fHapfHY8Xp321DpcvKz9Q91WbeAO9CPIiTo2sy1loYUG6iYpWGWosOJmA7znI7T667NXGup6BbhQHaG8t5K1ktRGlz/LAptgNDhelcpc9V3jMpvToYSvYO/9+A5S/6FWC5mdyJvcSPbSpYuiirEcVfvtAtiB5XVY6flG2E2l1XxVq5xB74RlAQNsnakJ40LmastLnTjnecEoforqupGC7luZW+h25LOr93eAd20UhR6I6UZvOtifExmzenVX2B5L6VN71uFGWKC4G3F0R4hcF803XZa6LxVDYUrZJiqb+QpJAuliUUxMpxcotG2nLIOuteQazF9iJ3Z1K29LwmDQ/ZWdajbG6vyO3k0ILJ6jzPFCmNIloTcem1ZylJu8RIFxgZxtdvKlu6rHaLCskIDd52ZfRJAMKHO/sS8cycGTq7H6XuCHETZbARd6viw51PGecz70Ba3lHhGqctyf1UXd9Qo6XbYeTjqPIytyHRd7gxelBHY6nRRdpp2ucuewo505sSsQgnFg5U6jhBAn6r3GIRDRNkYvnQRMrb0tBPNBmMer5+0HamiW6d2Lz+ropDVoLuoMDAtkJi+pdtTA32DHrCJ6IT9rEPqHzHL/j+Ypf8hzI6YRDT9StR7HbciDi69W1jCNwK+g+O38D1kPUf3I9HHW9SNDzwegCzIPd1yHwrwA+HszxTk/rtZ1yZHTUBNuAUKv9/bzv2+j+51PdSNyJUhNsm8q/J/VY6BdvUFHVkqpLnr9dk4Y9rjTvf72PO/AVBLBwi8SnA4iQYAAPETAABQSwECFAAUAAgICAAcWZNRfBnMduoEAADxJQAAFwAAAAAAAAAAAAAAAAAAAAAAZ2VvZ2VicmFfZGVmYXVsdHMyZC54bWxQSwECFAAUAAgICAAcWZNRB4r7K1IDAAD2EAAAFwAAAAAAAAAAAAAAAAAvBQAAZ2VvZ2VicmFfZGVmYXVsdHMzZC54bWxQSwECFAAUAAgICAAcWZNR1je9uRkAAAAXAAAAFgAAAAAAAAAAAAAAAADGCAAAZ2VvZ2VicmFfamF2YXNjcmlwdC5qc1BLAQIUABQACAgIABxZk1G8SnA4iQYAAPETAAAMAAAAAAAAAAAAAAAAACMJAABnZW9nZWJyYS54bWxQSwUGAAAAAAQABAAIAQAA5g8AAAAA",
};
// is3D=is 3D applet using 3D view, AV=Algebra View, SV=Spreadsheet View, CV=CAS View, EV2=Graphics View 2, CP=Construction Protocol, PC=Probability Calculator DA=Data Analysis, FI=Function Inspector, macro=Macros
var views = {'is3D': 0,'AV': 0,'SV': 0,'CV': 0,'EV2': 0,'CP': 0,'PC': 0,'DA': 0,'FI': 0,'macro': 0};
var applet = new GGBApplet(parameters, '5.0', views);
window.onload = function() {applet.inject('ggbApplet')};
applet.setPreviewImage('data:image/gif;base64,R0lGODlhAQABAAAAADs=','https://www.geogebra.org/images/GeoGebra_loading.png','https://www.geogebra.org/images/applet_play.png');
</script>
Copy the code

Local JS parses ggbBase64 information

• Continue to act according to the official tutorial wiki.geogebra.org/en/Referenc…
• Mainly in theOffline and Self-Hosted SolutionThis part of
• The need toDownload the relevant JS files(deployggb.jsand5.0 / the web3d)
• configurationdeployggb.jsand5.0 / the web3dThe location of the
• I will bedeployggb.jsOn the/vvd_js/deployggb.jsUnder;web3dOn the5.0 / the web3d / / vvd_js /location
• I will bedeployggb.jsOn the/vvd_js/deployggb.jsUnder;web3dOn the5.0 / the web3d / / vvd_js /location
• I will bedeployggb.jsOn the/vvd_js/deployggb.jsUnder;web3dOn the5.0 / the web3d / / vvd_js /location
• I will bedeployggb.jsOn the/vvd_js/deployggb.jsUnder;web3dOn the5.0 / the web3d / / vvd_js /location

It is recommended to place them in the Source folder of the Hexo directory, and then set skip-render in the Hexo configuration file to save these JS files, which are compatible with all themes

• Algebraic area enter the formula y=ax+by= AX +by=ax+b to create the graph
• To center the image, add a style setting to the calling div modulestyle='margin:0 auto':
• To sum up, attach the following code to the HTML:

<script src="/vvd_js/deployggb.js"></script>

<script>
var parameters = {
"id": "ggbApplet",
"width":500,
"height":500,
"showResetIcon":true,
"borderColor":"white",
"language":"en",
"ggbBase64":"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"};
var applet = new GGBApplet(parameters, '5.0');
applet.setHTML5Codebase('/vvd_js/5.0/web3d/');
applet.setHTML5Codebase('/vvd_js/5.0/web3d/');
window.onload = function() {applet.inject('ggbApplet')};
</script>

<div id="ggbApplet" style='margin:0 auto'></div>
Copy the code

Local JS parses GGB file information

• The same as the official website to parse GGB files, first obtainGGB file, upload the file and get the link
• The aboveggbBase64Replace withfilename, attach a link, paste code to the page

<script src="{path to your deployggb.js}"></script> <script> var parameters = { "id": "ggbApplet", "width":500, "height":500, "borderColor":"white", "language":"en", "filename":"https://photos.zywvvd.com/images_matrixtime/20201219164932.ggb"}; Var applet = new GGBApplet(parameters, '5.0'); The applet. SetHTML5Codebase (' 5.0 / the web3d/'); window.onload = function() {applet.inject('ggbApplet')}; </script> <div id="ggbApplet"></div>Copy the code

Parameter Settings in the process of parsing GGB information

• Reference: wiki.geogebra.org/en/Referenc…
• Parameters can be set according to individual requirements

Hexo securely incorporates Geogebra best practices

• Personal preferred best practice path:

Graph TD A --> B -->C -->C -->D --> F -->C -->D -->D --> F C -- ggbBase64 code -->E[CTRL + Shift +B] --> G

• Advantages:
• Provide their own services, not bound by the official website
• Use graphic source files to provide a secure presentation
• Interactive, with sliders, to meet most presentation needs
• The process is relatively simple and clear
• Loading speed acceptable
• The same effect can be displayed on mobile phones
• The environment blends seamlessly into the Hexo blog environment

The resources

• www.geogebra.org/
• Blog.csdn.net/fatty_zhu/a…
• www.bilibili.com/video/av803…
• kz16.top/
• Wiki.geogebra.org/en/Referenc…