### Show Initial Start Screen and Language

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/3d-template-beta.html

This function is responsible for displaying the initial start screen of the application. It determines the user's preferred language by checking URL parameters, cookies, local storage, and the browser's language settings. It then calls `showInEnglish` and `switchLang` to set up the correct language.

```javascript
function showStartScreen(){
  var lang = getURLparam("lang") || getCookie("GeoGebraLangUI") || getLocalStorage("GeoGebraLangUI") || navigator.language || "en";
  window.setTimeout(showInEnglish, 1000);
  switchLang(validLang(lang));
}
```

--------------------------------

### Handle Mobile Start Screen (JavaScript)

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/whiteboard-template.html

Configures the start screen for mobile devices, including setting up app links for Android and iOS, displaying app names, and adding 'Try App' and 'Continue' buttons. It also handles the insertion of scripts upon continuing.

```javascript
function mobileStartscreen(){
 var link = false;
 var androidLinks = {"geometry":"https://play.google.com/store/apps/details?id=org.geogebra.android.geometry", "graphing":"https://play.google.com/store/apps/details?id=org.geogebra.android", "3d":"https://play.google.com/store/apps/details?id=org.geogebra.android.g3d"};
 var iosLinks = {"graphing":"https://itunes.apple.com/us/app/geogebra-graphing-calculator/id1146717204", "geometry":"https://itunes.apple.com/us/app/geogebra-geometry-calculator/id1232591335"};
 if(/iPhone|iPad|iPod/i .test(window.navigator.userAgent)){
 link = iosLinks[window.appID];
 } else {
 link = androidLinks[window.appID];
 }
 if(!link){
 return false;
 }
 var nameText = c("appName").innerText;
 var appName = document.createElement("H1");
 appName.innerText = nameText;
 appName.clasName = "appName";
 c("appName").parentElement.className += " mobile";
 c("GeoGebraFrame").remove();
 c("mk-spinner-wrap").remove();
 c("startscreen").style.textAlign="center";
 c("logo").className += " mobile";
 //c("GeoGebraHeader").style.display= "none";
 var tryApp = document.createElement("a");
 tryApp.innerText = translation.tryApp || "Try App";
 var stay = document.createElement("a");
 stay.innerText = translation.stay || "Continue";
 c("startscreen").appendChild(appName);
 c("startscreen").appendChild(tryApp);
 c("startscreen").appendChild(stay);
 stay.addEventListener("click",function(){
 stay.style.opacity = 0;
 tryApp.style.opacity = 0;
 insertScript();
 });
 tryApp.className = "tryApp";
 tryApp.target = "_blank";
 tryApp.rel = "noreferrer noopener";
 tryApp.href = link;
 return true;
 }
```

--------------------------------

### Display Initial Start Screen and Set Language (JavaScript)

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/3d-template.html

Initializes the application by showing the start screen and setting the correct language. It determines the language from URL parameters, cookies, local storage, or the browser's default, then validates and switches to that language. A timeout is used to ensure the English display is set.

```javascript
function showStartScreen() {
  var lang = getURLparam("lang") || getCookie("GeoGebraLangUI") || getLocalStorage("GeoGebraLangUI") || navigator.language || "en";
  window.setTimeout(showInEnglish, 1000);
  switchLang(validLang(lang));
}
```

--------------------------------

### Install node-geogebra Package

Source: https://github.com/jmulet/node-geogebra/blob/master/README.md

Installs the node-geogebra package as a project dependency using npm.

```bash
npm i --save node-geogebra
```

--------------------------------

### Handle Mobile Start Screen and App Links (JavaScript)

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/3d-template-beta.html

The `mobileStartscreen` function prepares a mobile-friendly start screen for GeoGebra applications. It detects the user's operating system (iOS or Android) and provides appropriate app store links. It also modifies the DOM to display app information and navigation elements.

```javascript
function mobileStartscreen(){
    var link = false;
    var androidLinks = {"geometry":"https://play.google.com/store/apps/details?id=org.geogebra.android.geometry", "graphing":"https://play.google.com/store/apps/details?id=org.geogebra.android", "3d":"https://play.google.com/store/apps/details?id=org.geogebra.android.g3d"};
    var iosLinks = {"graphing":"https://itunes.apple.com/us/app/geogebra-graphing-calculator/id1146717204", "geometry":"https://itunes.apple.com/us/app/geogebra-geometry-calculator/id1232591335"};
    if(/iPhone|iPad|iPod/i .test(window.navigator.userAgent)){
        link = iosLinks[window.appID];
    } else {
        link = androidLinks[window.appID];
    }
    if(!link){
        return false;
    }
    var nameText = c("appName").innerText;
    var appName = document.createElement("H1");
    appName.innerText = nameText;
    appName.clasName = "appName";
    c("appName").parentElement.className += " mobile";
    c("GeoGebraFrame").remove();
    c("mk-spinner-wrap").remove();
    c("startscreen").style.textAlign="center";
    c("logo").className += " mobile";
    //c("GeoGebraHeader").style.display= "none";
    var tryApp = document.createElement("a");
    tryApp.innerText = translation.tryApp || "Try App";
    var stay = document.createElement("a");
    stay.innerText = translation.stay || "Continue";
    c("startscreen").appendChild(appName);
    c("startscreen").appendChild(tryApp);
    c("startscreen").appendChild(stay);
    stay.addEventListener("click",function(){
        stay.style.opacity = 0;
        tryApp.style.opacity = 0;
        insertScript();
    });
    tryApp.className = "tryApp";
    tryApp.target = "_blank";
    tryApp.rel = "noreferrer noopener";
    tryApp.href = link;
    return true;
}
```

