Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine opening a giant book with 100 pages to find a story about sharks. Flipping through every single page one by one would take forever!

Books have special secret tools to help you jump right to the page you want.

A **page number** tells you exactly where you are in a book. They count in order: 1, 2, 3, 4, and so on.

You can usually find them hiding at the very bottom or top corner of each page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Page Numbers</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    body {
      background-color: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      gap: 12px;
      user-select: none;
    }

    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #4b5563;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    /* Book Stage */
    .book-wrapper {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 230px;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 800px;
    }

    .book {
      position: relative;
      display: flex;
      width: 100%;
      height: 100%;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
      border: 1px solid #e5e7eb;
    }

    .spine-shadow {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 20px;
      transform: translateX(-50%);
      background: linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0.12), rgba(0,0,0,0.06));
      pointer-events: none;
      z-index: 5;
    }

    .page {
      flex: 1;
      position: relative;
      padding: 24px 18px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 8px;
      overflow: hidden;
    }

    .page-left {
      border-right: 1px solid #e5e7eb;
      background: linear-gradient(to right, #ffffff, #fafafa);
      border-radius: 8px 0 0 8px;
    }

    .page-right {
      background: linear-gradient(to left, #ffffff, #fafafa);
      border-radius: 0 8px 8px 0;
    }

    /* Simulated text lines */
    .text-line {
      height: 6px;
      border-radius: 3px;
      background: #e5e7eb;
      width: 100%;
    }
    .text-line.short { width: 65%; }
    .text-line.medium { width: 85%; }

    /* Page Numbers */
    .page-num {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 32px;
      height: 24px;
      padding: 0 6px;
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      background: #e0f2fe;
      border: 1.5px solid #22b7ff;
      border-radius: 6px;
      box-shadow: 0 0 10px rgba(34, 183, 255, 0.4);
      transition: all 0.35s ease;
      z-index: 10;
    }

    /* Positions */
    /* Mode: Bottom Corners */
    .pos-bottom-corners .page-left .page-num {
      left: 14px;
      bottom: 12px;
      top: auto;
      transform: none;
    }
    .pos-bottom-corners .page-right .page-num {
      right: 14px;
      bottom: 12px;
      left: auto;
      top: auto;
      transform: none;
    }

    /* Mode: Top Corners */
    .pos-top-corners .page-left .page-num {
      left: 14px;
      top: 12px;
      bottom: auto;
      transform: none;
    }
    .pos-top-corners .page-right .page-num {
      right: 14px;
      top: 12px;
      bottom: auto;
      left: auto;
      transform: none;
    }

    /* Mode: Bottom Center */
    .pos-bottom-center .page-left .page-num {
      left: 50%;
      bottom: 12px;
      top: auto;
      transform: translateX(-50%);
    }
    .pos-bottom-center .page-right .page-num {
      left: 50%;
      right: auto;
      bottom: 12px;
      top: auto;
      transform: translateX(-50%);
    }

    /* Page Turner Bar */
    .turner {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .turn-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #1e2945;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: background 0.2s, border-color 0.2s;
    }

    .turn-btn:hover {
      background: #f1f5f9;
      border-color: #9ca3af;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn active" id="btnBottomCorners">Bottom Corners</button>
    <button class="btn" id="btnTopCorners">Top Corners</button>
    <button class="btn" id="btnBottomCenter">Bottom Center</button>
  </div>

  
  <div class="book-wrapper">
    <div class="book pos-bottom-corners" id="bookSpread">
      <div class="spine-shadow"></div>

      
      <div class="page page-left">
        <div class="page-num" id="leftNum">14</div>
        <div class="text-line medium"></div>
        <div class="text-line"></div>
        <div class="text-line short"></div>
        <div class="text-line"></div>
        <div class="text-line medium"></div>
      </div>

      
      <div class="page page-right">
        <div class="page-num" id="rightNum">15</div>
        <div class="text-line"></div>
        <div class="text-line medium"></div>
        <div class="text-line"></div>
        <div class="text-line short"></div>
        <div class="text-line medium"></div>
      </div>
    </div>
  </div>

  
  <div class="turner">
    <button class="turn-btn" id="prevPage" title="Previous Pages">◀</button>
    <button class="turn-btn" id="nextPage" title="Next Pages">▶</button>
  </div>

  <script>
    let currentSpread = 7; // Spread 7 = pages 14 & 15
    const bookSpread = document.getElementById('bookSpread');
    const leftNum = document.getElementById('leftNum');
    const rightNum = document.getElementById('rightNum');

    const btnBottomCorners = document.getElementById('btnBottomCorners');
    const btnTopCorners = document.getElementById('btnTopCorners');
    const btnBottomCenter = document.getElementById('btnBottomCenter');
    const posButtons = [btnBottomCorners, btnTopCorners, btnBottomCenter];

    function updatePages() {
      leftNum.textContent = currentSpread * 2;
      rightNum.textContent = currentSpread * 2 + 1;
    }

    function setPositionMode(modeClass, activeBtn) {
      bookSpread.className = 'book ' + modeClass;
      posButtons.forEach(btn => btn.classList.remove('active'));
      activeBtn.classList.add('active');
    }

    btnBottomCorners.addEventListener('click', () => {
      setPositionMode('pos-bottom-corners', btnBottomCorners);
    });

    btnTopCorners.addEventListener('click', () => {
      setPositionMode('pos-top-corners', btnTopCorners);
    });

    btnBottomCenter.addEventListener('click', () => {
      setPositionMode('pos-bottom-center', btnBottomCenter);
    });

    document.getElementById('prevPage').addEventListener('click', () => {
      if (currentSpread > 1) {
        currentSpread--;
        updatePages();
      }
    });

    document.getElementById('nextPage').addEventListener('click', () => {
      if (currentSpread < 40) {
        currentSpread++;
        updatePages();
      }
    });
  </script>
</body>
</html>

Knowing the page numbers is great, but how do you know which number to look for in the first place?

A **table of contents** is a handy list at the very front of the book that shows all the chapter names and their page numbers.

Think of it like a menu at a restaurant: it shows you what is inside and tells you where to find it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  body {
    background: transparent;
    color: #1e2945;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .book-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    max-width: 580px;
    justify-content: center;
  }

  @media (max-width: 460px) {
    .book-container {
      flex-direction: column;
      gap: 12px;
    }
  }

  /* Table of Contents Pane */
  .pane {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
  }

  .pane-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 12px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
  }

  .toc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .toc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
  }

  .toc-item:hover {
    background: #f0f9ff;
  }

  .toc-item.active {
    background: #e0f2fe;
    border-color: #22b7ff;
    box-shadow: 0 0 0 1px #22b7ff;
  }

  .toc-item .label {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .toc-item .dots {
    flex: 1;
    border-bottom: 2px dotted #cbd5e1;
    margin: 0 8px;
    height: 4px;
  }

  .toc-item .page-num {
    font-size: 14px;
    font-weight: 700;
    background: #ffffff;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    color: #0284c7;
  }

  .toc-item.active .page-num {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
  }

  /* Page View Pane */
  .page-view {
    position: relative;
    align-items: center;
    justify-content: space-between;
    min-height: 180px;
  }

  .page-header {
    font-size: 18px;
    font-weight: 700;
    color: #1e2945;
  }

  .page-graphic {
    font-size: 56px;
    line-height: 1;
    margin: 12px 0;
    transition: transform 0.3s ease;
  }

  .page-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
  }

  .page-badge {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    background: #22b7ff;
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
  }

  /* Controls */
  .controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
  }

  .btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #1e2945;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
  }

  .btn:hover {
    background: #f1f5f9;
  }

  .indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.2s;
  }

  .indicator-dot.active {
    background: #22b7ff;
    transform: scale(1.3);
  }
