docs: add challenge files template

src/content/docs/_hooks-shared.mdx

@@ -0,0 +1,72 @@
+Four hooks are available:
+
+| Hook              | When it runs                                                                                |
+| ----------------- | ------------------------------------------------------------------------------------------- |
+| `--before-all--`  | Once, before any test runs                                                                  |
+| `--before-each--` | Before each individual test                                                                 |
+| `--after-each--`  | After each individual test (in a `finally` block, so it always runs even if the test fails) |
+| `--after-all--`   | Once, after all tests have finished                                                         |
+
+**Execution order:**
+
+For challenges that have an HTML file, `--before-all--` is injected as a `<script>` tag into the sandboxed iframe _before_ the user's HTML is parsed, so it runs before user code. It has full access to DOM APIs and global test helpers like `__FakeTimers` and `$` (jQuery). The user's code then renders into the page, and each test runs against the live DOM:
+
+```
+1. --before-all--
+
+2. user code (evaluated once)
+
+3. (for each test): --before-each-- → test → --after-each--
+
+4.--after-all--
+```
+
+For challenges that do not have an HTML file, `--before-all--` runs once before any test. However, because user code is re-evaluated as part of each individual test (concatenated with `--before-each--` and the test in a single `eval`), variables declared in `--before-all--` will not be in scope during tests. To share state across tests, assign to the global object directly (e.g. `globalThis.x = 1` instead of `let x = 1`):
+
+```
+1. --before-all--
+
+2. (for each test): --before-each-- → user code → test → --after-each--
+
+3. --after-all--
+```
+
+**Syntax:**
+
+Hooks use the same `# --hook-name--` heading syntax as other sections. Each hook must contain exactly one code block. Hooks are placed after `--description--` and before `--hints--`:
+
+````md
+# --description--
+
+...
+
+# --before-all--
+
+```js
+// Runs once before any test. Set up shared state here.
+let clock = __FakeTimers.install();
+```
+
+# --before-each--
+
+```js
+// Runs before each test.
+```
+
+# --after-each--
+
+```js
+// Runs after each test, even if it fails.
+```
+
+# --after-all--
+
+```js
+// Runs once after all tests. Clean up here.
+clock.uninstall();
+```
+
+# --hints--
+
+...
+````

src/content/docs/how-to-work-on-labs.mdx

@@ -4,6 +4,8 @@ sidebar:
   label: Work on Lab Challenges
 ---
 
+import HooksShared from './_hooks-shared.mdx';
+
 :::tip
 You'll need this guide if you're creating or modifying lab challenges (project-based learning with user stories). If you're working on other types of challenges like workshops, coding projects, or quizzes, check their respective guides.
 :::
@@ -36,6 +38,73 @@ All labs have a solution, but not all labs have a demo project.
 For the labs that do not have a demo project, the solution can be the minimum necessary to make sure the tests are working correctly.
 :::
 
-The labs that have a demo project have a `demoType` property in the frontmatter with a value of `onClick`, the labs that do not have a demo project do not have a `demoType` project.
+Labs that have a visual output (i.e. HTML-based) can have a demo project, in which case the frontmatter includes `demoType: onClick`. It is not mandatory, if the project design does not require it it can be omitted.
 
 The metadata for labs require a `blockLabel` property with a value of `lab`, and a `blockLayout` with a value of `link`.
+
+## Lab File Template
+
+Each lab is a single Markdown file. The `challengeType` and seed language depend on the type of lab:
+
+| `challengeType` | Lab type          | Seed language(s)                          | Solution language(s) |
+| --------------- | ----------------- | ----------------------------------------- | -------------------- |
+| `25`            | HTML/CSS(/JS/JSX) | `html` + `css`, or + `js`, or + `jsx`     | same combination     |
+| `26`            | JavaScript        | `js`                                      | `js`                 |
+| `27`            | Python            | `py`                                      | `py`                 |
+| `13`            | Bash/SQL/etc.     | no seed — runs via a CodeRoad `url` field | none                 |
+
+`saveSubmissionToDB: true` is only present in cert-project labs.
+
+Here is the template for a JavaScript lab:
+
+````md
+---
+id: <ObjectId>
+title: Build / Implement / Design / Debug [Name]
+challengeType: X
+dashedName: lab-name
+demoType: onClick
+---
+
+# --description--
+
+**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. ...
+
+# --hints--
+
+Description of what the test checks.
+
+```js
+// test code
+```
+
+# --seed--
+
+## --seed-contents--
+
+```lang
+
+```
+
+# --solutions--
+
+```lang
+// solution code
+```
+````
+
+## Hooks
+
+Hooks are optional code blocks that run at specific points during test execution. They can be used to set up shared state, install fake timers, or clean up after tests.
+
+Hooks are supported for lab types `25`, `26`, and `27`.
+
+<HooksShared />
+
+## Proposing a Pull Request (PR)
+
+After you've committed your changes, check here for [how to open a Pull Request](/how-to-open-a-pull-request/).

