Curriculum-Design Case Study · Mathematics
Designing an Online Calculus Skill: the Derivative from First Principles
The complete design chain for one online mathematics skill — objective, item progression, misconception-mapped distractors, feedback, accessibility, and what I’d validate before publication.
Built around an interactive I designed for this exact concept — embedded in section 3, live.
SkillThe derivative of x² from first principles
LevelA-Level Year 12 / US Grades 11–12
FormatOne interactive + a six-item online check
Big ideaA limit is exact, not an approximation
EvidenceProcess captured only where a number can’t discriminate
AccessKeyboard-operable prototype; no equation editor; formal WCAG and assistive-technology validation planned
1 · Learner, prerequisites, objective
Intended learnerFirst formal meeting with differentiation: A-Level Year 12 / US Grades 11–12 (early calculus). The skill sits at the start of a differentiation strand.
Prerequisites
- Slope of a line through two points
- Function notation f(x)
- Expanding (a+b)²
- Informal limit language (“gets as close as we like to”)
Learning objective. Given f(x) = x², the learner computes f′(a) from the difference quotient — forming the secant slope, expanding and simplifying it to 2a + h, and taking h → 0 — and can explain why the result is exactly 2a, distinguishing a limit from substitution and from approximation.
Scope note: one function (x²), one big idea. Generalizing to other polynomials is a separate skill that assumes this one — vertical coherence is designed between skills, not crammed into one.
- Prior skillAverage rate of change
- Prior skillSlope of a secant line
- This skillThe derivative f′, from first principlesyou are here
- Next skillDifferentiation rules (power rule)
- ThenTangents, motion & optimization
This skill teaches the limit definition once, cleanly, so the rules that follow are understood rather than only memorized. Each neighboring skill is designed as its own object with its own evidence, not folded into this one.
2 · Why this concept is hard to assess online
Right answer by rule recallA learner who has memorized “x² → 2x” produces the same final answer as one who understands the limit process. A final-answer item cannot tell them apart — and the process is the objective.
The misconception is invisible in a numberWhether the learner believes h “becomes” 0, that substitution is legitimate, or that 2a is merely a good approximation — none of it shows up in a final answer like f′(3) = 6.
Notation entry is high-friction onlineLimits, primes, and built-up fractions are painful in most input tools. Collect process evidence without free-form notation — structure choices, strategic intermediates, error-spotting.
Every-step-everywhere is too expensiveRequiring every intermediate line on every item inflates time cost and punishes fluent learners. Step evidence is collected only where a final answer cannot discriminate (items 3 and 5).
The dynamic idea needs a manipulable pictureThe way secant slopes approach a tangent slope is dynamic. A static diagram undersells the relationship; the interaction also needs accessible equivalents through narration and keyboard control.
3 · The interactive at the heart of the skill
Slide h toward zero try it
The learner drags one control and watches two representations move together: the gold secant rotates toward the dashed tangent while the numeric slope readout closes in on a single value. Push the gap past zero to approach from either side; land exactly on zero and the quotient is undefined. The approach is made visible; the exact limiting value is justified algebraically in the items below.
4 · The six-item progression
Each item below is shown with its key, the equivalent responses the engine should accept, what each anticipated wrong answer suggests about the learner, and the immediate feedback the learner would see. Cognitive demand rises through the sequence; step evidence is collected only where a final answer cannot discriminate. Multiple-choice keys are shown first here for readability — at delivery, options are shuffled. Every anticipated wrong answer carries its own feedback string, shown beneath each item’s diagnosis. Where retries are allowed, the key is withheld until the final attempt.
- Activate — secant slope, concretely
- Structure — the difference quotient
- Manipulate — simplify to 2a + h
- The limit — exactly 2a, not approximate
- Evaluate — find the first error
- Transfer — f′ as a function
| Item | Purpose | Format | Evidence it isolates |
|---|---|---|---|
| 1 | Activate slope prerequisite | Numeric | Concept gap vs execution slip |
| 2 | Structure the quotient | Single-select | Rate structure |
| 3 | Manipulate strategically | Expression | Premature rule recall vs algebra |
| 4 | Explain the limit | Single-select | Limit concept |
| 5 | Evaluate worked reasoning | First-error | Right result through invalid work |
| 6 | Transfer to f′ as a function | Coordinate | Slope-to-point transfer |
Item 1 · Activate the prerequisiteNumeric entry · Secant slope · Response-sensitive routing
Item 1 · prerequisite activation · numeric entry
Slope of a secant, concretely
P(1, 1) and Q(3, 9) lie on the curve y = x². What is the slope of the line through P and Q?
Key: 4 · Accepted equivalents: 8/2, 4.0
Anticipated wrong answers — and what each suggests
| Response | Likely thinking | Error type |
|---|---|---|
| 8 | Computed the change in y and stopped — “slope” is rise without run. | Conceptual (prerequisite gap) |
| 2 | Gave the change in x — confuses the width of the interval with the rate across it. | Conceptual |
| 2.5 | Computed (9+1)/(3+1) — the formula’s subtractions replaced by additions. | Algebraic (formula execution) |
| −4 | Mixed the subtraction order: (9 − 1)/(1 − 3). A common slope error. | Algebraic (order/sign) |
The feedback each wrong answer triggers
Feedback (on 8): That’s how much y changes. Slope compares that change to the change in x: (9 − 1)/(3 − 1) = 8/2 = 4.
Feedback (on 2): That’s how far apart the x-values are — the run. Slope also needs the rise: how much does y change over that run?
Feedback (on 2.5): Check the operations in your slope formula: slope compares differences, (9 − 1) over (3 − 1), not sums.
Feedback (on −4): The size is right — check the order. Subtract the coordinates in the same order top and bottom: (9 − 1)/(3 − 1).
Design noteA conceptual response triggers a short prerequisite check; a sign, arithmetic, or entry error receives a light-touch retry. Repeated evidence of an unstable slope concept routes the learner to prerequisite instruction.
Item 2 · Structure the quotientSingle-select · Name the rate before manipulating it
Item 2 · structure before algebra · multiple choice
Building the difference quotient
For f(x) = x² and h ≠ 0, which expression gives the slope of the secant line through P(a, a²) and Q(a+h, (a+h)²)?
- ( (a+h)² − a² ) / h
- ( (a+h)² − a² ) / (a+h)
- ( (a+h)² + a² ) / h
- h / ( (a+h)² − a² )
Distractor rationale
| Response | Likely thinking | Error type |
|---|---|---|
| ÷ (a+h) | Divides by an x-coordinate instead of the gap between the x-coordinates — the “run” is misidentified. | Conceptual (structure of a rate) |
| + a² | “Difference” not encoded as subtraction when the notation gets heavy. | Notation / reading |
| inverted | Rise and run swapped — slope structure not yet stable under new notation. | Conceptual |
The feedback each wrong answer triggers
Feedback (on ÷ (a+h)): The run is the distance between the two x-values: (a+h) − a = h. The rise is f(a+h) − f(a). Slope = rise over run.
Feedback (on + a²): The rise is a difference in heights: f(a+h) − f(a). Read the two y-values off the curve and subtract.
Feedback (on the inverted option): Slope is rise over run — the change in y on top, the change in x underneath. This option has them swapped.
Design noteStructure is assessed before manipulation on purpose. A learner who picks the right object but later fumbles the algebra needs different follow-up from one who cannot name the object at all — separating the two here keeps item 3 interpretable.
Item 3 · the manipulation, with a strategic intermediate · expression entry
Simplify the secant slope
Expand and simplify: ( (a+h)² − a² ) / h (h ≠ 0)
Key: 2a + h
Accepted equivalent: h + 2a
Correct but unfinished: (2ah + h²)/h; prompt the learner to complete the simplification.
Anticipated wrong answers — the most diagnostic item in the skill
| Response | Likely thinking | Error type |
|---|---|---|
| 2a | Skipped the algebra and wrote the memorized derivative. The secant slope still depends on h — treating it as already the tangent is the core confusion this skill exists to catch. | Conceptual (premature limit / rule recall) |
| 2a + h² | Expanded correctly to (2ah + h²)/h, then divided only the first term by h. Valid method, one execution slip. | Algebraic (execution) |
| a + h | Omitted the second ah expanding (a+h)²: both cross-products give ah, so the middle term is 2ah. With a² + ah + h², the quotient collapses to a + h. | Algebraic: incomplete binomial expansion |
View per-response feedback
Feedback (on 2a): That’s where this is heading — but the secant slope still depends on h. Expand (a+h)² and simplify: you should get 2a + h. The h only disappears when we take the limit, and that difference is the whole idea.
Feedback (on 2a + h²): Your expansion was right. Check the division: every term of 2ah + h² gets divided by h.
Feedback (on a + h): Check the expansion: (a+h)² = (a+h)(a+h) = a² + 2ah + h². Both cross-products contribute ah, so the middle term is 2ah.
Design noteHad this item asked only for the value of f′(a), both of these students would have typed the same correct number. “2a” here is conceptually loaded while “2a + h²” is a slip inside a sound method — the feedback treats them differently, and that is exactly why this item collects the intermediate expression rather than a number.
Item 4 · the limit concept, isolated · multiple choice
Why exactly 2a, and not approximately?
After simplifying, the secant slope is 2a + h. Which statement best explains why f′(a) is exactly 2a?
- For nonzero values of h arbitrarily close to 0, the quotient equals 2a + h. Those values approach 2a from both sides, so the limit, and therefore f′(a), is exactly 2a.
- Setting h = 0 in the original quotient ( (a+h)² − a² ) / h evaluates the slope directly at the point, giving the exact value with no limit.
- As the moving point slides into P, the gap h finally reaches 0, and at that instant the secant line becomes the tangent line exactly.
- For small enough h the value 2a + h sits so close to 2a that the difference is negligible, so we round it off and call the slope 2a.
Distractor rationale
| Response | Likely thinking | Error type |
|---|---|---|
| substitute h=0 | The learner treats a limit as direct substitution. The original quotient gives 0/0 at h = 0, but its values for nearby nonzero h still approach a single number. | Conceptual (limit = substitution) |
| h reaches 0 | Limit as arrival. But at h = 0 there is one point, and one point does not define a secant line at all. | Conceptual (limit as endpoint) |
| good approximation | Derivative as estimate. The limit is not near 2a; it is 2a. | Conceptual (exactness of the limit) |
View per-response feedback
Feedback (on substitution): Direct substitution leaves the original quotient undefined at h = 0. A limit may still exist because it describes the quotient’s values for nearby nonzero h.
Feedback (on “h reaches 0”): The difference quotient is evaluated for nonzero values of h arbitrarily close to zero. The secant slopes approach the same value from both sides; that value is not obtained by setting h = 0.
Feedback (on “good approximation”): Each nonzero value of h gives an approximate secant slope, but the limit of those slopes is the exact number 2a.
Design noteDeliberately the only item with no computation in it. With the algebra separated into item 3, a wrong answer here is substantially cleaner evidence about the limit concept. The four options are matched in length and register on purpose, so a learner cannot pick the key just because it “sounds most mathematical” — though wording and reading load still need validation.
Item 5 · process evidence · error-spotting (interactive below — click a line)
Find the first error
A student computes f′(2) for f(x) = x². Click the first line that contains an error.
✓ L4 is the first error: dividing 4h + h² by h gives 4 + h, not 4 + h². Only the first term was divided.
That line is correct so far — keep looking for the first place the algebra goes wrong.
This line follows correctly from the line above it — but the first error happens earlier. Look upstream.
Design noteThe student’s final answer is right: as h → 0, the erroneous 4 + h² also tends to 4. A final-answer item scores this student as fully correct and the algebra gap survives untouched — until it resurfaces in every later skill that leans on this manipulation. That is the case for collecting process evidence at selected checkpoints: not every step everywhere, but exactly where a right answer can mask wrong work.
Item 6 · Transfer to f′ as a functionCoordinate entry · Read a slope off a line, return the point
Item 6 · transfer: the derivative as a function · coordinate entry
Reading the derivative as a function
First principles give f′(x) = 2x for f(x) = x². At which point on the curve y = x² is the tangent parallel to the line y = 6x − 4?
Key: (3, 9) · Accepted equivalents: x = 3, y = 9 · (3, 9.0)
Anticipated wrong answers — two independent steps to slip on
| Response | Likely thinking | Error type |
|---|---|---|
| (6, 36) | Grabbed the 6 from the line as the x-value. Parallel means equal slopes, so 6 is the target slope, not an input — the derivative function isn’t yet an object that takes x in and returns a slope. | Conceptual (gradient function) |
| (3, 14) | Found x = 3 correctly from 2x = 6, then read y off the line (6·3 − 4 = 14) instead of the curve. The tangent point lives on y = x². | Conceptual (point on the wrong graph) |
| (√6, 6) | Set x² = 6 — matched the curve’s height to 6 instead of its slope. | Conceptual (f vs f′) |
View per-response feedback
Feedback (on (6, 36)): 6 is the slope of the line, not an x-value. Parallel tangents share that slope, so set f′(x) = 2x = 6 to find where.
Feedback (on (3, 14)): The x is right: 2x = 6 gives x = 3. But the point sits on the curve y = x², so y = 3² = 9. (3, 14) is on the line, not the curve.
Feedback (on (√6, 6)): That solves x² = 6, where the curve has height 6. Parallel lines share a slope, so set 2x = 6, not x² = 6.
Design noteTwo independent steps: read the target slope off a line (parallel ⇒ equal slopes), then use f′ to locate the input and return the point on the curve. It looks forward to the next skill, where f′ becomes an object of study in its own right — and the (3, 14) distractor catches a learner who did the calculus correctly but placed the point on the wrong graph.
5 · Misconception map
View the complete misconception-to-item map
Every conceptual distractor above traces back to one of these; execution slips are handled separately in the taxonomy below. The map is the design tool: items are placed so that each misconception is surfaced by at least one response option somewhere in the progression, and the feedback answers the thinking, not just the answer.
| Misconception | What the learner believes | Surfaced by |
|---|---|---|
| Slope is rise | “How much it goes up” is the slope; the run is bookkeeping. | Item 1 (8) |
| Secant = tangent already | The difference quotient is the derivative; h is clutter to be ignored. | Item 3 (2a) |
| Limit = substitution | Taking a limit means plugging the value in. | Item 4 (substitute h = 0) |
| Limit = arrival | h travels to 0 and gets there; the secant “becomes” the tangent when the points merge. | Item 4 (h reaches 0) |
| Derivative = approximation | 2a is a very good estimate, not an exact value. | Item 4 (approximation) |
| f vs f′ conflation | The function’s value and its slope are interchangeable numbers attached to a point. | Item 6 (√6, 6) |
The interactive directly contrasts approach with arrival: for nonzero values of h approaching zero from either side, the secant slopes approach the same value; at h = 0, the original quotient is explicitly shown as undefined. Item 4 then tests whether the learner can explain that distinction.
6 · Telling error types apart
Thirteen years of examining taught me that the same wrong answer can hide four different students. The response options and feedback above are built to separate them, because each needs something different next.
ConceptualThe model is wrong: “secant is already tangent,” “limit means substitute.”Needs: representation and instruction — more practice makes it worse, not better. Route to the interactive or a worked example, not another attempt.
AlgebraicSound method, broken execution: dividing one term of 2ah + h² by h.Needs: targeted practice on the specific manipulation, with the method affirmed — “your setup was right.”
NotationReads (a+h)² − a² but writes +; treats f′(a) and f(a) as typos of each other.Needs: slowed-down reading prompts and consistent notation, not re-teaching of the concept.
ArithmeticSolves 2x = 6 as x = 12; sign slips in a subtraction.Needs: a light-touch nudge. Flagging these as conceptual failures erodes confidence for no reason.
7 · Why this order
Each handoff is a deliberate design decision. The diagnostic load is placed where the algebra and the concept intersect, and the sequence ends where the curriculum continues:
- 12Activate, then abstract
Ground a concrete secant slope before abstracting it into new notation. The learner continues after confirming that the secant-slope prerequisite is secure.
- 23Name before manipulate
Name the right object before transforming it. Item 3 then carries the heaviest diagnostic load, the 2a distractor.
- 34Isolate the concept
With the algebra settled, item 4 isolates the limit as a pure idea — no computation left to hide behind.
- 45Producer to evaluator
The learner shifts from producing to spotting a planted error: lower friction online, but still real process evidence.
- 56Forward transfer
Close on f′ as a function, the object the next skill picks up. The progression ends where the curriculum continues.
8 · Accessibility review
- No drag-only interaction. The single control is a native slider: keyboard-operable with arrow keys, labelled for assistive tech.
- The animation has a text equivalent. An aria-live narration mirrors the state of the figure (“the secant line is now nearly aligned with the tangent…”), so the core dynamic idea is available to a screen-reader user, not just described once.
- Color never carries meaning alone. P and Q are labeled; tangent and secant differ by dash pattern and label, not just hue.
- No equation editor required. Items use multiple choice, single-number entry, one short expression, and click-a-line — process evidence without built-up notation entry, which is a motor and screen-reader barrier.
- Reduced motion respected; nothing autoplays; no timer on any item, so nothing rushes the learner (a production build would also persist progress across sessions).
- Language load: short stems, one clause per sentence where possible, consistent vocabulary (“secant,” “gap h,” “slope”) established by the interactive before the items use it.
9 · Production handoff
What curriculum, visual-design, engineering, analytics, and accessibility partners would need to build this as a shippable skill. Designing to this handoff is part of the design: the item types, the accepted-answer logic, the telemetry, and the accessibility criteria are all specified here, not left implicit.
| Layer | What it holds | How it ships |
|---|---|---|
| Item formats | Numeric, single-select, short expression, coordinate pair, click-a-line. | Response types with option shuffle, per-option feedback slots, and retry gating. |
| Answer checking | Expression equivalence (2a + h ≡ h + 2a), numeric tolerance, coordinate parsing, a “correct but unsimplified” state. | A response normalizer or curated accepted-answer sets. No full CAS needed for this skill. |
| Feedback | One message per anticipated wrong answer, surfaced on the option the learner picked. | Author fields keyed to each option; plain text with basic math glyphs, no equation editor. |
| Routing | Branch on response type: prerequisite, light retry, or continue; a confirmation item rejoins the path. | Conditional-release / branching rules driven by the response tags above. |
| Interactive | One slider, SVG figure, aria-live narration, reduced-motion support. | A self-contained component, no external libraries, with its state exposed to assistive tech. |
| Telemetry | Time per item, first-attempt accuracy, distractor selection, retries, routing, drop-off. | A platform-native event schema capturing item, response class, attempt, latency, route, and completion state. |
| Accessibility | Keyboard path, focus order, contrast, live-region thresholds. | Component-level acceptance criteria plus a screen-reader walkthrough sign-off. |
| Packaging | Self-contained; keeps a readable sequence when JavaScript is unavailable. | Platform-native implementation or a self-contained web component, with a readable fallback when JavaScript is unavailable. |
Everything in this table is a decision the design already makes. A build team inherits a spec, not a blank page.
10 · What I would validate before publication
The prototype demonstrates the intended design logic, but publication would require evidence that the items measure the intended mathematics, that the feedback changes what learners do next, and that the interaction provides equivalent mathematical information across input and access methods.
Content and construct review. Do the items measure the intended mathematics, and does the visual model communicate it?
- Objective-to-item alignment. Review each item against the stated objective and ask what evidence it contributes that no other item supplies. If an item mainly repeats earlier evidence, remove or revise it rather than lengthen the skill.
- Mathematical and curricular review. A secondary-mathematics reviewer checks the derivation, terminology, representations, accepted methods, and placement at the start of a differentiation strand — with particular attention to the distinction among a secant slope, a limiting value, and the derivative.
- Item 4 cognitive interviews. In think-alouds with three to five learners, test whether the key explanation is understandable in the learner’s own words, and whether its greater length or formality telegraphs the answer. If learners pick it because it “sounds most mathematical,” rebalance the options.
- Representation interpretation. Ask learners to explain what the moving point, the gap h, the secant, the tangent, and the slope readout each represent. Correct slider use does not by itself establish that the visual model communicated the mathematics.
Item and distractor performance. Does each response provide usable evidence, and does the feedback produce repair?
- Distractor functioning. In a larger pilot, examine first-attempt selection rates for every distractor, not only 2a in Item 3. A useful distractor attracts learners whose other evidence fits the associated misconception, rarely attracts learners who have shown the target understanding, and leads to a meaningfully different next response after feedback.
- Item 3 diagnostic value. Compare selection of 2a before and after instruction. Continued selection would suggest the secant-expression-vs-limit distinction is unresolved; never being selected may mean it is too obviously wrong.
- Equivalent-response audit. Test the engine against legitimate variants (h + 2a, 2·a + h, alternate spacing and notation, algebraically equivalent forms), classifying responses deliberately as:
- complete and correct;
- mathematically correct but not simplified to the requested form;
- equivalent only under an unstated condition;
- or incorrect.
- Feedback comprehension and repair. After each targeted message, ask the learner to correct the work or answer a close confirmation item. The measure is not whether they read the explanation, but whether they can use it to repair the reasoning.
- False-positive diagnosis. Check whether the same response can plausibly come from more than one line of reasoning. Where it can, feedback should say “check whether…” rather than state with certainty what the learner believed.
Format, sequence, and routing. Does the sequence hold together, and does one wrong answer route the learner correctly?
- First-error format onboarding. Before Item 5, learners complete one brief unscored example showing they must select the first invalid line, not any line affected by an earlier error. Compare performance with and without it to separate mathematics from interface unfamiliarity.
- Sequence dependency. Examine whether each item’s performance predicts readiness for the next:
- Does Item 1 establish enough slope knowledge for Item 2?
- Does Item 2 separate structure from the algebra in Item 3?
- Must Item 3 be secure before the concept question in Item 4?
- Does Item 5 reveal process knowledge not captured elsewhere?
- Does Item 6 give credible transfer evidence?
- Routing accuracy. One incorrect answer should not automatically remove a learner from the skill. Test routing on response type and confirmation evidence:
- 8 or 2 on Item 1 may justify a slope prerequisite check;
- a sign error or mistype may justify a light-touch retry;
- repeated conceptual responses may justify prerequisite instruction;
- a corrected confirmation item returns the learner to the main pathway.
- Timing, retries, and abandonment. Collect time per item, first-attempt accuracy, retry patterns, feedback use, routing frequency, and where learners leave. Long time without better diagnostic evidence signals interface or reading friction rather than productive struggle.
- Progression length. Test whether all six items are needed in one sitting. If the sequence runs long, Item 5 could become a later mastery or review check rather than part of the first pass.
Accessibility and technical validation. Is the mathematics fully available by keyboard and screen reader, across browsers?
- Screen-reader walkthroughs. With VoiceOver and NVDA, test whether a learner can understand the two points and coordinates, the meaning and current value of h, the secant–tangent relationship, the changing slope, every equation and option, and the first-error interaction and its feedback. The goal is equivalent mathematical information, not just that controls receive focus.
- Live-region behavior. Check that moving the slider does not produce repetitive or overlapping announcements; narration may need to update only at meaningful thresholds or on release.
- Keyboard and alternative-input testing. Every state and item must be usable without dragging or precise pointing. Focus order, visible focus, line selection, retry, and feedback recovery all tested by keyboard alone.
- Low-vision and responsive review. Test zoom, text enlargement, narrow screens, high contrast, and horizontal table behavior. Expressions and diagnostic tables must stay readable without tracking across an over-wide layout.
- Cross-browser and fallback testing. Slider, SVG, equation text, feedback states, and error-spotting checked across current desktop and mobile browsers; the page keeps a readable explanation and item sequence when JavaScript is unavailable.
Publication decisions. What each possible pilot result changes before release.
The pilot is not a pass/fail ceremony. Each result leads to a defined action:
- revise wording when reading load interferes with the construct;
- replace distractors that do not attract the intended reasoning;
- broaden accepted responses when the engine rejects legitimate mathematics;
- change feedback that does not produce successful repair;
- adjust routing when learners are sent to the wrong prerequisite;
- remove an item when it adds time but no distinct evidence;
- redesign an interaction when access method changes the mathematics available to the learner.
Case study and interactive by Christopher Welch. Designed with accessibility in mind, including keyboard-operable controls, visible focus indicators, semantic structure, text alternatives for visual information, ARIA live-region narration, and reduced-motion support. Formal assistive-technology testing remains part of publication QA.
© 2026 Christopher Welch · All rights reserved. Everything in this portfolio — the case studies, item specifications, interactives, course materials, text, and code — is Christopher’s original work, published so prospective employers and collaborators can evaluate it. No license is granted by this site or its source repository being public. Hiring conversations are always welcome; reproduction or adaptation without written permission is not.