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 your class has a giant pizza party this Friday, but today is only Tuesday! How many days do you have to wait until you get that first cheesy bite?

To find out, we can use a calendar just like a game board.

First, put your finger on **today**'s date. Next, look ahead on the calendar to spot the date of your exciting event.

<!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>Counting Days on a Calendar</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

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

    .app-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Controls Bar */
    .stepper-nav {
      display: flex;
      justify-content: center;
      gap: 6px;
      width: 100%;
    }

    .step-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

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

    /* Main Calendar Card */
    .calendar-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 14px;
      padding: 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
      position: relative;
    }

    .calendar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;
    }

    .month-label {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .status-pill {
      font-size: 12px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 12px;
      background: #eef8ff;
      color: #0088cc;
      transition: all 0.3s ease;
    }

    /* Calendar Grid */
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      position: relative;
    }

    .day-head {
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      color: #9ca3af;
      padding: 2px 0;
    }

    .day-cell {
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #374151;
      position: relative;
      background: #fdfdfd;
      border: 1px solid rgba(0, 0, 0, 0.04);
      transition: background 0.25s ease, border-color 0.25s ease;
    }

    .day-cell.muted {
      color: #d1d5db;
      background: #fafafa;
    }

    .day-cell .tag {
      position: absolute;
      bottom: 2px;
      font-size: 8px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.2px;
      line-height: 1;
    }

    /* Highlighted States */
    .day-cell.is-today {
      background: #e0f4ff;
      color: #0077b6;
      border-color: #22b7ff;
      font-weight: 800;
    }

    .day-cell.is-today .tag {
      color: #0077b6;
    }

    .day-cell.is-event {
      background: #fff4e6;
      color: #d97706;
      border-color: #f59e0b;
      font-weight: 800;
    }

    .day-cell.is-event .tag {
      color: #b45309;
    }

    .day-cell.in-jump {
      background: #f0fdf4;
      color: #16a34a;
      border-color: #86efac;
    }

    /* SVG Jump Overlay */
    .jump-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 10;
    }

    .jump-path {
      fill: none;
      stroke: #16a34a;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      transition: stroke-dashoffset 0.4s ease;
    }

    .jump-path.visible {
      stroke-dashoffset: 0;
    }

    .jump-num {
      font-size: 11px;
      font-weight: 800;
      fill: #16a34a;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .jump-num.visible {
      opacity: 1;
    }

    /* Bottom Summary Bar */
    .summary-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 48px;
    }

    .summary-text {
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .count-badge {
      font-size: 16px;
      font-weight: 800;
      color: #16a34a;
      background: #dcfce7;
      padding: 3px 10px;
      border-radius: 6px;
      min-width: 32px;
      text-align: center;
    }

    /* Play/Next Bar */
    .action-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .nav-btn {
      flex: 1;
      padding: 10px;
      font-size: 13px;
      font-weight: 700;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .nav-btn:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  <div class="app-container">
    
    <div class="stepper-nav">
      <button class="step-btn active" id="btn-0" onclick="goToStep(0)">1. Today</button>
      <button class="step-btn" id="btn-1" onclick="goToStep(1)">2. Event</button>
      <button class="step-btn" id="btn-2" onclick="goToStep(2)">3. Count</button>
    </div>

    
    <div class="calendar-card">
      <div class="calendar-header">
        <div class="month-label">📅 June</div>
        <div class="status-pill" id="status-pill">Spot Today</div>
      </div>

      <div class="calendar-grid" id="grid-container">
        
        <div class="day-head">M</div>
        <div class="day-head">T</div>
        <div class="day-head">W</div>
        <div class="day-head">T</div>
        <div class="day-head">F</div>
        <div class="day-head">S</div>
        <div class="day-head">S</div>

        
        <div class="day-cell muted">8</div>
        <div class="day-cell muted">9</div>
        <div class="day-cell" id="cell-10">10</div>
        <div class="day-cell" id="cell-11">11</div>
        <div class="day-cell" id="cell-12">
          <span>12</span>
          <span class="tag" id="tag-today"></span>
        </div>
        <div class="day-cell" id="cell-13">13</div>
        <div class="day-cell" id="cell-14">14</div>
        <div class="day-cell" id="cell-15">15</div>
        <div class="day-cell" id="cell-16">
          <span>16</span>
          <span class="tag" id="tag-event"></span>
        </div>
        <div class="day-cell" id="cell-17">17</div>
        <div class="day-cell" id="cell-18">18</div>
        <div class="day-cell muted">19</div>
        <div class="day-cell muted">20</div>
        <div class="day-cell muted">21</div>

        
        <svg class="jump-svg" id="jump-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
          
        </svg>
      </div>
    </div>

    
    <div class="summary-card">
      <div class="summary-text" id="summary-label">
        <span>👉 Start at 12</span>
      </div>
      <div class="count-badge" id="summary-badge">0</div>
    </div>

    
    <div class="action-bar">
      <button class="nav-btn" onclick="prevStep()">← Back</button>
      <button class="nav-btn" id="play-btn" onclick="togglePlay()">⏸ Pause</button>
      <button class="nav-btn" onclick="nextStep()">Next →</button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const cell12 = document.getElementById('cell-12');
    const cell13 = document.getElementById('cell-13');
    const cell14 = document.getElementById('cell-14');
    const cell15 = document.getElementById('cell-15');
    const cell16 = document.getElementById('cell-16');

    const tagToday = document.getElementById('tag-today');
    const tagEvent = document.getElementById('tag-event');
    const statusPill = document.getElementById('status-pill');
    const summaryLabel = document.getElementById('summary-label');
    const summaryBadge = document.getElementById('summary-badge');
    const jumpSvg = document.getElementById('jump-svg');

    function updateSvgJumps(visible) {
      const grid = document.getElementById('grid-container');
      const gRect = grid.getBoundingClientRect();

      // Clear previous SVG
      jumpSvg.innerHTML = '';
      if (!visible || gRect.width === 0) return;

      const cells = [cell12, cell13, cell14, cell15, cell16];
      const coords = cells.map(c => {
        const r = c.getBoundingClientRect();
        return {
          x: ((r.left + r.width / 2 - gRect.left) / gRect.width) * 100,
          y: ((r.top + 6 - gRect.top) / gRect.height) * 100
        };
      });

      for (let i = 0; i < coords.length - 1; i++) {
        const start = coords[i];
        const end = coords[i + 1];
        
        let pathD = '';
        let numX = 0;
        let numY = 0;

        // Same row jump vs wrap row jump
        if (Math.abs(start.y - end.y) < 10) {
          const midX = (start.x + end.x) / 2;
          const arcY = start.y - 18;
          pathD = `M ${start.x} ${start.y} Q ${midX} ${arcY} ${end.x} ${end.y}`;
          numX = midX;
          numY = arcY - 2;
        } else {
          // Wrapped across row
          const midX = (start.x + end.x) / 2;
          const midY = (start.y + end.y) / 2;
          pathD = `M ${start.x} ${start.y} Q ${start.x + 8} ${start.y - 12} ${midX} ${midY} T ${end.x} ${end.y}`;
          numX = midX;
          numY = midY - 4;
        }

        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', pathD);
        path.setAttribute('class', 'jump-path visible');
        path.setAttribute('style', `transition-delay: ${i * 0.25}s`);
        jumpSvg.appendChild(path);

        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', numX);
        text.setAttribute('y', numY);
        text.setAttribute('text-anchor', 'middle');
        text.setAttribute('class', 'jump-num visible');
        text.setAttribute('style', `transition-delay: ${i * 0.25 + 0.15}s`);
        text.textContent = `+1`;
        jumpSvg.appendChild(text);
      }
    }

    function render() {
      // Update Buttons
      for (let i = 0; i < 3; i++) {
        document.getElementById(`btn-${i}`).classList.toggle('active', i === currentStep);
      }

      // Reset styles
      cell12.className = 'day-cell';
      cell13.className = 'day-cell';
      cell14.className = 'day-cell';
      cell15.className = 'day-cell';
      cell16.className = 'day-cell';
      tagToday.textContent = '';
      tagEvent.textContent = '';

      if (currentStep === 0) {
        // Step 1: Find Today
        cell12.classList.add('is-today');
        tagToday.textContent = 'Today';
        statusPill.textContent = '1. Mark Today';
        statusPill.style.background = '#e0f4ff';
        statusPill.style.color = '#0077b6';
        summaryLabel.innerHTML = '<span>📍 Today is the <strong>12th</strong></span>';
        summaryBadge.textContent = '0';
        summaryBadge.style.color = '#0077b6';
        summaryBadge.style.background = '#e0f4ff';
        updateSvgJumps(false);
      } else if (currentStep === 1) {
        // Step 2: Spot Event
        cell12.classList.add('is-today');
        tagToday.textContent = 'Today';
        cell16.classList.add('is-event');
        tagEvent.textContent = 'Party 🎉';
        statusPill.textContent = '2. Spot Event';
        statusPill.style.background = '#fff4e6';
        statusPill.style.color = '#d97706';
        summaryLabel.innerHTML = '<span>🎉 Event is on the <strong>16th</strong></span>';
        summaryBadge.textContent = '🎯';
        summaryBadge.style.color = '#d97706';
        summaryBadge.style.background = '#fff4e6';
        updateSvgJumps(false);
      } else if (currentStep === 2) {
        // Step 3: Count Jumps
        cell12.classList.add('is-today');
        tagToday.textContent = 'Today';
        cell13.classList.add('in-jump');
        cell14.classList.add('in-jump');
        cell15.classList.add('in-jump');
        cell16.classList.add('is-event');
        tagEvent.textContent = 'Party 🎉';

        statusPill.textContent = '3. Count Forward';
        statusPill.style.background = '#dcfce7';
        statusPill.style.color = '#16a34a';
        summaryLabel.innerHTML = '<span>🦘 4 jumps forward</span>';
        summaryBadge.textContent = '4 Days';
        summaryBadge.style.color = '#16a34a';
        summaryBadge.style.background = '#dcfce7';

        requestAnimationFrame(() => updateSvgJumps(true));
      }
    }

    function goToStep(index) {
      currentStep = index;
      render();
    }

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

    function prevStep() {
      currentStep = (currentStep - 1 + 3) % 3;
      render();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('play-btn').textContent = isPlaying ? '⏸ Pause' : '▶ Play';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

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

    window.addEventListener('resize', () => {
      if (currentStep === 2) updateSvgJumps(true);
    });

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

Now that both special spots are marked, how do we count the days in between?

We count each **hop** forward from one day to the next, just like counting how many nights of sleep are left before the big day.

<!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;
      user-select: none;
      -webkit-user-select: none;
    }
    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: space-between;
      min-height: 100%;
      padding: 16px 12px;
      gap: 12px;
    }

    .stepper-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }

    .step-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }
    .step-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    .play-btn {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.2s;
    }

    .stage {
      width: 100%;
      max-width: 480px;
      position: relative;
      background: #ffffff;
      border-radius: 16px;
      padding: 24px 12px 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .svg-layer {
      width: 100%;
      height: 80px;
      overflow: visible;
    }

    .hop-path {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 3;
      stroke-dasharray: 6 6;
      transition: stroke 0.3s ease, stroke-width 0.3s ease, stroke-dasharray 0.3s ease;
    }
    .hop-path.active {
      stroke: #22b7ff;
      stroke-width: 3.5;
      stroke-dasharray: none;
    }

    .hop-tag {
      font-size: 12px;
      font-weight: 700;
      fill: #94a3b8;
      transition: fill 0.3s ease;
    }
    .hop-tag.active {
      fill: #0284c7;
    }

    .days-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      margin-top: 4px;
    }

    .day-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 4px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      text-align: center;
      position: relative;
      transition: border-color 0.3s, background 0.3s, transform 0.2s;
    }
    .day-card.today {
      border-color: #94a3b8;
      background: #ffffff;
    }
    .day-card.target {
      border-color: #f59e0b;
      background: #fffbeb;
    }
    .day-card.reached {
      border-color: #22b7ff;
      background: #f0f9ff;
    }

    .day-name {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
    }
    .day-icon {
      font-size: 22px;
      line-height: 1;
      height: 24px;
    }
    .day-sub {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      min-height: 14px;
    }

    .indicator-pill {
      font-size: 15px;
      font-weight: 700;
      color: #0369a1;
      background: #e0f2fe;
      padding: 8px 18px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>

  <div class="stepper-header">
    <button class="play-btn" id="playBtn" title="Play / Pause">⏸</button>
    <button class="step-btn active" data-step="0">Start</button>
    <button class="step-btn" data-step="1">Hop 1</button>
    <button class="step-btn" data-step="2">Hop 2</button>
    <button class="step-btn" data-step="3">Hop 3</button>
  </div>

  <div class="stage">
    <svg class="svg-layer" viewBox="0 0 320 80" preserveAspectRatio="none">
      
      <path id="arc1" class="hop-path" d="M 40 70 Q 80 10 120 70" />
      <text id="tag1" class="hop-tag" x="80" y="32" text-anchor="middle">1 hop</text>

      
      <path id="arc2" class="hop-path" d="M 120 70 Q 160 10 200 70" />
      <text id="tag2" class="hop-tag" x="160" y="32" text-anchor="middle">2 hops</text>

      
      <path id="arc3" class="hop-path" d="M 200 70 Q 240 10 280 70" />
      <text id="tag3" class="hop-tag" x="240" y="32" text-anchor="middle">3 hops</text>
    </svg>

    <div class="days-grid">
      
      <div class="day-card today" id="day0">
        <span class="day-name">Mon</span>
        <span class="day-icon">📍</span>
        <span class="day-sub">Today</span>
      </div>

      
      <div class="day-card" id="day1">
        <span class="day-name">Tue</span>
        <span class="day-icon">🌙</span>
        <span class="day-sub">1 night</span>
      </div>

      
      <div class="day-card" id="day2">
        <span class="day-name">Wed</span>
        <span class="day-icon">🌙</span>
        <span class="day-sub">2 nights</span>
      </div>

      
      <div class="day-card target" id="day3">
        <span class="day-name">Thu</span>
        <span class="day-icon">🍕</span>
        <span class="day-sub">Party!</span>
      </div>
    </div>
  </div>

  <div class="indicator-pill" id="counterText">
    <span>📍</span> Starting at Today (Mon)
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const stepButtons = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');
    const counterText = document.getElementById('counterText');

    const arcs = [document.getElementById('arc1'), document.getElementById('arc2'), document.getElementById('arc3')];
    const tags = [document.getElementById('tag1'), document.getElementById('tag2'), document.getElementById('tag3')];
    const days = [document.getElementById('day0'), document.getElementById('day1'), document.getElementById('day2'), document.getElementById('day3')];

    const summaries = [
      "<span>📍</span> Starting at Today (Mon)",
      "<span>🦘</span> 1 hop = 1 night of sleep",
      "<span>🦘</span> 2 hops = 2 nights of sleep",
      "<span>🍕</span> 3 hops = 3 days left!"
    ];

    function render(step) {
      currentStep = step;

      stepButtons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      arcs.forEach((arc, idx) => {
        arc.classList.toggle('active', idx < step);
      });

      tags.forEach((tag, idx) => {
        tag.classList.toggle('active', idx < step);
      });

      days.forEach((day, idx) => {
        day.classList.remove('reached');
        if (idx > 0 && idx <= step) {
          day.classList.add('reached');
        }
      });

      counterText.innerHTML = summaries[step];
    }

    function nextStep() {
      const next = (currentStep + 1) % 4;
      render(next);
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(nextStep, 2600);
      playBtn.textContent = '⏸';
      isPlaying = true;
    }

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

    stepButtons.forEach((btn) => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.dataset.step, 10);
        render(step);
        stopTimer();
      });
    });

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

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

