Derivatives and Integrals An Annotated Discourse

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.

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

<interactive geogebra="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. If the width of the original material is anything other than 800 pixels, you should add @material-width with the actual material width (units are pixels).

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.

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

<interactive desmos="ttox1bvxku" width="60%" aspect="2:3" />

The static image employed in the LaTeX 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.

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

CalcPlot3D is a Javascript application for creating, visualizing, and understanding plots of 3D surfaces. So it would be an ideal companion to a book on multivariate calculus, but should be useful in other courses of study.

To use it, start at the online app version. Create a plot and adjust the image to a viewpoint and scale if you like. Then, click the menu/hamburger icon in the upper-left and choose File. From here you can save a PNG image for the static version, but you also want to select Encode View in URL. Now your browser address bar is filled with a query string (all the stuff after the question-mark) that has all the information necessary to reproduce your plot (and view). Copy everything after the first question-mark to the interactive/code element. Be sure to replace any ampersands by & (see the Author’s Guide for more about certain characters in URLs). Examine the source for the examples below to see how they are authored. The Help Manual for CalcPlot3D is also available off the menu/hamburger icon in the upper-left.

In Figure 15.3 grab the image with your mouse and rotate it in various directions. Then while the image has focus, press the 3 key (short for “3-D”), to get a 3D view, which will require some red-blue 3D glasses to fully appreciate. Press the key again to return to a regular view.

When using a version with controls (e.g. Figure 15.4), or the full application (e.g. Figure 15.5), specify an aspect ratio that is wider than it is tall. Start with aspect="3:2", and perhaps fine-tune from there.

The iFrame versions of interactives can point to a network location, presuming the endpoint is reasonably well-behaved. If you are using this sytematically, let us know and perhpas it should become a more dedicated PreTeXt construction. See Subsection 14.9 for the local file version.

This example is from PhET Interactive Simulations.

Anything that suggests you can embed an interactive widget via an iFrame is fair game for this feature. This is a Google Map of the state of California, for use in a French language document, from Julien Giol. The necessary URL is obtained by using the “Share” feature, and then the “Embed a map” option has HTML with the URL in a @src attribute.

In HTML, interactives are rendered in iframes, which can offer some layout challenges. The PreTeXt page has no direct control over the layout within the interactive. All it does is provide a fixed sized frame in which the interactive content can display itself. The @width (a percentage) and @aspect (a width:height ratio like 2.1:1 OR a number like 1.5) attributes on the interactive are the main tools to specify the dimensions. Below are three renderings of the same Google map using different widths/heights.

If you know a particular interactive is designed to display at a particular pixel size, you can can specify a @design-width like 300 to force exactly that width. Combine that with @aspect to also force the height. The example below forces a size of 300x450.

What happens if there is not enough space to display the requested frame? That depends on the @resize-behavior applied to the interactive. The default is fixed-height. In this case, the interactive’s height will not change if the window becomes too small to display the full width of the interactive. Instead a horizontal scroll bar will appear. This can be seen in many of the samples in 14 and this CircuitJS sample:

The other option for @resize-behavior is responsive. In this case, the interactive’s aspect ratio will be maintained. If the width gets smaller, so will the height. This can be seen in the version below.

The best behavior will be determined by the contents of the interactive. If the interactive knows how to dynamically size itself, "responsive" is likely the better option. If the interactive assumes that there is a certain amount of space and the contents will never resize themselves, "fixed-height" will likely work better.

In addition to specifying the resize-behavior in a particular interactive, you can apply a document level default value in your pub file under publication/html/interactives. You can also specify different defaults for different types of interactives using sub elements of that. The publication.xml file for this Sample Article uses something like the following to have a based default of "responsive", but have specific types of interactives default to "fixed-height".

<publication>
    <html>
        <interactives resize-behavior="responsive">
            <javascript resize-behavior="fixed-height"/>
            <jsxgraph resize-behavior="fixed-height"/>
            <sage resize-behavior="fixed-height"/>
            <circuitjs resize-behavior="fixed-height"/>
            <d3 resize-behavior="fixed-height"/>
        </interactives>
    </html>
</publication>

The code that generates content needs to make sure it does not overflow the available space or you will get scroll bars. Common culprits are <canvas> or <svg> elements that are not displayed as blocks or little bits of whitespace.

If an interactive wants to request a change to the amount of vertical space available to it, it can pass a message to the PreTeXt page asking for a lti.frameResize. (It is also possible to request a different amount of horizontal space, but doing so is not guaranteed to work and is much more likely to result in breaking the overall page layout.) The simple demo below uses that process to allow for resizing. A resize request should trump the original aspect ratio.