Presentation Structure Skill

Knowledge about how the presentation at presentation/index.html is structured.

File Location

presentation/index.html — a single-file HTML presentation with inline CSS and JS.

Slide Format

Each slide is a div with data-slide (sequential number) and optional data-weight (journey percentage):

<!-- Regular slide -->
<div class="slide" data-slide="12" data-weight="5">
    <h1>Slide Title</h1>
    <!-- content -->
</div>

<!-- Section divider slide -->
<div class="slide section-slide" data-slide="10">
    <h1>Section Name</h1>
    <p class="section-desc">Description of this section</p>
</div>

<!-- Title slide (centered) -->
<div class="slide title-slide" data-slide="1">
    <h1>Presentation Title</h1>
    <p class="subtitle">Subtitle text</p>
</div>

Journey Bar Weight System

• •Slides with data-weight="N" contribute N% to the journey progress bar
• •All weights across the entire presentation MUST sum to exactly 100
• •The journey bar reads weights at page load and pre-computes cumulative sums
• •Slides without data-weight contribute 0% (informational slides, appendix)
• •The bar is hidden on slide 1 (title slide)

Weight Distribution by Section

Navigation System

• •goToSlide(n) — used in TOC links, must match actual data-slide numbers
• •totalSlides is auto-computed from DOM (document.querySelectorAll('[data-slide]').length)
• •Arrow keys, Space, and touch swipe for navigation
• •Slide counter shows current / total at bottom-left

Renumbering Rules

After adding, removing, or reordering slides:

1. •Renumber ALL data-slide attributes sequentially starting from 1
2. •Update all goToSlide() calls in the TOC/Journey Map slide
3. •The JS totalSlides auto-computes — no manual update needed
4. •Verify no gaps or duplicates exist

Section Divider Format

Section dividers use the section-slide class and show the current journey percentage:

<div class="slide section-slide" data-slide="10">
    <p class="section-number">Part 2</p>
    <h1>Better Prompting</h1>
    <p class="section-desc">Journey: 0% — effective prompting for real results.</p>
</div>