STRESS TEST — kitchen sink

Quarto + MathJax + quarto-live/Pyodide + mermaid, viewed at 1366×768

This is not lesson content

Deliberately bloated QA page, in the spirit of gforms-poc/forms/quiz/stress. Every item below states what it tests and what a pass looks like. Some items are expected to fail — that is the experiment, not a defect.

Run it after any Quarto, quarto-live or Pyodide upgrade, and at least once on a real Acer Spin 511 over school Wi-Fi (that is also WP3 evidence). Not linked from the navigation; reach it at /stress/.

How to read this page

Marker	Meaning
PASS-IF	what correct behaviour looks like
EXPECTED FAIL	known limitation; failing here is the correct outcome
MEASURE	write down a number (seconds, MB) rather than a verdict

The single most important measurement is the first one, below.

1 · Pyodide cold start

MEASURE — the number that decides WP3

Reload this page with an empty cache, then run the cell below and note how long it takes before output appears. This is the runtime download (± 15 MB per DESIGN.md), on the school connection, on the real device.

Record: seconds to first output, and whether a second run is instant.

PASS-IF: output 2 appears; a second run returns immediately (runtime cached).

1.1 State shared between cells

PASS-IF: 84. Cells share one interpreter, so a definition in an earlier cell survives. If this fails, the whole “build it up step by step” lesson pattern collapses and the chapters need self-contained cells.

1.2 stdout, repr, and both at once

PASS-IF: both printed lines and the final expression’s value are shown, in that order.

1.3 A traceback

PASS-IF: a readable ZeroDivisionError traceback, the page still responsive, and later cells still runnable. A pupil will hit this constantly — the failure mode has to be survivable, not a dead page.

1.4 `input()` — the known problem case

EXPECTED FAIL — do not skip, this is WP3 evidence

Interactive input() in a WebAssembly cell is the classic limitation. Run it and record how it fails: exception, silent hang, or a working prompt. If it hangs, reload the page before continuing.

Consequence if it fails: lesson material must not use input() in-page, and Colab has to cover any I/O-based exercise.

1.5 Heavy compute

MEASURE: seconds on the Chromebook. PASS-IF: finishes without the browser offering to kill the tab. Sets the ceiling for what a classroom exercise may compute.

1.6 numpy + matplotlib

Opmerking

Pulls extra wheels over the network on first use — a second, later download after the runtime itself. Relevant to the numerical-methods block, which is built on exactly this.

PASS-IF: a plot appears inline, legible at Chromebook width. MEASURE: extra load time. EXPECTED-UNKNOWN: whether the figure honours figsize responsively.

1.7 Audio — the Fourier finale’s dependency

EXPECTED-UNKNOWN — check before committing to WP10

DESIGN.md’s finale builds a triangle wave and plays it. Whether Pyodide can put sound out through the browser is an open question that constrains that lesson. Test it early; failing here is worth knowing in July, not in March.

PASS-IF: an audio player widget appears and produces a 440 Hz tone.

1.8 Filesystem access

PASS-IF: a clean FileNotFoundError. Confirms the sandbox has no course files mounted — pupils reading schoolreglement.txt must do so in Colab, not in a page cell. (The corpus lesson depends on this answer.)

1.9 Exercise with hint and solution

PASS-IF: the blank cell runs, Hint and Solution buttons appear and reveal in order. This is the graded-exercise pattern the whole course leans on.

2 · Math (MathJax)

2.1 Ordinary

Inline \(e^{i\pi} + 1 = 0\) inside a sentence, then display:

\[ x(t) = \frac{8}{\pi^2} \sum_{k=0}^{\infty} \frac{(-1)^k}{(2k+1)^2} \sin\bigl(2\pi (2k+1) f_0 t\bigr) \]

2.2 Aligned, cases, matrices

\[ \begin{aligned} 53 &= 2 \times 26 + 1\\ 26 &= 2 \times 13 + 0 \end{aligned} \qquad f(n) = \begin{cases} n/2 & \text{als } n \text{ even is}\\ 3n+1 & \text{anders} \end{cases} \qquad \begin{pmatrix} \alpha & \beta \\ -\overline{\beta} & \overline{\alpha} \end{pmatrix} \]

2.3 Width stress

\[ \sum_{n=0}^{\infty}\frac{x^n}{n!} = e^x = \lim_{m\to\infty}\left(1+\frac{x}{m}\right)^m = \prod_{k=1}^{\infty}\dots\;\text{(deliberately long, to see whether a wide formula scrolls or breaks the column)} \]

PASS-IF at 1366×768: the formula scrolls inside its own box or wraps — what must not happen is the page itself scrolling sideways.

2.4 Continued fraction

\[ \phi = 1+\cfrac{1}{1+\cfrac{1}{1+\cfrac{1}{1+\cdots}}} \]

2.5 Commutative diagram (amscd)

\[ \begin{CD} A @>f>> B \\ @V g VV @VV h V \\ C @>>k> D \end{CD} \]

EXPECTED-UNKNOWN: amscd is bundled with MathJax but is not always enabled by default. Renders, or shows raw source.

2.6 Chemistry — mhchem

\[ \ce{Fructose-6-P + Glutamine ->[GFAT] Glucosamine-6-P + Glutamate} \]

