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 trying to bake a cake by spreading frosting on an empty pan, eating it, and then cracking the raw eggs into the oven!

That sounds silly because some things only make sense when they happen in a specific order.

When an author explains events in the exact order they happened, we call this **chronological order** or **time order**.

The Greek root *chrono* means time, so a chronological text starts at the beginning and moves forward to the end.

<!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>Chronological Structure</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
    }

    .diagram-wrap {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    /* Time direction header bar */
    .time-axis {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px;
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #64748b;
      text-transform: uppercase;
    }

    .arrow-track {
      flex: 1;
      height: 4px;
      background: #e2e8f0;
      margin: 0 12px;
      border-radius: 2px;
      position: relative;
      overflow: hidden;
    }

    .arrow-fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 33.33%;
      background: #2563eb;
      border-radius: 2px;
      transition: width 0.4s ease, left 0.4s ease;
    }

    /* Timeline Cards */
    .timeline-grid {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .step-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      border: 2px solid transparent;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
      user-select: none;
    }

    .step-card:hover {
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
    }

    .step-card.active {
      border-color: #2563eb;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
      background: #f0f7ff;
    }

    .step-icon {
      font-size: 32px;
      margin-bottom: 8px;
      line-height: 1;
    }

    .step-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 4px;
    }

    .step-card.active .step-title {
      color: #2563eb;
    }

    .step-sub {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .step-card.active .step-sub {
      color: #3b82f6;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

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

    .btn:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .btn-play {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    .btn-play:hover {
      background: #1d4ed8;
      border-color: #1d4ed8;
    }

    .dots {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .dot.active {
      background: #2563eb;
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    
    <div class="time-axis">
      <span>Past</span>
      <div class="arrow-track">
        <div class="arrow-fill" id="arrowFill"></div>
      </div>
      <span>Future →</span>
    </div>

    
    <div class="timeline-grid">
      <div class="step-card active" data-step="0">
        <div class="step-icon">🌱</div>
        <div class="step-title">First</div>
        <div class="step-sub">Beginning</div>
      </div>

      <div class="step-card" data-step="1">
        <div class="step-icon">🌿</div>
        <div class="step-title">Next</div>
        <div class="step-sub">Middle</div>
      </div>

      <div class="step-card" data-step="2">
        <div class="step-icon">🌳</div>
        <div class="step-title">Finally</div>
        <div class="step-sub">End</div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn btn-play" id="playBtn" aria-label="Toggle autoplay">
        <span id="playIcon">⏸</span>
      </button>
      <div class="dots">
        <div class="dot active" data-step="0"></div>
        <div class="dot" data-step="1"></div>
        <div class="dot" data-step="2"></div>
      </div>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.step-card');
    const dots = document.querySelectorAll('.dot');
    const arrowFill = document.getElementById('arrowFill');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const fillWidths = ['33.33%', '66.66%', '100%'];

    function setStep(idx) {
      currentStep = idx;
      cards.forEach((card, i) => card.classList.toggle('active', i === currentStep));
      dots.forEach((dot, i) => dot.classList.toggle('active', i === currentStep));
      arrowFill.style.width = fillWidths[currentStep];
    }

    function nextStep() {
      setStep((currentStep + 1) % 3);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3000);
      isPlaying = true;
      playIcon.textContent = '⏸';
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playIcon.textContent = '▶';
    }

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopTimer();
      } else {
        nextStep();
        startTimer();
      }
    });

    cards.forEach((card) => {
      card.addEventListener('click', () => {
        const step = parseInt(card.dataset.step, 10);
        setStep(step);
        stopTimer();
      });
    });

    dots.forEach((dot) => {
      dot.addEventListener('click', () => {
        const step = parseInt(dot.dataset.step, 10);
        setStep(step);
        stopTimer();
      });
    });

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

How do you spot this structure when reading a text that does not have a timeline drawn on the page?

Authors leave clues called **signal words** to show readers that time is passing.

<!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; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
      user-select: none;
    }

    .timeline-container {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .track-wrapper {
      position: relative;
      width: 100%;
      padding: 24px 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .track-line {
      position: absolute;
      top: 50%;
      left: 36px;
      right: 36px;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      transform: translateY(-50%);
      z-index: 1;
    }

    .track-progress {
      position: absolute;
      top: 50%;
      left: 36px;
      height: 6px;
      background: #2563eb;
      border-radius: 3px;
      transform: translateY(-50%);
      transition: width 0.4s ease;
      z-index: 2;
      width: 0%;
    }

    .node {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      background: none;
      border: none;
      outline: none;
      padding: 0;
    }

    .pin {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #ffffff;
      border: 3px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      color: #64748b;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }

    .node.active .pin {
      border-color: #2563eb;
      background: #2563eb;
      color: #ffffff;
      box-shadow: 0 0 0 4px rgba(37,99,235,0.2);
    }

    .node.passed .pin {
      border-color: #2563eb;
      color: #2563eb;
      background: #ffffff;
    }

    .badge {
      position: absolute;
      top: 54px;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      padding: 4px 10px;
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;
    }

    .node.active .badge {
      color: #1e2945;
      border-color: #2563eb;
      background: #eff6ff;
      font-weight: 700;
    }

    .node.passed .badge {
      color: #2563eb;
    }

    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      margin-top: 24px;
    }

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

    .btn:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .btn-primary {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .btn-primary:hover {
      background: #1d4ed8;
      border-color: #1d4ed8;
    }
  </style>
</head>
<body>

  <div class="timeline-container">
    <div class="track-wrapper">
      <div class="track-line"></div>
      <div class="track-progress" id="progress"></div>

      <button class="node active" onclick="goToStep(0)" aria-label="First">
        <div class="pin">1</div>
        <div class="badge">First</div>
      </button>

      <button class="node" onclick="goToStep(1)" aria-label="Next">
        <div class="pin">2</div>
        <div class="badge">Next</div>
      </button>

      <button class="node" onclick="goToStep(2)" aria-label="Then">
        <div class="pin">3</div>
        <div class="badge">Then</div>
      </button>

      <button class="node" onclick="goToStep(3)" aria-label="Finally">
        <div class="pin">4</div>
        <div class="badge">Finally</div>
      </button>
    </div>

    <div class="controls">
      <button class="btn" onclick="prevStep()">←</button>
      <button class="btn btn-primary" id="playBtn" onclick="togglePlay()">⏸</button>
      <button class="btn" onclick="nextStep()">→</button>
    </div>
  </div>

  <script>
    const nodes = document.querySelectorAll('.node');
    const progress = document.getElementById('progress');
    const playBtn = document.getElementById('playBtn');
    let current = 0;
    let isPlaying = true;
    let timer = null;

    function update() {
      nodes.forEach((node, i) => {
        node.classList.remove('active', 'passed');
        if (i === current) {
          node.classList.add('active');
        } else if (i < current) {
          node.classList.add('passed');
        }
      });
      const pct = (current / (nodes.length - 1)) * 100;
      progress.style.width = `calc(${pct}% - ${pct * 0.72 / 100 * 72}px)`;
    }

    function goToStep(idx) {
      current = idx;
      update();
    }

    function nextStep() {
      current = (current + 1) % nodes.length;
      update();
    }

    function prevStep() {
      current = (current - 1 + nodes.length) % nodes.length;
      update();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) nextStep();
      }, 3000);
    }

    update();
    startTimer();
  </script>
