skuilder

Appearance

Skuilder's default card type uses markdown enhanced with a moustache syntax to define its interactivity. The features are described by example in the editors below. The editors are live - play with the contents.

Note that the rendering context here - outside of the assumed environment of a skuilder StudySession, with many cards rendered at once - may result in some slightly wonky behaviour.

Information Cards ​

When no moustache syntax exists, the card is interpreted as a straightforward markdown document.

Markdown Source:

Rendered Card:

This card has just some information, and no question. The next button is inserted automatically.

Click it to see how cards bubble information up to the broader application.

Dismissals of information cards are automatically stamped with isCorrect: true.

Basic Fill-In Example ​

Simple fill-in-the-blank with a single correct answer. This renders a TextInput for the user to enter the answer. In normal context, it will autofocus the input element.

Markdown Source:

Rendered Card:

The capital of France is .

Fill-In with Multiple Choice ​

Instead of a user-typed answer, we can render multiple choice

A blank can present as a multiple choice question with correct answer and distractors:

Markdown Source:

Rendered Card:

The main gas found in Earth's atmosphere is              .

Nitrogen

Methane

Hydrogen

Carbon Dioxide

Oxygen

Here, the double-bar || separates the correct answer from distractors, and the single bar | separates distractors.

The order of rendered options is randomized, and a maximum of 6 options will be rendered, no matter the number of distractors supplied.

If an item exists as both an answer and a distractor, it will be interprted only as an answer.

Multiple correct answers can be supplied as well. Exactly one correct answer will be rendered as an option.

Markdown Source:

Rendered Card:

Twinkle Twinkle Little Star has the same melody as              .

Stairway to Heaven

The Alphabet Song (ABC...)

Multiple Choice as Answer-to-a-Question ​

If the multiple-choice moustache occupies its own final, line-break separated line content of the card, it will render the options but insert no blank into the text.

Markdown Source:

Rendered Card:

Is skuilder neat?

nah

I guess so

On Whitespace ​

Whitespace inside of moustache notation is trimmed, which can help to write readible card source. The following texts all render the same card:

Dense:

{{answer||distractor1|distractor2}}

Spaced:

{{ answer || distractor1 | distractor2 }}

Roomy:

{{
    answer

  ||

  distractor1
  |
  distractor2
}}

Markdown in Answers ​

Rendered multiple-choice buttons may also include markdown.

Markdown Source:

Rendered Card:

Find the slanty one.

here

here

Including, eg, code blocks:

Markdown Source:

Rendered Card:

What sort of casing animal is good?

Camels Are good.

js
function helloWorld() {}

Snakes are good.

js
function hello_world() {}

Media in Cards ​

Basic cards support media (audio, image) that has been bundled with the card. Porting that process to this docs site is a work in progress, but the rough picture is this:

Images ​

Card with a Heart

Audio ​

Card with Sound

General Content Embedding ​

If it's markdown, it mostly just works. For example, this youtube embed.

Note: if you're reading this and haven't watched this talk, treat yourself.

Markdown Source:

Rendered Card: