Skip to main content
Logo image

Section 14 Interactive Elements, Server

View Source for section
<section xml:id="section-interactive-server" label="section-interactive-server">
  <title>Interactive Elements, Server</title>
  <idx><h>interactive elements</h><h>server</h></idx>
  <idx><h>embedded interactive elements</h><h>server</h></idx>
  <introduction>

    <p>
      When outputting Web page versions,
      it is possible to embed a variety of dynamic interactive elements.
      In a <latex />/PDF version,
      these will necessarily need to be replaced by some static substitute,
      such as a screenshot.
      See <xref ref="section-sage-cells" text="type-global" /> for the specifics of embedding instances of the Sage Cell Server,
      which is more elaborate, and not entirely similar.
    </p>
    <p>
      Interactives in this section have code that lives on a server somewhere
      (in the
      <q>cloud</q>).
      So maybe you uploaded an interactive demonstration,
      or maybe somebody else did.
      In this sense, these are easier to create or use.
      But pay attention, the code may come with restrictive licenses,
      even if you are the author originally.
      See <xref ref="section-interactive-authored" text="type-global" /> for more interactives that can be free as in
      <q>freedom</q>
      or <foreign xml:lang="fr-FR">liberté</foreign>.
      CalcPlot3D is the notable exception here.
    </p>
    <p>
      (2018-06-22) 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.
    </p>
  </introduction>
  <subsection xml:id="subsection-geogebra-server">
    <title>GeoGebra</title>
    <idx><h>Geogebra</h><h>server</h></idx>
    <idx><h>Geogebra</h><h>material</h></idx>
    <p>
      A Geogebra <term>material</term> is something you might use in a class.
      It could also be called an interactive demonstration.
      Go browsing at <url href="https://www.geogebra.org/materials/" visual="www.geogebra.org/materials/" /> and find something appropriate for your project.
      Or make an account and create your own.
    </p>
    <p>
      Once you find a material that looks instructive,
      it will be at a <init>URL</init> such as
      <cd>https://www.geogebra.org/m/KGn2d4Qd</cd>
      and you want to pick off the identifier on the end,
      in this case <c>KGn2d4Qd</c>.
      Then author
      <cd>&lt;interactive geogebra="KGn2d4Qd" /&gt;</cd>
      At this writing (2018-02-04) you will want to place this inside a <c>figure</c>,
      with a caption,
      as we do right now with material <c>KGn2d4Qd</c>.
    </p>
    <p>
      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 <tag>interactive</tag> element.
      If the width of the original material is anything other than 800 pixels,
      you should add <attr>material-width</attr> with the actual material width
      (units are pixels).
    </p>
    <figure>
      <caption>Right Triangle Paradox</caption>
      <interactive xml:id="geogebra-right-triangle" geogebra="KGn2d4Qd" width="70%" aspect="9:5" reset-icon="yes" />
    </figure>
    <p>
      There are some optional control elements that Geogebra provides,
      such as the presence of the toolbar and the reset button.
      These can be controlled by adding the following additional attributes to the <c>interactive</c>.
      <ul>
        <li>
          <p>
            <c>toolbar="yes"</c>:
            add the Geogebra toolbar above the material
          </p>
        </li>
        <li>
          <p>
            <c>algebra-input="yes"</c>:
            add an entry box below the material to add graphical objects using algebra formulas or Geogebra graphical commands
          </p>
        </li>
        <li>
          <p>
            <c>reset-icon="yes"</c>:
            enable the reset icon
          </p>
        </li>
        <li>
          <p>
            <c>shift-drag-zoom="yes"</c>:
            enable ability to drag and zoom the viewing context
          </p>
        </li>
      </ul>
    </p>
    <p>
      Note that materials hosted at <c>geogebra.org</c> 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.
    </p>
  </subsection>
  <subsection>
    <title>Desmos Graphs</title>
    <idx>Desmos graphs</idx>
    <p>
      <term>Desmos</term> provides interactive graphing applications.
      The following example was created by Ann Cary and made available via the
      <q>Share</q>
      function of Desmos.
      You can make your own Desmos graph, choose the
      <q>Share</q>
      icon, and the
      <q>Embed</q>
      option, to get a <init>URL</init> such as
      <cd>https://www.desmos.com/calculator/ttox1bvxku</cd>
      You want to pick off the identifier on the end,
      in this case <c>ttox1bvxku</c>,
      then author
      <cd>&lt;interactive desmos="ttox1bvxku" width="60%" aspect="2:3" /&gt;</cd>
      as we have done here.
    </p>
    <p>
      The static image employed in the <latex /> version of this article was obtained by viewing the graph at the Desmos site (<ie />,
      not the embedded version in the <pretext /> HTML version),
      and using the Share button to export a <init>PNG</init> image.
      In this case, we used a
      <q>Medium Rectangle</q>
      and
      <q>Thick</q>
      lines.
    </p>
    <figure>
      <caption>Graph of <m>ln(x^2+5)-3</m></caption>
      <interactive xml:id="desmos-natural-log" desmos="ttox1bvxku" width="60%" aspect="2:3" />
    </figure>
    <p>
      Note that Desmos has extensive
      <pubtitle>Terms of Service</pubtitle>
      which include restrictions on commercial uses.
    </p>
  </subsection>
  <subsection>
    <title>CalcPlot3D</title>
    <idx>CalcPlot3D</idx>
    <p>
      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.
    </p>
    <p>
      To use it, start at the
      <url href="https://c3d.libretexts.org/CalcPlot3D/index.html" visual="c3d.libretexts.org/CalcPlot3D/index.html">online app version</url>.
      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 <c>File</c>.
      From here you can save a <init>PNG</init> image for the static version,
      but you also want to select <c>Encode View in URL</c>.
      Now your browser address bar is filled with a query string (<em>all</em> the stuff <em>after</em>
      the question-mark) that has all the information necessary to reproduce your plot
      (and view).
      Copy everything after the first question-mark to the <c>interactive/code</c> element.
      Be sure to replace any ampersands by <c>&amp;amp;</c> (see the Author's Guide for more about certain characters in <init>URL</init>s).
      Examine the source for the examples below to see how they are authored.
      The
      <pubtitle>Help Manual</pubtitle>
      for CalcPlot3D is also available off the menu/hamburger icon in the upper-left.
    </p>
    <p>
      In <xref ref="figure-intersecting-planes" text="type-global" /> grab the image with your mouse and rotate it in various directions.
      Then while the image has focus,
      press the <c>3</c> key
      (short for
      <q>3-D</q>),
      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.
    </p>
    <p>
      When using a version with controls (e.g.
      <xref ref="figure-wavefunction" text="type-global" />),
      or the full application (e.g.
      <xref ref="figure-calcplot3d" text="type-global" />),
      specify an aspect ratio that is wider than it is tall.
      Start with <c>aspect="3:2"</c>,
      and perhaps fine-tune from there.
    </p>
    <figure xml:id="figure-intersecting-planes">
      <caption>Intersection of two planes (minimal embedding)</caption>
      <interactive xml:id="calcplot3d-intersection-planes" calcplot3d="type=implicit;equation=2x-y+z~0;cubes=16;visible=true;xmin=-2;xmax=2;ymin=-2;ymax=2;zmin=-2;zmax=2;alpha=-1;format=constant;constcol=rgb(61,133,198)&amp;type=parametric;parametric=2;x=-(u+v)/2;y=(u-v)/2;z=v;visible=true;umin=-3;umax=3;usteps=30;vmin=-2;vmax=2;vsteps=15;alpha=193;format=constant;constcol=rgb(255,161,114)&amp;type=text;text=x%20%2B%20y%20%2B%20z%20~%200;visible=true;point=(.5,-2.5,2.1);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=false;italic=false;fontmath=true;align=Upper-right&amp;type=text;text=2x%20-%20y%20%2B%20z%20~%200;visible=true;point=(2,2.2,-1.25);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=false;italic=false;fontmath=true;align=Upper-right&amp;type=window;hsrmode=0;anaglyph=-1;center=7.006292692220367,5.09036960455127,4.999999999999999,1;focus=0,0,0,1;up=-0.3290568564833397,-0.23907380036690282,0.9135454576426009,1;transparent=true;alpha=140;edgeson=false;faceson=true;showbox=false;showaxes=true;showticks=true;perspective=true;centerxpercent=0.5;centerypercent=0.5;rotationsteps=30;autospin=true;xygrid=false;yzgrid=false;xzgrid=false;gridsonbox=true;gridplanes=false;gridcolor=rgb(128,128,128);xmin=-2;xmax=2;ymin=-2;ymax=2;zmin=-2;zmax=2;xscale=1;yscale=1;zscale=1;zcmin=-4;zcmax=4;zoom=0.655294;xscalefactor=1;yscalefactor=1;zscalefactor=1" variant="minimal" width="80%" />
    </figure>
    <figure xml:id="figure-wavefunction">
      <caption>Probability wavefunction with contours (includes controls)</caption>
      <interactive xml:id="calcplot3d-probability-wavefunction" calcplot3d="type=jaxlabel;position=middle;math=%255Cpsi_%257Bn_x%252Cn_y%257D(x%252Cy);textonly=false&amp;type=z;z=sin(api*x)sin(bpi*y);visible=true;umin=0;umax=1;vmin=0;vmax=1;grid=50;format=normal;alpha=200;constcol=rgb(255,0,0);view=0;contourcolor=rgb(255,0,0);contourplot=true;showcontourplot=true;firstvalue=-1;stepsize=0.2;numlevels=11;xnum=75;ynum=75;show2d=false;hidesurface=false;hidelabels=false;showprojections=false;surfacecontours=true;projectioncolor=rgba(51,153,0,1);showxygrid=false;showxygridonbox=false&amp;type=slider;slider=a;value=1;steps=2;pmin=1;pmax=3;repeat=true;bounce=true;waittime=40;careful=true;noanimate=true;name=n_x&amp;type=slider;slider=b;value=1;steps=2;pmin=1;pmax=3;repeat=true;bounce=true;waittime=40;careful=true;noanimate=true;name=n_y&amp;type=text;text=0;visible=true;point=(0,0,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=15pt;bold=true;italic=false;fontmath=true;align=Center-left&amp;type=text;text=L;visible=true;point=(1,-0.025,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=text;text=L;visible=true;point=(-0.05,1,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=text;text=x;visible=true;point=(0.5,-0.07,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=text;text=y;visible=true;point=(-0.08,0.5,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=window;hsrmode=3;anaglyph=-1;center=-7.447051206708178,-2.790794355991455,3.71998429905919,1;focus=0.5,0.5,0.5,1;up=0.39804763218685024,0.14521777837291014,0.9057979241281567,1;transparent=true;alpha=140;twoviews=false;unlinkviews=false;axisextension=0;xaxislabel=%20;yaxislabel=%20;zaxislabel=%20;edgeson=false;faceson=true;showbox=false;showaxes=false;showticks=false;perspective=true;centerxpercent=0.5;centerypercent=0.4;rotationsteps=30;autospin=true;xygrid=false;yzgrid=false;xzgrid=false;gridsonbox=false;gridplanes=true;gridcolor=rgb(128,128,128);xmin=0;xmax=1;ymin=0;ymax=1;zmin=0;zmax=1;xscale=1;yscale=1;zscale=1;zcmin=-4;zcmax=4;zoom=3.543529;xscalefactor=1;yscalefactor=1;zscalefactor=0.5;hidexysliders=true;hidetracevalue=true" variant="controls" width="95%" aspect="3:2" />
    </figure>
    <figure xml:id="figure-calcplot3d">
      <caption>Plot of <m>f(x,y)=\dfrac{1}{y-x^2}</m> on <m>[-2,2]\times[-2,2]</m> (full application)</caption>
      <interactive xml:id="calcplot3d-full-application" calcplot3d="type=z;z=1/(y-x^2);visible=true;umin=-2;umax=2;vmin=-2;vmax=2;grid=30;format=normal;alpha=-1;constcol=rgb(255,0,0);contourcolor=red&amp;type=window;hsrmode=3;anaglyph=-1;center=5.529712854135209,7.349875454071844,3.9244880634856956,1;focus=0,0,0,1;up=-0.26875302682986874,-0.2884991397174344,0.9189886054528014,1;transparent=true;alpha=140;edgeson=true;faceson=true;showbox=true;showaxes=true;showticks=true;perspective=true;centerxpercent=0.5;centerypercent=0.5;rotationsteps=30;autospin=true;xygrid=false;yzgrid=false;xzgrid=false;gridsonbox=true;gridplanes=false;gridcolor=rgb(128,128,128);xmin=-2;xmax=2;ymin=-2;ymax=2;zmin=-4;zmax=4;xscale=1;yscale=1;zscale=1;zcmin=-4;zcmax=4;zoom=0.468667;xscalefactor=1;yscalefactor=1;zscalefactor=1" variant="application" width="95%" aspect="3:2" />
    </figure>
  </subsection>
  <subsection xml:id="interactive-iframes-server">
    <title>IFrames from Servers</title>
    <p>
      The <c>iFrame</c> 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 <xref ref="interactive-iframes-local" text="type-global" /> for the local file version.
    </p>
    <p>
      This example is from
      <url href="https://phet.colorado.edu/" visual="phet.colorado.edu">PhET Interactive Simulations</url>.
    </p>
    <figure xml:id="figure-phet-fourier">
      <caption>Fourier: Making Waves <c>iframe</c></caption>
      <interactive xml:id="interactive-phet-fourier" iframe="https://phet.colorado.edu/sims/html/fourier-making-waves/latest/fourier-making-waves_en.html" preview="preview/phet-fourier-preview.png" width="95%" aspect="15:10" />
    </figure>
    <p>
      Anything that suggests you can <term>embed</term>
      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 <init>URL</init> is obtained by using the
      <q>Share</q>
      feature, and then the
      <q>Embed a map</q>
      option has <init>HTML</init> with the <init>URL</init> in a <attr>src</attr> attribute.
    </p>
    <figure xml:id="map-california">
      <caption>California.</caption>
      <interactive xml:id="interactive-map-california" iframe="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6512739.689202133!2d-124.5931848890628!3d37.151542068971864!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb9fe5f285e3d%3A0x8b5109a227086f55!2sCalifornie%2C%20%C3%89tats-Unis!5e0!3m2!1sfr!2sca!4v1682454368296!5m2!1sfr!2sca" width="95%" aspect="15:10" />
    </figure>
  </subsection>
</section>
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 have code that lives on a server somewhere (in the “cloud”). So maybe you uploaded an interactive demonstration, or maybe somebody else did. In this sense, these are easier to create or use. But pay attention, the code may come with restrictive licenses, even if you are the author originally. See Section 13 for more interactives that can be free as in “freedom” or liberté. CalcPlot3D is the notable exception here.
(2018-06-22) 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 14.1 GeoGebra

View Source for subsection
<subsection xml:id="subsection-geogebra-server">
  <title>GeoGebra</title>
  <idx><h>Geogebra</h><h>server</h></idx>
  <idx><h>Geogebra</h><h>material</h></idx>
  <p>
    A Geogebra <term>material</term> is something you might use in a class.
    It could also be called an interactive demonstration.
    Go browsing at <url href="https://www.geogebra.org/materials/" visual="www.geogebra.org/materials/" /> and find something appropriate for your project.
    Or make an account and create your own.
  </p>
  <p>
    Once you find a material that looks instructive,
    it will be at a <init>URL</init> such as
    <cd>https://www.geogebra.org/m/KGn2d4Qd</cd>
    and you want to pick off the identifier on the end,
    in this case <c>KGn2d4Qd</c>.
    Then author
    <cd>&lt;interactive geogebra="KGn2d4Qd" /&gt;</cd>
    At this writing (2018-02-04) you will want to place this inside a <c>figure</c>,
    with a caption,
    as we do right now with material <c>KGn2d4Qd</c>.
  </p>
  <p>
    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 <tag>interactive</tag> element.
    If the width of the original material is anything other than 800 pixels,
    you should add <attr>material-width</attr> with the actual material width
    (units are pixels).
  </p>
  <figure>
    <caption>Right Triangle Paradox</caption>
    <interactive xml:id="geogebra-right-triangle" geogebra="KGn2d4Qd" width="70%" aspect="9:5" reset-icon="yes" />
  </figure>
  <p>
    There are some optional control elements that Geogebra provides,
    such as the presence of the toolbar and the reset button.
    These can be controlled by adding the following additional attributes to the <c>interactive</c>.
    <ul>
      <li>
        <p>
          <c>toolbar="yes"</c>:
          add the Geogebra toolbar above the material
        </p>
      </li>
      <li>
        <p>
          <c>algebra-input="yes"</c>:
          add an entry box below the material to add graphical objects using algebra formulas or Geogebra graphical commands
        </p>
      </li>
      <li>
        <p>
          <c>reset-icon="yes"</c>:
          enable the reset icon
        </p>
      </li>
      <li>
        <p>
          <c>shift-drag-zoom="yes"</c>:
          enable ability to drag and zoom the viewing context
        </p>
      </li>
    </ul>
  </p>
  <p>
    Note that materials hosted at <c>geogebra.org</c> 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.
  </p>
</subsection>
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. 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).
View Source for figure
<figure>
  <caption>Right Triangle Paradox</caption>
  <interactive xml:id="geogebra-right-triangle" geogebra="KGn2d4Qd" width="70%" aspect="9:5" reset-icon="yes" />
