How to Work on Review Pages

The reviews summarise the topics introduced in the corresponding chapter or module, in lectures and workshops (as some workshops introduce new concepts not taught in the lectures). Some modules could have more than one review depending on how they are structured.

The concepts in a review should follow this pattern.

- **some topic**: some explanation

```
some code here if necessary
```

The topics can be divided in sections using headings, headings should start from h2 level.

## Topic

- **some topic**: some explanation

### Sub topic (if needed)

Reviews use a challengeType of 31.

Create the Review

You can create the review with pnpm run create-new-project. The CLI will ask you which certification, chapter, module, and position the review belongs to. If you are unsure about these concepts, refer to the curriculum file structure page.

The metadata for reviews require a blockLabel property with a value of review, and a blockLayout with a value of link.

Reviews have a dashedName with review-topic, and titles of the reviews are like Topic Review.

Review File Template

Each review is a single Markdown file. The content section uses either # --interactive-- or # --description-- depending on whether the review includes interactive code editors.

Use # --interactive-- when the review includes :::interactive_editor blocks that campers can run directly.

For JavaScript-only examples:

---
id: <ObjectId>
title: [Topic] Review
challengeType: 31
dashedName: review-topic-name
---

# --interactive--

## Section Heading

- **concept**: explanation

```js
// optional static code example
```

:::interactive_editor

```js
// interactive code example campers can run
```

:::

# --assignment--

Review the [topic] topics and concepts.

The :::interactive_editor block takes different forms depending on the file types involved.

For JavaScript-only examples (no DOM manipulation):

:::interactive_editor

```js
// interactive code example campers can run
```

:::

When an example involves HTML, include all the relevant files inside the same :::interactive_editor block. Files are not linked automatically: the HTML file must explicitly link to any CSS or JavaScript files using a <link> or <script> tag.

For HTML-only examples:

:::interactive_editor

```html
<p>Example content.</p>
```

:::

For CSS examples, link the CSS file with a <link> tag in the HTML:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css" />
<!-- HTML content -->
```

```css
/* CSS styles */
```

:::

For JavaScript DOM examples, link the JS file with a <script> tag in the HTML:

:::interactive_editor

```html
<!-- HTML content -->
<script src="index.js"></script>
```

```js
// JavaScript code
```

:::

For examples with HTML, CSS, and JavaScript, include all three files:

:::interactive_editor

```html
<link rel="stylesheet" href="styles.css" />
<!-- HTML content -->
<script src="index.js"></script>
```

```css
/* CSS styles */
```

```js
// JavaScript code
```

:::

Use # --description-- when the review only contains static markdown content:

---
id: <ObjectId>
title: [Topic] Review
challengeType: 31
dashedName: review-topic-name
---

# --description--

## Section Heading

- **concept**: explanation

```bash
# optional code example
```

# --assignment--

Review the [topic] topics and concepts.