--------------------------------

### GeoGebra Start Screen Initialization

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/graphing-template.html

This function initializes the GeoGebra start screen by determining the user's preferred language. It checks URL parameters, cookies, local storage, and the browser's navigator settings to set the language. It then calls `showInEnglish` and `switchLang` to apply the detected language.

```javascript
function showStartScreen(){
    var lang = getURLparam("lang") || getCookie("GeoGebraLangUI") || getLocalStorage("GeoGebraLangUI") || navigator.language || "en";
    window.setTimeout(showInEnglish, 1000);
    switchLang(validLang(lang));
}
```

--------------------------------

### Initialize Mobile Start Screen for GeoGebra (JavaScript)

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/geometry-template.html

Handles the creation and display of a mobile-optimized start screen for GeoGebra. It detects the operating system (iOS or Android) and provides appropriate links to download the native GeoGebra apps. It also modifies the UI to be mobile-friendly.

```javascript
function mobileStartscreen(){
  var link = false;
  var androidLinks = {"geometry":"https://play.google.com/store/apps/details?id=org.geogebra.android.geometry", "graphing":"https://play.google.com/store/apps/details?id=org.geogebra.android", "3d":"https://play.google.com/store/apps/details?id=org.geogebra.android.g3d"};
  var iosLinks = {"graphing":"https://itunes.apple.com/us/app/geogebra-graphing-calculator/id1146717204", "geometry":"https://itunes.apple.com/us/app/geogebra-geometry-calculator/id1232591335"};
  if(/iPhone|iPad|iPod/i .test(window.navigator.userAgent)){
    link = iosLinks[window.appID];
  } else {
    link = androidLinks[window.appID];
  }
  if(!link){
    return false;
  }
  var nameText = c("appName").innerText;
  var appName = document.createElement("H1");
  appName.innerText = nameText;
  appName.clasName = "appName";
  c("appName").parentElement.className += " mobile";
  c("GeoGebraFrame").remove();
  c("mk-spinner-wrap").remove();
  c("startscreen").style.textAlign="center";
  c("logo").className += " mobile";
  var tryApp = document.createElement("a");
  tryApp.innerText = translation.tryApp || "Try App";
  var stay = document.createElement("a");
  stay.innerText = translation.stay || "Continue";
  c("startscreen").appendChild(appName);
  c("startscreen").appendChild(tryApp);
  c("startscreen").appendChild(stay);
  stay.addEventListener("click",function(){
    stay.style.opacity = 0;
    tryApp.style.opacity = 0;
    insertScript();
  });
  tryApp.className = "tryApp";
  tryApp.target = "_blank";
  tryApp.rel = "noreferrer noopener";
  tryApp.href = link;
  return true;
}
```

--------------------------------

### GeoGebra Perspective Setup and URL Parameter Handling

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/3d-template-beta.html

Configures the GeoGebra applet's perspective based on provided IDs and names. It also sets parameters from the URL and updates the browser history for navigation.

```javascript
function setParamFromURL(paramName){
  if(getURLparam(paramName)){
    e("ggw").setAttribute("data-param-"+paramName,getURLparam(paramName));
  }
}

function perspective(id, name){
  if(e("ggw")){
    e("ggw").className="geogebraweb";
    e("ggw").setAttribute("data-param-appname", window.appID || "classic");
    e("ggw").setAttribute("data-param-marginTop", marginTop);
    if(id){
      if((id+"").substring(0,4) == "exam") { e("ggw").setAttribute("data-param-enableGraphing","true"); }
      if(id == "exam-simple"){
        e("ggw").setAttribute("data-param-enableGraphing","false");
        e("ggw").setAttribute("data-param-enableCAS","false");
        e("ggw").setAttribute("data-param-enable3D","false");
      }
      if(id == "exam-graphing"){
        e("ggw").setAttribute("data-param-enableCAS","false");
        e("ggw").setAttribute("data-param-enable3D","false");
      }
      if(id == "exam-cas"){
        e("ggw").setAttribute("data-param-enableCAS","true");
        e("ggw").setAttribute("data-param-enable3D","false");
      }
      e("ggw").setAttribute("data-param-perspective",id);
    }
    setParamFromURL("filename");
    setParamFromURL("rounding");
    if(location.pathname.match(/lti/)){
      e("ggw").setAttribute("data-param-showAppsPicker","false");
      e("appsPicker") && e("appsPicker").style.setProperty("display", "none");
      c("GeoGebraHeader") && c("GeoGebraHeader").remove();
      e("ggw").setAttribute("data-param-marginTop",0);
    }
    if(window.ggbRerun){
      ggbRerun();
    }
  } else {
    if(id){
      ggbApplet.setPerspective(id+"");
    }
  }
  var label = e(name);
  if(label){
    parentTable(label).className += " perspectiveHighlighted";
  }
  if(name && window.history && window.history.pushState && name != "picker" && location.host.indexOf("geogebra") >= 0 && location.href.indexOf("?") < 0 && !location.pathname.match(/\/.*\/.+/) && !isLocalhost()){
    var unbundled = name == "graphing" || name == "geometry" || name == "whiteboard" || name == "notes" || name == "3d";
    if(name != "classic" && (location.pathname.indexOf("classic") > 0 || !unbundled)){
      name = "classic#" + name;
    }
    history.pushState({}, "GeoGebra", "/"+name);
  }
  return false;
}
```

