Sarmate.net Sarmate.net
Home Features Pricing Documentation Contact
Log in Sign up
Scientific web 5 min

Lists and enumerations

mathpad uses standard HTML tags <ul>, <ol> and <li> — no new tags to learn. One addition: <mp-checkbox>, a checkbox with persisted state so the student finds their progress restored from one session to the next.

Standard ul / ol with KaTeX

Each <li> accepts KaTeX directly — $..$ are rendered like anywhere else.

HTML
<ul>
  <li>Let $f : \mathbb{R} \to \mathbb{R}$ continuous.</li>
  <li>If $f(a) \times f(b) < 0$, then $f$ has a root in $[a;b]$.</li>
  <li>This root is unique if $f$ is strictly monotonic.</li>
</ul>
Output
  • Let $f : \mathbb{R} \to \mathbb{R}$ continuous.
  • If $f(a) \times f(b) < 0$, then $f$ has a root in $[a;b]$.
  • This root is unique if $f$ is strictly monotonic.

Nested lists (1, a, i)

Use the CSS list-style-type to give nested lists a different numbering format — perfect for exercises with sub-questions 1., then a), then i):

HTML
<ol>
  <li>Compute $\Delta$.</li>
  <li>Deduce the solutions:    <ol style="list-style-type:lower-alpha">
      <li>If $\Delta > 0$</li>
      <li>If $\Delta = 0$</li>
      <li>If $\Delta < 0$</li>
    </ol>
  </li>
</ol>
Output
  1. Compute $\Delta$.
  2. Deduce the solutions:
    1. If $\Delta > 0$
    2. If $\Delta = 0$
    3. If $\Delta < 0$
Other useful list-style-type values decimal (1, 2, 3 — Standard), lower-alpha (a, b, c), upper-alpha (A, B, C), lower-roman (i, ii, iii), upper-roman (I, II, III), disc (•), circle (○), square (■).

<mp-checkbox> — persistent checkbox

A checkbox whose state is stored per URL in localStorage. As soon as the student reopens the page, they find their previously-ticked boxes. Handy for a «concepts to master» checklist filled in over several sessions.

HTML
<mp-checkbox id="continuite">I understand the definition of continuity at a point.</mp-checkbox>
<mp-checkbox id="ivt">I can apply the intermediate value theorem.</mp-checkbox>
<mp-checkbox id="derivee">I can study a function using $f'(x) = 0$.</mp-checkbox>
Output — click, reload the page, the state persists I understand the definition of continuity at a point.
I can apply the intermediate value theorem.
I can study a function using $f'(x) = 0$.
Save scope State is stored under the key mp-checked-<document.URL>: per page and per browser. If the student changes machine or uses private browsing, they start over — this is not a server backend, just a local personal note.

Conventions for math lists

Ready to try mathpad?

Create your first interactive scientific HTML document in the online editor, or import your existing LaTeX course in one click.