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

Have you ever wondered why Saturday and Sunday always show up right after your school days?

It is all because of a special loop of time called a **week**, which always has exactly **seven days**.

<!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="1:1">
<title>Seven Days of the Week</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: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  .main-wrapper {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .wheel-container {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1 / 1;
  }

  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .day-node {
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .day-node circle.bg {
    fill: #ffffff;
    stroke: #e2e8f0;
    stroke-width: 2;
    transition: fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease;
  }

  .day-node.active circle.bg {
    fill: #22b7ff;
    stroke: #0284c7;
    stroke-width: 2.5;
  }

  .day-node text.num {
    font-size: 11px;
    font-weight: 700;
    fill: #64748b;
    text-anchor: middle;
    dominant-baseline: central;
    transition: fill 0.3s ease;
  }

  .day-node text.name {
    font-size: 12.5px;
    font-weight: 600;
    fill: #1e2945;
    text-anchor: middle;
    dominant-baseline: central;
    transition: fill 0.3s ease;
  }

  .day-node.active text.num {
    fill: #ffffff;
  }

  .day-node.active text.name {
    fill: #ffffff;
    font-weight: 700;
  }

  /* Center Stage */
  .center-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
  }

  .center-num {
    font-size: 13px;
    font-weight: 700;
    color: #22b7ff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .center-name {
    font-size: 18px;
    font-weight: 800;
    color: #1e2945;
    margin-top: 2px;
  }

  .center-loop-icon {
    font-size: 16px;
    color: #94a3b8;
    margin-top: 4px;
    line-height: 1;
  }

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

  .ctrl-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #1e2945;
    padding: 8px 16px;
    border-radius: 999px;
    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 0.2s ease, border-color 0.2s ease;
  }

  .ctrl-btn:active {
    background: #f1f5f9;
  }

  .ctrl-btn.play-btn {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
    min-width: 90px;
    justify-content: center;
  }
</style>
</head>
<body>

<div class="main-wrapper">
  <div class="wheel-container">
    <svg viewBox="0 0 360 360" id="wheelSvg">
      
      <circle cx="180" cy="180" r="126" fill="none" stroke="#e2e8f0" stroke-width="3" stroke-dasharray="6 6"/>
      
      
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#22b7ff"/>
        </marker>
      </defs>

      
      <path id="activeArc" fill="none" stroke="#22b7ff" stroke-width="3.5" marker-end="url(#arrow)"/>

      
      <g id="nodesGroup"></g>
    </svg>

    <div class="center-display">
      <div class="center-num" id="centerNum">Day 1</div>
      <div class="center-name" id="centerName">Monday</div>
      <div class="center-loop-icon">🔄</div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="prevBtn" aria-label="Previous Day">←</button>
    <button class="ctrl-btn play-btn" id="playBtn">⏸ Pause</button>
    <button class="ctrl-btn" id="nextBtn" aria-label="Next Day">→</button>
  </div>
</div>