--------------------------------

### JavaScript: GeoGebra Initialization and Login Check

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/GeoGebra.html

This JavaScript function, `checkLogin`, handles the initial setup and state checking for the GeoGebra application. It includes logic for installing workers, determining application IDs, managing mobile start screens, resizing elements, and setting various GeoGebra web component attributes based on URL parameters and environment.

```javascript
function checkLogin(){ installWorker();
var names = {'geometry':2, 'spreadsheet':3, 'cas':4, '3d':5, 'probability':6, 'graphing':1, 'whiteboard':7,'calculator':8};
var tubeid = getURLparam("id");
var checkId = location.pathname.match(/^\/(o|classic|graphing|geometry|3d|whiteboard|notes)\/([a-zA-Z0-9]+)/);

if(checkId && !names[checkId[2]]){ tubeid = checkId[2]; if(checkId[1] == "o"){ appID = "auto"; } }

var wait = false;
var skipAppsPicker = getURLparam("command") || getURLparam("state") || getURLparam("filename");

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i .test(window.navigator.userAgent) && c("appName") && !skipAppsPicker && !location.pathname.match(/lti/)){
 wait = mobileStartscreen();
}

function resizeStart(){
 if(e("perspectivesBox")){
  if(window.innerHeight < 650 || window.innerWidth < 650){
   e("perspectivesBox").style.display = "none";
  } else {
   e("perspectivesBox").style.top= (Math.max(0,Math.round(window.innerHeight/2 -250))-53)+"px";
  }
 }
}

resizeStart();
window.addEventListener && window.addEventListener("resize", resizeStart);

if(e("ggw")){
 if(lookAndFeel){ e("ggw").setAttribute("data-param-laf",lookAndFeel); }
 if(location.host.indexOf("beta") == 0 || getURLparam("prerelease") || prerelease){ setPrerelease(prerelease || "true"); }
 if(getURLparam("debug") || debug || isLocalhost()){ setDebug(debug || true); }
 if(location.host.indexOf("alpha") == 0){
  setPrerelease("canary");
  e("ggw").setAttribute("data-param-materialsApi",location.protocol+"//"+location.host+"/api/json.php");
  e("ggw").setAttribute("data-param-loginApi","https://"+location.host+"/api/login.php");
 }
 if(isLocalhost()){
  codebase = "./";
 }
}

if(tubeid){
 if(e("ggw")){
  e("ggw").setAttribute("data-param-tubeid",tubeid);
  if(window.appID){ e("ggw").setAttribute("data-param-perspective",names[appID]); }

  var previewDiv = document.createElement("div");
  previewDiv.id= "ggbsplash";
  previewDiv.style.zIndex=1000;
  var preview = document.createElement("img");
  preview.style.margin="auto";
  preview.style.position="absolute";

  var xhr = new XMLHttpRequest();
  var materialHost = isLocalhost() ? "https://beta.geogebra.org":"";
  xhr.open("GET", materialHost + "/api/material_preview.php?u="+tubeid);
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4 && xhr.response) {
    preview.addEventListener && preview.addEventListener("load",function(){
     preview.style.top=(window.innerHeight/2-preview.height/2)+"px";
     preview.style.left=(window.innerWidth/2-preview.width/2)+"px";
     c("logo") && c("logo").style.setProperty("display", "none");
    });
    preview.src = xhr.response.replace("http:","https:");
   }
  };
  xhr.send();
  previewDiv.appendChild(preview);
  document.body.appendChild(previewDiv);
  perspective(false);
  insertScript();
  return;
 }
} else if(getPerspective()){
 var pName = getPerspective();
 if( pName.substring(0,6)==="search" || pName.substring(0
}
```

--------------------------------

### Determining Environment and Starting GeoGebra

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/classic-template.html

Determines if the application is running in a local environment and sets up the initial state for GeoGebra. It retrieves the user's preferred language from URL parameters, cookies, or local storage, defaulting to English if not found. It then calls `showInEnglish` and `switchLang` to initialize the UI.

```javascript
function isLocalhost(){
    return location.protocol.match(/(chrome|app|file:)/) || location.host.match(/^(\[0-9.]*|(autotest|deploy).*geogebra.org|localhost)(:.+)?$/);
}

function showStartScreen(){
    var lang = getURLparam("lang") || getCookie("GeoGebraLangUI") || getLocalStorage("GeoGebraLangUI") || navigator.language || "en";
    window.setTimeout(showInEnglish, 1000);
    switchLang(validLang(lang));
}
```

--------------------------------

### Build node-geogebra Project

Source: https://github.com/jmulet/node-geogebra/blob/master/README.md

Installs TypeScript globally and compiles the project using the TypeScript compiler.

```bash
npm i -g typescript
tsc
```

--------------------------------

### CSS for GeoGebra Start Screen

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/3d-template-beta.html

Styles the start screen of the GeoGebra application, including links to try apps and the application name. It also defines styles for offline mode and the mobile logo.