</style>
</head>
<body>

<div class="book-container">
  
  <div class="pane">
    <div class="pane-title">Table of Contents</div>
    <div class="toc-list">
      <div class="toc-item active" data-index="0">
        <span class="label">🐸 Frogs</span>
        <span class="dots"></span>
        <span class="page-num">4</span>
      </div>
      <div class="toc-item" data-index="1">
        <span class="label">🦉 Birds</span>
        <span class="dots"></span>
        <span class="page-num">12</span>
      </div>
      <div class="toc-item" data-index="2">
        <span class="label">🐻 Bears</span>
        <span class="dots"></span>
        <span class="page-num">20</span>
      </div>
    </div>
  </div>

  
  <div class="pane page-view">
    <div class="page-header" id="pageTitle">Frogs</div>
    <div class="page-graphic" id="pageEmoji">🐸</div>
    <div class="page-footer">
      <div class="page-badge" id="pageFooterNum">Page 4</div>
    </div>
  </div>
</div>

<div class="controls">
  <button class="btn" id="playBtn">⏸</button>
  <div class="indicator-dot active" data-index="0"></div>
  <div class="indicator-dot" data-index="1"></div>
  <div class="indicator-dot" data-index="2"></div>
</div>

<script>
  const data = [
    { title: 'Frogs', emoji: '🐸', page: 'Page 4' },
    { title: 'Birds', emoji: '🦉', page: 'Page 12' },
    { title: 'Bears', emoji: '🐻', page: 'Page 20' }
  ];

  let current = 0;
  let timer = null;
  let playing = true;

  const items = document.querySelectorAll('.toc-item');
  const dots = document.querySelectorAll('.indicator-dot');
  const titleEl = document.getElementById('pageTitle');
  const emojiEl = document.getElementById('pageEmoji');
  const footerEl = document.getElementById('pageFooterNum');
  const playBtn = document.getElementById('playBtn');

  function show(index) {
    current = index;
    items.forEach((el, i) => el.classList.toggle('active', i === index));
    dots.forEach((el, i) => el.classList.toggle('active', i === index));
    
    titleEl.textContent = data[index].title;
    emojiEl.textContent = data[index].emoji;
    footerEl.textContent = data[index].page;
  }

  function start() {
    playing = true;
    playBtn.textContent = '⏸';
    if (timer) clearInterval(timer);
    timer = setInterval(() => {
      show((current + 1) % data.length);
    }, 3000);
  }

  function pause() {
    playing = false;
    playBtn.textContent = '▶';
    if (timer) clearInterval(timer);
  }

  items.forEach((item, i) => {
    item.addEventListener('click', () => {
      show(i);
      pause();
    });
  });

  dots.forEach((dot, i) => {
    dot.addEventListener('click', () => {
      show(i);
      pause();
    });
  });

  playBtn.addEventListener('click', () => {
    if (playing) pause();
    else start();
  });

  start();