<script>
  const DAYS = [
    { num: 1, name: "Monday", short: "Mon" },
    { num: 2, name: "Tuesday", short: "Tue" },
    { num: 3, name: "Wednesday", short: "Wed" },
    { num: 4, name: "Thursday", short: "Thu" },
    { num: 5, name: "Friday", short: "Fri" },
    { num: 6, name: "Saturday", short: "Sat" },
    { num: 7, name: "Sunday", short: "Sun" }
  ];

  const CX = 180;
  const CY = 180;
  const R = 126;
  const N = DAYS.length;

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

  const nodesGroup = document.getElementById("nodesGroup");
  const activeArc = document.getElementById("activeArc");
  const centerNum = document.getElementById("centerNum");
  const centerName = document.getElementById("centerName");
  const playBtn = document.getElementById("playBtn");
  const prevBtn = document.getElementById("prevBtn");
  const nextBtn = document.getElementById("nextBtn");

  // Create SVG Nodes
  DAYS.forEach((day, i) => {
    // Monday at top (-90 deg), clockwise
    const angleDeg = -90 + i * (360 / N);
    const rad = angleDeg * (Math.PI / 180);
    const x = CX + R * Math.cos(rad);
    const y = CY + R * Math.sin(rad);

    const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
    g.setAttribute("class", "day-node" + (i === 0 ? " active" : ""));
    g.setAttribute("id", "node-" + i);
    g.onclick = () => goTo(i);

    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circle.setAttribute("class", "bg");
    circle.setAttribute("cx", x);
    circle.setAttribute("cy", y);
    circle.setAttribute("r", "28");

    const numText = document.createElementNS("http://www.w3.org/2000/svg", "text");
    numText.setAttribute("class", "num");
    numText.setAttribute("x", x);
    numText.setAttribute("y", y - 10);
    numText.textContent = day.num;

    const nameText = document.createElementNS("http://www.w3.org/2000/svg", "text");
    nameText.setAttribute("class", "name");
    nameText.setAttribute("x", x);
    nameText.setAttribute("y", y + 7);
    nameText.textContent = day.short;

    g.appendChild(circle);
    g.appendChild(numText);
    g.appendChild(nameText);
    nodesGroup.appendChild(g);
  });

  function updateArc(fromIdx) {
    const startAngle = -90 + fromIdx * (360 / N) + 12;
    const endAngle = -90 + (fromIdx + 1) * (360 / N) - 14;
    
    const startRad = startAngle * (Math.PI / 180);
    const endRad = endAngle * (Math.PI / 180);

    const x1 = CX + R * Math.cos(startRad);
    const y1 = CY + R * Math.sin(startRad);
    const x2 = CX + R * Math.cos(endRad);
    const y2 = CY + R * Math.sin(endRad);

    activeArc.setAttribute("d", `M ${x1} ${y1} A ${R} ${R} 0 0 1 ${x2} ${y2}`);
  }

  function render() {
    DAYS.forEach((_, i) => {
      const node = document.getElementById("node-" + i);
      if (i === currentIndex) {
        node.classList.add("active");
      } else {
        node.classList.remove("active");
      }
    });

    const curr = DAYS[currentIndex];
    centerNum.textContent = `Day ${curr.num}`;
    centerName.textContent = curr.name;
    updateArc(currentIndex);
  }

  function goTo(index) {
    currentIndex = (index + N) % N;
    render();
  }

  function next() {
    goTo(currentIndex + 1);
  }

  function prev() {
    goTo(currentIndex - 1);
  }

  function startLoop() {
    stopLoop();
    timer = setInterval(next, 3000);
    isPlaying = true;
    playBtn.textContent = "⏸ Pause";
  }

  function stopLoop() {
    if (timer) clearInterval(timer);
    timer = null;
    isPlaying = false;
    playBtn.textContent = "▶ Play";
  }

  playBtn.onclick = () => {
    if (isPlaying) {
      stopLoop();
    } else {
      next();
      startLoop();
    }
  };

  prevBtn.onclick = () => {
    prev();
    if (isPlaying) startLoop();
  };

  nextBtn.onclick = () => {
    next();
    if (isPlaying) startLoop();
  };

  render();
  startLoop();
</script>

</body>
</html>

What are the names of all seven days, and how do we say them in order?

In the United States, most calendars start the week on **Sunday**.

When we start with Sunday, the seven days in order are **Sunday**, **Monday**, **Tuesday**, **Wednesday**, **Thursday**, **Friday**, and **Saturday**.