```css
.startscreen a, .startscreen a:visited{
  margin: 10px;
  padding:8px;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  font-size:16px;
  color: rgba(0,0,0,0.85);
  text-decoration:none;
  display:inline-block;
  width: 250px;
  transition: 0.2s;
}
.startscreen a.tryApp, .startscreen a.tryApp:visited{
  background-color:#6557D2;
  color:rgba(255,255,255,0.85);
}
.startscreen .appName{
  margin-top: 0;
  margin-bottom: 10px;
}
.GeoGebraHeader a{
  color: #008475;
  text-decoration: none;
  padding: 0px 8px;
  margin-left: 5px;
  margin-right: 0px;
}
.GeoGebraHeader ul{
  list-style-type:none;
  margin: 0;
}
.GeoGebraHeader li{
  display: inline;
}
.GeoGebraHeader .links {
  padding: 3px 4px;
  font-size: 15px;
  margin: 0px;
}
.application .startscreen {
  display: none;
}
.startscreen{
  position: absolute;
  top: 64px;
  width: 100%;
  height:calc(100% - 64px);
}
.startscreen.offline{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.startscreen .logo{
  display:none;
}
.startscreen .logo.mobile{
  display:block;
widt
```

--------------------------------

### GeoGebra Application Initialization and Perspective Handling (JavaScript)

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/graphing-template.html

Handles the initialization of the GeoGebra application, including setting up perspectives based on application names and managing UI element visibility. It also includes logic for inserting scripts and showing the start screen.

```javascript
if(pName == "Arch" || pName.substring(0,4) == "exam"){
  if(e("perspectivesBox")){
    e("perspectivesBox").style.display = "none";
  }
  wait || perspective(pName);
} else {
  perspective(names[pName],pName);
}
document.body.className += " "+pName;
document.body.className += " "+module;
wait || insertScript();
showStartScreen();
return;
} else if(skipAppsPicker ){
  perspective(false);
  insertScript();
  return;
}
showStartScreen();
wait || insertScript();
perspective(false, "picker"); //TODO
```

--------------------------------

### Initialize GeoGebra Application

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/3d-template-beta.html

Handles the initialization of the GeoGebra application based on the application name and checks for specific conditions like 'exam' mode or if it's a Chrome web app. It manages perspective loading, script insertion, and start screen display.

```javascript
if(pName.substring(0,4) == "exam"){ if(e("perspectivesBox")){ e("perspectivesBox").style.display = "none"; } wait || perspective(pName); } else{ perspective(names\[pName],pName); } document.body.className += " "+pName; document.body.className += " "+module; wait || insertScript(); showStartScreen(); return; } else if(skipAppsPicker ){ perspective(false); insertScript(); return; } showStartScreen(); wait || insertScript(); perspective(false, "picker"); //TODO
```

--------------------------------

### GeoGebra Button and Label Setup

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/geometry-template-beta.html

Configures interactive buttons for selecting GeoGebra perspectives. It updates button labels based on provided translations and triggers the `perspective` function when a button is clicked.

```javascript
function button(id, perspectiveId, caption){
    var shortId = id.replace("perspective","");
    if(getPerspective() == shortId){
        changeMetaTitle(caption);
    }
    var ret = e(id);
    if (!ret) {
        return;
    }
    var parent = parentTable(ret);
    parent.addEventListener("click",function(){
        if(e("ggw")){
            e("ggw").setAttribute("data-param-showAppsPicker","false");
        }
        changeMetaTitle(ret.innerText);
        perspective(perspectiveId,id.replace("perspective",""));
    });
    ret.innerHTML = caption;
}
function setPickerLabels(dict){
    button("graphing", 1, dict["Graphing"] || "Graphing");
    button("geometry", 2, dict["Perspective.Geometry"] || "Geometry");
    button("cas", 4, dict["Perspective.CAS"] || "CAS Calculator");
    button("spreadsheet", 3, dict["Perspective.Spreadsheet"] || "Spreadsheet Calc");
    button("perspective3d", 5, dict["GeoGebra3DGrapher.short"] || "3D Calculator");
    button("probability", 6, dict["Perspective.Probabili"
}
```

--------------------------------

### Initialize GeoGebra Application and Perspectives (JavaScript)

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/whiteboard-template.html

This JavaScript code handles the initialization of the GeoGebra application. It manages different perspectives (like 'search' or 'exam'), dynamically loads scripts, and updates the body class to reflect the current module. It also includes logic for skipping the app picker and showing the start screen.

```javascript
if (pName === "search" || pName.substring(0,4) == "exam"){
  if(e("perspectivesBox")){
    e("perspectivesBox").style.display = "none";
  }
  wait || perspective(pName);
} else {
  perspective(names[pName],pName);
}

document.body.className += " "+pName;
document.body.className += " "+module;
wait || insertScript();
showStartScreen();
return;
} else if(skipAppsPicker ){
  perspective(false);
  insertScript();
  return;
}
showStartScreen();
wait || insertScript();
perspective(false, "picker"); //TODO
```

--------------------------------

### Manage Application Perspectives and Initialization (JavaScript)

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/classic-template.html

This JavaScript code handles the logic for managing application perspectives based on the current URL or application ID. It includes functions for initializing perspectives, inserting scripts, and showing the start screen. It also checks if the application is running as a Chrome web app.

