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}{&} \)

Section 15 Free 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, which is more elaborate, and not entirely similar.

Interactives in this section can be used without paying any fees. However, their use is generally encumbered by copyright and/or licensing restrictions, and may limit the license you can use on your own work. So carefully study copyrights, licenses, and terms of use. See Section 14 for more interactives that are free as in “freedom” or liberté.

(2018-03-05) Almost everything in this section is under active development and not stable yet. Feel free to experiment and make suggestions and requests. This page takes a while to completely load, so be patient.

Subsection 15.1 GeoGebra (Cloud)

A Geogebra material is something you might use in a class. It could also be called an interactive demonstration. Go browsing at www.geogebra.org/materials and find something appropriate for your project. Or make an account and create your own.

Once you find a material that looks instructive, it will be at a URL such as

https://www.geogebra.org/m/KGn2d4Qd

and you want to pick off the identifier on the end, in this case KGn2d4Qd. Then author

<interactive geogebra="KGn2d4Qd" />

At this writing (2018-02-04) you will want to place this inside a figure, with a caption, as we do right now with material KGn2d4Qd.

The shape of the material will be fixed, so guess (or measure with an on-screen ruler), the aspect ratio and use that in the <interactive> element.

Figure 15.1 Right Triangle Paradox

Note that materials hosted at geogebra.org have a non-standard, non-commercial license you must agree to before you can download them as source code. Perhaps you must forfeit your copyright when you upload a material? We have not investigated this thoroughly.

Subsection 15.2 Geogebra (Source)

Better might be designing your own material, retaining your copyright, and using one of Geogebra's “Apps” to embed the material in your document. (But note, use of the App comes with licensing restrictions.) PreTeXt will handle the technical details for you.

  1. Use Geogebra to make a material. Maybe you need to install a desktop program that allows you to do this. Then export, or otherwise discover the “base64-encoded” version which may be identified by ggb. See the source of this page for examples of what this looks like.
  2. Mimic the source of the examples below.
  3. Long-run it will be better to park these strings in files (in a code subdirectory?) and <xi:include> them with the @parse attribute set to text. But we do not want to impede newcomer's quickstart with that problematic switch.
  4. This is preliminary and subject to change. Do not get carried away yet. Please report problems or request features.

The sliders on the next applet seem to be at fixed locations. Make it too skinny and you will never see them, rendering the material useless. However the window will pan (drag with a mouse) and zoom (scroll wheel of a mouse), so you can adjust that way.

Figure 15.2 GeoGebra: astroids (from Dave Rosoff)

Now the controls are in the upper-left corner, so we can more easily make the window a little smaller. Pan and zoom to put the action where you can see it better.

Figure 15.3 GeoGebra: cycloids (from Dave Rosoff)

You will need to zoom out a bit, and then pan over some, to see all the pieces of the next GeoGebra material.

Figure 15.4 GeoGebra: a constructive “proof” that SAS congruence holds in Euclidean geometry (from Tevian Dray)

Subsection 15.3 Desmos Graphs (Cloud)

Desmos provides interactive graphing applications. The following example was created by Ann Cary and made available via the “Share” function of Desmos. You can make your own Desmos graph, choose the “Share” icon, and the “Embed” option, to get a URL such as

https://www.desmos.com/calculator/ttox1bvxku

You want to pick off the identifier on the end, in this case ttox1bvxku, then author

<interactive desmos="ttox1bvxku" />

as we have done here.

The static image employed in the version of this article was obtained by viewing the graph at the Desmos site (i.e., not the embedded version in the PreTeXt HTML version), and using the Share button to export a PNG image. In this case, we used a “Medium Rectangle” and “Thick” lines.

Figure 15.5 Graph of \(ln(x^2+5)-3\)

Note that Desmos has extensive Terms of Service which include restrictions on commercial uses.

Subsection 15.4 Wolfram CDF (Cloud)

You can embed interactive demonstrations created in Wolfram's Computable Document Format so that they will be played with the Wolfram CDF Player™. Once you create and save a demonstration, you want to determine the UUID that is the identifier of your demonstration. For example, Figure 15.7 is identified by 9fa2acff-c809-4b7f-a73b-c59ace36affc. This identifier is enough to create the PreTeXt to embed the demonstration. See https://reference.wolfram.com/language/howto/DeployInteractiveContentInTheWolframCloud.html for information about creating your demonstration.

http://www.wolfram.com/cdf/adopting-cdf/deploying-cdf/web-delivery-cloud.html explains hosting CDF files at the Wolfram Cloud, and is the source of Figure 15.7. You can learn about powering your CDF with Wolfram Cloud Credits at https://www.wolfram.com/cloud-credits/. CDF is a public format, and the FreeCDF™ license is a variant of a Creative Commons BY-SA license, see http://www.wolfram.com/cdf/adopting-cdf/licensing-options.html.

The first example here (Figure 15.6) was developed by Itai Seggev, a Senior Kernel Developer at Wolfram.

(2018-04-02) These behave as expected in Chrome, but perhaps not in Firefox. Testing welcome.

Figure 15.6 Variable Sine Curve
Figure 15.7 Cellular Automata