<!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>Seven Days of the Week</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: 100%;
    padding: 12px;
  }

  .diagram {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Active Day Banner */
  .focus-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    min-height: 76px;
  }
  .focus-left {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .order-num {
    width: 44px;
    height: 44px;
    background: #22b7ff;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .day-title {
    font-size: 22px;
    font-weight: 700;
    color: #1e2945;
    line-height: 1.1;
  }
  .day-type {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .type-weekend {
    background: #fef3c7;
    color: #b45309;
  }
  .type-weekday {
    background: #e0f2fe;
    color: #0284c7;
  }

  /* 7 Days Grid */
  .days-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }
  @media (max-width: 460px) {
    .days-strip {
      grid-template-columns: repeat(4, 1fr);
    }
    .day-btn:last-child {
      grid-column: span 2;
    }
  }

  .day-btn {
    background: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: background 0.2s, box-shadow 0.2s;
    user-select: none;
  }
  .day-btn:focus-visible {
    outline: 2px solid #22b7ff;
  }
  .day-btn.active {
    background: #22b7ff;
    box-shadow: 0 4px 12px rgba(34, 183, 255, 0.35);
  }
  .day-btn .num {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .day-btn.active .num {
    background: #ffffff;
    color: #22b7ff;
  }
  .day-btn .name {
    font-size: 13px;
    font-weight: 600;
    color: #1e2945;
  }
  .day-btn.active .name {
    color: #ffffff;
  }
  .day-btn .tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
  .tag-dot.w-end {
    background: #f59e0b;
  }
  .tag-dot.w-day {
    background: #38bdf8;
  }
  .day-btn.active .tag-dot {
    background: #ffffff;
  }

  /* Weekdays vs Weekend Bracket Bar */
  .groups-bar {
    display: flex;
    gap: 6px;
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 12px;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
  }
  .group-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
  }
  .group-pill.weekend {
    background: #fef3c7;
    color: #b45309;
  }
  .group-pill.weekday {
    background: #e0f2fe;
    color: #0284c7;
  }
  .cycle-icon {
    color: #64748b;
    font-size: 15px;
    font-weight: 700;
  }

  /* Controls */
  .controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
  }
  .ctrl-btn {
    background: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1e2945;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ctrl-btn:active {
    background: #f1f5f9;
  }
</style>
</head>
<body>

<div class="diagram">
  
  <div class="focus-card">
    <div class="focus-left">
      <div class="order-num" id="focusNum">1</div>
      <div>
        <div class="day-title" id="focusName">Sunday</div>
      </div>
    </div>
    <div class="day-type type-weekend" id="focusType">Weekend</div>
  </div>

  
  <div class="days-strip" id="daysStrip">
    <button class="day-btn active" data-index="0" aria-label="Day 1 Sunday">
      <span class="num">1</span>
      <span class="name">Sun</span>
      <span class="tag-dot w-end"></span>
    </button>
    <button class="day-btn" data-index="1" aria-label="Day 2 Monday">
      <span class="num">2</span>
      <span class="name">Mon</span>
      <span class="tag-dot w-day"></span>
    </button>
    <button class="day-btn" data-index="2" aria-label="Day 3 Tuesday">
      <span class="num">3</span>
      <span class="name">Tue</span>
      <span class="tag-dot w-day"></span>
    </button>
    <button class="day-btn" data-index="3" aria-label="Day 4 Wednesday">
      <span class="num">4</span>
      <span class="name">Wed</span>
      <span class="tag-dot w-day"></span>
    </button>
    <button class="day-btn" data-index="4" aria-label="Day 5 Thursday">
      <span class="num">5</span>
      <span class="name">Thu</span>
      <span class="tag-dot w-day"></span>
    </button>
    <button class="day-btn" data-index="5" aria-label="Day 6 Friday">
      <span class="num">6</span>
      <span class="name">Fri</span>
      <span class="tag-dot w-day"></span>
    </button>
    <button class="day-btn" data-index="6" aria-label="Day 7 Saturday">
      <span class="num">7</span>
      <span class="name">Sat</span>
      <span class="tag-dot w-end"></span>
    </button>
  </div>

  
  <div class="groups-bar">
    <div class="group-pill weekend">
      <span>●</span> Weekend (2)
    </div>
    <span class="cycle-icon">1 → 7 ↺</span>
    <div class="group-pill weekday">
      <span>●</span> Weekdays (5)
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="prevBtn" aria-label="Previous day">◀ Prev</button>
    <button class="ctrl-btn" id="playBtn" aria-label="Play or Pause auto advance">⏸ Pause</button>
    <button class="ctrl-btn" id="nextBtn" aria-label="Next day">Next ▶</button>
  </div>
</div>

<script>
  const daysData = [
    { num: 1, name: "Sunday", type: "Weekend", class: "type-weekend" },
    { num: 2, name: "Monday", type: "Weekday", class: "type-weekday" },
    { num: 3, name: "Tuesday", type: "Weekday", class: "type-weekday" },
    { num: 4, name: "Wednesday", type: "Weekday", class: "type-weekday" },
    { num: 5, name: "Thursday", type: "Weekday", class: "type-weekday" },
    { num: 6, name: "Friday", type: "Weekday", class: "type-weekday" },
    { num: 7, name: "Saturday", type: "Weekend", class: "type-weekend" }
  ];

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

  const focusNum = document.getElementById("focusNum");
  const focusName = document.getElementById("focusName");
  const focusType = document.getElementById("focusType");
  const dayButtons = document.querySelectorAll(".day-btn");
  const playBtn = document.getElementById("playBtn");
  const prevBtn = document.getElementById("prevBtn");
  const nextBtn = document.getElementById("nextBtn");

  function updateView(index) {
    currentIndex = index;
    const data = daysData[index];

    focusNum.textContent = data.num;
    focusName.textContent = data.name;
    focusType.textContent = data.type;
    focusType.className = "day-type " + data.class;

    dayButtons.forEach((btn, idx) => {
      btn.classList.toggle("active", idx === index);
    });
  }

  function nextStep() {
    updateView((currentIndex + 1) % daysData.length);
  }

  function prevStep() {
    updateView((currentIndex - 1 + daysData.length) % daysData.length);
  }

  function startAuto() {
    stopAuto();
    timer = setInterval(nextStep, 3000);
    isPlaying = true;
    playBtn.textContent = "⏸ Pause";
  }

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

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

  prevBtn.addEventListener("click", () => {
    stopAuto();
    prevStep();
  });

  nextBtn.addEventListener("click", () => {
    stopAuto();
    nextStep();
  });

  dayButtons.forEach((btn, idx) => {
    btn.addEventListener("click", () => {
      stopAuto();
      updateView(idx);
    });
  });

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

The five days from Monday to Friday are called **weekdays** when kids go to school, while Saturday and Sunday make up the **weekend**.

What happens if a calendar starts on your very first day of school instead?

Some school planners start with **Monday** because Monday is the start of the school workweek.

When you start on Monday, the order stays the same, but the week ends on Sunday: **Monday**, **Tuesday**, **Wednesday**, **Thursday**, **Friday**, **Saturday**, and **Sunday**.

<!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>Days of the Week</title>
<link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
<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;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    user-select: none;
    -webkit-user-select: none;
  }

  .diagram-area {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
  }

  /* 7 Days Row */
  .days-track {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    width: 100%;
  }

  .day-btn {
    background: #ffffff;
    border: 2px solid #e6e6e6;
    border-radius: 10px;
    padding: 8px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .day-num {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    line-height: 1;
  }

  .day-name {
    font-size: 13px;
    font-weight: 700;
    color: #1e2945;
  }

  .day-type {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
  }

  .day-btn.is-weekend .day-type {
    background: #fef3c7;
    color: #b45309;
  }

  /* Active states in top bar */
  .day-btn.active-today {
    border-color: #22b7ff;
    background: #e0f2fe;
    box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
  }
  .day-btn.active-today .day-name {
    color: #0284c7;
  }

  .day-btn.active-yesterday {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .day-btn.active-tomorrow {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  /* Focus Inspector Cards */
  .focus-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 8px;
    width: 100%;
    align-items: center;
  }

  .focus-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 6px;
    text-align: center;
    border: 2px solid #e6e6e6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 84px;
    justify-content: center;
  }

  .focus-card.today {
    border-color: #22b7ff;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(34, 183, 255, 0.18);
    transform: translateY(-2px);
  }

  .focus-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
  }

  .focus-card.today .focus-label {
    color: #0284c7;
  }

  .focus-day {
    font-size: 15px;
    font-weight: 700;
    color: #1e2945;
  }

  .focus-card.today .focus-day {
    font-size: 19px;
    color: #0284c7;
  }

  .focus-tag {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
  }

  .focus-card.today .focus-tag {
    color: #38bdf8;
  }

  /* Cycle Indicator */
  .loop-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 5px 14px;
    border-radius: 20px;
  }

  .loop-arrow {
    color: #22b7ff;
    font-size: 14px;
    font-weight: bold;
  }

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

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

  .ctrl-btn:active {
    background: #f1f5f9;
  }

  .ctrl-btn.primary {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
  }

  @media (max-width: 400px) {
    .day-name { font-size: 11px; }
    .day-type { font-size: 8px; padding: 1px 2px; }
    .focus-day { font-size: 13px; }
    .focus-card.today .focus-day { font-size: 16px; }
  }