```javascript
string(0,4) == "exam"){ if(e("perspectivesBox")){ e("perspectivesBox").style.display = "none"; } wait || perspective(pName); } else{ perspective(names\[pName\],pName); } document.body.className += " "+pName; document.body.className += " "+module; wait || insertScript(); showStartScreen(); return; } else if(skipAppsPicker ){ perspective(false); insertScript(); return; } showStartScreen(); wait || insertScript(); perspective(false, "picker"); //TODO } // test to see if the app is running as a chrome webapp document.isChromeWebapp = function isChromeWebapp() { if (typeof chrome === 'object' && typeof chrome.app === 'object' && typeof chrome.app.isInstalled === 'boolean' && chrome.app.isInstalled) { return true; } return false; };
```

--------------------------------

### Initialize Mobile Start Screen (JavaScript)

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/geometry-template-beta.html

Optimizes the GeoGebra interface for mobile devices by providing direct links to native apps and adjusting the layout. It detects the operating system (iOS or Android) and constructs appropriate app store links. The function also modifies the DOM to display app information and navigation elements.

```javascript
function mobileStartscreen(){
    var link = false;
    var androidLinks = {"geometry":"https://play.google.com/store/apps/details?id=org.geogebra.android.geometry", "graphing":"https://play.google.com/store/apps/details?id=org.geogebra.android", "3d":"https://play.google.com/store/apps/details?id=org.geogebra.android.g3d"};
    var iosLinks = {"graphing":"https://itunes.apple.com/us/app/geogebra-graphing-calculator/id1146717204", "geometry":"https://itunes.apple.com/us/app/geogebra-geometry-calculator/id1232591335"};
    if(/iPhone|iPad|iPod/i .test(window.navigator.userAgent)){
        link = iosLinks[window.appID];
    } else {
        link = androidLinks[window.appID];
    }
    if(!link){
        return false;
    }
    var nameText = c("appName").innerText;
    var appName = document.createElement("H1");
    appName.innerText = nameText;
    appName.clasName = "appName";
    c("appName").parentElement.className += " mobile";
    c("GeoGebraFrame").remove();
    c("mk-spinner-wrap").remove();
    c("startscreen").style.textAlign="center";
    c("logo").className += " mobile";
    var tryApp = document.createElement("a");
    tryApp.innerText = translation.tryApp || "Try App";
    var stay = document.createElement("a");
    stay.innerText = translation.stay || "Continue";
    c("startscreen").appendChild(appName);
    c("startscreen").appendChild(tryApp);
    c("startscreen").appendChild(stay);
    stay.addEventListener("click",function(){
        stay.style.opacity = 0;
        tryApp.style.opacity = 0;
        insertScript();
    });
    tryApp.className = "tryApp";
    tryApp.target = "_blank";
    tryApp.rel = "noreferrer noopener";
    tryApp.href = link;
    return true;
}
```

--------------------------------

### GeoGebra Button and Label Setup (JavaScript)

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/classic-template.html

This function `button` creates interactive buttons for GeoGebra perspectives. It sets the button's caption, associates it with a perspective ID, and adds a click event listener to change the applet's perspective and update the page title. The `setPickerLabels` function uses this to configure labels for various GeoGebra tools.

```javascript
function button(id, perspectiveId, caption){
    var shortId = id.replace("perspective","");
    if(getPerspective() == shortId){
        changeMetaTitle(caption);
    }
    var ret = e(id);
    if (!ret) {
        return;
    }
    var parent = parentTable(ret);
    parent.addEventListener("click",function(){
        if(e("ggw")){
            e("ggw").setAttribute("data-param-showAppsPicker","false");
        }
        changeMetaTitle(ret.innerText);
        perspective(perspectiveId,id.replace("perspective",""));
    });
    ret.innerHTML = caption;
}

function setPickerLabels(dict){
    button("graphing", 1, dict["Graphing"] || "Graphing");
    button("geometry", 2, dict["Perspective.Geometry"] || "Geometry");
    button("cas", 4, dict["Perspective.CAS"] || "CAS Calculator");
    button("spreadsheet", 3, dict["Perspective.Spreadsheet"] || "Spreadsheet Calc");
    button("perspective3d", 5, dict["GeoGebra3DGrapher.short"] || "3D Calculator");
    button("probability", 6, dict["Perspective.Probability"] || "Probabi")
}
```

--------------------------------

### Check GeoGebra Login and Initialize (JavaScript)

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/geometry-template-beta.html

This function performs several initialization tasks for GeoGebra, including installing workers, checking for mobile device optimization, setting up debugging and pre-release flags, and handling specific URL parameters like 'tubeid' for loading materials. It also includes logic for displaying material previews and setting the GeoGebra perspective.