</script>
</body>
</html>

How do we put these two tools together like a book detective?

First, open to the front of the book to find the **table of contents**.

Next, find your topic on the list and follow the dots with your finger to check its **page number**.

Finally, turn the pages until the number in the corner matches your number!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<title>Page Numbers and Table of Contents</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 12px;
  }

  .main-layout {
    width: 100%;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .book-spread {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #e6e6e6;
    overflow: hidden;
    min-height: 240px;
  }

  @media (max-width: 440px) {
    .book-spread {
      grid-template-columns: 1fr;
    }
  }

  /* Left: Table of Contents */
  .toc-pane {
    background: #fdfdfd;
    border-right: 1px solid #eef0f2;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
  }

  .toc-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .toc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .toc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #1e2945;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  }

  .toc-item .dots {
    flex-grow: 1;
    border-bottom: 1.5px dotted #cbd5e1;
    margin: 0 8px;
    height: 1px;
    opacity: 0.8;
  }

  .toc-item .num-badge {
    background: #e2e8f0;
    color: #475569;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
  }

  .toc-item.active {
    background: #eaf7ff;
    border-color: #22b7ff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.15);
  }

  .toc-item.active .num-badge {
    background: #22b7ff;
    color: #ffffff;
  }

  /* Right: Book Page View */
  .page-pane {
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background: #ffffff;
  }

  .page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    gap: 8px;
  }

  .topic-icon {
    font-size: 48px;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
    transition: transform 0.3s ease;
  }

  .topic-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e2945;
  }

  .page-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 8px;
    border-top: 1px dashed #eef0f2;
  }

  .corner-number {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    background: #22b7ff;
    color: #ffffff;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.3);
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 183, 255, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(34, 183, 255, 0); }
  }

  .match-indicator {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  /* Bottom Controls */
  .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .btn {
    border: none;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
  }

  .btn:active {
    background: #f1f5f9;
  }

  .btn-primary {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
  }
</style>
</head>
<body>

<div class="main-layout">
  <div class="book-spread">
    
    <div class="toc-pane">
      <div class="toc-title">📖 Contents</div>
      <div class="toc-list">
        <div class="toc-item" data-index="0">
          <span>🐻 Bears</span>
          <span class="dots"></span>
          <span class="num-badge">6</span>
        </div>
        <div class="toc-item active" data-index="1">
          <span>🐸 Frogs</span>
          <span class="dots"></span>
          <span class="num-badge">14</span>
        </div>
        <div class="toc-item" data-index="2">
          <span>🦅 Birds</span>
          <span class="dots"></span>
          <span class="num-badge">22</span>
        </div>
      </div>
    </div>

    
    <div class="page-pane">
      <div class="page-content">
        <div class="topic-icon" id="pageIcon">🐸</div>
        <div class="topic-title" id="pageTitle">Frogs</div>
      </div>
      <div class="page-footer">
        <div class="corner-number">
          <span class="match-indicator">MATCH ✓</span>
          <span id="pageNumber">14</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn">◀ Prev</button>
    <button class="btn" id="playBtn">⏸ Pause</button>
    <button class="btn" id="nextBtn">Next ▶</button>
  </div>
</div>

<script>
  const chapters = [
    { title: "Bears", icon: "🐻", page: "6" },
    { title: "Frogs", icon: "🐸", page: "14" },
    { title: "Birds", icon: "🦅", page: "22" }
  ];

  let currentIndex = 1;
  let timer = null;
  let isPlaying = true;

  const items = document.querySelectorAll('.toc-item');
  const pageIcon = document.getElementById('pageIcon');
  const pageTitle = document.getElementById('pageTitle');
  const pageNumber = document.getElementById('pageNumber');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  const playBtn = document.getElementById('playBtn');

  function render(index) {
    currentIndex = (index + chapters.length) % chapters.length;
    items.forEach((item, idx) => {
      item.classList.toggle('active', idx === currentIndex);
    });
    const c = chapters[currentIndex];
    pageIcon.textContent = c.icon;
    pageTitle.textContent = c.title;
    pageNumber.textContent = c.page;
  }

  function startAuto() {
    stopAuto();
    isPlaying = true;
    playBtn.textContent = "⏸ Pause";
    timer = setInterval(() => {
      render(currentIndex + 1);
    }, 3200);
  }

  function stopAuto() {
    isPlaying = false;
    playBtn.textContent = "▶ Auto";
    clearInterval(timer);
  }

  items.forEach((item) => {
    item.addEventListener('click', () => {
      stopAuto();
      render(parseInt(item.dataset.index, 10));
    });
  });

  prevBtn.addEventListener('click', () => {
    stopAuto();
    render(currentIndex - 1);
  });

  nextBtn.addEventListener('click', () => {
    stopAuto();
    render(currentIndex + 1);
  });

  playBtn.addEventListener('click', () => {
    if (isPlaying) {
      stopAuto();
    } else {
      startAuto();
    }
  });

  // Initialize
  render(1);
  startAuto();
</script>
</body>
</html>

What if you turn past your page by mistake?

If you are looking for page 18 but land on page 24, don't worry! Since 24 is bigger than 18, just flip backward toward the front.

Next time you pick up a non-fiction book, open right to the front and see what topics you can discover!

Page Numbers and Tables of Contents in Books. Use page numbers and tables of contents to find information in print texts.

Use a Table of Contents (Grade 1 & Grade 2 Reading Strategies)

How to Use Non-Fiction Text Features and Contents Pages (KS1 English)

Navigating Informative Texts: Text Features and Structures

Teaching sequence for Year 1-2 students should follow the 'I Do, We Do, You Do' gradual release model using physical big books and interactive digital readers. Incorporate explicit physical 'Finger Tracking' routines (pointing to the heading, sliding across dot leaders, checking the number, and opening to that page). Connect literacy with early mathematics place value and number-line concepts ($>$, $<$, sequential counting) to reinforce book navigation as an efficient information-retrieval skill rather than a linear decoding task.

Page Numbers and Tables of Contents in Books

Page Numbers

The Table of Contents

Finding Information in 3 Steps