<html> <head> <title>My First Web Page: Lesson 4</title> <link href="https://compasstech.com.au/master.css" rel="stylesheet" type="text/css" media="all" charset="utf-8" /> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-873325-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body onload='document.getElementById("textBox").value = headText + bodyText1 + endText;'> <a name="top"></a> <div id="HeaderBar"> <P><strong><a href="https://compasstech.com.au/index.html">Home</a> &larr;<a href="https://compasstech.com.au/live/index.html"> Live Mathematics and STEM on the Web </a>&larr; <a href="index.html" target="top">My First Web Page: Introduction</a> &larr; Lesson 4</strong></P> </div> <blockquote> &nbsp;&nbsp; <H1><font color="red">My First Web Page: Lesson 4: My First GeoGebra Web Page</font></H1> <blockquote> <H4><i>Create Your Own Live Mathematics and STEM Web Pages</i></H4> <font size=-1> <P><a href="https://w3schools.com" target="top">W3Schools.com: Taking Your Web Page Skills to the Next Level</a></P> <P><a href="https://wiki.geogebra.org/GeoGebra-en-Manual.pdf" target="top">GeoGebra Manual</a></P> <P><a href="https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_API#Construction_.2F_User_Interface" target="top">Reference: GeoGebra Apps API</a></P> <P><a href="https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_Embedding" target="top">Embedding: GeoGebra Apps in a Web Page: Quick Start</a></P> </font> &nbsp;&nbsp; <blockquote><blockquote> <blockquote><blockquote> <font color="green"> <UL> <P><LI><a href="index.html" target="top">Introduction: A Sampler</a></LI></P> <P><LI><a href="index2.html" target="top">Lesson 2: Styles and Layout</a></LI></P> <P><LI><a href="index3.html" target="top">Lesson 3: Interacting with your web page</a></LI></P> <P><LI>Lesson 4: Adding a GeoGebra Applet</LI></P> <P><LI>Lesson 5: Adding Web Bluetooth Support: Talking to your SensorTag </LI></P> <P><LI>Lesson 6: Adding Web Bluetooth Support (2): Talking to your LaunchPad </LI></P> </UL> </font> </blockquote></blockquote> </blockquote></blockquote> &nbsp;&nbsp; <HR width=50%></HR> &nbsp;&nbsp; <font color="blue" size=+1> <P><i>New to GeoGebra? Perhaps you should take a few minutes to have a look through their <a href="https://wiki.geogebra.org/en/Manual#Getting_Started" target="top">Getting Started page</a>? Or just Google "Getting Started with GeoGebra" - there are many great YouTube videos out there!</i></P> <P>We begin our tutorial, once again, with the simplest of exemplars - no bells and whistles: the easiest way to embed a GeoGebra applet within a web page.</P> <P>Before you can embed a GeoGebra applet within your web page, you first need to create a free GeoGebra account at <a href="https://www.geogebra.org/" target="top">geogebra.org</a>. This gives you access to their online repository of created documents. YOU will need to use one of these or to create your own and then save it to this repository using any version of GeoGebra - although I confess I much prefer GeoGebra Classic with the full array of functionality over the more limited Graphing and Geometry apps now available. The GeoGebra document that you wish to use with your web page will have an ID code - just look for <i>share</i> in the menu and copy the code produced.</P> <center><iframe width="560" height="315" src="https://www.youtube.com/embed/-hefH3xxS9g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></center> <P>Refer to the link above to the <a href="https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_API#Construction_.2F_User_Interface" target="top"> GeoGebra Apps API</a>, which details the many ways in which GeoGebra supports interaction between its applet and the web page hosting it. If, initially, this page makes little sense to you, don t worry - I felt the same way (and still do with regard to much of it!).</P> <P>Instead, again, we might be better served beginning with the last of the links above and follow the steps given in the <a href="https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_Embedding" target="top">Quick Start for embedding GeoGebra apps within a web page</a> - and you will recognise these as they occur in our example code which follows.</P> <OL> <LI><P>First, you will observe a link within the BODY of the script to the online instruction set (<i>"https://cdn.geogebra.org/apps/deployggb.js"</i>) which interprets the various embedding commands.</P></LI> <LI><P>Next, the DIV line which actually contains what will be our applet (<i>div id="ggb-element"</i>) - this is where the applet will appear on our web page!.</P></LI> <LI><P>The next section looks complicated, but is simply the list of properties that we want our applet to possess. Try changing each of these and see the result!</P></LI> <LI><P>Finally, addEventListener literally injects the defined app into the div statement (<i>"ggb-element"</i>) created above.</P></LI> </OL> <P>Take particular note of the <i>"material_id"</i>. This is where you will paste the code that you got for your online document! Just for interest, try copying and pasting <i>"dwxd6tcv"</i> in place of the materials ID given and check out another GeoGebra document that I prepared earlier...</P> &nbsp;&nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; </font> </blockquote> <script type="text/javascript"> var headText = '<HTML>\n' + '<HEAD>\n' + '<TITLE>My First Web Page: Lesson 4</TITLE>\n' + '<meta name=viewport content="width=device-width,initial-scale=1">\n' + '</HEAD>\n'; var bodyText1 = '<BODY>\n' + '<BLOCKQUOTE>\n' + '<H2>My First GeoGebra Web Page</H2>\n' + '\t<script src="https://cdn.geogebra.org/apps/deployggb.js"><\/script>\n' + '\t<center><div id="ggb-element"></div></center> \n' + '\t<script> \n' + '\t\tvar ggbApp = new GGBApplet({"appName": "graphing", "width": 900, "height": 700,\n' + '\t\t\t\t "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true,\n' + '\t\t\t\t "material_id":"rsen6vj7" }, true);\n' + '\t\twindow.addEventListener("load", function() { \n' + '\t\t\t\t \t\t \t\t ggbApp.inject("ggb-element");\n' + '\t\t \t\t \t\t \t\t});\n' + '\t<\/script>\n' + '</BLOCKQUOTE>\n'; var endText = '</BODY>\n' + '</HTML>'; function setText1() { document.getElementById("textBox").value = headText + bodyText1 + endText; } var headText2 = '<HTML>\n' + '<HEAD>\n' + '<TITLE>My First Web Page: Lesson 4</TITLE>\n' + '<meta name=viewport content="width=device-width,initial-scale=1">\n' + '</HEAD>\n'; var bodyText2 = '<BODY>\n' + '<BLOCKQUOTE>\n' + '<H2>My First GeoGebra Web Page</H2>\n\n' + '&nbsp;&nbsp;\n' + '<HR></HR>\n' + '&nbsp;&nbsp;\n' + '<script src="https://cdn.geogebra.org/apps/deployggb.js"><\/script>\n' + '<center><div id="ggb-element"></div></center> \n\n' + '\t<script src="https://cdn.geogebra.org/apps/deployggb.js"><\/script>\n' + '\t<center><div id="ggb-element"></div></center> \n' + '\t<script> \n' + '\t\tvar ggbApp = new GGBApplet({"appName": "graphing", "width": 900, "height": 700,\n' + '\t\t\t\t "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true,\n' + '\t\t\t\t "material_id":"rsen6vj7" }, true);\n' + '\t\twindow.addEventListener("load", function() { \n' + '\t\t\t\t \t\t \t\t ggbApp.inject("ggb-element");\n' + '\t\t \t\t \t\t \t\t});\n\n' + '\t\t \t\t function setFunction() {\n' + '\t \t\t \t\t \tvar applet = document.ggbApplet;\n' + '\t \t\t \t\t \tvar myVar1 = document.getElementById("myVar").value;\n' + '\t \t\t \t\t\t applet.evalCommand(myVar1);\n' + '\t\t \t\t}\n\n' + '\t\t \t\t function setCAS() {\n' + '\t \t\t \t\t \tvar applet = document.ggbApplet;\n' + '\t \t\t \t\t \tvar myCASvalue = document.getElementById("myCAS").value;\n' + '\t \t\t \t\t\t var CASresult = applet.evalCommandCAS(myCASvalue);\n' + '\t \t\t \t\t\t alert(CASresult);\n' + '\t\t \t\t}\n\n' + '\t\t \t\t function getFunction() {\n' + '\t \t\t \t\t \tvar applet = document.ggbApplet;\n' + '\t \t\t \t\t\t var frequency = applet.getValue("frequency");\n' + '\t \t\t \t\t\t alert("Frequency = " + frequency);\n' + '\t\t \t\t}\n\n' + '\t\t \t\t function reset() {\n' + '\t\t \t\t \t\t var applet = document.ggbApplet;\n' + '\t\t \t\t \t\t applet.setValue("frequency",220);\n' + '\t\t \t\t}\n' + '\t<\/script>\n' + '&nbsp; \n' + '<blockquote>\n' + '<center>\n' + '<P> <button onclick="setFunction();" style="font-size : 24px; width: 25%; height: 48px;">Input</button> <input ID="myVar" onchange = "setFunction();" style="font-size : 30px;" size="30" value = "?" type="text"></P> \n\n' + '<button onclick="setCAS();" style="font-size : 24px; width: 25%; height: 48px;">CAS Input</button> <input ID="myCAS" onchange = "setCAS();" style="font-size : 30px;" size="30" value = "solve(x^2=x+1)" type="text"></P>\n\n' + '<P> <button onclick="getFunction();" style="font-size : 24px; width: 90%; height: 48px;">Get Frequency</button> </P>\n\n' + '<button onclick="reset();" style="font-size : 24px; width: 90%; height: 48px;">RESET</button></P>\n\n' + '</blockquote>\n' + '</center>\n'; var endText2 = '</BODY>\n' + '</HTML>'; function setText2() { document.getElementById("textBox").value = headText2 + bodyText2 + endText2; } var headText3 = '<HTML>\n' + '<HEAD>\n' + '<TITLE>My First Web Page: Lesson 4</TITLE>\n' + '<link href="https://compasstech.com.au/master.css" rel="stylesheet" type="text/css" media="all" charset="utf-8" />\n' + '<meta name="viewport" content="width=device-width, initial-scale=1">\n' + '\t\t <style type="text\/css">\n' + '\t\t\t textarea {\n' + '\t\t\t\t vertical-align: middle;\n' + '\t\t\t}\n' + '\t\t </\style>\n' + '\t\t<script>\n' + '\t\t\tvar textVar2 = ""\n\n' + '\t\tfunction setText() {\n' + '\t\t\t aVal = document.getElementById("aBox").value;\n' + '\t\t\t bVal = document.getElementById("bBox").value;\n' + '\t\t\t cVal = document.getElementById("cBox").value;\n' + '\t\t\t soln1 = eval("(-1*" + bVal + "+ Math.sqrt(" + bVal + "*" + bVal + "-4*" + aVal + "*" + cVal + "))/(2*" + aVal + ")");\n' + '\t\t\t soln2 = eval("(-1*" + bVal + "- Math.sqrt(" + bVal + "*" + bVal + "-4*" + aVal + "*" + cVal + "))/(2*" + aVal + ")");\n' + '\t\t\t soln = "the solution set = {" + soln1 + ", " + soln2 + "}";\n' + '\t\t\t eqn = "When a = " + aVal + ", b = " + bVal + ", c = " + cVal + " then " + soln;\n' + '\t\t\tdocument.getElementById("result").innerHTML = eqn\n' + '\t\t\tdocument.getElementById("myCAS").value = "Solve(" + aVal + "x^2 +(" + bVal + "x) + (" + cVal + ") = 0)"\n' + '\t \t\t \t\t \tvar applet = document.ggbApplet;\n' + '\t \t\t \t\t\t applet.setValue("a",aVal);\n' + '\t \t\t \t\t\t applet.setValue("b",bVal);\n' + '\t \t\t \t\t\t applet.setValue("c",cVal);\n' + '\t\t}\n' + '\t\t<\/script>\n' + '</HEAD>\n'; var bodyText3 = '<BODY>\n' + '<div id="HeaderBar">\n' + '&nbsp;<P><font color="white"><a href="https://compasstech.com.au/index.html">Home</a> &larr;<a href="https://compasstech.com.au/live/index.html"> Live Mathematics and STEM on the Web </a>&larr; <a href="index.html" target="top">My First Web Page: Introduction</a> &larr; Lesson 4</font></P>&nbsp;\n' + '</div>\n\n' + '&nbsp;&nbsp;\n' + '<BLOCKQUOTE>\n' + '\t<H1>Interacting with Text Boxes on Your Web Page</H1>\n\n' + '<center>\n' + '\t<P><font color="blue" size=+2><textarea ID="aBox" rows="2" cols="3" value="?" style="font-size : 20px;"></textarea> x<sup>2</sup> + ' + '<textarea ID="bBox" rows="2" cols="3" value="?" style="font-size : 20px;"></textarea> x + ' + '<textarea ID="cBox" rows="2" cols="3" value="?" style="font-size : 20px;"></textarea> = 0</P>\n\n' + '</center>\n' + '\t<i><P id="result">To solve the quadratic equation, please enter values for a, b and c</P></i></b></font></center>\n\n' + '\t<P><button onclick="setText();" style="font-size : 24px; width: 100%; height: 80px;">Solve the quadratic</button></P>\n' + '&nbsp;&nbsp;\n' + '<HR></HR>\n' + '&nbsp;&nbsp;\n' + '<script src="https://cdn.geogebra.org/apps/deployggb.js"><\/script>\n' + '<center><div id="ggb-element"></div></center> \n\n' + '\t<script> \n' + '\t\tvar ggbApp = new GGBApplet({"appName": "graphing", "width": 900, "height": 700,\n' + '\t\t\t\t "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true,\n' + '\t\t\t\t "material_id":"bvbwefcm" }, true);\n' + '\t\twindow.addEventListener("load", function() { \n' + '\t\t\t\t \t\t \t\t ggbApp.inject("ggb-element");\n' + '\t\t \t\t \t\t \t\t});\n\n' + '\t\t \t\t function setFunction() {\n' + '\t \t\t \t\t \tvar applet = document.ggbApplet;\n' + '\t \t\t \t\t \tvar myVar1 = document.getElementById("myVar").value;\n' + '\t \t\t \t\t\t applet.evalCommand(myVar1);\n' + '\t\t \t\t}\n\n' + '\t\t \t\t function setCAS() {\n' + '\t \t\t \t\t \tvar applet = document.ggbApplet;\n' + '\t \t\t \t\t \tvar myCASvalue = document.getElementById("myCAS").value;\n' + '\t \t\t \t\t\t var CASresult = applet.evalCommandCAS(myCASvalue);\n' + '\t \t\t \t\t\t alert(CASresult);\n' + '\t\t \t\t}\n\n' + '\t\t \t\t function reset() {\n' + '\t\t \t\t \t\t var applet = document.ggbApplet;\n' + '\t\t \t\t \t\t applet.reset();\n' + '\t\t \t\t}\n' + '\t<\/script>\n' + '&nbsp; \n' + '<blockquote>\n' + '<center>\n' + '<P> <button onclick="setFunction();" style="font-size : 24px; width: 25%; height: 48px;">Input</button> <input ID="myVar" onchange = "setFunction();" style="font-size : 30px;" size="30" value = "?" type="text"></P> \n\n' + '<button onclick="setCAS();" style="font-size : 24px; width: 25%; height: 48px;">CAS Input</button> <input ID="myCAS" onchange = "setCAS();" style="font-size : 30px;" size="30" value = "solve(x^2=x+1)" type="text"></P>\n\n' + '<button onclick="reset();" style="font-size : 24px; width: 90%; height: 48px;">RESET</button></P>\n' + '</blockquote>\n' + '</center>\n'; var endText3 = '&nbsp;&nbsp;\n' + '<FONT COLOR="RED" size=-1>\n' + '<P><a href="https://compasstech.com.au/index.html">Home</a> &larr;<a href="https://compasstech.com.au/live/index.html"> Live Mathematics and STEM on the Web </a>&larr; <a href="index.html" target="top">My First Web Page: Introduction</a> &larr; Lesson 4</font></P>\n' + '</BODY>\n' + '</HTML>'; function setText3() { document.getElementById("textBox").value = headText3 + bodyText3 + endText3; } var headText5 = '<HTML>\n' + '<HEAD>\n' + '<TITLE>My First Web Page: Lesson 4</TITLE>\n' + '<meta name="viewport" content="width=device-width, initial-scale=1">\n' + '\t\t<script>\n' + '\t\t\tvar aVar = "Please type a value for a"\n' + '\t\t\tvar bVar= "Please type a value for b"\n' + '\t\t\tvar cVar= "And a value for c?"\n' + '\t\t\tvar textVar2 = ""\n\n' + '\t\tfunction setText() {\n' + '\t \t\t var applet = document.ggbApplet;\n' + '\t\t\t aVal = prompt(aVar,textVar2);\n' + '\t\t\t bVal = prompt(bVar,textVar2);\n' + '\t\t\t cVal = prompt(cVar,textVar2);\n' + '\t\t\t soln1 = eval("(-1*" + bVal + "+ Math.sqrt(" + bVal + "*" + bVal + "-4*" + aVal + "*" + cVal + "))/(2*" + aVal + ")");\n' + '\t\t\t soln2 = eval("(-1*" + bVal + "- Math.sqrt(" + bVal + "*" + bVal + "-4*" + aVal + "*" + cVal + "))/(2*" + aVal + ")");\n' + '\t\t\t soln = "the solution set = {" + soln1 + ", " + soln2 + "}";\n' + '\t\t\t eqn = "When a = " + aVal + ", b = " + bVal + ", c = " + cVal + " then " + soln;\n' + '\t\t\t alert(eqn);\n' + '\t\t\tdocument.getElementById("result").innerHTML = eqn\n' + '\t\t\tdocument.getElementById("myCAS").value = "Solve(" + aVal + "x^2 +(" + bVal + "x) + (" + cVal + ") = 0)"\n' + '\t \t\t \t\t \tvar applet = document.ggbApplet;\n' + '\t \t\t \t\t\t applet.setValue("a",aVal);\n' + '\t \t\t \t\t\t applet.setValue("b",bVal);\n' + '\t \t\t \t\t\t applet.setValue("c",cVal);\n' + '\t\t}\n' + '\t\t<\/script>\n' + '</HEAD>\n'; var bodyText5 = '<BODY>\n' + '<blockquote>\n' + '\t<H1>Interacting with Pop-Ups on Your Web Page</H1>\n' + '\t&nbsp;\n' + '\t<center><b><font color=blue size=+2><P><b>a x<sup>2</sup> + b x + c = 0</P>\n' + '\t&nbsp;\n' + '\t<P><button onclick="setText();" style="font-size : 24px; width: 100%; height: 80px;">Enter values for the quadratic</button></P>\n' + '\t<i><P id="result">To solve the quadratic equation, please enter values for a, b and c when prompted</P> </i></b></font></center>\n\n' + '&nbsp;&nbsp;\n' + '<HR></HR>\n' + '&nbsp;&nbsp;\n' + '<script src="https://cdn.geogebra.org/apps/deployggb.js"><\/script>\n' + '<center><div id="ggb-element"></div></center> \n\n' + '\t<script> \n' + '\t\tvar ggbApp = new GGBApplet({"appName": "graphing", "width": 900, "height": 700,\n' + '\t\t\t\t "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true,\n' + '\t\t\t\t "material_id":"bvbwefcm" }, true);\n' + '\t\twindow.addEventListener("load", function() { \n' + '\t\t\t\t \t\t \t\t ggbApp.inject("ggb-element");\n' + '\t\t \t\t \t\t \t\t});\n\n' + '\t\t \t\t function setFunction() {\n' + '\t \t\t \t\t \tvar applet = document.ggbApplet;\n' + '\t \t\t \t\t \tvar myVar1 = document.getElementById("myVar").value;\n' + '\t \t\t \t\t\t applet.evalCommand(myVar1);\n' + '\t\t \t\t}\n\n' + '\t\t \t\t function setCAS() {\n' + '\t \t\t \t\t \tvar applet = document.ggbApplet;\n' + '\t \t\t \t\t \tvar myCASvalue = document.getElementById("myCAS").value;\n' + '\t \t\t \t\t\t var CASresult = applet.evalCommandCAS(myCASvalue);\n' + '\t \t\t \t\t\t alert(CASresult);\n' + '\t\t \t\t}\n\n' + '\t\t \t\t function reset() {\n' + '\t\t \t\t \t\t var applet = document.ggbApplet;\n' + '\t\t \t\t \t\t applet.reset();\n' + '\t\t \t\t}\n' + '\t<\/script>\n' + '&nbsp; \n' + '<blockquote>\n' + '<center>\n' + '<P> <button onclick="setFunction();" style="font-size : 24px; width: 25%; height: 48px;">Input</button> <input ID="myVar" onchange = "setFunction();" style="font-size : 30px;" size="30" value = "?" type="text"></P> \n\n' + '<button onclick="setCAS();" style="font-size : 24px; width: 25%; height: 48px;">CAS Input</button> <input ID="myCAS" onchange = "setCAS();" style="font-size : 30px;" size="30" value = "solve(x^2=x+1)" type="text"></P>\n\n' + '<button onclick="reset();" style="font-size : 24px; width: 90%; height: 48px;">RESET</button></P>\n' + '</blockquote>\n' + '</center>\n'; var endText5 = '</BODY>\n' + '</HTML>'; function setText5() { document.getElementById("textBox").value = headText5 + bodyText5 + endText5; } var headText4 = '<HTML>\n' + '<HEAD>\n' + '<TITLE>My First Web Page: Lesson 4</TITLE>\n' + '<meta name="viewport" content="width=device-width, initial-scale=1">\n' + '\t\t <style type="text\/css">\n' + '\t\t\t textarea {\n' + '\t\t\t\t vertical-align: middle;\n' + '\t\t\t}\n' + '\t\t </\style>\n' + '\t\t<script>\n' + '\t\t\tvar textVar2 = ""\n\n' + '\t\tfunction setText() {\n' + '\t\t\t aVal = document.getElementById("aBox").value;\n' + '\t\t\t bVal = document.getElementById("bBox").value;\n' + '\t\t\t cVal = document.getElementById("cBox").value;\n' + '\t\t\t soln1 = eval("(-1*" + bVal + "+ Math.sqrt(" + bVal + "*" + bVal + "-4*" + aVal + "*" + cVal + "))/(2*" + aVal + ")");\n' + '\t\t\t soln2 = eval("(-1*" + bVal + "- Math.sqrt(" + bVal + "*" + bVal + "-4*" + aVal + "*" + cVal + "))/(2*" + aVal + ")");\n' + '\t\t\t soln = "the solution set = {" + soln1 + ", " + soln2 + "}";\n' + '\t\t\t eqn = "When a = " + aVal + ", b = " + bVal + ", c = " + cVal + " then " + soln;\n' + '\t\t\tdocument.getElementById("result").innerHTML = eqn\n' + '\t\t\tdocument.getElementById("myCAS").value = "Solve(" + aVal + "x^2 +(" + bVal + "x) + (" + cVal + ") = 0)"\n' + '\t \t\t \t\t \tvar applet = document.ggbApplet;\n' + '\t \t\t \t\t\t applet.setValue("a",aVal);\n' + '\t \t\t \t\t\t applet.setValue("b",bVal);\n' + '\t \t\t \t\t\t applet.setValue("c",cVal);\n' + '\t\t}\n' + '\t\t<\/script>\n' + '</HEAD>\n'; var bodyText4 = '<BODY>\n' + '<blockquote>\n' + '\t<H1>Interacting with Text Boxes on Your Web Page</H1>\n\n' + '<center>\n' + '\t<P><font color="blue" size=+2><textarea ID="aBox" rows="2" cols="3" value="1" style="font-size : 20px;"></textarea> x<sup>2</sup> + ' + '<textarea ID="bBox" rows="2" cols="3" value="-1" style="font-size : 20px;"></textarea> x + ' + '<textarea ID="cBox" rows="2" cols="3" value="-1" style="font-size : 20px;"></textarea> = 0</P>\n\n' + '</center>\n' + '\t<i><P id="result">To solve the quadratic equation, please enter values for a, b and c</P></i></b></font></center>\n\n' + '\t<P><button onclick="setText();" style="font-size : 24px; width: 100%; height: 80px;">Solve the quadratic</button></P>\n' + '&nbsp;&nbsp;\n' + '<HR></HR>\n' + '&nbsp;&nbsp;\n' + '<script src="https://cdn.geogebra.org/apps/deployggb.js"><\/script>\n' + '<center><div id="ggb-element"></div></center> \n\n' + '\t<script> \n' + '\t\tvar ggbApp = new GGBApplet({"appName": "graphing", "width": 900, "height": 700,\n' + '\t\t\t\t "showToolBar": true, "showAlgebraInput": true, "showMenuBar": true,\n' + '\t\t\t\t "material_id":"bvbwefcm" }, true);\n' + '\t\twindow.addEventListener("load", function() { \n' + '\t\t\t\t \t\t \t\t ggbApp.inject("ggb-element");\n' + '\t\t \t\t \t\t \t\t});\n\n' + '\t\t \t\t function setFunction() {\n' + '\t \t\t \t\t \tvar applet = document.ggbApplet;\n' + '\t \t\t \t\t \tvar myVar1 = document.getElementById("myVar").value;\n' + '\t \t\t \t\t\t applet.evalCommand(myVar1);\n' + '\t\t \t\t}\n\n' + '\t\t \t\t function setCAS() {\n' + '\t \t\t \t\t \tvar applet = document.ggbApplet;\n' + '\t \t\t \t\t \tvar myCASvalue = document.getElementById("myCAS").value;\n' + '\t \t\t \t\t\t var CASresult = applet.evalCommandCAS(myCASvalue);\n' + '\t \t\t \t\t\t alert(CASresult);\n' + '\t\t \t\t}\n\n' + '\t\t \t\t function reset() {\n' + '\t\t \t\t \t\t var applet = document.ggbApplet;\n' + '\t\t \t\t \t\t applet.reset();\n' + '\t\t \t\t}\n' + '\t<\/script>\n' + '&nbsp; \n' + '<blockquote>\n' + '<center>\n' + '<P> <button onclick="setFunction();" style="font-size : 24px; width: 25%; height: 48px;">Input</button> <input ID="myVar" onchange = "setFunction();" style="font-size : 30px;" size="30" value = "?" type="text"></P> \n\n' + '<button onclick="setCAS();" style="font-size : 24px; width: 25%; height: 48px;">CAS Input</button> <input ID="myCAS" onchange = "setCAS();" style="font-size : 30px;" size="30" value = "solve(x^2=x+1)" type="text"></P>\n\n' + '<button onclick="reset();" style="font-size : 24px; width: 90%; height: 48px;">RESET</button></P>\n' + '</blockquote>\n' + '</center>\n'; var endText4 = '</BODY>\n' + '</HTML>'; function setText4() { document.getElementById("textBox").value = headText4 + bodyText4 + endText4; } function MakePage(objName) { contents = document.getElementById("textBox").value + '\n<FONT COLOR="RED" size=-1>' + '<A HREF="javascript:window.close()">' + '<P><HR width=50%></P>' + 'Back to ' + '<I>' + 'My First Web Page: Lesson 4</i></FONT></A>'; Opts = "toolbar=0,location=0,directories=0,status=1,menubar=1," + "scrollbars=1,resizable=1,width=900,height=900"; PopUp = window.open("", "", Opts); PopUp.document.write(contents) PopUp.document.close() } </script> <center> <P><button onclick="MakePage('T');" style="font-size : 24px; width: 100%; height: 80px;">Display My Web Page</button></P> <P><textarea ID="textBox" rows="20" cols="80" value="" style="font-size : 20px;"></textarea></P> <P> <button onclick="setText1();" style="font-size : 24px; width: 100%; height: 80px;">RESET Default Page</button></P> </font> </center> &nbsp; <HR width=50%></HR> &nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; <H2><font color="red">Putting GeoGebra to Work</font></H2> <TABLE cellpadding="10"> <TR><TD width=50%> <center> <P> <button onclick="setText2();" style="font-size : 24px; width: 100%; height: 80px;">Set Code</button></P> <P><button onclick="MakePage('T');" style="font-size : 24px; width: 100%; height: 80px;">Create This Page</button></P> </center> </TD><TD> </font><font color="blue" size=+1> <blockquote><blockquote><blockquote> <P>Now let's jazz things up a bit!</P> <P>We add some functions which illustrate just some of the power we now have at our fingertips.</P> </blockquote></blockquote></blockquote> </TD></TR> </TABLE> &nbsp; <font color="blue" size=+1> <blockquote><blockquote> <UL> <LI><P><b>setFunction()</b> uses the <b>input</b> button and the textArea (called "textBox") and simulates the actual GeoGebra Input Bar which appears and disappears at the bottom of the applet window. I find writing to that Input bar a little problematic at times - sometimes it gets hidden, and typing to it can be a little tricky. So having a nice easily accessible input bar at my disposal on my web page is a great thing!</P> <P>Try typing a command, like "frequency = 110" and press the Input button and you will see what I mean. Now try something like "y = x".</P> <P>This function makes use of the powerful <b>evalCommand</b> GeoGebra function.</P> <P>Other useful commands include <b>setValue</b> and <b>getValue</b> and many others that you will find in that long <a href="https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_API#Construction_.2F_User_Interface" target="top">API reference page</a>! <P><i>To act upon or read values from a GeoGebra object, you will need to create that object first, either in your source document, or right there in youe web page as needed (although those you create on the fly will not be there once the page is refreshed, whereas variables created in the source document, of course, will always be available.</i></P> </LI> <LI> <P>Why not take advantage of that excellent CAS engine using <b>evalCommandCAS</b>? (<i>NOTE: You may need to press the button a time or two on first use to give the CAS engine time to come on board!)</I></P> </LI> <LI> <P>Next, we illustrate how easily we can grab values from the applet using <b>getValue</b>.</P> </LI> <LI> <P>The final function is even simpler - it "resets" the applet back to its original state using <b>reset()</b>.</P> </LI> </UL> &nbsp; &nbsp; <P>By the way, did you notice a nice little inclusion in the textarea definition? <b>onchange = "setFunction();"</b> is the textarea equivalent of <b>onclick</b> for a button - it makes stuff happen when you make a change and press enter!</P> </blockquote> <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; <H2><font color="red">Revisiting Something Mathematical?</font></H2> <TABLE cellpadding="5"> <TR><TD width=50%> <center> <P> <button onclick="setText5();" style="font-size : 20px; width: 100%; height: 80px;">Set Code<BR>(Prompts)</button></P> <P> <button onclick="setText4();" style="font-size : 20px; width: 100%; height: 80px;">Set Code<BR> (TextBoxes)</button></P> <P><button onclick="MakePage('T');" style="font-size : 20px; width: 100%; height: 80px;">Create This Page</button></P> </center> </TD><TD> </font><font color="blue" size=+1> <blockquote><blockquote><blockquote> <P>Now let's add the power of GeoGebra to our two nice quadratic examples from the last lesson - see how easily we can integrate the GeoGebra applet with interactive prompts or text boxes.</P> <P>Study the code and see the two places where we added GeoGebra elements - in the HEAD where we added to the function which solves the quadratic and tells what to do with the solutions, and in the BODY where we add the GeoGebra applet.</P> </blockquote></blockquote></blockquote> </TD></TR> </TABLE> &nbsp; <HR width=50%></HR> &nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; <H2><font color="red">And Putting It All Together</font></H2> <TABLE cellpadding="10"> <TR><TD width=50%> <center> <P> <button onclick="setText3();" style="font-size : 24px; width: 100%; height: 80px;">Set Code</button></P> <P><button onclick="MakePage('T');" style="font-size : 24px; width: 100%; height: 80px;">Create This Page</button></P> </center> </TD><TD> </font><font color="blue" size=+1> <blockquote><blockquote><blockquote> <P>As shown in lesson 2, we can add header and footer navigation links to make our web page more user-friendly and professional.</P> </blockquote></blockquote></blockquote> </TD></TR> </TABLE> &nbsp; <HR width=50%></HR> &nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> <font color="blue" size=+1> <P>Take some time to <b>play</b> with the code and study the effect - as always, you will learn best by <b>doing</b>.</P> <P><i>NOTE: You can copy the text from the text box above, paste it into any text editor and save it with the ".html" suffix to create a fully functional HTML page. Upload this to wherever you are going to host your pages from, and you are ready to share!</i></P> <P><i>If you have any questions or comments, or if you find things that have not been made clear, then please feel free to <a href="mailto:steve@compasstech.com.au">drop me an email</a> and I will get back to you.</i></P> &nbsp;&nbsp; &nbsp; <HR width=50%></HR> &nbsp; <P>For a taste of what is possible now that you have two-way communication with your embedded applet, why not visit some or all of the following pages. Have a play, and see if you can work out how the various components work - and then use your browser to display the <b>Page Source</b> and see if you were right! If you have any problems with getting access to the source code, then <a href="mailto:steve@compasstech.com.au">drop me an email</a> and I will send you the files.</P> <blockquote><blockquote> <UL> <LI><P><a href="https://compasstech.com.au/ARNOLD/geogebra/beach.html" target="top">The Beach Race</a> (material_id = "mg36YWnc"),</P></LI> <LI><P><a href="https://compasstech.com.au/ARNOLD/geogebra/meeting.html" target="top">Meeting a friend</a> (material_id = "kdJVMhts"),</P></LI> <LI><P><a href="https://compasstech.com.au/ARNOLD/geogebra/a4paper.html" target="top">A4 paper folding</a> (material_id = "dwxd6tcv"),</P></LI> <LI><P><a href="https://compasstech.com.au/ARNOLD/geogebra/kissingcurves.html" target="top">Kissing Curves</a> (material_id = "f5ZGdnYc"),</P></LI> <LI><P>the <a href="https://compasstech.com.au/ARNOLD/geogebra/dimsquare.html" target="top">Case of the Diminishing Square</a> (material_id = "PHrQnYKp"),</P></LI> <LI><P><a href="https://compasstech.com.au/ARNOLD/geogebra/halfaglass.html" target="top">Half a Glass, Please!</a> (material_id = "QFEmjnyD"),</P></LI> </UL> </blockquote></blockquote> </blockquote></blockquote> &nbsp;&nbsp; <HR width=50%></HR> &nbsp;&nbsp; </i> &nbsp;&nbsp; <P><font size=-1><i><a href="#top">Back to Top</a></i></font></P> &nbsp;&nbsp; <P><strong><a href="https://compasstech.com.au/index.html">Home</a> &larr;<a href="https://compasstech.com.au/live/index.html"> Live Mathematics and STEM on the Web </a> &larr; <a href="index.html" target="top">My First Web Page: Introduction</a> &larr; <b>Lesson 4</P> </body> </html>