Pedagogical blocks — exercises, corrections, methods
These mathpad tags structure what a teacher offers to a student: exercises, collapsible corrections, step-by-step methods, intro activities and interactive quizzes. Each block has its own style and is auto-numbered per category.
Block overview
<mp-title> as first child, with optional duration and difficulty attributes.<mp-exercise>.<mp-exercise> or right after.<mp-question> and several <mp-answer> (right ones marked with the correct attribute).<mp-exercise> + <mp-statement> + <mp-correction>
The standard trio for a complete exercise: title, statement, collapsible correction. The exercise is auto-numbered per chapter (Exercise 1, 2, 3…). Optional attributes duration="10 min" and difficulty="2" (1 to 4) appear in the header.
<mp-exercise duration="10 min" difficulty="2">
<mp-title>First quadratic polynomial</mp-title>
<mp-statement>
Let $f(x) = 2x^2 - 4x + 1$. <ol>
<li>Compute the discriminant $\Delta$.</li>
<li>Deduce the solutions of $f(x) = 0$.</li>
</ol>
</mp-statement>
<mp-correction>
<p><strong>1.</strong> $\Delta = (-4)^2 - 4 \times 2 \times 1 = 16 - 8 = 8$.</p>
<p><strong>2.</strong> Since $\Delta > 0$, two real solutions:</p>
$$\left\{\begin{array}{rcl}
x_1 & = & \dfrac{4 - 2\sqrt{2}}{4} = \dfrac{2 - \sqrt{2}}{2} \\[6pt]
x_2 & = & \dfrac{4 + 2\sqrt{2}}{4} = \dfrac{2 + \sqrt{2}}{2}
\end{array}\right.$$
</mp-correction>
</mp-exercise>
- Compute the discriminant $\Delta$.
- Deduce the solutions of $f(x) = 0$.
1. $\Delta = (-4)^2 - 4 \times 2 \times 1 = 16 - 8 = 8$.
2. Since $\Delta > 0$, two real solutions:
$$\left\{\begin{array}{rcl} x_1 & = & \dfrac{4 - 2\sqrt{2}}{4} = \dfrac{2 - \sqrt{2}}{2} \\[6pt] x_2 & = & \dfrac{4 + 2\sqrt{2}}{4} = \dfrac{2 + \sqrt{2}}{2}\end{array}\right.$$<ol> list or a numbered enumeration inside <mp-statement> to separate the questions of an exercise. For sub-questions, nest a second <ol> (it auto-switches to a), b), c)). <mp-method> — method block
A method block summarizes a reusable procedure — typically a numbered list, sometimes followed by a concrete example.
<mp-method>
<mp-title>Solve a quadratic equation</mp-title>
<ol>
<li>Write the equation in the form $ax^2 + bx + c = 0$.</li>
<li>Compute $\Delta = b^2 - 4ac$.</li>
<li>Conclude based on the sign of $\Delta$: 0, 1 or 2 solutions.</li>
</ol>
</mp-method>
- Write the equation in the form $ax^2 + bx + c = 0$.
- Compute $\Delta = b^2 - 4ac$.
- Conclude based on the sign of $\Delta$: 0, 1 or 2 solutions.
<mp-activity> — intro activity
Placed classically before the definition, an activity lets the student discover the concept on their own before it is formalized.
<mp-activity>
<mp-title>Discover the square root</mp-title>
<ol>
<li>Compute $1^2$, $2^2$, $3^2$, $4^2$.</li>
<li>What number squared gives 25?</li>
<li>Conjecture the result for 64, then for 2 (surprising!).</li>
</ol>
</mp-activity>
- Compute $1^2$, $2^2$, $3^2$, $4^2$.
- What number squared gives 25?
- Conjecture the result for 64, then for 2 (surprising!).
<mp-quiz> — interactive quiz (MCQ)
A quiz contains exactly one <mp-question> (the prompt) and several <mp-answer> (the choices). Mark the right answer with the boolean attribute correct. On the first click, the quiz locks: the chosen answer turns green/red, and if wrong, the correct answer is also revealed.
| Attribute | Values | Description |
|---|---|---|
| shuffle | boolean | Shuffles the answer order on each page load |
| multiple | boolean | Multi-select mode: the student ticks several answers, a Validate button grades at the end |
<mp-quiz>
<mp-question>What is the sign of $-(-3)^2$?</mp-question>
<mp-answer correct>Negative</mp-answer>
<mp-answer>Positive</mp-answer>
<mp-answer>Zero</mp-answer>
</mp-quiz>
Variant: multi-select
With the multiple attribute, the student can tick several answers; a Validate button appears below. Several answers may be correct.
<mp-quiz multiple shuffle>
<mp-question>Which of these are prime numbers?</mp-question>
<mp-answer correct>7</mp-answer>
<mp-answer>9</mp-answer>
<mp-answer correct>11</mp-answer>
<mp-answer>15</mp-answer>
</mp-quiz>
<mp-blank> — fill-in-the-blank lectures (progressive reveal)
Typical use: you project your course on the board, the student sees only the unmasked beginning at first, then you reveal each new block — definition, example, proof — in sync with your explanation. The student fills in their own gap-filling notes at their own pace.
Concretely: as soon as there's at least one <mp-blank> in the document, everything that comes after a <mp-blank> is hidden by default. A small navigation bar appears at the bottom of the screen; a click or right arrow reveals the next block.
<mp-definition>
<mp-title>Derivative at a point</mp-title>
Let $f$ be a function defined at $a$.</mp-definition>
<mp-blank></mp-blank>
<p>We say $f$ is differentiable at $a$ if the following limit exists:</p>
$$f'(a) = \lim_{h \to 0} \dfrac{f(a + h) - f(a)}{h}$$
<mp-blank></mp-blank>
<mp-example>
For $f(x) = x^2$, we have $f'(3) = 6$.</mp-example>
→ / spacebar = next block, ← = previous block, ↓ / ↑ = 10 blocks at once. The bottom bar shows progress. A typical sequence
In practice, a teacher chains these blocks to build a complete sequence: activity → definition → method → exercise → correction. For example:
<mp-activity>— the student discovers a regularity<mp-definition>— the teacher formalizes the notation<mp-theorem>+<mp-proof>— a property, proven<mp-method>— the reusable procedure<mp-exercise>+<mp-correction>— application with collapsible correction<mp-quiz>— quick check of understanding in one click<mp-blank>— optional, between each block, to project the course as a fill-in-the-blank lecture in class
Ready to try mathpad?
Create your first interactive scientific HTML document in the online editor, or import your existing LaTeX course in one click.