</style>
</head>
<body>

<div class="diagram-area">
  
  <div class="days-track" id="daysTrack">
    <button class="day-btn" data-idx="0">
      <span class="day-num">1</span>
      <span class="day-name">Mon</span>
      <span class="day-type">Week</span>
    </button>
    <button class="day-btn" data-idx="1">
      <span class="day-num">2</span>
      <span class="day-name">Tue</span>
      <span class="day-type">Week</span>
    </button>
    <button class="day-btn" data-idx="2">
      <span class="day-num">3</span>
      <span class="day-name">Wed</span>
      <span class="day-type">Week</span>
    </button>
    <button class="day-btn" data-idx="3">
      <span class="day-num">4</span>
      <span class="day-name">Thu</span>
      <span class="day-type">Week</span>
    </button>
    <button class="day-btn" data-idx="4">
      <span class="day-num">5</span>
      <span class="day-name">Fri</span>
      <span class="day-type">Week</span>
    </button>
    <button class="day-btn is-weekend" data-idx="5">
      <span class="day-num">6</span>
      <span class="day-name">Sat</span>
      <span class="day-type">End</span>
    </button>
    <button class="day-btn is-weekend" data-idx="6">
      <span class="day-num">7</span>
      <span class="day-name">Sun</span>
      <span class="day-type">End</span>
    </button>
  </div>

  
  <div class="focus-row">
    <div class="focus-card" id="cardYesterday">
      <span class="focus-label">◀ Yesterday</span>
      <span class="focus-day" id="txtYesterday">Sunday</span>
      <span class="focus-tag" id="tagYesterday">Weekend</span>
    </div>

    <div class="focus-card today" id="cardToday">
      <span class="focus-label">★ Today</span>
      <span class="focus-day" id="txtToday">Monday</span>
      <span class="focus-tag" id="tagToday">Weekday</span>
    </div>

    <div class="focus-card" id="cardTomorrow">
      <span class="focus-label">Tomorrow ▶</span>
      <span class="focus-day" id="txtTomorrow">Tuesday</span>
      <span class="focus-tag" id="tagTomorrow">Weekday</span>
    </div>
  </div>

  
  <div class="loop-bar">
    <span>Sun</span>
    <span class="loop-arrow">↺</span>
    <span>Mon</span>
    <span style="margin: 0 4px; color: #cbd5e1;">|</span>
    <span>7 Days Cycle</span>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="prevBtn">◀ Prev</button>
    <button class="ctrl-btn primary" id="playBtn">▶ Auto</button>
    <button class="ctrl-btn" id="nextBtn">Next ▶</button>
  </div>
