Reading and challenges

This page shows the components used in reading lists and challenges — <ReadingList>, <ReadingListLegend>, <AiBlock>, and <Solution>.

ReadingList

<ReadingList> takes a comma-separated list of section numbers and renders them as color-coded chips. Use the same syntax as in the course literature: **x.x** for priority sections and ~~x.x~~ for sections that can be skipped.

All three states:

3.2.1
3.3
3.6

A longer list covering all three states:

3.1
3.2
3.2.1
3.2.2
3.2.3
3.2.4
3.2.5
3.2.6
3.3
3.3.1
3.3.2
3.3.5
3.4
3.5
3.6
3.7
3.8
3.9

ReadingListLegend

<ReadingListLegend> renders a fixed legend explaining the three chip colors — drop it above a page’s first <ReadingList> so students only need to see it once.

Prioritera
Läs
Hoppa över

AiBlock

<AiBlock> shows a concrete example of how not to prompt (gray, struck through) and how you should prompt (normal text) when working with an AI assistant.

A more specific example from course week 1:

Solution

<Solution> hides its content behind a blurred overlay with a “Show solution” button. Without JavaScript, the content is shown directly. The “Suggested solution” heading is written in the MDX page itself, not inside the component.

AiBlock and Solution combined

Here’s how they look together, just like in a real challenge:

Create an expression that calculates the number of whole days that 843 hours corresponds to.

(your expression for the number of days) -> 35

Tips

Try the expression in the Node terminal.