Public
Edited
Aug 30, 2023
Importers
Insert cell
Insert cell
Insert cell
GGBApplet = {
const ggbapplet = await require("https://cdn.geogebra.org/apps/deployggb.js");
window.GGBApplet=ggbapplet;
return ggbapplet
}
Insert cell
//https://dev.to/somedood/the-proper-way-to-write-async-constructors-in-javascript-1o8c
class ggbTube{
constructor(id,width=800,height=450,init = (api)=>{} ){
this.random=Math.floor(Math.random()*10000);
this.ggb_id=id
this.id=`ggbhtml_${id}${this.random}`;
this.url=`https://www.geogebra.org/m/${id}`
this.apiid=`ggbapi_${id}${this.random}`;
this.eventid=`appletOnload_$${id}${this.random}`
this.appletOnloadEvent= new Event(this.eventid);
this.html=html`<div id="${this.id}"></div>`;
this.parameters={
"appName": "classic",
"id":this.apiid,
"material_id":id,
"width": width, "height": height,
"showToolBar":false,
"borderColor":null,
"showMenuBar":false,
"showAlgebraInput":false,
"customToolbar":"0 || 1",
"showResetIcon":true,
"enableLabelDrags":false,
"showZoomButtons":true,
"enableShiftDragZoom":true,
"enableRightClick":false,
"capturingThreshold":null,
"showToolBarHelp":false,
"errorDialogsActive":false,
"useBrowserForJS":false,
"appletOnLoad": (api)=>{
this.html.dispatchEvent(this.appletOnloadEvent)
init(api);
}
}
this.views = {'is3D': 0,'AV': 1,'SV': 0,'CV': 0,'EV2': 0,'CP': 0,'PC': 0,'DA': 0,'FI': 0,'PV': 0,'macro': 0};
this.applet=new GGBApplet(this.parameters,'5.0',this.views);
//this.applet.setHTML5Codebase('https://www.geogebra.org/apps/5.0.721.0/web3d/');
this.applet.inject(this.id);
}
api(){
if(window[this.apiid]===undefined){
return new Promise((resolve,reject) => {
this.html.addEventListener(this.eventid, (e) => { resolve(window[this.apiid]) }, false);
});
}
else{
return window[this.apiid];
}
}
show(){
return this.html
}
link(content=this.url){
return html`<a href="${this.url}" target="_blank">${content}</a>`
}
}
Insert cell
class ggbBase64{
constructor(base64,id,width=800,height=450,options={}){
this.applet=new GGBApplet({"appName": "classic","ggbBase64":base64, "width": width, "height": height, "showToolBar": false, "showAlgebraInput": false, "showMenuBar": false })
this.id=`geogebra${id}`
this.html=html`<div id="${this.id}"></div>`
//window.onload=(event)=>{
this.applet.inject(this.id)
//};
return this.html;
}
}
Insert cell
// Not working
class ggbFile{
constructor(filename,width=800,height=450){
this.id=`id_${filename}`;
this.applet=new GGBApplet({"appName": "classic","fielname":filename, "width": width, "height": height, "showToolBar": false, "showAlgebraInput": false, "showMenuBar": false })
this.output=html`<div id="${this.id}"></div>`
this.applet.inject(this.id);
}
}
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more