EXPECTED FAIL (probably)

\ce{} needs the mhchem extension. Unlike the Forms pipeline — which compiles real LaTeX locally and therefore renders anything — this site renders math in the browser, so it only supports what MathJax ships. Failing here is fine; the course needs no chemistry. It is included to mark the boundary between the two pipelines.

2.7 tikz

EXPECTED FAIL: raw-LaTeX blocks target PDF output and vanish (or leak) in HTML. The lesson for content authors: diagrams go through mermaid, never tikz.

3 · Diagrams (mermaid)

flowchart LR
  A[geheime tekst] --> B[freqs]
  B --> C[chisqr per rotatie]
  C --> D[kleinste waarde = shift]
  D --> E[decodeer]

3.1 Wide diagram

flowchart LR
  S[start] --> A1[stap 1] --> A2[stap 2] --> A3[stap 3] --> A4[stap 4]
  A4 --> A5[stap 5] --> A6[stap 6] --> A7[stap 7] --> A8[stap 8] --> E[einde]

PASS-IF: scales down or scrolls in its own container at Chromebook width.

4 · Code presentation

4.1 Long lines

resultaat = [transformeer(element, factor=2, offset=13, modus="strikt") for element in verzameling if element is not None and element.is_geldig()]

PASS-IF: horizontal scroll inside the block; the copy button still works.

4.2 Line numbers, highlight, filename

caesar.py

def crack(bericht):
    tabel = freqs(bericht)
    scores = [chisqr(rotate(n, tabel), NL_FREQS) for n in range(26)]
    return decode(scores.index(min(scores)), bericht)

4.3 Other languages

quarto render && python3 -m http.server 8000 --directory _site

project:
  type: website

4.4 A very long unbroken token

https://peter-h89.github.io/iw6/extra/talstelsels.html?ditisEenAbsurdLangeQueryParameterDieNergensAfbreektEnDusDeKolomKanOprekken=waar

PASS-IF: it wraps or scrolls; it must not widen the page.

4.5 Demonstration block (`edit: false`)

PASS-IF: read-only (no editor chrome, no Run/Start Over buttons), highlighted identically to the editable cells above, and the genuinely computed output [3, 4, 5, 1, 2] appears once the runtime is loaded.

5 · Structure & callouts

note

Ter herinnering-patroon.

warning

Veelgemaakte fout-patroon.

important

Reserved for the rare must-read.

tip, collapsed — the solution pattern

Hidden until clicked. This is the single most-used pattern in the course.

caution, collapsed

Fifth type, for completeness.

5.1 Nested containers

Callout containing a tabset and a nested callout

Prose in a tab, inside a callout.

def shift(n, c):
    return chr((ord(c) - ord('a') + n) % 26 + ord('a'))

\(c' = (c + n) \bmod 26\)

A collapsed callout inside a callout

Nesting depth 2. PASS-IF: both containers keep their styling and the inner one still toggles.

5.2 Footnotes and links

A claim needing a source¹, and a second one².

5.3 Wide table

les	onderwerp	doel	materiaal	notebook	toets	opmerking
1	functies	1	fundamenten/index	les-01.ipynb	—	instaples
2	lijsten en strings	1, 2	fundamenten/index	les-02.ipynb	—	—
3	caesar: encode	2, 4	caesar/index	les-03.ipynb	kort	—
4	caesar: frequenties	3	caesar/index	les-04.ipynb	—	corpus nodig
5	caesar: crack	3, 4	caesar/index	les-05.ipynb	volledig	climax

PASS-IF: scrolls inside its own container at 1366×768.

6 · Abusive images

Two cases deliberately omitted

The Forms stress set includes huge.png (30 MB) and noise.png (9 MB). They are not copied here: git keeps every blob forever, and a course repo should not carry 40 MB to prove a point about <img>. The Forms concern was Drive upload and Google’s fetch limits; the web concern is page weight on school Wi-Fi, which the panorama and the GIF already probe. If you ever want the real test, drop the file in untracked and delete it after.

Extreme-wide panorama (2600×140):

Extreme-tall (140×1500), forced narrow:

Tiny 12×12 checkerboard, unscaled — tests whether CSS upscales or blurs it:

Transparency over the page background — check in both light and dark mode:

Animated GIF — does it animate, and does it keep animating after navigation?

JPEG with a caption, as a proper cross-referenced figure:

Cross-reference: see Figuur 1. PASS-IF: the reference renders as a link with the figure’s number, not as raw text.

7 · Checklist

Work through this on the target device and record the outcome.

#	Case	Outcome
1	Pyodide cold start (seconds)
2	Second run instant
3	State shared between cells
4	Traceback readable, page alive
5	`input()` — how does it fail
6	Heavy loop (seconds)
7	matplotlib plot + extra load time
8	Audio playback
9	Exercise hint/solution buttons
10	Wide math / table / code / diagram scroll locally
11	Page never scrolls sideways
12	Dark mode: images, callouts, plots
13	mhchem, amscd, tikz (expected fails)
14	Total page weight (MB)

Voetnoten

Hutton, G. (2016). Programming in Haskell (2nd ed.). Cambridge University Press. — the didactic source per DESIGN.md.↩︎
A second footnote, to check ordering and back-links.↩︎