#lang pollen
◊(require racket/math)
◊(require racket/format)
◊(define-meta title "Demonstration of features")
◊slo{
Learn about the capabilities of this lesson building framework
Take a look around. Hey, math! ◊${\frac{\pi^2}{6} = \sum_{n=1}^\infty \frac{1}{n^2}}.
You get the idea.
}
◊slidebreak
With Pollen, we can define custom HTML and ◊LaTeX environments for common setups.◊sidenote{This is an optional sidenote—a great place to put non-essential information. On mobile devices where screen space is limited, sidenotes like these collapse out of view.} Here are a few examples:
◊warmup{
Find the line perpendicular to the line ◊${y = \frac{2}{3}x - 7} which passes through the point ◊${(6,0)}.
}
◊slidebreak
◊rule[#:title "Pythagorean Theorem"]{
In a right triangle, the square of the length of the hypotenuse of a right triangle equals the sum of the squares of the lengths of the other two sides.
◊tikz[#:options "[scale=1.25]"]{
\coordinate [label=left:$C$] (A) at (-1.5cm,-1.cm);
\coordinate [label=right:$A$] (C) at (1.5cm,-1.0cm);
\coordinate [label=above:$B$] (B) at (1.5cm,1.0cm);
\draw (A) -- node[above] {$a$} (B) -- node[right] {$c$} (C) -- node[below] {$b$} (A);
\draw (1.25cm,-1.0cm) rectangle (1.5cm,-0.75cm);
}
For this triangle, this means that ◊${a^2 + b^2 = c^2}.
}
◊slidebreak
◊example[#:title "Some boring problem"]{
The bottom of a ladder must be placed 3 feet from a wall. The ladder is 10 feet long. How far above the ground does the ladder touch the wall?
}
◊yourturn{
A soccer field is a rectangle 100 meters wide and 130 meters long. The coach asks players to run from one corner to the other corner diagonally across. What is that distance?
}
◊slidebreak
◊sec{A home for manimations}
◊book{Manim is a python library for creating mathematical animations. Originally developed by Grant Sanderson (of 3Blue1Brown), the software is now maintained and actively developed by the ◊hyperlink["https://www.manim.community/"]{Manim Community}.
I've incorporated Manim animations in my lessons before, but I've notived that pausing the animations to narrate can be a little tricky to time correctly. Wouldn't it be nice if the video somehow ◊emph{knew} where to pause?
It turns out that in Manim, you can set splitting points within a scene and render that scene into multiple separate animations. If we were making a PowerPoint, we would then manually drag every individual animation over to our presentation. But with Pollen, we can define our own custom markup that does the heavy lifting for us.} The command ◊code{◊"◊"manim["name-of-scene"]} grabs all of individual animations for a given scene and lays them out in a carousel for us.
◊slidebreak
◊manim[#:fullscreen #t "SamplingDistributionProportion"]{An animation illustrating the sampling distribution of a proportion. Users can click the auto-play button or navigate the animations manually.}
◊slidebreak
◊book{Widescreen animations work also. And in the slides version of this lesson, the animation flows perfectly with the rest of the content.}
◊; ◊slidebreak
◊; ◊manim[#:fullscreen #t "FollowingGraphCamera"]
◊slidebreak
◊sec{Powerpoint figures: You can have it all}
◊book{I appreciate how quick and easy figure-making can be with Powerpoint, so I want to have some way of incorporating Powerpoint-generated figures into these lessons. But because I am allergic to rasterization, the vector graphics need to be preserved (as SVG in HTML, and as PDF in ◊LaTeX).} The command ◊code{◊"◊"pptfig["fig-name"]} grabs ◊code{fig-name.pdf}, converts it to SVG, and inserts the appropriately-scaled image into the page—for ◊LaTeX, it inserts the PDF.
◊pptfig["eat-pray-love" #:p '(0.5 1)]
◊slidebreak
◊pptfig["chartjunk"]{PDF figures can include captions too!}
◊slidebreak
◊sec{◊|LaTeX|: No more MathJax}
MathJax is the defacto standard for typesetting mathematics on the web. But there are some downsides:
◊numbered-list{
Like anything rendered on the client's side with JavaScript, there's a start-up time tax. As of MathJax 3.0, that wait is brief (and with ◊|KaTeX|, even briefer) but the more math on the page, the more noticeable the wait.
There are only a subset of ◊|LaTeX| commands and environments to choose from. That's not a failing of MathJax—it was only ever meant to handle inline and display math. ◊book{But I want it all.}
Limited fonts (with MathJax 3.0, only one). ◊book{I don't have major problems with the default font, but like most things in life, I like to have options. More importantly,} I incorporate text in my math equations all the time and prefer it to match the body text:
◊$${\text{$z$-score} = \frac{\text{“data”} - \text{“mean”}}{\text{“standard deviation”}} = \frac{y - \mu}{\sigma}}
}
◊slidebreak
◊book{With Pollen, we don't have to compromise—we can write markup for whatever the heck we want. In this case,} I've written some custom markup that takes in ◊|LaTeX| code, spits out a PDF, converts that PDF to SVG, and throws that image into our document.
◊book{Let's try it out.} For display ◊|LaTeX|, wrap your equation around ◊code{◊"◊"$${ ... }}:
◊blockcode{◊"◊"$${\mathcal{L}_{\mathcal{T}}(\vec{\lambda}) = \sum_{\mathbf{x},\mathbf{s}\in\mathcal{T}} \log P(\mathbf{x}|\mathbf{S}) - \sum_{i=1}^m \frac{\lambda_i^2}{2\sigma^2}}}
◊$${\mathcal{L}_{\mathcal{T}}(\vec{\lambda}) = \sum_{\mathbf{x},\mathbf{s}\in\mathcal{T}} \log P(\mathbf{x}|\mathbf{S}) - \sum_{i=1}^m \frac{\lambda_i^2}{2\sigma^2}}
◊slidebreak
Or do whatever you want with the more general ◊code{◊"◊"latex} command. Here's a TikZ figure◊sidenote{Figure courtesy of ◊hyperlink["https://tex.stackexchange.com/a/158732/148973"]{Charles Staats}} just because we can:
◊latex[#:name "more-tikz-stuff"]{
\begin{tikzpicture}[xscale=8,yscale=3.5]
\newcommand{\xmin}{-.4} \newcommand{\xmax}{.5} \newcommand{\deltaX}{.65}
\begin{scope}
\draw[black,->] (-.6,-.7) -- (.5,-.7) node[right] {$x$};
\draw[black,->] (-.5,-.8) -- (-.5,0.5) node[above] {$y$};
\path[fill=black!30,draw=black!30] (-.33,-.33*1.65) --
(-.33,-.33*.35) --
(.33,.33*.35) -- (.33,.33*1.65) -- cycle;
\draw[thick,densely dotted] (.33,-.72)
node[below] (delta3) {$x_0+\delta\strut$} -- (.33,.33*1.65);
\draw[thick,densely dotted] (-.33,-.72)
node[below] (mdelta3) {$x_0-\delta\strut$} -- (-.33,-.33*.35);
\fill[black!50] (-.25,-.25*3/2) -- (-.25,-.25/2) -- (.25,.25/2) --
(.25,.25*3/2) -- cycle;
\path[fill=black!70] (-.15,-.15*1.25) -- (-.15,-.15*.75) --
(.15,.15*.75) -- (.15,.15*1.25) -- cycle;
\node[circle,draw=black,inner sep=0pt,minimum size=3pt,fill=black] (x0y0) at (0,0) {};
\draw[black,domain=\xmin:\xmax,samples=2] plot(\x,\x)
node[right] {$\Delta y = f'(x_0) \Delta x$};
\draw[very thick,black,smooth,domain=\xmin:\xmax,samples=30]
plot (\x,{1-1/(\x+1)}) node[right] {$y=f(x)$};
\draw[black,very thin] (x0y0) -- (0,{-.72}) node[below] (x0) {$x_0\strut$};
\draw[black,very thin] (x0y0) -- (-.52,0) node[left]{$y_0$};
\end{scope}
\draw[decorate,decoration={brace,amplitude=5pt,mirror,raise=1pt}]
(.33,.33*.35) --
node[right]{\hspace{6pt}$\epsilon \Delta x$} (.33,.33);
\draw[decorate,decoration={brace,amplitude=5pt}]
(delta3.south) --
node[below] {$\rule{0pt}{14pt}\abs{\Delta x} < \delta$}
(mdelta3.south);
\end{tikzpicture}
}
◊book{To be clear, this figure wasn't generated externally and dropped into the document—the source code is right inline with everything else. ◊sidenote{If you are concerned that these figures will be compiling every time the document is updated, then you will be pleased to know that's not a problem. A ◊code{◊"◊"latex} command is only sent to get rendered if the content has changed (or if you set the ◊code{POLLEN} ◊hyperlink["https://docs.racket-lang.org/pollen/raco-pollen.html"]{environment variable} to ◊code{TEX}).} Is this as cool as I think it is?
}
◊slidebreak
Surprisingly, inline math was the most involved part. Since our equations get rendered as SVG, there's nothing telling the browser how to position the image vertically relative to the surrounding text.
◊pptfig["baseline"]{}
My solution: slip a microscopic hot-pink-colored period into the beginning of every inline equation, have Pollen search the SVG for that pink dot, grab its height, and throw in some CSS that shifts the equation into place. Is it hacky? Yes. But it works perfectly.◊sidenote{Until I encounter an inline equation in which I must use the exact color ◊code{#FF0FF0}, I think this solution is safe.}
◊book{Wanna know the coolest part? On most browsers, text-selecting an image actually selects the alt-text. By setting the alt-text as the ◊LaTeX code, selecting and copying text on this page will also copy the ◊|LaTeX| code (yes, even the TiKZ figure). Go ahead, try it out on this next paragraph.
Let ◊${A\in M_n}. Then ◊${x^*Ax = 0} for all ◊${x\in\mathbb{C}^n} implies that ◊${A = 0}, and if ◊${\int_A^B x^*Ax = 0} for all ◊${x\in\mathbb{C}^n}, then ◊${\sigma(A) = \{0\}}. Furthermore, if ◊${A} is nondefective then ◊${A = 0}.}
◊slidebreak
One last cool ◊|LaTeX| thing: tables. Tables in HTML suck, and tables in ◊|LaTeX| suck a little less. With Pollen, we can make them awesome. The markup is similar to that of markdown, with hyphens (◊code{---}) and pipes (◊code{|}) to create rows and columns, but with an extension to allow for multicolumn headers and custom spacing.◊sidenote{I still need to figure out how to align decimals. That's coming.}
◊table["cc@{\\hskip 2em}rrr@{\\hskip 2em}rr" #:name "blah"]{
| | | ◊mc[3]{ALPHA} | ◊mc[2]{BRAVO} | | | |
| | | $a_1$ | $a_2$ | $a_3$ | $b_2$ | $b_3$ |
| --------------- | ----- | ------------- | ------------- | ----- | ----- | ----- |
| ◊mr[2]{CHARLIE} | $c_1$ | 1902 | 1290 | 293 | 12 | 234 |
| | $c_2$ | 213 | 345 | 23 | 234 | 456 |
| ◊mr[2]{DAVID} | $d_1$ | 34 | 4356 | 98 | 23 | 435 |
| | $d_2$ | 892 | 283 | 108 | 890 | 523 |
}
◊slidebreak
◊sec{Geogebra embedding}
◊geogebra["wb4sdbtv" #:fullscreen #t]{blah}
◊slidebreak
◊sec{Miscellaneous features}
◊bullet-list{
The ◊code{◊"◊"book{}} command hides content in the brackets from the slideshow.
Likewise, the ◊code{◊"◊"slide{}} command is for slide-only content.
◊slide{You can draw on these slides! Click ◊code{c} to start drawing.}
◊slide{If you hit the ◊code{g} key, a grid (consistent with the Manim grid) is overlaid on top of the slides. This is helpful for setting up absolutely-positioned content within the slides (and for making manimations).◊note['(-4 -2 8)]{This is an absolutely-positioned note, created with the command ◊code{◊"◊"note['(-4 -2 8)]{...}}. The numbers indicate the coordinates and width. }}
◊book{
Light and dark modes. The site automatically detects if you are using light or dark mode on your system, but you can override this by clicking the button on the top menu bar}
}
◊slidebreak
◊sec{Coming features}
◊bullet-list{
multiple choice quizzes for live polls
homework question environments
collapsible solutions environment
}