</body>
</html>

When you spot these words, they act like mile markers telling you where you are on the timeline.

Let's look at how an author uses these clues in a real paragraph.

Read this short passage about the Mars rover *Curiosity*.

<!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>Chronological Structure</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      overflow-x: hidden;
    }
    .diagram-content {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    .time-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: #e0f2fe;
      color: #0284c7;
      border-radius: 9999px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .timeline-container {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 20px 0;
    }
    .timeline-bar-bg {
      position: absolute;
      top: 52px;
      left: 12%;
      right: 12%;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      z-index: 1;
    }
    .timeline-bar-fill {
      position: absolute;
      top: 52px;
      left: 12%;
      width: 0%;
      height: 6px;
      background: #2563eb;
      border-radius: 3px;
      z-index: 2;
      transition: width 0.4s ease;
    }
    .timeline-node {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 30%;
      cursor: pointer;
      text-align: center;
    }
    .node-icon-wrap {
      width: 64px;
      height: 64px;
      background: #ffffff;
      border: 3px solid #cbd5e1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
      transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }
    .node-date {
      margin-top: 10px;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      transition: color 0.3s ease;
    }
    .node-label {
      margin-top: 2px;
      font-size: 15px;
      font-weight: 600;
      color: #334155;
      transition: color 0.3s ease;
    }
    .timeline-node.active .node-icon-wrap {
      border-color: #2563eb;
      background: #eff6ff;
      box-shadow: 0 0 0 4px rgba(37,99,235,0.15);
      transform: translateY(-2px);
    }
    .timeline-node.active .node-date {
      color: #2563eb;
    }
    .timeline-node.active .node-label {
      color: #0f172a;
    }
    .flow-tag {
      font-size: 12px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      margin-bottom: 6px;
      letter-spacing: 0.5px;
      transition: color 0.3s ease;
    }
    .timeline-node.active .flow-tag {
      color: #2563eb;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 4px;
    }
    .btn-step {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      transition: background 0.2s, border-color 0.2s;
    }
    .btn-step:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .stepper-pills {
      display: flex;
      gap: 6px;
    }
    .pill-dot {
      width: 24px;
      height: 8px;
      border-radius: 4px;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.3s, width 0.3s;
    }
    .pill-dot.active {
      background: #2563eb;
      width: 36px;
    }
  </style>
</head>
<body>
  <div class="diagram-content">
    <div class="time-badge">
      <span>Time Order</span>
      <span>→</span>
    </div>

    <div class="timeline-container">
      <div class="timeline-bar-bg"></div>
      <div class="timeline-bar-fill" id="progress-bar"></div>

      <div class="timeline-node active" id="node-0">
        <span class="flow-tag">First</span>
        <div class="node-icon-wrap">🚀</div>
        <div class="node-date">Nov 2011</div>
        <div class="node-label">Launch</div>
      </div>

      <div class="timeline-node" id="node-1">
        <span class="flow-tag">Next</span>
        <div class="node-icon-wrap">🛰️</div>
        <div class="node-date">Transit</div>
        <div class="node-label">Journey</div>
      </div>

      <div class="timeline-node" id="node-2">
        <span class="flow-tag">Last</span>
        <div class="node-icon-wrap">🔴</div>
        <div class="node-date">Aug 2012</div>
        <div class="node-label">Landing</div>
      </div>
    </div>

    <div class="controls">
      <button class="btn-step" id="prevBtn" aria-label="Previous">◀</button>
      <div class="stepper-pills">
        <div class="pill-dot active" id="pill-0"></div>
        <div class="pill-dot" id="pill-1"></div>
        <div class="pill-dot" id="pill-2"></div>
      </div>
      <button class="btn-step" id="nextBtn" aria-label="Next">▶</button>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const totalSteps = 3;
    let currentStep = 0;
    let timer = null;

    const fillWidths = ['0%', '38%', '76%'];

    function updateStep(index) {
      currentStep = (index + totalSteps) % totalSteps;

      document.getElementById('progress-bar').style.width = fillWidths[currentStep];

      for (let i = 0; i < totalSteps; i++) {
        const node = document.getElementById(`node-${i}`);
        const pill = document.getElementById(`pill-${i}`);
        if (i === currentStep) {
          node.classList.add('active');
          pill.classList.add('active');
        } else {
          node.classList.remove('active');
          pill.classList.remove('active');
        }
      }
    }

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(() => {
        updateStep(currentStep + 1);
      }, 3500);
    }

    function stopAutoPlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    for (let i = 0; i < totalSteps; i++) {
      const node = document.getElementById(`node-${i}`);
      const pill = document.getElementById(`pill-${i}`);
      
      const selectStep = () => {
        stopAutoPlay();
        updateStep(i);
      };

      if (typeof onTap === 'function') {
        onTap(node, selectStep);
        onTap(pill, selectStep);
      } else {
        node.addEventListener('click', selectStep);
        pill.addEventListener('click', selectStep);
      }
    }

    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    const handlePrev = () => {
      stopAutoPlay();
      updateStep(currentStep - 1);
    };

    const handleNext = () => {
      stopAutoPlay();
      updateStep(currentStep + 1);
    };

    if (typeof onTap === 'function') {
      onTap(prevBtn, handlePrev);
      onTap(nextBtn, handleNext);
    } else {
      prevBtn.addEventListener('click', handlePrev);
      nextBtn.addEventListener('click', handleNext);
    }

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

