component-guide.md

---
title: "Workbench Component Guide"
---

::::::::::::::::::: prereq

### Find out More!

This is the component guide for the workbench. For details on how to create 
components from [fenced divs][fenced-divs], read the [Callout Blocks section of
"Episode Structure"](episodes.html#callout-blocks).

::::::::::::::::::::::::::

## Required Sections

The workbench requires `objectives` and `questions` at the beginning and 
`keypoints` at the end of each episode.

::::::::::::::::: objectives

### OBJECTIVES (`objectives`)

OBJECTIVES callouts are created with the `objectives` tag and outline what the
learners should take away from the episode.

::::::::::::::::::::::::::::

::::::::::::::::: questions

### QUESTIONS (`questions`)

QUESTIONS callouts are created with the `questions` tag and offer questions for
the learner before they start the episode.

:::::::::::::::::::::::::::


::::::::::::::::: keypoints

### KEYPOINTS (`keypoints`)

KEYPOINTS callouts are created with the `keypoints` tag and offer key takeaways
from the episode to summarise what the learners should have learned.

:::::::::::::::::::::::::::



## Instructor Notes

Special sections that only appear on the instructor view (use the button at the
top right of the page to toggle).

::::::::::::::::::: instructor

### INSTRUCTOR NOTE (`instructor`)

Instructor notes are created with the `instructor` tag

::::::::::::::::::::::::::::::



## Callout Blocks

Sections to pause the narrative flow of an episode for learners to reflect.

::::::::::::::::: callout

### CALLOUT (`callout`)

CALLOUT callouts are created with the `callout` tag and are an aside or comment.

:::::::::::::::::::::::::

::::::::::::::::: caution

### CAUTION (`caution`)

CAUTION callouts are created with the `caution` tag and raise awareness of potential
issues or problems that a learner might experience.

:::::::::::::::::::::::::

::::::::::::::::: prereq

### PREREQUISITES (`prereq`)

PREREQUISITES callouts are created with the `prereq` tag and indicate things a
learner needs before starting the episodes (e.g. data from a previous episode or
and understanding of a particular concept).

::::::::::::::::::::::::

::::::::::::::::: checklist

### CHECKLIST (`checklist`)

CHECKLIST callouts are created with the `checklist` tag and are a way to more
strongly emphasise particular steps.

:::::::::::::::::::::::::::

::::::::::::::::::::::::::::::::: challenge

### CHALLENGE (`challenge`)

CHALLENGE callouts are created with the `challenge` tag and represent formative
assessment opportunities for the learners to practice their skills.

::::::::::::::::: hint

### HINT (`hint`)

HINT accordions are created with the `hint` tag and nested within 
`challenge` callouts. These offer more context for the challenge that can help
the learner find the solution.

::::::::::::::::::::::

::::::::::::::::: solution

### SOLUTION (`solution`)

SOLUTION accordions are created with the `solution` tag and nested within 
`challenge` callouts. These provide the learners with the solution to the
challenge so they can confirm their answers.

::::::::::::::::::::::::::


:::::::::::::::::::::::::::::::::::::::::::

::::::::::::::::: discussion

### DISCUSSION (`discussion`)

DISCUSSION callouts are created with the `discussion` tag and represent an
open-ended formative assessment in which the learners are expected to discuss
a particular topic with other learners.

::::::::::::::::::::::::::::

::::::::::::::::: testimonial

### TESTIMONIAL (`testimonial`)

TESTIMONIAL callouts are created with the `testimonial` tag and are quotations
from previous learners or instructors.

:::::::::::::::::::::::::::::

::::::::::::::::: spoiler

### SPOILER (`spoiler`)

SPOILER callouts are created with the `spoiler` tag and
are a way to provide additional details/content 
that can be expanded and collapsed on demand.

:::::::::::::::::::::::::


### Tabbed Callouts

::::::::::::::::: tab

### Windows

Some Windows instructions

### Mac

Maybe some for Mac

### Linux

And more for Linux users, including a code block:

```python
  print("Yay, tabs!")
```

:::::::::::::::::::::::::

### Grouped Tabs

The first tab specified is the default tab. Selecting a tab in one tab group changes the tab in
the other group(s).

::::::::::::::::::::: group-tab

### Windows

1

### Mac

2

### Linux

3

:::::::::::::::::::::::::::::::

::::::::::::::::::::: group-tab

### Windows

4

### Mac

5

### Linux

6

:::::::::::::::::::::::::::::::