Skip to main content
\(\require{cancel}\newcommand{\definiteintegral}[4]{\int_{#1}^{#2}\,#3\,d#4} \newcommand{\myequation}[2]{#1\amp =#2} \newcommand{\indefiniteintegral}[2]{\int#1\,d#2} \newcommand{\testingescapedpercent}{ \% } \newcommand{\lt}{<} \newcommand{\gt}{>} \newcommand{\amp}{&} \)

Section14Embedded Interactive Elements

When outputting Web page versions, it is possible to embed a variety of dynamic interactive elements. In a /PDF version, these will necessarily need to be replaced by some static substitute, such as a screenshot. See Section 3 for the specifics of embedding instances of the Sage Cell Server.

Subsection14.1GeoGebra

This first example of a GeoGebra demonstration has just the controls for moving the three vertices on the circumfrence of the circle. This is courtesy of Danny Parsons at the African Institute of Mathematical Sciences. This demo requires Java, which could be problematic.

GeoGebra will create screenshots of demonstrations in TikZ/ code. For a static version, we use this as a figure.

This is a Java Applet created using GeoGebra from www.geogebra.org - it looks like you don't have Java installed, please go to www.java.com

With a totally empty “geogebra” element, you will get a blank slate to play around in. This is based on an example of embedding GeoGebra into Sage notebooks by Bruce Cohen. Notice the full suite of menus and tools (in contrast to the previous example).

Again, this example will run with Java. GeoGebra demonstrations can be run via HTML5 without invoking Java, but this seems to only be possible in the Chrome browser. Support will be expanded, especially if requested.

This is a Java Applet created using GeoGebra from www.geogebra.org - it looks like you don't have Java installed, please go to www.java.com

Subsection14.2JSXGraph

The plot below is the curve \(r=a+b\theta\) in polar coordinates, for \(0\leq\theta\leq 8\pi\text{.}\) It may be manipulated with the sliders to control the shape of the curve. Point \(A\) is contrained to the curve, but may be dragged to a new location. At \(A\) the tangent line and normal line are plotted as dashed red lines. Use the controls in the lower left to adjust the viewing window. This example is taken from the JSXGraph example wiki. Width is 75% and aspect ratio is 4:3.

Figure14.2The Archimedian Spiral \(r = a + b\theta\text{,}\) \(0\leq\theta\leq 8\pi\)

JSXGraph is a “cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization in the web browser.” Place Javascript inside an input element inside a jsxgraph element. You will want an xml:id on the jsxgraph element, since it is what will be used as the HTML id on the div that will hold the demonstration, and will typically be used in an early call to the initBoard() method.

Here is a more elaborate example, from the JSXGraph Showcase, titled Infinity. Notice that the code here contains a problematic less-than character for a comparison in a loop. We could replace it by the &lt; XML escape sequence, but we have instead chosen the expedient of using a CDATA construction to wrap the entire hunk of code (see the source for exact syntax). This might be the best solution if the code contains many HTML strings that need to be protected from the XML parser.

There are two active sliders to control the shape and shading of the graphic, and hovering the mouse near one of the edges will highlight the entirety of one of the 30 quadrangles. Finally, each of the four red corners may be dragged to a new location. Width is 60% and aspect ratio is the default, 1:1, i.e. a square.

Figure14.3Infinity, from the JSXGraph Showcase

Here are the two new examples, but the first has been given an extreme aspect ratio, and both are smaller overall. They have been included in a sidebyside layout element (see Section 23) so they can be placed horizontally across the page. (Note: placement in a sidebyside is not yet reflected in the PreTeXt schema.) These are again from the example wiki, the left being Fermat's Spiral and the right being a demonstration of B-splines.

Now, a piecewise function you can control, with traces of the domain values and range values in two separate JSXGraph boards, laid out using the sidebyside layout element.

Figure14.4Piecewise Function
Figure14.5Domain
Figure14.6Range

Be careful about the Javascript code when there are several on the same page, as duplicate variables may affect one another's performance adversely.