</div>

<script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
<script>
  const DAYS = [
    { full: 'Monday', short: 'Mon', type: 'Weekday' },
    { full: 'Tuesday', short: 'Tue', type: 'Weekday' },
    { full: 'Wednesday', short: 'Wed', type: 'Weekday' },
    { full: 'Thursday', short: 'Thu', type: 'Weekday' },
    { full: 'Friday', short: 'Fri', type: 'Weekday' },
    { full: 'Saturday', short: 'Sat', type: 'Weekend' },
    { full: 'Sunday', short: 'Sun', type: 'Weekend' }
  ];

  let currentIdx = 0;
  let timer = null;

  const dayBtns = $$('.day-btn');
  const txtYesterday = $('#txtYesterday');
  const tagYesterday = $('#tagYesterday');
  const txtToday = $('#txtToday');
  const tagToday = $('#tagToday');
  const txtTomorrow = $('#txtTomorrow');
  const tagTomorrow = $('#tagTomorrow');
  const playBtn = $('#playBtn');

  function update(idx) {
    currentIdx = (idx + 7) % 7;
    const prevIdx = (currentIdx + 6) % 7;
    const nextIdx = (currentIdx + 1) % 7;

    // Update top track buttons
    dayBtns.forEach((btn, i) => {
      btn.classList.remove('active-today', 'active-yesterday', 'active-tomorrow');
      if (i === currentIdx) btn.classList.add('active-today');
      else if (i === prevIdx) btn.classList.add('active-yesterday');
      else if (i === nextIdx) btn.classList.add('active-tomorrow');
    });

    // Update focus cards
    txtYesterday.textContent = DAYS[prevIdx].full;
    tagYesterday.textContent = DAYS[prevIdx].type;

    txtToday.textContent = DAYS[currentIdx].full;
    tagToday.textContent = DAYS[currentIdx].type;

    txtTomorrow.textContent = DAYS[nextIdx].full;
    tagTomorrow.textContent = DAYS[nextIdx].type;
  }

  function next() {
    update(currentIdx + 1);
  }

  function prev() {
    update(currentIdx - 1);
  }

  function togglePlay() {
    if (timer) {
      clearInterval(timer);
      timer = null;
      playBtn.textContent = '▶ Auto';
    } else {
      next();
      timer = setInterval(next, 3000);
      playBtn.textContent = '⏸ Pause';
    }
  }

  // Bind clicks
  dayBtns.forEach((btn, i) => {
    onTap(btn, () => {
      if (timer) togglePlay();
      update(i);
    });
  });

  onTap($('#nextBtn'), () => {
    if (timer) togglePlay();
    next();
  });

  onTap($('#prevBtn'), () => {
    if (timer) togglePlay();
    prev();
  });

  onTap(playBtn, togglePlay);

  // Initialize
  update(0);
