---
title: My Lesson Title
---

<!-- ============================================================
     LESSON.md v1.6 — a format by Slate eLearning
     ============================================================

     How to use:
     1. Fill in the title above in the YAML frontmatter
     2. Add blocks below using the ::: blocktype / ::: fence syntax
     3. Delete any block examples you don't need
     4. Upload this file in Slate via Course Overview → Upload Lesson

     Tips:
     - Each block is wrapped in ::: blocktype and :::
     - Properties use key: value syntax (one per line, at the top of a block)
     - Text content is written as standard Markdown
     - Nested sections use ## headings
     - HTML comments like this one are stripped during import
     - Full format reference: lesson.md
     ============================================================ -->


<!-- ======================== TEXT BLOCK ======================== -->
<!-- Use Markdown: headings, bold, italic, lists, links, etc. -->

::: text
# Section Heading

This is a **text block** with standard Markdown support.

- Bullet point one
- Bullet point two
- Bullet point three

You can use *italic*, **bold**, [links](https://example.com), and more.
:::


<!-- ======================== NOTE BLOCK ======================== -->
<!-- Properties: variant (1=accent, 2=bordered, 3=filled, 4=minimal; default 1) -->

::: note
variant: 2
This is an **important note** for learners to pay attention to.
:::


<!-- ======================== IMAGE BLOCK ======================== -->
<!-- Properties: src (required), alt, caption, width (full|large|medium|small), align (left|center|right) -->
<!-- src can be an https URL or a relative path like media/<filename> if you ship a media/ folder in your zip. -->

::: image
src: https://example.com/image.jpg
alt: Description of the image
caption: Optional caption text
width: large
align: center
:::


<!-- ======================== LABELED GRAPHIC BLOCK ======================== -->
<!-- An image with interactive hotspot labels. Same image properties + ## sections for hotspots. -->
<!-- x/y values are percentages (0-100) from top-left. Adjust positions in the Slate editor after import. -->
<!-- Maximum 10 hotspots per image. -->
<!-- src can be an https URL or a relative path like media/<filename> if you ship a media/ folder in your zip. -->

::: labeled-graphic
src: https://example.com/diagram.jpg
alt: Diagram of key components
caption: Click each label to learn more
width: large
align: center

## Component A
x: 25
y: 30
This is **Component A**. It handles the primary function.

## Component B
x: 65
y: 50
This is **Component B**. It supports secondary operations.

## Component C
x: 45
y: 80
This is **Component C**. It connects the other components together.
:::


<!-- ======================== VIDEO BLOCK ======================== -->
<!-- Properties: src (required), provider (auto-detected from URL), caption -->
<!-- Supported providers: youtube, vimeo, googledrive, synthesia, loom, url -->
<!-- src can be an https URL or a relative path like media/<filename> if you ship a media/ folder in your zip. -->

::: video
src: https://www.youtube.com/watch?v=dQw4w9WgXcQ
caption: Optional video caption
:::


<!-- ======================== AUDIO BLOCK ======================== -->
<!-- Properties: src (required), caption -->
<!-- src can be an https URL or a relative path like media/<filename> if you ship a media/ folder in your zip. -->

::: audio
src: https://example.com/audio.mp3
caption: Optional audio caption
:::


<!-- ======================== DOCUMENT BLOCK ======================== -->
<!-- Properties: src (required), filename, title, description -->
<!-- src can be an https URL or a relative path like media/<filename> if you ship a media/ folder in your zip. -->

::: document
src: https://example.com/safety-manual.pdf
filename: Safety Manual.pdf
title: Workplace Safety Manual
description: Complete guide to workplace safety procedures
:::


<!-- ======================== DIVIDER BLOCK ======================== -->
<!-- Properties: style (line|space|dots) — default: line -->

::: divider
style: line
:::


<!-- ======================== BUTTON BLOCK ======================== -->
<!-- Properties: text, url, style (primary|secondary|outline), openInNewTab (true|false), align (left|center|right) -->

::: button
text: Learn More
url: https://example.com
style: primary
openInNewTab: true
align: center
:::


<!-- ======================== IFRAME / EMBED BLOCK ======================== -->
<!-- Properties: src (required), width, height, title, allowFullscreen (true|false) -->

::: iframe
src: https://example.com/embed
width: 100%
height: 400
title: Embedded content
allowFullscreen: true
:::


<!-- ======================== ACCORDION BLOCK ======================== -->
<!-- Properties: allowMultiple (true|false) — default: false -->
<!-- Each ## heading creates a new collapsible section -->

::: accordion
allowMultiple: false

## First Section
Content for the first accordion section. Supports **Markdown**.

## Second Section
Content for the second section.

- You can use lists
- And other markdown features

## Third Section
Content for the third section.
:::


<!-- ======================== TABS BLOCK ======================== -->
<!-- Properties: orientation (horizontal|vertical) — default: horizontal -->
<!-- Each ## heading creates a new tab -->

::: tabs
orientation: horizontal

## Overview
This is the content of the Overview tab.

## Details
This tab contains more detailed information.

## Resources
Links and resources go here.
:::


<!-- ======================== LAYOUT BLOCK ======================== -->
<!-- Properties: preset (2-col-equal|2-col-left|2-col-right|3-col-equal|4-col-equal|2x2|masonry-2|masonry-3), gap (none|sm|md|lg) -->
<!-- Grid presets: each ## heading creates a column/cell -->
<!-- Masonry presets: each ## heading creates one item in the flow; items pack into 2 or 3 columns by height -->

::: layout
preset: 2-col-equal
gap: md

## Column 1
Content for the **left column**.

## Column 2
Content for the **right column**.
:::


<!-- ======================== LAYOUT BLOCK — MASONRY ======================== -->
<!-- Column flow. Items keep their source order and distribute evenly across the configured columns. -->
<!-- Great for galleries, quote walls, and card decks where items have different heights. -->

::: layout
preset: masonry-2
gap: md

## Item 1
Short content.

## Item 2
Longer content so you can see how masonry flows items of different
heights into the columns without leaving awkward gaps.

## Item 3
Another short one.

## Item 4
Medium-length content that rounds out the example.
:::


<!-- ======================== KNOWLEDGE CHECK — MULTIPLE CHOICE ======================== -->
<!-- Properties: type (multiple-choice|multiple-select|fill-in-the-blank), question, correct-feedback, incorrect-feedback -->
<!-- Optional attempt-policy properties (each inherits from the course's Theme defaults when absent): -->
<!--   maxAttempts: 0 = unlimited (default); a positive integer locks the question after N wrong attempts -->
<!--   revealCorrectAnswer: "true" | "false" — show the correct answer once locked by the cap -->
<!--   revealAnswersPerAttempt: "true" | "false" — paint per-option correctness on every wrong submit -->
<!--   showFeedback: "true" | "false" — show the correct/incorrect feedback band on submit -->
<!--   eliminateWrongOptions: "true" | "false" — MC only: previously-wrong options stay marked and locked out across attempts. Ignored on multiple-select and fill-in-the-blank -->
<!-- Use [x] for correct answer, [ ] for incorrect -->

::: knowledge-check
type: multiple-choice
question: What is the capital of France?
maxAttempts: 3
eliminateWrongOptions: true
correct-feedback: That's right! Paris is the capital of France.
incorrect-feedback: Not quite. The correct answer is Paris.

- [x] Paris
- [ ] London
- [ ] Berlin
- [ ] Madrid
:::


<!-- ======================== KNOWLEDGE CHECK — MULTIPLE SELECT ======================== -->
<!-- Multiple [x] marks for multiple correct answers -->

::: knowledge-check
type: multiple-select
question: Which of the following are primary colors? (Select all that apply)
maxAttempts: 2
revealAnswersPerAttempt: true
correct-feedback: Correct! Red, blue, and yellow are primary colors.
incorrect-feedback: Review the primary colors and try again.

- [x] Red
- [x] Blue
- [ ] Green
- [x] Yellow
- [ ] Orange
:::


<!-- ======================== KNOWLEDGE CHECK — FILL IN THE BLANK ======================== -->
<!-- List every accepted answer with [x]. Matching ignores case and
     trims spaces, so list only genuine alternatives: synonyms,
     regional spellings, common misspellings, and singular/plural
     forms. Add "caseSensitive: true" to require exact capitalization. -->

::: knowledge-check
type: fill-in-the-blank
question: The base metric unit of length is the _____.
correct-feedback: Correct! "metre" and "meter" are both accepted.
incorrect-feedback: Review the section on units of measurement.

- [x] metre
- [x] meter
:::


<!-- ======================== TABLE BLOCK ======================== -->
<!-- Properties: headerRow (true|false), headerColumn (true|false), borderStyle (all|horizontal|outer|none), striping (none|even|odd), caption -->
<!-- Use standard Markdown pipe table syntax -->

::: table
headerRow: true
borderStyle: all
striping: none
caption: Example data table

| Name    | Role      | Department |
| ------- | --------- | ---------- |
| Alice   | Engineer  | Product    |
| Bob     | Designer  | Creative   |
| Charlie | Manager   | Operations |
:::


<!-- ======================== CARD BLOCK ======================== -->
<!-- Properties: title, subtitle, style (default|outlined|elevated|filled), imageUrl, imageAlt, imagePosition (top|left|right|none), linkUrl, linkNewTab -->

::: card
title: Getting Started Guide
subtitle: Everything you need to know
style: elevated
imageUrl: https://example.com/card-image.jpg
imageAlt: Guide cover image
imagePosition: top
linkUrl: https://example.com/guide
linkNewTab: true

This is the card body content. It supports **Markdown**.
:::


<!-- ======================== FLIP CARD BLOCK ======================== -->
<!-- Properties: flipDirection (horizontal|vertical), flipTrigger (hover|click), aspectRatio (1:1|4:3|16:9|auto) -->
<!-- Use ## Front and ## Back headings for each side -->
<!-- Each side supports: title, subtitle, imageUrl, imageAlt, style + Markdown content -->

::: flip-card
flipDirection: horizontal
flipTrigger: click
aspectRatio: 4:3

## Front
title: Question
subtitle: Click to reveal

What is the speed of light?

## Back
title: Answer
subtitle: Did you know?

The speed of light is approximately **299,792,458 meters per second**.
:::


<!-- ======================== CARD CAROUSEL BLOCK ======================== -->
<!-- Properties: style, cardsPerView (1-4), showNavigation, showDots, autoplay, autoplayInterval, loop -->
<!-- Each ## heading creates a card. Card properties: subtitle, imageUrl, imageAlt, linkUrl, linkNewTab -->

::: card-carousel
style: default
cardsPerView: 3
showNavigation: true
showDots: true
autoplay: false
loop: true

## Card One
subtitle: First card subtitle
imageUrl: https://example.com/card1.jpg
imageAlt: Card 1 image

Description for card one.

## Card Two
subtitle: Second card subtitle
imageUrl: https://example.com/card2.jpg
imageAlt: Card 2 image

Description for card two.

## Card Three
subtitle: Third card subtitle
imageUrl: https://example.com/card3.jpg
imageAlt: Card 3 image

Description for card three.
:::


<!-- ======================== FLIP CARD CAROUSEL BLOCK ======================== -->
<!-- Carousel of cards where each card has its own front and back that flip on click. -->
<!-- Block properties: flipDirection, flipTrigger, aspectRatio, cardsPerView (1-4), showNavigation, showDots, loop -->
<!-- Each ## heading defines a card. Inside each card, use ### Front and ### Back. -->

::: flip-card-carousel
flipDirection: horizontal
flipTrigger: click
aspectRatio: 4:3
cardsPerView: 1
showNavigation: true
showDots: true
loop: true

## Card 1

### Front
title: Safety Rule 1
imageUrl: https://example.com/rule1.jpg

### Back
title: Explanation
subtitle: Why it matters

Detailed explanation of the first safety rule.

## Card 2

### Front
title: Safety Rule 2
imageUrl: https://example.com/rule2.jpg

### Back
title: Explanation

Detailed explanation of the second safety rule.
:::