Table of Contents

Hiding Text

How do you make some text hidden until the reader reveals it? <‌hidden>Like this.<‌/hidden>

How do you make some text hidden until the reader reveals it?

Use this for hints, self-tests, checkpoints, “stop and think” moments, etc.

You can also hide a whole paragraph, but because of the nasty interaction between Markdown, Kramdown, CSS, and our custom parsing, you must use a different tag for that:

<‌hidden-block>
  These paragraphs are all hidden.

  Note that they are indented for visual clarity in the source code, but indented with only _two_ spaces so as not to be considered code.
<‌/hidden-block>

These paragraphs are all hidden.

Note that they are indented for visual clarity in the source code, but indented with only two spaces so as not to be considered code.

<‌hidden-block>
`‌`‌`‌
boolean isCodeSupportedInHiddenBlock() {
  return true;
}
`‌`‌`‌
<‌/hidden-block>

boolean isCodeSupportedInHiddenBlock() {
  return true;
}

<‌details>
  <‌summary>
  You can also make a whole chunk of text _collapsible_.
  <‌/summary>

  Although this is standard HTML, Kramdown is _extremely_ fussy about parsing it. In particular, note that:

  - the `‌<‌summary>`‌ opening and closing tags appear on separate lines from the text they enclose, and
  - the summary text is _not_ further indented inside the `‌<‌summary>`‌ tag, lest it become a code block.
<‌/details>

You can also make a whole chunk of text collapsible.

Although this is standard HTML, Kramdown is extremely fussy about parsing it. In particular, note that:

  • the <summary> opening and closing tags appear on separate lines from the text they enclose, and
  • the summary text is not further indented inside the <summary> tag, lest it become a code block.

Use the hidden tag when you want make the hidden text prominent: “Please notice this! Expand it! Read it!!”

Use details for optional text that you’re happy to have readers skip over if it doesn’t catch their interest.

Sometimes you want to create a “FULL STOP” moment in the text, to encourage students to pause and think and discuss before they move on. How? Scroll down when you’re ready for the answer.

Use the <‌scroll-for-answer/> tag.

Note that the number of dots adjusts to the window height, so no need to double the tag to make it extra tall. It will be tall enough to give students pause.