Because we took 3 hops forward, there are **3 days** left until the pizza party!

Be careful: never count the day you are already standing on as day one! You only count after you make your first **jump** forward.

What happens if your exciting event is on the next week's row?

When you reach Saturday at the end of a line, your very next hop wraps around to **Sunday** on the next row down.

<!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>Counting Days Wrap Around</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
    }

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

    .calendar-container {
      position: relative;
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .grid-header {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: #6b7280;
      margin-bottom: 6px;
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      position: relative;
    }

    .day-cell {
      position: relative;
      aspect-ratio: 1 / 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #f8f9fa;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .day-cell.inactive {
      color: #cbd5e1;
      background: transparent;
    }

    .day-cell.start {
      background: #e0f2fe;
      box-shadow: 0 0 0 2px #22b7ff;
    }

    .day-cell.target {
      background: #fef3c7;
      box-shadow: 0 0 0 2px #f59e0b;
    }

    .day-cell.visited {
      background: #e0f7fa;
    }

    .day-cell.active-hop {
      background: #22b7ff;
      color: #ffffff;
      box-shadow: 0 0 0 2px #0284c7;
    }

    .sub-icon {
      font-size: 11px;
      line-height: 1;
      margin-top: 1px;
    }

    .hop-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 5;
    }

    .hop-path {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 6 4;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .hop-path.visible {
      opacity: 1;
    }

    .hop-path.wrap {
      stroke: #ec4899;
      stroke-dasharray: 5 3;
    }

    .status-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      padding: 10px 16px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      margin: 10px 0;
    }

    .counter-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }

    .counter-val {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      background: #22b7ff;
      color: #ffffff;
      border-radius: 50%;
      font-size: 14px;
    }

    .wrap-indicator {
      font-size: 13px;
      font-weight: 600;
      color: #ec4899;
      display: none;
      align-items: center;
      gap: 4px;
    }

    .wrap-indicator.active {
      display: inline-flex;
    }

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

    .step-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .step-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    .play-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      font-size: 14px;
      cursor: pointer;
    }

    .play-btn:active, .step-btn:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="calendar-container">
    <div class="grid-header">
      <div>Su</div><div>Mo</div><div>Tu</div><div>We</div><div>Th</div><div>Fr</div><div>Sa</div>
    </div>
    <div class="calendar-grid" id="grid">
      
      <div class="day-cell inactive">8</div>
      <div class="day-cell inactive">9</div>
      <div class="day-cell inactive">10</div>
      <div class="day-cell inactive">11</div>
      <div class="day-cell inactive">12</div>
      <div class="day-cell start" id="cell-0">
        <span>13</span>
        <span class="sub-icon">📍</span>
      </div>
      <div class="day-cell" id="cell-1">
        <span>14</span>
      </div>

      
      <div class="day-cell" id="cell-2">
        <span>15</span>
      </div>
      <div class="day-cell" id="cell-3">
        <span>16</span>
      </div>
      <div class="day-cell target" id="cell-4">
        <span>17</span>
        <span class="sub-icon">🎂</span>
      </div>
      <div class="day-cell inactive">18</div>
      <div class="day-cell inactive">19</div>
      <div class="day-cell inactive">20</div>
      <div class="day-cell inactive">21</div>

      <svg class="hop-svg" id="svg-layer">
        
      </svg>
    </div>
  </div>

  <div class="status-panel">
    <div class="counter-badge">
      <span class="counter-val" id="hopCount">0</span>
      <span>Hops</span>
    </div>
    <div class="wrap-indicator" id="wrapNote">
      <span>Wrap Row ⤵</span>
    </div>
  </div>

  <div class="controls">
    <button class="play-btn" id="playToggle" title="Play/Pause">⏸</button>
    <button class="step-btn active" data-step="0">Start</button>
    <button class="step-btn" data-step="1">Hop 1</button>
    <button class="step-btn" data-step="2">Hop 2 ⤵</button>
    <button class="step-btn" data-step="3">Hop 3</button>
    <button class="step-btn" data-step="4">Hop 4 🎉</button>
  </div>

  <script>
    const totalSteps = 5;
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const hopCountEl = document.getElementById('hopCount');
    const wrapNoteEl = document.getElementById('wrapNote');
    const playToggleBtn = document.getElementById('playToggle');
    const stepBtns = document.querySelectorAll('.step-btn');
    const svgLayer = document.getElementById('svg-layer');

    function getCenter(el, parent) {
      const pRect = parent.getBoundingClientRect();
      const cRect = el.getBoundingClientRect();
      return {
        x: cRect.left - pRect.left + cRect.width / 2,
        y: cRect.top - pRect.top + cRect.height / 2
      };
    }

    function renderArcs() {
      svgLayer.innerHTML = '';
      const grid = document.getElementById('grid');

      for (let i = 0; i < 4; i++) {
        const c1 = document.getElementById(`cell-${i}`);
        const c2 = document.getElementById(`cell-${i + 1}`);
        const p1 = getCenter(c1, grid);
        const p2 = getCenter(c2, grid);

        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        let d = '';

        if (i === 1) {
          // Wrap hop: Sat (end of row) to Sun (start of next row)
          const midX = (p1.x + p2.x) / 2;
          const midY = (p1.y + p2.y) / 2;
          d = `M ${p1.x} ${p1.y} C ${p1.x + 40} ${p1.y + 40}, ${p2.x - 40} ${p2.y - 40}, ${p2.x} ${p2.y}`;
          path.classList.add('hop-path', 'wrap');
        } else {
          // Standard horizontal hop
          const archH = 22;
          d = `M ${p1.x} ${p1.y} Q ${(p1.x + p2.x) / 2} ${p1.y - archH} ${p2.x} ${p2.y}`;
          path.classList.add('hop-path');
        }

        path.setAttribute('d', d);
        path.id = `path-${i + 1}`;
        if (i < currentStep) {
          path.classList.add('visible');
        }
        svgLayer.appendChild(path);
      }
    }

    function updateStep(step) {
      currentStep = step;
      hopCountEl.textContent = step;

      if (step === 2) {
        wrapNoteEl.classList.add('active');
      } else {
        wrapNoteEl.classList.remove('active');
      }

      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      for (let i = 0; i < totalSteps; i++) {
        const cell = document.getElementById(`cell-${i}`);
        cell.classList.remove('visited', 'active-hop');
        if (i < step) {
          cell.classList.add('visited');
        } else if (i === step) {
          if (step > 0) cell.classList.add('active-hop');
        }
      }

      for (let i = 1; i <= 4; i++) {
        const p = document.getElementById(`path-${i}`);
        if (p) {
          if (i <= step) {
            p.classList.add('visible');
          } else {
            p.classList.remove('visible');
          }
        }
      }
    }

    function nextStep() {
      const next = (currentStep + 1) % totalSteps;
      updateStep(next);
    }

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

    function stopAutoPlay() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playToggleBtn.textContent = '▶';
    }

    playToggleBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    stepBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        const s = parseInt(btn.dataset.step, 10);
        updateStep(s);
        stopAutoPlay();
      });
    });

    window.addEventListener('resize', renderArcs);

    // Init
    renderArcs();
    updateStep(0);
    startAutoPlay();
  </script>
</body>
</html>

Take a look at a calendar in your room, find an upcoming birthday or holiday, and count how many hops you need to reach it!

math

Counting Days Until an Upcoming Event. Count forward on a calendar to calculate how many days remain until an exciting class event or holiday.

Using a Calendar and Days of the Week (Early & First Level Numeracy)

Read a Calendar: Count Days Before and After

Early Years Foundation & Primary Time Routines: Days, Patterns, and Calendars

At Early Level (P1 / ages 4–6), young learners best develop calendar sense through embedded daily routines (such as morning circle time calendar discussions) paired with tangible countdown representations. Using the child-friendly language of 'sleeps' helps eliminate the fencepost misconception of counting today as day 1. Concrete supports—such as removing one ring of a paper chain each day or moving a physical peg along an unrolled calendar number strip—provide essential scaffolding before students are expected to navigate 2D grid 'return sweeps' on standard wall calendars.

Counting Days Until an Upcoming Event

Find Today and the Big Day

Hop Forward to Count

Jumping Across Rows