Because the paragraph tracks events from the 2011 launch to the 2012 landing, its overall structure is **chronological**.

What happens if an informational article talks about a topic without following a clock?

A common mistake is thinking a text is chronological just because it includes a number or a single date.

If an article describes the parts of a rover—like its cameras, robotic arm, and wheels—it uses a **descriptive structure**, not a time order structure.

<!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>Descriptive vs Chronological Structure</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }
    .toggle-bar {
      display: flex;
      background: #e2e8f0;
      border-radius: 24px;
      padding: 4px;
      gap: 4px;
      margin-bottom: 20px;
    }
    .toggle-btn {
      border: none;
      background: transparent;
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .toggle-btn.active {
      background: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    }
    .stage {
      width: 100%;
      max-width: 440px;
      height: 260px;
      position: relative;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      overflow: hidden;
    }
    .view {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .view.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Descriptive View */
    .descriptive-center {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .rover-core {
      font-size: 56px;
      z-index: 2;
    }
    .part-tag {
      position: absolute;
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      padding: 6px 12px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
      z-index: 3;
    }
    .tag-camera { top: 20%; left: 50%; transform: translateX(-50%); }
    .tag-arm    { top: 58%; left: 10%; }
    .tag-wheels { top: 72%; right: 10%; }

    .line {
      position: absolute;
      background: #94a3b8;
      z-index: 1;
    }
    .line-v { width: 2px; height: 32px; top: 38%; left: 50%; transform: translateX(-50%); }
    .line-l { width: 42px; height: 2px; top: 62%; left: 32%; }
    .line-r { width: 42px; height: 2px; top: 68%; right: 32%; }

    /* Chronological View */
    .chrono-track {
      width: 90%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    .timeline-bar {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .timeline-line {
      position: absolute;
      top: 50%;
      left: 12%;
      right: 12%;
      height: 4px;
      background: #e2e8f0;
      transform: translateY(-50%);
      z-index: 1;
    }
    .timeline-progress {
      position: absolute;
      top: 50%;
      left: 12%;
      width: 0%;
      height: 4px;
      background: #2563eb;
      transform: translateY(-50%);
      z-index: 2;
      transition: width 0.4s ease;
    }
    .step-item {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      background: none;
      border: none;
    }
    .step-bubble {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: all 0.3s ease;
    }
    .step-item.active .step-bubble {
      background: #2563eb;
      border-color: #2563eb;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
    }
    .step-label {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      transition: color 0.3s ease;
    }
    .step-item.active .step-label {
      color: #2563eb;
    }
    .arrow-icon {
      font-size: 13px;
      color: #94a3b8;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <div class="toggle-bar">
    <button class="toggle-btn active" id="btn-desc" onclick="setMode('desc')">Descriptive</button>
    <button class="toggle-btn" id="btn-chrono" onclick="setMode('chrono')">Chronological</button>
  </div>

  <div class="stage">
    
    <div class="view active" id="view-desc">
      <div class="descriptive-center">
        <div class="part-tag tag-camera">📷 Camera</div>
        <div class="line line-v"></div>

        <div class="part-tag tag-arm">🦾 Arm</div>
        <div class="line line-l"></div>

        <div class="rover-core">🤖</div>

        <div class="line line-r"></div>
        <div class="part-tag tag-wheels">🛞 Wheels</div>
      </div>
    </div>

    
    <div class="view" id="view-chrono">
      <div class="chrono-track">
        <div class="timeline-bar">
          <div class="timeline-line"></div>
          <div class="timeline-progress" id="progress-bar"></div>

          <button class="step-item active" onclick="setChronoStep(0)">
            <div class="step-bubble">🚀</div>
            <div class="step-label">1. Launch</div>
          </button>

          <span class="arrow-icon">→</span>

          <button class="step-item" onclick="setChronoStep(1)">
            <div class="step-bubble">🪂</div>
            <div class="step-label">2. Land</div>
          </button>

          <span class="arrow-icon">→</span>

          <button class="step-item" onclick="setChronoStep(2)">
            <div class="step-bubble">🔍</div>
            <div class="step-label">3. Explore</div>
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    let timer = null;
    let chronoStep = 0;

    function setMode(mode) {
      const isDesc = mode === 'desc';
      document.getElementById('btn-desc').classList.toggle('active', isDesc);
      document.getElementById('btn-chrono').classList.toggle('active', !isDesc);
      document.getElementById('view-desc').classList.toggle('active', isDesc);
      document.getElementById('view-chrono').classList.toggle('active', !isDesc);

      if (!isDesc) {
        startChronoLoop();
      } else {
        clearInterval(timer);
      }
    }

    function setChronoStep(index) {
      chronoStep = index;
      const items = document.querySelectorAll('.step-item');
      items.forEach((item, idx) => {
        item.classList.toggle('active', idx === index);
      });
      const progress = document.getElementById('progress-bar');
      progress.style.width = (index * 38) + '%';
    }

    function startChronoLoop() {
      clearInterval(timer);
      setChronoStep(chronoStep);
      timer = setInterval(() => {
        chronoStep = (chronoStep + 1) % 3;
        setChronoStep(chronoStep);
      }, 2400);
    }
  </script>
</body>
</html>

To identify chronological order, ask yourself: *Did the author arrange these facts along a moving timeline?*

Describing Chronological Structure in Informational Texts. Identify and describe when an informational text uses time order to organize information.

Identifying Informational Text Structures | Guided Practice

The Structures of Informational Texts

IXL Skill Plan: Identify Text Structures (Grade 4 - RI.4.5)

When teaching RI.4.5 for chronological structure, start by framing text structures as 'blueprints' or 'architectural plans' that authors choose to build their ideas clearly. Have students highlight time-marker words with a specific color before analyzing the events. Use graphic organizers such as timelines and horizontal event chains to translate continuous paragraphs into discrete chronological steps. Reinforce the distinction between sequence lists (e.g., recipe instructions) and chronological history (events tied to a timeline) to ensure mastery across varying informational genres.

Describing Chronological Structure in Informational Texts

What Is Chronological Order?

Signal Words for Time

Spotting Time Order in a Text