</figure>
Figure 14.1. Right Triangle Paradox
There are some optional control elements that Geogebra provides, such as the presence of the toolbar and the reset button. These can be controlled by adding the following additional attributes to the interactive.
  • toolbar="yes": add the Geogebra toolbar above the material
  • algebra-input="yes": add an entry box below the material to add graphical objects using algebra formulas or Geogebra graphical commands
  • reset-icon="yes": enable the reset icon
  • shift-drag-zoom="yes": enable ability to drag and zoom the viewing context
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 14.2 Desmos Graphs

View Source for subsection
<subsection>
  <title>Desmos Graphs</title>
  <idx>Desmos graphs</idx>
  <p>
    <term>Desmos</term> provides interactive graphing applications.
    The following example was created by Ann Cary and made available via the
    <q>Share</q>
    function of Desmos.
    You can make your own Desmos graph, choose the
    <q>Share</q>
    icon, and the
    <q>Embed</q>
    option, to get a <init>URL</init> such as
    <cd>https://www.desmos.com/calculator/ttox1bvxku</cd>
    You want to pick off the identifier on the end,
    in this case <c>ttox1bvxku</c>,
    then author
    <cd>&lt;interactive desmos="ttox1bvxku" width="60%" aspect="2:3" /&gt;</cd>
    as we have done here.
  </p>
  <p>
    The static image employed in the <latex /> version of this article was obtained by viewing the graph at the Desmos site (<ie />,
    not the embedded version in the <pretext /> HTML version),
    and using the Share button to export a <init>PNG</init> image.
    In this case, we used a
    <q>Medium Rectangle</q>
    and
    <q>Thick</q>
    lines.
  </p>
  <figure>
    <caption>Graph of <m>ln(x^2+5)-3</m></caption>
    <interactive xml:id="desmos-natural-log" desmos="ttox1bvxku" width="60%" aspect="2:3" />
  </figure>
  <p>
    Note that Desmos has extensive
    <pubtitle>Terms of Service</pubtitle>
    which include restrictions on commercial uses.
  </p>
