SemText

Reference · SemText · Facts & recall

<sem-facts>

SemText element

You wrap sem-fact children in it and pick a view with view-as. The view only changes how the facts are shown — the facts themselves stay the same, and machines always read all of them.

A group of facts the reader can flip through as cards, a quiz, or plain prose. You wrap sem-fact children in it and pick a view with view-as. The view only changes how the facts are shown — the facts themselves stay the same, and machines always read all of them. `list` (default) | `flashcards` | `quiz`. Canonical attribute; display-only sugar — machines extract the same pairs regardless of view. on the container and on facts: required for citation (`#auth-facts/f-rotate`); `kind`, `tags` global.

Example

sem-facts.html
source
1 <sem-facts id="auth-facts" view-as="flashcards">
2 <sem-fact id="f-rotate">
3 <statement>JWTs rotate per session</statement>
4 <conclusion>Short-lived access tokens; the refresh
5 grant issues a new pair.</conclusion>
6 <incorrect-statement>Store tokens in localStorage.</incorrect-statement>
7 </sem-fact>
8 <sem-fact id="f-expiry">
9 <statement>Access tokens expire after 15 minutes</statement>
10 <conclusion>The client mints a new pair from the refresh
11 grant; the user never re-signs-in mid-session.</conclusion>
12 <incorrect-statement>The user must sign in again every 15
13 minutes.</incorrect-statement>
14 </sem-fact>
15 <sem-fact id="f-secret">
16 <statement>Client secrets never reach the browser</statement>
17 <conclusion>The confidential client holds the secret
18 server-side; the browser only ever sees tokens.</conclusion>
19 <incorrect-statement>Embed the client secret in the SPA
20 bundle.</incorrect-statement>
21 </sem-fact>
22 </sem-facts>
render

Live render boots with JavaScript — the authored source is alongside.

view-as omitted — read mode, every fact open

The deck above read as a list: `list` is the default `view-as`, so the attribute is simply absent. Every fact renders in document order with statement AND conclusion visible, and there is no chrome — nothing interactive. The `incorrect-statement` children are quiz decoys, not assertions: hidden once the script drives the document, and with JS off they stay visible, prefixed "incorrect statement".

view-as omitted — read mode, every fact open
sem-facts-list.html
source
1 <sem-facts id="auth-facts">
2 <sem-fact id="f-rotate">
3 <statement>JWTs rotate per session</statement>
4 <conclusion>Short-lived access tokens; the refresh
5 grant issues a new pair.</conclusion>
6 <incorrect-statement>Store tokens in localStorage.</incorrect-statement>
7 </sem-fact>
8 <sem-fact id="f-expiry">
9 <statement>Access tokens expire after 15 minutes</statement>
10 <conclusion>The client mints a new pair from the refresh
11 grant; the user never re-signs-in mid-session.</conclusion>
12 <incorrect-statement>The user must sign in again every 15
13 minutes.</incorrect-statement>
14 </sem-fact>
15 <sem-fact id="f-secret">
16 <statement>Client secrets never reach the browser</statement>
17 <conclusion>The confidential client holds the secret
18 server-side; the browser only ever sees tokens.</conclusion>
19 <incorrect-statement>Embed the client secret in the SPA
20 bundle.</incorrect-statement>
21 </sem-fact>
22 </sem-facts>
render

Live render boots with JavaScript — the authored source is alongside.

view-as="quiz" — scored recall

The same three facts under `view-as="quiz"`: every question renders with prev/next chrome, and each conclusion stays hidden until you pick it. `.sem-quiz-options` is generated — buttons shuffled from a seed derived from the container id (stable across reloads), one option per candidate: the fact's explicit `incorrect-statement` children plus sibling conclusions up to three, and the conclusion itself marked `data-correct`. One answer per question; the meter then reads `N/M · score C/A`, a correct pick marks green, and a miss marks both the wrong pick and the correct option — a miss teaches.

view-as="quiz" — scored recall
sem-facts-quiz.html
source
1 <sem-facts id="auth-facts" view-as="quiz">
2 <sem-fact id="f-rotate">
3 <statement>JWTs rotate per session</statement>
4 <conclusion>Short-lived access tokens; the refresh
5 grant issues a new pair.</conclusion>
6 <incorrect-statement>Store tokens in localStorage.</incorrect-statement>
7 </sem-fact>
8 <sem-fact id="f-expiry">
9 <statement>Access tokens expire after 15 minutes</statement>
10 <conclusion>The client mints a new pair from the refresh
11 grant; the user never re-signs-in mid-session.</conclusion>
12 <incorrect-statement>The user must sign in again every 15
13 minutes.</incorrect-statement>
14 </sem-fact>
15 <sem-fact id="f-secret">
16 <statement>Client secrets never reach the browser</statement>
17 <conclusion>The confidential client holds the secret
18 server-side; the browser only ever sees tokens.</conclusion>
19 <incorrect-statement>Embed the client secret in the SPA
20 bundle.</incorrect-statement>
21 </sem-fact>
22 </sem-facts>
render

Live render boots with JavaScript — the authored source is alongside.

Source: spec/schema/sem-facts.md