```javascript
function checkLogin(){
    installWorker();
    var names = {'geometry':2, 'spreadsheet':3, 'cas':4, '3d':5, 'probability':6, 'graphing':1, 'whiteboard':7,'calculator':8};
    var tubeid = getURLparam("id");
    var checkId = location.pathname.match(/^\/(o|classic|graphing|geometry|3d|whiteboard|notes)\/([a-zA-Z0-9]+)/);
    if(checkId && !names[checkId[2]]){
        tubeid = checkId[2];
        if(checkId[1] == "o"){
            appID = "auto";
        }
    }
    var wait = false;
    var skipAppsPicker = getURLparam("command") || getURLparam("state") || getURLparam("filename");
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i .test(window.navigator.userAgent) && c("appName") && !skipAppsPicker && !location.pathname.match(/lti/)){
        wait = mobileStartscreen();
    }
    function resizeStart(){
        if(e("perspectivesBox")){
            if(window.innerHeight < 650 || window.innerWidth < 650){
                e("perspectivesBox").style.display = "none";
            } else {
                e("perspectivesBox").style.top= (Math.max(0,Math.round(window.innerHeight/2 -250))-53)+"px";
            }
        }
    }
    resizeStart();
    window.addEventListener && window.addEventListener("resize", resizeStart);
    if(e("ggw)){
        if(lookAndFeel){
            e("ggw").setAttribute("data-param-laf",lookAndFeel);
        }
        if(location.host.indexOf("beta") == 0 || getURLparam("prerelease") || prerelease){
            setPrerelease(prerelease || "true");
        }
        if(getURLparam("debug") || debug || isLocalhost()){
            setDebug(debug || true);
        }
        if(location.host.indexOf("alpha") == 0){
            setPrerelease("canary");
            e("ggw").setAttribute("data-param-materialsApi",location.protocol+"//"+location.host+"/api/json.php");
            e("ggw").setAttribute("data-param-loginApi","https://"+location.host+"/api/login.php");
        }
        if(isLocalhost()){
            codebase = "./";
        }
    }
    if(tubeid){
        if(e("ggw)){
            e("ggw").setAttribute("data-param-tubeid",tubeid);
            if(window.appID){
                e("ggw").setAttribute("data-param-perspective",names[appID]);
            }
            var previewDiv = document.createElement("div");
            previewDiv.id= "ggbsplash";
            previewDiv.style.zIndex=1000;
            var preview = document.createElement("img");
            preview.style.margin="auto";
            preview.style.position="absolute";
            var xhr = new XMLHttpRequest();
            var materialHost = isLocalhost() ? "https://beta.geogebra.org":"";
            xhr.open("GET", materialHost + "/api/material_preview.php?u="+tubeid);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.response) {
                    preview.addEventListener && preview.addEventListener("load",function(){
                        preview.style.top=(window.innerHeight/2-preview.height/2)+"px";
                        preview.style.left=(window.innerWidth/2-preview.width/2)+"px";
                        c("logo") && c("logo").style.setProperty("display", "none");
                    });
                    preview.src = xhr.response.replace("http:","https:");
                }
            };
            xhr.send();
            previewDiv.appendChild(preview);
            document.body.appendChild(previewDiv);
            perspective(false);
            insertScript();
            return;
        }
    } else if(getPerspective()){
        var pName = getPerspective();
        if( pName.substring(0,6)==="sea
```

--------------------------------

### Create and Use GGBPool

Source: https://github.com/jmulet/node-geogebra/blob/master/README.md

Demonstrates creating a GGBPool with custom options and preparing it for use.

```javascript
// Pool options
const poolOpts = {
    plotters: 3,    //Number of plotters in the pool
    ggb: 'local'    //local or remote: From where to load Geogebra app
};
const pool = new GGB.GGBPool(poolOpts);
await pool.ready();
// From now on, you can start taking plotters from the pool
```

--------------------------------

### JavaScript Application Logic and Startup

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/GeoGebra.html

Handles application startup, perspective switching, and script insertion based on application state. It also includes logic for checking if the app is running as a Chrome web app.

```javascript
if(e("perspectivesBox")){ e("perspectivesBox").style.display = "none"; } wait || perspective(pName); } else{ perspective(names[pName],pName); } document.body.className += " "+pName; document.body.className += " "+module; wait || insertScript(); showStartScreen(); return; } else if(skipAppsPicker ){ perspective(false); insertScript(); return; } //showStartScreen(); wait || insertScript(); perspective(false, "picker"); //TODO }
```

--------------------------------

### JavaScript: GeoGebra Mobile Start Screen Logic

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/GeoGebra.html

This JavaScript function manages the mobile start screen experience for GeoGebra. It detects the user's device (iOS or Android) and provides appropriate links to the respective app stores. It also dynamically updates the UI elements for a better mobile user experience.

```javascript
function mobileStartscreen(){ var link = false;
var androidLinks = {"geometry":"https://play.google.com/store/apps/details?id=org.geogebra.android.geometry", "graphing":"https://play.google.com/store/apps/details?id=org.geogebra.android", "3d":"https://play.google.com/store/apps/details?id=org.geogebra.android.g3d"};
var iosLinks = {"graphing":"https://itunes.apple.com/us/app/geogebra-graphing-calculator/id1146717204", "geometry":"https://itunes.apple.com/us/app/geogebra-geometry-calculator/id1232591335"};

if(/iPhone|iPad|iPod/i .test(window.navigator.userAgent)){ link = iosLinks[window.appID]; }
else { link = androidLinks[window.appID]; }

if(!link){ return false; }

var nameText = c("appName").innerText;
var appName = document.createElement("H1");
appName.innerText = nameText;
appName.clasName = "appName";
c("appName").parentElement.className += " mobile";
c("GeoGebraFrame").remove();
c("mk-spinner-wrap").remove();
c("startscreen").style.textAlign="center";
c("logo").className += " mobile";
//c("GeoGebraHeader").style.display= "none";

var tryApp = document.createElement("a");
tryApp.innerText = translation.tryApp || "Try App";
var stay = document.createElement("a");
stay.innerText = translation.stay || "Continue";

c("startscreen").appendChild(appName);
c("startscreen").appendChild(tryApp);
c("startscreen").appendChild(stay);

stay.addEventListener("click",function(){
 stay.style.opacity = 0;
 tryApp.style.opacity = 0;
 insertScript();
});

tryApp.className = "tryApp";
tryApp.target = "_blank";
tryApp.rel = "noreferrer noopener";
tryApp.href = link;

return true;
}
```