src/content/docs/how-to-work-on-quizzes.mdx

@@ -150,6 +150,57 @@ developer[2];
 ```
 ````
 
+## Quiz File Template
+
+Each quiz is a single Markdown file. The `### --question--` block is repeated once per question — 10 or 20 times per `## --quiz--` set. A quiz file can contain multiple sets of questions, each introduced by a new `## --quiz--` header within the same `# --quizzes--` section.
+
+```md
+---
+id: <ObjectId>
+title: [Topic] Quiz
+challengeType: 8
+dashedName: quiz-topic-name
+---
+
+# --description--
+
+To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
+
+# --quizzes--
+
+## --quiz--
+
+### --question-- (repeated 10 or 20 times)
+
+#### --text--
+
+Question text
+
+#### --distractors--
+
+Wrong answer 1
+
+---
+
+Wrong answer 2
+
+---
+
+Wrong answer 3
+
+#### --answer--
+
+Correct answer
+
+## --quiz--
+
+### --question-- (another full set of 10 or 20 questions, same structure as above)
+
+#### --text--
+
+...
+```
+
 ## Acceptable Resources to Use for Creating Questions
 
 If you need help creating questions, then you can look through a few of the existing quizzes in the certification.

src/content/docs/how-to-work-on-reviews.mdx

@@ -35,3 +35,89 @@ The metadata for reviews require a `blockLabel` property with a value of `review
 Reviews use a `challengeType` of 31.
 
 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:
+
+````md
+---
+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.
+````
+
+For CSS and JS examples, include the HTML file inside the same `:::interactive_editor` block. The HTML file must explicitly link to the CSS and/or the JS files, they are not linked automatically:
+
+````md
+:::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:
+
+````md
+---
+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.
+````

src/content/docs/how-to-work-on-workshops.mdx

@@ -4,6 +4,8 @@ sidebar:
   label: Work on Workshops
 ---
 
+import HooksShared from './_hooks-shared.mdx';
+
 :::tip
 You'll need this guide if you're creating or modifying workshop-style curriculum (step-based learning). If you're working on other types of challenges like coding projects, labs, or quizzes, check their respective guides.
 :::
@@ -213,6 +215,70 @@ The script is to be used if the step-based project has files that have challenge
 pnpm run rename-challenges
 ```
 
+## Step File Template
+
+Each step in a workshop is a Markdown file named after its challenge `id`. The `challengeType` and seed language depend on the type of workshop:
+
+| `challengeType` | Workshop type | Seed language(s)                                               |
+| --------------- | ------------- | -------------------------------------------------------------- |
+| `0`             | HTML/CSS      | `html` only, or `html` + `css`, or `html` + `css` + `js`/`jsx` |
+| `1`             | JavaScript    | `js`                                                           |
+| `20`            | Python        | `py`                                                           |
+| `12`            | Bash/SQL/etc. | no seed — the workshop runs via a CodeRoad `url` field         |
+
+All step files use exactly two `--fcc-editable-region--` markers in the seed to highlight where campers should make changes. Only the last step requires a `# --solutions--` section.
+
+The `demoType: onLoad` field is only present in the first step, and only for workshops that have a visual output (i.e. HTML-based). It is not mandatory, if the project design does not require it it can be omitted.
+
+Here is the template for a JavaScript workshop step:
+
+````md
+---
+id: <ObjectId>
+title: Step N
+challengeType: X
+dashedName: step-n
+demoType: onLoad
+---
+
+# --description--
+
+Step description in markdown.
+
+# --hints--
+
+Description of what the test checks.
+
+```js
+// test code
+```
+
+# --seed--
+
+## --seed-contents--
+
+```lang
+// seed code
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```lang
+// solution code (only required for the last step)
+```
+````
+
+## Hooks
+
+Hooks are optional code blocks that run at specific points during test execution. They can be used to set up shared state, install fake timers, or clean up after tests.
+
+Hooks are supported for workshop types `0`, `1`, and `20`.
+
+<HooksShared />
+
 ## Proposing a Pull Request (PR)
 
 After you've committed your changes, check here for [how to open a Pull Request](/how-to-open-a-pull-request/).