</subsection>
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" width="60%" aspect="2:3" />
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.
View Source for figure
<figure>
  <caption>Graph of <m>ln(x^2+5)-3</m></caption>
  <interactive xml:id="desmos-natural-log" desmos="ttox1bvxku" width="60%" aspect="2:3" />
</figure>
Figure 14.2. Graph of \(ln(x^2+5)-3\)
Note that Desmos has extensive Terms of Service which include restrictions on commercial uses.

Subsection 14.3 CalcPlot3D

View Source for subsection
<subsection>
  <title>CalcPlot3D</title>
  <idx>CalcPlot3D</idx>
  <p>
    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.
  </p>
  <p>
    To use it, start at the
    <url href="https://c3d.libretexts.org/CalcPlot3D/index.html" visual="c3d.libretexts.org/CalcPlot3D/index.html">online app version</url>.
    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 <c>File</c>.
    From here you can save a <init>PNG</init> image for the static version,
    but you also want to select <c>Encode View in URL</c>.
    Now your browser address bar is filled with a query string (<em>all</em> the stuff <em>after</em>
    the question-mark) that has all the information necessary to reproduce your plot
    (and view).
    Copy everything after the first question-mark to the <c>interactive/code</c> element.
    Be sure to replace any ampersands by <c>&amp;amp;</c> (see the Author's Guide for more about certain characters in <init>URL</init>s).
    Examine the source for the examples below to see how they are authored.
    The
    <pubtitle>Help Manual</pubtitle>
    for CalcPlot3D is also available off the menu/hamburger icon in the upper-left.
  </p>
  <p>
    In <xref ref="figure-intersecting-planes" text="type-global" /> grab the image with your mouse and rotate it in various directions.
    Then while the image has focus,
    press the <c>3</c> key
    (short for
    <q>3-D</q>),
    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.
  </p>
  <p>
    When using a version with controls (e.g.
    <xref ref="figure-wavefunction" text="type-global" />),
    or the full application (e.g.
    <xref ref="figure-calcplot3d" text="type-global" />),
    specify an aspect ratio that is wider than it is tall.
    Start with <c>aspect="3:2"</c>,
    and perhaps fine-tune from there.
  </p>
  <figure xml:id="figure-intersecting-planes">
    <caption>Intersection of two planes (minimal embedding)</caption>
    <interactive xml:id="calcplot3d-intersection-planes" calcplot3d="type=implicit;equation=2x-y+z~0;cubes=16;visible=true;xmin=-2;xmax=2;ymin=-2;ymax=2;zmin=-2;zmax=2;alpha=-1;format=constant;constcol=rgb(61,133,198)&amp;type=parametric;parametric=2;x=-(u+v)/2;y=(u-v)/2;z=v;visible=true;umin=-3;umax=3;usteps=30;vmin=-2;vmax=2;vsteps=15;alpha=193;format=constant;constcol=rgb(255,161,114)&amp;type=text;text=x%20%2B%20y%20%2B%20z%20~%200;visible=true;point=(.5,-2.5,2.1);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=false;italic=false;fontmath=true;align=Upper-right&amp;type=text;text=2x%20-%20y%20%2B%20z%20~%200;visible=true;point=(2,2.2,-1.25);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=false;italic=false;fontmath=true;align=Upper-right&amp;type=window;hsrmode=0;anaglyph=-1;center=7.006292692220367,5.09036960455127,4.999999999999999,1;focus=0,0,0,1;up=-0.3290568564833397,-0.23907380036690282,0.9135454576426009,1;transparent=true;alpha=140;edgeson=false;faceson=true;showbox=false;showaxes=true;showticks=true;perspective=true;centerxpercent=0.5;centerypercent=0.5;rotationsteps=30;autospin=true;xygrid=false;yzgrid=false;xzgrid=false;gridsonbox=true;gridplanes=false;gridcolor=rgb(128,128,128);xmin=-2;xmax=2;ymin=-2;ymax=2;zmin=-2;zmax=2;xscale=1;yscale=1;zscale=1;zcmin=-4;zcmax=4;zoom=0.655294;xscalefactor=1;yscalefactor=1;zscalefactor=1" variant="minimal" width="80%" />
  </figure>
  <figure xml:id="figure-wavefunction">
    <caption>Probability wavefunction with contours (includes controls)</caption>
    <interactive xml:id="calcplot3d-probability-wavefunction" calcplot3d="type=jaxlabel;position=middle;math=%255Cpsi_%257Bn_x%252Cn_y%257D(x%252Cy);textonly=false&amp;type=z;z=sin(api*x)sin(bpi*y);visible=true;umin=0;umax=1;vmin=0;vmax=1;grid=50;format=normal;alpha=200;constcol=rgb(255,0,0);view=0;contourcolor=rgb(255,0,0);contourplot=true;showcontourplot=true;firstvalue=-1;stepsize=0.2;numlevels=11;xnum=75;ynum=75;show2d=false;hidesurface=false;hidelabels=false;showprojections=false;surfacecontours=true;projectioncolor=rgba(51,153,0,1);showxygrid=false;showxygridonbox=false&amp;type=slider;slider=a;value=1;steps=2;pmin=1;pmax=3;repeat=true;bounce=true;waittime=40;careful=true;noanimate=true;name=n_x&amp;type=slider;slider=b;value=1;steps=2;pmin=1;pmax=3;repeat=true;bounce=true;waittime=40;careful=true;noanimate=true;name=n_y&amp;type=text;text=0;visible=true;point=(0,0,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=15pt;bold=true;italic=false;fontmath=true;align=Center-left&amp;type=text;text=L;visible=true;point=(1,-0.025,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=text;text=L;visible=true;point=(-0.05,1,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=text;text=x;visible=true;point=(0.5,-0.07,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=text;text=y;visible=true;point=(-0.08,0.5,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=window;hsrmode=3;anaglyph=-1;center=-7.447051206708178,-2.790794355991455,3.71998429905919,1;focus=0.5,0.5,0.5,1;up=0.39804763218685024,0.14521777837291014,0.9057979241281567,1;transparent=true;alpha=140;twoviews=false;unlinkviews=false;axisextension=0;xaxislabel=%20;yaxislabel=%20;zaxislabel=%20;edgeson=false;faceson=true;showbox=false;showaxes=false;showticks=false;perspective=true;centerxpercent=0.5;centerypercent=0.4;rotationsteps=30;autospin=true;xygrid=false;yzgrid=false;xzgrid=false;gridsonbox=false;gridplanes=true;gridcolor=rgb(128,128,128);xmin=0;xmax=1;ymin=0;ymax=1;zmin=0;zmax=1;xscale=1;yscale=1;zscale=1;zcmin=-4;zcmax=4;zoom=3.543529;xscalefactor=1;yscalefactor=1;zscalefactor=0.5;hidexysliders=true;hidetracevalue=true" variant="controls" width="95%" aspect="3:2" />
  </figure>
  <figure xml:id="figure-calcplot3d">
    <caption>Plot of <m>f(x,y)=\dfrac{1}{y-x^2}</m> on <m>[-2,2]\times[-2,2]</m> (full application)</caption>
    <interactive xml:id="calcplot3d-full-application" calcplot3d="type=z;z=1/(y-x^2);visible=true;umin=-2;umax=2;vmin=-2;vmax=2;grid=30;format=normal;alpha=-1;constcol=rgb(255,0,0);contourcolor=red&amp;type=window;hsrmode=3;anaglyph=-1;center=5.529712854135209,7.349875454071844,3.9244880634856956,1;focus=0,0,0,1;up=-0.26875302682986874,-0.2884991397174344,0.9189886054528014,1;transparent=true;alpha=140;edgeson=true;faceson=true;showbox=true;showaxes=true;showticks=true;perspective=true;centerxpercent=0.5;centerypercent=0.5;rotationsteps=30;autospin=true;xygrid=false;yzgrid=false;xzgrid=false;gridsonbox=true;gridplanes=false;gridcolor=rgb(128,128,128);xmin=-2;xmax=2;ymin=-2;ymax=2;zmin=-4;zmax=4;xscale=1;yscale=1;zscale=1;zcmin=-4;zcmax=4;zoom=0.468667;xscalefactor=1;yscalefactor=1;zscalefactor=1" variant="application" width="95%" aspect="3:2" />
  </figure>
</subsection>
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
 1 
c3d.libretexts.org/CalcPlot3D/index.html
. 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 &amp; (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 14.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 14.4), or the full application (e.g. Figure 14.5), specify an aspect ratio that is wider than it is tall. Start with aspect="3:2", and perhaps fine-tune from there.
View Source for figure
<figure xml:id="figure-intersecting-planes">
  <caption>Intersection of two planes (minimal embedding)</caption>
  <interactive xml:id="calcplot3d-intersection-planes" calcplot3d="type=implicit;equation=2x-y+z~0;cubes=16;visible=true;xmin=-2;xmax=2;ymin=-2;ymax=2;zmin=-2;zmax=2;alpha=-1;format=constant;constcol=rgb(61,133,198)&amp;type=parametric;parametric=2;x=-(u+v)/2;y=(u-v)/2;z=v;visible=true;umin=-3;umax=3;usteps=30;vmin=-2;vmax=2;vsteps=15;alpha=193;format=constant;constcol=rgb(255,161,114)&amp;type=text;text=x%20%2B%20y%20%2B%20z%20~%200;visible=true;point=(.5,-2.5,2.1);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=false;italic=false;fontmath=true;align=Upper-right&amp;type=text;text=2x%20-%20y%20%2B%20z%20~%200;visible=true;point=(2,2.2,-1.25);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=false;italic=false;fontmath=true;align=Upper-right&amp;type=window;hsrmode=0;anaglyph=-1;center=7.006292692220367,5.09036960455127,4.999999999999999,1;focus=0,0,0,1;up=-0.3290568564833397,-0.23907380036690282,0.9135454576426009,1;transparent=true;alpha=140;edgeson=false;faceson=true;showbox=false;showaxes=true;showticks=true;perspective=true;centerxpercent=0.5;centerypercent=0.5;rotationsteps=30;autospin=true;xygrid=false;yzgrid=false;xzgrid=false;gridsonbox=true;gridplanes=false;gridcolor=rgb(128,128,128);xmin=-2;xmax=2;ymin=-2;ymax=2;zmin=-2;zmax=2;xscale=1;yscale=1;zscale=1;zcmin=-4;zcmax=4;zoom=0.655294;xscalefactor=1;yscalefactor=1;zscalefactor=1" variant="minimal" width="80%" />
</figure>
Figure 14.3. Intersection of two planes (minimal embedding)
View Source for figure
<figure xml:id="figure-wavefunction">
  <caption>Probability wavefunction with contours (includes controls)</caption>
  <interactive xml:id="calcplot3d-probability-wavefunction" calcplot3d="type=jaxlabel;position=middle;math=%255Cpsi_%257Bn_x%252Cn_y%257D(x%252Cy);textonly=false&amp;type=z;z=sin(api*x)sin(bpi*y);visible=true;umin=0;umax=1;vmin=0;vmax=1;grid=50;format=normal;alpha=200;constcol=rgb(255,0,0);view=0;contourcolor=rgb(255,0,0);contourplot=true;showcontourplot=true;firstvalue=-1;stepsize=0.2;numlevels=11;xnum=75;ynum=75;show2d=false;hidesurface=false;hidelabels=false;showprojections=false;surfacecontours=true;projectioncolor=rgba(51,153,0,1);showxygrid=false;showxygridonbox=false&amp;type=slider;slider=a;value=1;steps=2;pmin=1;pmax=3;repeat=true;bounce=true;waittime=40;careful=true;noanimate=true;name=n_x&amp;type=slider;slider=b;value=1;steps=2;pmin=1;pmax=3;repeat=true;bounce=true;waittime=40;careful=true;noanimate=true;name=n_y&amp;type=text;text=0;visible=true;point=(0,0,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=15pt;bold=true;italic=false;fontmath=true;align=Center-left&amp;type=text;text=L;visible=true;point=(1,-0.025,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=text;text=L;visible=true;point=(-0.05,1,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=text;text=x;visible=true;point=(0.5,-0.07,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=text;text=y;visible=true;point=(-0.08,0.5,0);color=rgb(0,0,0);font=Times%20New%20Roman;fontsize=14pt;bold=true;italic=false;fontmath=true;align=Center&amp;type=window;hsrmode=3;anaglyph=-1;center=-7.447051206708178,-2.790794355991455,3.71998429905919,1;focus=0.5,0.5,0.5,1;up=0.39804763218685024,0.14521777837291014,0.9057979241281567,1;transparent=true;alpha=140;twoviews=false;unlinkviews=false;axisextension=0;xaxislabel=%20;yaxislabel=%20;zaxislabel=%20;edgeson=false;faceson=true;showbox=false;showaxes=false;showticks=false;perspective=true;centerxpercent=0.5;centerypercent=0.4;rotationsteps=30;autospin=true;xygrid=false;yzgrid=false;xzgrid=false;gridsonbox=false;gridplanes=true;gridcolor=rgb(128,128,128);xmin=0;xmax=1;ymin=0;ymax=1;zmin=0;zmax=1;xscale=1;yscale=1;zscale=1;zcmin=-4;zcmax=4;zoom=3.543529;xscalefactor=1;yscalefactor=1;zscalefactor=0.5;hidexysliders=true;hidetracevalue=true" variant="controls" width="95%" aspect="3:2" />
</figure>
Figure 14.4. Probability wavefunction with contours (includes controls)
View Source for figure
<figure xml:id="figure-calcplot3d">
  <caption>Plot of <m>f(x,y)=\dfrac{1}{y-x^2}</m> on <m>[-2,2]\times[-2,2]</m> (full application)</caption>
  <interactive xml:id="calcplot3d-full-application" calcplot3d="type=z;z=1/(y-x^2);visible=true;umin=-2;umax=2;vmin=-2;vmax=2;grid=30;format=normal;alpha=-1;constcol=rgb(255,0,0);contourcolor=red&amp;type=window;hsrmode=3;anaglyph=-1;center=5.529712854135209,7.349875454071844,3.9244880634856956,1;focus=0,0,0,1;up=-0.26875302682986874,-0.2884991397174344,0.9189886054528014,1;transparent=true;alpha=140;edgeson=true;faceson=true;showbox=true;showaxes=true;showticks=true;perspective=true;centerxpercent=0.5;centerypercent=0.5;rotationsteps=30;autospin=true;xygrid=false;yzgrid=false;xzgrid=false;gridsonbox=true;gridplanes=false;gridcolor=rgb(128,128,128);xmin=-2;xmax=2;ymin=-2;ymax=2;zmin=-4;zmax=4;xscale=1;yscale=1;zscale=1;zcmin=-4;zcmax=4;zoom=0.468667;xscalefactor=1;yscalefactor=1;zscalefactor=1" variant="application" width="95%" aspect="3:2" />
</figure>
Figure 14.5. Plot of \(f(x,y)=\dfrac{1}{y-x^2}\) on \([-2,2]\times[-2,2]\) (full application)

Subsection 14.4 IFrames from Servers

View Source for subsection
<subsection xml:id="interactive-iframes-server">
  <title>IFrames from Servers</title>
  <p>
    The <c>iFrame</c> 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 <xref ref="interactive-iframes-local" text="type-global" /> for the local file version.
  </p>
  <p>
    This example is from
    <url href="https://phet.colorado.edu/" visual="phet.colorado.edu">PhET Interactive Simulations</url>.
  </p>
  <figure xml:id="figure-phet-fourier">
    <caption>Fourier: Making Waves <c>iframe</c></caption>
    <interactive xml:id="interactive-phet-fourier" iframe="https://phet.colorado.edu/sims/html/fourier-making-waves/latest/fourier-making-waves_en.html" preview="preview/phet-fourier-preview.png" width="95%" aspect="15:10" />
  </figure>
  <p>
    Anything that suggests you can <term>embed</term>
    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 <init>URL</init> is obtained by using the
    <q>Share</q>
    feature, and then the
    <q>Embed a map</q>
    option has <init>HTML</init> with the <init>URL</init> in a <attr>src</attr> attribute.
  </p>
  <figure xml:id="map-california">
    <caption>California.</caption>
    <interactive xml:id="interactive-map-california" iframe="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6512739.689202133!2d-124.5931848890628!3d37.151542068971864!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb9fe5f285e3d%3A0x8b5109a227086f55!2sCalifornie%2C%20%C3%89tats-Unis!5e0!3m2!1sfr!2sca!4v1682454368296!5m2!1sfr!2sca" width="95%" aspect="15:10" />
  </figure>
</subsection>
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 13.9 for the local file version.
This example is from PhET Interactive Simulations
 2 
phet.colorado.edu
.
View Source for figure
<figure xml:id="figure-phet-fourier">
  <caption>Fourier: Making Waves <c>iframe</c></caption>
  <interactive xml:id="interactive-phet-fourier" iframe="https://phet.colorado.edu/sims/html/fourier-making-waves/latest/fourier-making-waves_en.html" preview="preview/phet-fourier-preview.png" width="95%" aspect="15:10" />
</figure>
Figure 14.6. Fourier: Making Waves iframe
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.
View Source for figure
<figure xml:id="map-california">
  <caption>California.</caption>
  <interactive xml:id="interactive-map-california" iframe="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6512739.689202133!2d-124.5931848890628!3d37.151542068971864!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb9fe5f285e3d%3A0x8b5109a227086f55!2sCalifornie%2C%20%C3%89tats-Unis!5e0!3m2!1sfr!2sca!4v1682454368296!5m2!1sfr!2sca" width="95%" aspect="15:10" />
</figure>
Figure 14.7. California.