--------------------------------

### GeoGebra Initialization and Configuration (JavaScript)

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/GeoGebra.html

Initializes the GeoGebra web applet, sets default configurations, and handles various parameters for customization. It includes functions to retrieve and set parameters from the URL and manage the application's appearance and behavior.

```javascript
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function () { };
var latestVersion = "5.0.488.0";
var module = "web3d";
var lookAndFeel = "";
var prerelease = false;
var debug = false;
var startDelay = 0;
var marginTop = 0;
var analyticsVersion = 'V' + latestVersion;
var appOnline = true;
var translation = {};
var codebase = "https://cdn.geogebra.org/apps/latest/";
prerelease = false;
appOnline = true;

function e(id) {
  return document.getElementById(id);
}

function c(className) {
  return document.getElementsByClassName(className)[0];
}

var finalLang = null;

function setParamFromURL(paramName) {
  if (getURLparam(paramName)) {
    e("ggw").setAttribute("data-param-" + paramName, getURLparam(paramName));
  }
}

function changeMetaTitle(titleBase) {
  var title = titleBase.match(/GeoGebra/) ? titleBase : titleBase + " - GeoGebra";
  var tags = document.head.getElementsByTagName("meta");
  for (k in tags) {
    if (tags[k].getAttribute && tags[k].getAttribute("property") == "og:title") {
      tags[k].setAttribute("content", title);
    }
  }
  document.title = title;
}

function perspective(id, name) {
  if (e("ggw")) {
    e("ggw").className = "geogebraweb";
    e("ggw").setAttribute("data-param-appname", window.appID || "classic");
    e("ggw").setAttribute("data-param-marginTop", marginTop);
    if (id) {
      if ((id + "").substring(0, 4) == "exam") {
        e("ggw").setAttribute("data-param-enableGraphing", "true");
      }
      if (id == "exam-simple") {
        e("ggw").setAttribute("data-param-enableGraphing", "false");
        e("ggw").setAttribute("data-param-enableCAS", "false");
        e("ggw").setAttribute("data-param-enable3D", "false");
      }
      if (id == "exam-graphing") {
        e("ggw").setAttribute("data-param-enableCAS", "false");
        e("ggw").setAttribute("data-param-enable3D", "false");
      }
      if (id == "exam-cas") {
        e("ggw").setAttribute("data-param-enableCAS", "true");
        e("ggw").setAttribute("data-param-enable3D", "false");
      }
      e("ggw").setAttribute("data-param-perspective", id);
    }
    setParamFromURL("filename");
    setParamFromURL("rounding");
    if (location.pathname.match(/lti/)) {
      e("ggw").setAttribute("data-param-showAppsPicker", "false");
      e("appsPicker") && e("appsPicker").style.setProperty("display", "none");
      c("GeoGebraHeader") && c("GeoGebraHeader").remove();
      e("ggw").setAttribute("data-param-marginTop", 0);
    }
    if (window.ggbRerun) {
      ggbRerun();
    }
  } else {
    if (id) {
      ggbApplet.setPerspective(id + "");
    }
  }
  var label = e(name);
  if (label) {
    parentTable(label).className += " perspectiveHighlighted";
  }
  if (name && window.history && window.history.pushState && name != "picker" && location.host.indexOf("geogebra") >= 0 && location.href.indexOf("?") < 0 && !location.pathname.match(/\/. *\/.+/) && !isLocalhost()) {
    var unbundled = name == "graphing" || name == "geometry" || name == "whiteboard" || name == "notes" || name == "3d";
    if (name != "classic" && (location.pathname.indexOf("classic") > 0 || !unbundled)) {
      name = "classic#" + name;
    }
    history.pushState({}, "GeoGebra", "/" + name);
  }
  return false;
}

function div(styleName) {
  var ret = document.createElement("div");
  ret.className = styleName;
  return ret;
}

function getLocalStorage(key) {
  try {
    if (location.host && window.localStorage) {
      return localStorage.getItem(key);
    }
  } catch (e) {
    //local storage not supported
  }
  return false;
}

function setLocalStorage(key, value) {
  try {
    if (location.host && window.localStorage) {
      return localStorage.setItem(key, value);
    }
  } catch (e) {
    //local storage not supported
  }
}

function getCookie(cookieName) {
  var docCookie = document.cookie;
  if (docCookie && docCookie != '') {
    var crumbs = docCookie.split('; ');
    for (var i = 0; i < crumbs.length; ++i) {
      var name, value;
      var eqIdx = crumbs[i].indexOf('=');
      if (eqIdx == -1) {
        //empty
      } else {
        name = crumbs[i].substring(0, eqIdx);
        value = crumbs[i].substring(eqIdx + 1);
        if (name == cookieName) {
          try {
            value = decodeURIComponent(value);
          } catch (e) {
            // ignore error, keep undecoded value
          }
          return value;
        }
      }
    }
  }
  return false;
}

function parentTable(ret) {
  var parent = ret;
  while (parent = parent.parentElement) {
    if (parent.tagName == "TABLE") {
      return parent;
    }
  }
  return ret;
}

function button(id, perspectiveId, caption) {
  var shortId = id.replace("perspective", "");
  if (getPerspective() == shortId) {
    changeMetaTitle(caption);
  }
  var ret = e(id);
  if (!ret) {
    return;
  }
  var parent = parentTable(ret);
  parent.addEventListener("click", function () {
    if (e("ggw")) {
      e("ggw").setAttribute("data-param-showAppsPicker", "false");
    }
    changeMetaTitle(ret.innerText);
    perspective(perspectiveId, id.replace("perspective", ""));
  });
  ret.innerHTML = caption;
}

function setPickerLabels(dict) {
  button("graphing", 1, dict["Graphing"] || "Graphing");
  button("geometry", 2, dict["Perspective.Geometry"] || "Geometry");
  button("cas", 4, dict["Perspective.CAS"] || "CAS Calculator");
  button("spreadsheet", 3, dict["Perspective.Spreadsheet"] || "Spreadsheet Calc");
  button("perspective3d", 5, dict["GeoGebra3DGrapher.short"] || "3D Calculator");
  button("probability", 6, dict["Perspective.Probability"] || "Probability Cal");
}
```

