lia-board-mode for LiaScript: Full-Screen Classroom Presentation Mode

When teaching with LiaScript in the classroom, the standard layout may not fill the screen optimally for projector use. The lia-board-mode community template by MINT-the-GAP addresses this: import it into any course and slides stretch to ~98.5% screen width in Presentation and Slides modes, with an adjustable font size slider in the toolbar.

Quick Start

<!--
import: https://raw.githubusercontent.com/MINT-the-GAP/lia-board-mode/main/README.md
-->

There are no macros to write. Importing the template activates all board mode features automatically.

What It Does

1. Full-Screen Width in Presentation and Slides Modes

In Presentation mode and Slides mode, content expands to ~98.5% of screen width. This removes the centered narrow-column layout and gives maximum use of projector or whiteboard space.

Standard Textbook mode is unaffected.

2. Font Size Slider in the Toolbar

After importing, an AA button appears in the LiaScript toolbar. Clicking it reveals a slider from 14px to 48px. The selection persists in localStorage — returning students see the same size they last used.

Auto-boost mapping based on base font:

3. Mode-Conditional Content: data-lia-only

HTML blocks with the data-lia-only attribute are visible only in the specified mode:

<div data-lia-only="slides">
  This content is only shown in Slides mode.
</div>

<div data-lia-only="presentation">
  This content is only shown in Presentation mode.
</div>

<div data-lia-only="textbook">
  This content is only shown in Textbook (reading) mode.
</div>

This lets instructors create three-in-one courses:

• Minimal slide view for classroom projection
• Full-detail view for self-study (textbook mode)
• Intermediate view for slides export

Example: Combining Modes

<!--
import: https://raw.githubusercontent.com/MINT-the-GAP/lia-board-mode/main/README.md
-->

# Introduction to Cells

<div data-lia-only="presentation">

## Key Point

The mitochondria is the powerhouse of the cell.

</div>

<div data-lia-only="textbook">

## Full Explanation

The mitochondria produces ATP through oxidative phosphorylation.
The inner membrane contains the electron transport chain, which couples electron transfer to proton pumping and drives ATP synthase.

</div>

<div data-lia-only="slides">

```
Mitochondria → ATP Production → Cellular Energy
```

</div>

Try it live — switch between Presentation and Textbook modes and notice how data-lia-only content changes, and look for the AA font size button in the toolbar:

Full Template Demo

Use Cases

Classroom lectures — Import lia-board-mode and use Presentation mode for full-screen display on projectors. The font size slider means the teacher can adapt to the room without re-authoring.

Single-source authoring — Write one LiaScript document that serves as both classroom slides (Presentation mode, data-lia-only="presentation") and self-study reading (Textbook mode, data-lia-only="textbook").

Accessibility — The font size slider (14px to 48px) supports students with vision difficulties in a classroom setting.

Remote teaching — Large font sizes improve readability during screen shares and video calls.

Technical Facts

Try It

Related Templates

• TextAnalysis — readability metrics for teaching material
• Random — randomized practice sets for classroom use
• Pannellum — 360° panorama images for immersive presentations
• aframe — 3D/VR scenes for science and engineering lectures