</script>
</body>
</html>

How can you use the week's order to find out what day comes next or what day just passed?

**Today** is the day happening right now, **yesterday** was one day before, and **tomorrow** is one day after.

If today is **Wednesday**, we hop one step back to find that yesterday was **Tuesday**, and one step forward to find that tomorrow is **Thursday**.

<!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>Days of the Week: Yesterday, Today, Tomorrow</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Relationship Banner */
    .relationship-card {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      text-align: center;
    }

    .rel-box {
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 4px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      border: 2px solid transparent;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .rel-box.yesterday {
      border-color: #ffb703;
      background: #fffdf5;
    }
    .rel-box.today {
      border-color: #22b7ff;
      background: #f0f9ff;
      transform: scale(1.03);
    }
    .rel-box.tomorrow {
      border-color: #06d6a0;
      background: #f0fdf9;
    }

    .rel-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }
    .rel-box.yesterday .rel-tag { color: #d97706; }
    .rel-box.today .rel-tag { color: #0284c7; }
    .rel-box.tomorrow .rel-tag { color: #059669; }

    .rel-day {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }

    .hop-hint {
      font-size: 11px;
      color: #6b7280;
      margin-top: 2px;
    }

    /* Days Track */
    .days-track {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 6px;
    }

    .day-btn {
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      padding: 10px 2px;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: all 0.25s ease;
      outline: none;
    }

    .day-num {
      font-size: 11px;
      font-weight: 700;
      color: #9ca3af;
      margin-bottom: 2px;
    }

    .day-name-short {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }

    .day-indicator {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-top: 4px;
      background: transparent;
      transition: all 0.25s ease;
    }

    /* States */
    .day-btn.is-yesterday {
      border-color: #ffb703;
      background: #fffdf5;
    }
    .day-btn.is-yesterday .day-indicator {
      background: #ffb703;
    }
    .day-btn.is-yesterday .day-num {
      color: #d97706;
    }

    .day-btn.is-today {
      border-color: #22b7ff;
      background: #22b7ff;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.35);
    }
    .day-btn.is-today .day-name-short {
      color: #ffffff;
    }
    .day-btn.is-today .day-num {
      color: #e0f2fe;
    }
    .day-btn.is-today .day-indicator {
      background: #ffffff;
    }

    .day-btn.is-tomorrow {
      border-color: #06d6a0;
      background: #f0fdf9;
    }
    .day-btn.is-tomorrow .day-indicator {
      background: #06d6a0;
    }
    .day-btn.is-tomorrow .day-num {
      color: #059669;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 4px;
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }
    .nav-btn:active {
      background: #f3f4f6;
    }

    @media (max-width: 420px) {
      .day-btn {
        padding: 8px 1px;
      }
      .day-name-short {
        font-size: 12px;
      }
      .rel-day {
        font-size: 13px;
      }
      .rel-tag {
        font-size: 10px;
      }
      .hop-hint {
        font-size: 10px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-content">
    
    
    <div class="relationship-card">
      <div class="rel-box yesterday">
        <span class="rel-tag">Yesterday</span>
        <span class="rel-day" id="yesterdayLabel">Tuesday</span>
        <span class="hop-hint">← 1 step back</span>
      </div>

      <div class="rel-box today">
        <span class="rel-tag">★ Today</span>
        <span class="rel-day" id="todayLabel">Wednesday</span>
        <span class="hop-hint">Current Day</span>
      </div>

      <div class="rel-box tomorrow">
        <span class="rel-tag">Tomorrow</span>
        <span class="rel-day" id="tomorrowLabel">Thursday</span>
        <span class="hop-hint">1 step ahead →</span>
      </div>
    </div>

    
    <div class="days-track" id="daysTrack">
      <button class="day-btn" data-index="0" aria-label="Sunday">
        <span class="day-num">1</span>
        <span class="day-name-short">Sun</span>
        <span class="day-indicator"></span>
      </button>
      <button class="day-btn" data-index="1" aria-label="Monday">
        <span class="day-num">2</span>
        <span class="day-name-short">Mon</span>
        <span class="day-indicator"></span>
      </button>
      <button class="day-btn" data-index="2" aria-label="Tuesday">
        <span class="day-num">3</span>
        <span class="day-name-short">Tue</span>
        <span class="day-indicator"></span>
      </button>
      <button class="day-btn is-today" data-index="3" aria-label="Wednesday">
        <span class="day-num">4</span>
        <span class="day-name-short">Wed</span>
        <span class="day-indicator"></span>
      </button>
      <button class="day-btn" data-index="4" aria-label="Thursday">
        <span class="day-num">5</span>
        <span class="day-name-short">Thu</span>
        <span class="day-indicator"></span>
      </button>
      <button class="day-btn" data-index="5" aria-label="Friday">
        <span class="day-num">6</span>
        <span class="day-name-short">Fri</span>
        <span class="day-indicator"></span>
      </button>
      <button class="day-btn" data-index="6" aria-label="Saturday">
        <span class="day-num">7</span>
        <span class="day-name-short">Sat</span>
        <span class="day-indicator"></span>
      </button>
    </div>

    
    <div class="controls">
      <button class="nav-btn" id="prevDayBtn">← Previous Day</button>
      <button class="nav-btn" id="nextDayBtn">Next Day →</button>
    </div>

  </div>

  <script>
    const DAYS = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday"
    ];

    let currentTodayIndex = 3; // Wednesday to match lesson context initially

    const yesterdayLabel = document.getElementById("yesterdayLabel");
    const todayLabel = document.getElementById("todayLabel");
    const tomorrowLabel = document.getElementById("tomorrowLabel");
    const dayButtons = document.querySelectorAll(".day-btn");
    const prevBtn = document.getElementById("prevDayBtn");
    const nextBtn = document.getElementById("nextDayBtn");

    function updateState(index) {
      currentTodayIndex = (index + 7) % 7;
      const yesterdayIndex = (currentTodayIndex - 1 + 7) % 7;
      const tomorrowIndex = (currentTodayIndex + 1) % 7;

      yesterdayLabel.textContent = DAYS[yesterdayIndex];
      todayLabel.textContent = DAYS[currentTodayIndex];
      tomorrowLabel.textContent = DAYS[tomorrowIndex];

      dayButtons.forEach((btn, i) => {
        btn.classList.remove("is-today", "is-yesterday", "is-tomorrow");
        if (i === currentTodayIndex) {
          btn.classList.add("is-today");
        } else if (i === yesterdayIndex) {
          btn.classList.add("is-yesterday");
        } else if (i === tomorrowIndex) {
          btn.classList.add("is-tomorrow");
        }
      });
    }

    dayButtons.forEach((btn, idx) => {
      btn.addEventListener("click", () => {
        updateState(idx);
      });
    });

    prevBtn.addEventListener("click", () => {
      updateState(currentTodayIndex - 1);
    });

    nextBtn.addEventListener("click", () => {
      updateState(currentTodayIndex + 1);
    });

    updateState(currentTodayIndex);
  </script>
</body>
</html>

Try singing or clapping all seven days in order right now, starting with Sunday and then starting with Monday!

math

Naming and Ordering the Seven Days of the Week. Recite, write, and order the seven days of the week starting from Monday or Sunday.

Use Language Relating to Days of the Week

Days of the Week: Sequencing and Daily Routines

Days of the Week: Ordering, Identifying, and Relative Days

In Scottish Curriculum for Excellence (CfE) Early Level / P1, teaching the days of the week should bridge concrete daily classroom routines with formal temporal sequence. Daily 'morning circle' calendar boards establish the repetitive vocabulary of 'yesterday was', 'today is', and 'tomorrow will be'. Pairing songs with both circular (wheel) and linear (calendar grid) visual aids prevents cycle-boundary traps (e.g., Sunday-to-Monday transition) and prepares learners to independently organise key school events under benchmark standard MNU 1-10b.

Naming and Ordering the Seven Days of the Week

The Seven Days in Order

Starting with Monday