left arrow key to step backwards through presentation.b key to return to the beginning of the presentation.e key to go to the end of the presentation.This is for slide-show presentations with simple incremental transitions.
So when the right-arrow key is pressed, new items appear on a slide.
The right-arrow key will advance to the next slide when the incremental transitions are complete.
To create a presentation, edit this template to add slides.
Slides are enclosed by HTML section tags.
Within each slide, paragraphs (HTML p tags) appear as incremental transitions.
Anything else in a section will be visible through all of the incremental transitions.
This includes HTML header tags such as h3.
If material appears before the first section, it will be visible at the top of every slide.
Likewise, if material is included after the last section, it will appear at the bottom of every slide.
This enables a header to appear on every slide. In theory, also a footer, but there is no control over vertical spacing in this template.
What makes the template work is about only 70 lines of Javascript code.
With Javascript, the components of an HTML document can be accessed.
In this case, all of the section tags.
These can then be 'turned on' or 'turned off' using Javascript, so that only one desired section (slide) appears.
Likewise, within each section, all of the paragraph p tags can be obtained, and these can also be shown or hidden with Javascript.
The Javascript code listens for keystrokes; it changes the slide and transition numbers when the arrow keys are used, and updates the document as displayed.
The remaining component of the slide show is a CSS stylesheet that controls font sizes, padding, etc.
If the fonts, colors, sizes, etc are too small or too big, or too boring, edit the CSS stylesheet in this template. It may be self-explanatory if you've never done this before.
The purpose of this plain slide deck template is two-fold:
First, it is meant to be very plain: visually simple and non-distracting; new items in incremental transitions simply appear (no animations, cross-fades, etc). This is for the intended purpose of this template, namely math lectures, where running calculations (multi-line equations) will appear line-by-line.
Second, it is meant to be very easy to write presentations in. The capabilities are limited, but everything is very easy to set up. Because sequential transitions are automatic across paragraphs, it is easy to correct or edit slides.
As just mentioned, my primary motivation for this slide deck format is to facilitate math lectures.
The ingredient that makes this possible is MathJax.
MathJax allows the user to insert \(\LaTeX\) code into the presentation. This is a widely-used system for mathematical typsetting familiar to most mathematicians, physicists, and other STEM folks.
MathJax produces high-quality output, and it is fast; it does not seem to slow down or get boggy even if your presentation has lots of math in it.
To use MathJax, just call the appropriate library with simple script (included in this template in the head of the HTML document):
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"> </script>
A quirk of MathJax is that while \(\LaTeX\) uses dollar signs to delimit mathematical notation, dollar signs are problematic in HTML. So bracket equations by \( and \), or \[ and \] for displayed equations. (These brackets work in ordinary \(\LaTeX\), so it might help to cultivate the habit of using these instead of dollar signs.)
Thus, including the code \(\sqrt{2}\) will produce \(\sqrt{2}\).
The code \[\sin^2\theta + \cos^2\theta=1\] will produce
\[\sin^2\theta + \cos^2\theta = 1\]
One minor annoyance with MathJax: It automatically sets the size of the mathematical notation to reflect the size of the surrounding text. But this can lead to trouble if the CSS stylesheet in the template is edited.
The solution is not to attempt to change the relative size (or 'scale') of the MathJax notation.
Instead, the MathJax notation is controlled by the font-size of the body element of the HTML document.
So you can control the font sizes in the section or p HTML elements, and the font size in the body element, to get the size of the mathematical notation just right relative to the text.
The last thing to mention is how to put diagrams into a slide deck: Use SVG (scalable vector graphics). SVG graphics are easy if a bit tedious to build by hand. Here's a modest example:
<svg width="200" height="200"> <polyline fill="yellow" stroke="black" stroke-width="2" points="25,175 175,175 175,25 25,25" /> </svg>
But there's one big puzzle: How to put mathematical notation in a diagram. The trick is to use the foreignObject tag in your SVG code; you can insert MathJax-\(\LaTeX\) code into your diagram.
<svg width="200" height="200">
<polyline fill="yellow" stroke="black" stroke-width="2"
points="25,175 175,175 175,25 25,25" />
<foreignObject x="60" y="45" width="25" height="25">\(\sqrt{2}\)
</foreignObject>
</svg>
This gets around the fact that the drawing-macro package PSTricks doesn't work in MathJax.
A useful thing to mention: in SVG, the origin is at the upper-left corner of the graphic window.
The W3Schools site has a simple introduction to SVG: www.w3schools.com/graphics/svg_intro.asp.
One last thing to mention:
SVG is a good way of inserting diagrams into a presentation. But inserting images using the HTML img tag certainly works.
HTML5/Canvas will also work well in this format (if you are familiar with it).
Edit this template to produce a slide deck.
Slides are enclosed by section tags; incremental transitions by p paragraph tags.
Use MathJax for mathematical notation, and SVG (with MathJax) for diagrams.
The resulting presentations are spartan but intended to be easy to create, and easy to use in the classroom.