--------------------------------

### GeoGebra Applet Initialization and Configuration

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/geometry-template-beta.html

Initializes the GeoGebra web applet with various configuration parameters. It sets up default values for debugging, analytics, and module loading, and allows customization through URL parameters and local storage.

```javascript
var latestVersion="5.0.488.0";
var module = "web3d";
var lookAndFeel = "";
var prerelease = false;
var debug = false;
var startDelay = 0;
var marginTop = 0;
var analyticsVersion = 'V'+latestVersion;
var appOnline=true;
var translation = {};
var codebase = "https://cdn.geogebra.org/apps/latest/";
prerelease=true;
appID="geometry";
appOnline=true;
function e(id){ return document.getElementById(id); }
function c(className){ return document.getElementsByClassName(className)[0] }
var finalLang = null;
function setParamFromURL(paramName){
    if(getURLparam(paramName)){
        e("ggw").setAttribute("data-param-"+paramName,getURLparam(paramName));
    }
}
```

--------------------------------

### CSS Application Specific Styling

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/GeoGebra.html

Styles specific to the GeoGebra application, such as hiding the page element in application mode and styling for the start screen.

```css
.application #ggbPage{ display:none; }
.startScreen{ line-height: 120%; }
.startScreen td{ padding:0; }
.startScreen table{ border-spacing:0; }
```

--------------------------------

### Get GeoGebra Perspective (JavaScript)

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/whiteboard-template.html

Retrieves the GeoGebra perspective from URL parameters, path, or hash. It handles different URL structures and returns the perspective name or undefined.

```javascript
function getPerspective(){
 if(getURLparam("perspective")){
 return getURLparam("perspective");
 }
 var parts = location.pathname.split("/");
 var path = parts.length == 1 || parts[parts.length-1].length? parts[parts.length-1] : parts[parts.length-2] ;
 if(location.hash.length || (path != '/apps' && path != '/apps/' && !path.match(/\.html$/))){
 return location.hash.length ? location.hash.replace('#','') : path;
 }
 return window.appID;
}
```

--------------------------------

### Initialize GeoGebra Applet Configuration

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/3d-template-beta.html

Sets up initial configuration for the GeoGebra applet, including version, module, and debugging settings. It also handles IE9 compatibility for console logging and defines analytics version.

```javascript
var latestVersion="5.0.488.0";
var module = "web3d";
var lookAndFeel = "";
var prerelease = false;
var debug = false;
var startDelay = 0;
var marginTop = 0;
var analyticsVersion = 'V'+latestVersion;
var appOnline=true;
var translation = {};
var codebase = "https://cdn.geogebra.org/apps/latest/";
prerelease=true;
appID="3d";
appOnline=true;
```

--------------------------------

### Initialize UI Elements and Language Settings

Source: https://github.com/jmulet/node-geogebra/blob/master/geogebra-math-apps-bundle/GeoGebra/HTML5/5.0/3d-template-beta.html

This function initializes UI elements like buttons and sets the page title based on the application ID and language. It also handles the display of download and tutorial links. Dependencies include global variables like `__GGB__keysVar` and helper functions like `e` and `changeMetaTitle`.

```javascript
function initUI(dict) {
  var e = function(id) { return document.getElementById(id); };
  e("probCalc").innerHTML = dict["prob_calc"] || "Probability Calc");
  button("exam","exam", dict["exam_menu_entry"] || "Exam Calculator");
  e("create").innerHTML = dict["CreateYourOwn"] || "GeoGebra Classic";
  if(e("download")){ e("download").innerHTML = dict["Download"] || "Download"; }
  if(e("tutorialLink")){ e("tutorialLink").href = "https://www.geogebra.org/m/"+dict["TutorialClassic"]; }
}
```