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 you are a robot explorer standing on a giant treasure map.

How do you spin to find the hidden treasure?

A compass shows four main directions: **North**, **East**, **South**, and **West**.

To remember the order going around in a circle, think: **N**ever **E**at **S**oggy **W**affles!

<!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>Cardinal Points and Right-Angle Turns</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .compass-container {
      position: relative;
      width: 280px;
      height: 280px;
      margin: 8px auto 16px auto;
    }

    svg.compass-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .point-btn {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 4px 8px;
      cursor: pointer;
      font-weight: 700;
      font-size: 15px;
      color: #1e2945;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      transition: border-color 0.2s, background-color 0.2s;
      z-index: 2;
    }

    .point-btn .mnemonic {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }

    .point-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
    }
    .point-btn.active .mnemonic {
      color: #0284c7;
    }

    /* Positioning cardinal points */
    .btn-n { top: 0; left: 50%; transform: translateX(-50%); }
    .btn-e { top: 50%; right: 0; transform: translateY(-50%); }
    .btn-s { bottom: 0; left: 50%; transform: translateX(-50%); }
    .btn-w { top: 50%; left: 0; transform: translateY(-50%); }

    /* Center Robot / Pointer */
    .robot-hub {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 68px;
      height: 68px;
      margin-top: -34px;
      margin-left: -34px;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .robot-avatar {
      font-size: 32px;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    }

    .pointer-arrow {
      position: absolute;
      top: -26px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-bottom: 22px solid #22b7ff;
    }

    .controls {
      display: flex;
      gap: 12px;
      justify-content: center;
      width: 100%;
      max-width: 340px;
    }

    .turn-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      transition: background-color 0.15s, border-color 0.15s;
    }

    .turn-btn:active {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .angle-badge {
      display: inline-block;
      background: #e0f2fe;
      color: #0369a1;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="compass-container">
    <svg class="compass-svg" viewBox="0 0 280 280">
      
      <circle cx="140" cy="140" r="100" fill="none" stroke="#e2e8f0" stroke-width="2" stroke-dasharray="4 4" />
      
      
      <line x1="140" y1="50" x2="140" y2="230" stroke="#cbd5e1" stroke-width="1.5" />
      <line x1="50" y1="140" x2="230" y2="140" stroke="#cbd5e1" stroke-width="1.5" />
      
      
      <path id="angleIndicator" d="M 140 115 A 25 25 0 0 1 165 140" fill="none" stroke="#22b7ff" stroke-width="3" stroke-linecap="round" />
      <rect id="angleSquare" x="140" y="122" width="18" height="18" fill="none" stroke="#22b7ff" stroke-width="2" opacity="0.6" />
    </svg>

    
    <button class="point-btn btn-n active" data-dir="0" aria-label="North">
      <span>N</span>
      <span class="mnemonic">Never</span>
    </button>

    <button class="point-btn btn-e" data-dir="1" aria-label="East">
      <span>E</span>
      <span class="mnemonic">Eat</span>
    </button>

    <button class="point-btn btn-s" data-dir="2" aria-label="South">
      <span>S</span>
      <span class="mnemonic">Soggy</span>
    </button>

    <button class="point-btn btn-w" data-dir="3" aria-label="West">
      <span>W</span>
      <span class="mnemonic">Waffles</span>
    </button>

    
    <div class="robot-hub" id="robotHub">
      <div class="pointer-arrow"></div>
      <div class="robot-avatar">🤖</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="turn-btn" id="turnCCW">
      <span>↺</span> Turn <span class="angle-badge">90°</span>
    </button>
    <button class="turn-btn" id="turnCW">
      Turn <span class="angle-badge">90°</span> <span>↻</span>
    </button>
  </div>

  <script>
    const points = document.querySelectorAll('.point-btn');
    const robotHub = document.getElementById('robotHub');
    const angleSquare = document.getElementById('angleSquare');
    const angleIndicator = document.getElementById('angleIndicator');
    const btnCW = document.getElementById('turnCW');
    const btnCCW = document.getElementById('turnCCW');

    let currentStep = 0; // 0: N, 1: E, 2: S, 3: W
    let totalAngle = 0;

    function updateState(step, angleChange = 0) {
      currentStep = ((step % 4) + 4) % 4;
      totalAngle += angleChange;

      // Rotate robot
      robotHub.style.transform = `rotate(${totalAngle}deg)`;

      // Update active cardinal button
      points.forEach(p => {
        if (parseInt(p.dataset.dir) === currentStep) {
          p.classList.add('active');
        } else {
          p.classList.remove('active');
        }
      });

      // Update Right Angle visual indicator orientation
      const baseAngle = currentStep * 90;
      angleIndicator.style.transformOrigin = "140px 140px";
      angleIndicator.style.transform = `rotate(${baseAngle}deg)`;
      angleSquare.style.transformOrigin = "140px 140px";
      angleSquare.style.transform = `rotate(${baseAngle}deg)`;
    }

    // Direct cardinal selection
    points.forEach(btn => {
      btn.addEventListener('click', () => {
        const targetStep = parseInt(btn.dataset.dir);
        let diff = targetStep - currentStep;
        if (diff > 2) diff -= 4;
        if (diff < -2) diff += 4;
        updateState(targetStep, diff * 90);
      });
    });

    // 90° Turn Clockwise
    btnCW.addEventListener('click', () => {
      updateState(currentStep + 1, 90);
    });

    // 90° Turn Counter-Clockwise
    btnCCW.addEventListener('click', () => {
      updateState(currentStep - 1, -90);
    });

    // Initialize
    updateState(0, 0);
  </script>
</body>
</html>

What happens when our robot starts turning like the hands of a clock?

When you turn to the right like a clock hand, you turn **clockwise**.

One quarter turn makes a square corner called a **right angle**, which is **90°** (90 degrees).

If you start facing North and turn 90° clockwise, you are now facing **East**.

What if you turn one more right angle to make two quarter turns?

Two quarter turns ($90^\circ + 90^\circ$) make a straight line called a **half turn**, which is **180°**.

Starting at North and turning 180° clockwise makes you face completely backward toward **South**.

What happens if you take another quarter turn past South?

Three quarter turns ($90^\circ + 90^\circ + 90^\circ$) make a big turn of **270°**.

Starting at North and making a 270° clockwise turn brings you all the way to **West**.

Can you spin all the way back to the start?

Four quarter turns make one complete spin, which is a **full turn** of **360°**.

Starting at North and turning 360° clockwise brings you right back to face **North** again!

<!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>Cardinal Points & Right-Angle Turns</title>
  <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;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 100%;
      padding: 12px;
    }

    .main-stage {
      position: relative;
      width: 100%;
      max-width: 320px;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto;
    }

    .compass-circle {
      position: absolute;
      width: 82%;
      height: 82%;
      border-radius: 50%;
      border: 2px dashed #d1d5db;
      background: #ffffff;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    }

    .sweep-svg {
      position: absolute;
      width: 82%;
      height: 82%;
      transform: rotate(-90deg);
      pointer-events: none;
    }

    .point-label {
      position: absolute;
      font-weight: 800;
      font-size: 16px;
      color: #9ca3af;
      transition: color 0.3s ease, transform 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .point-label.active {
      color: #0284c7;
      transform: scale(1.15);
    }

    .point-n { top: 2%; left: 50%; transform: translateX(-50%); }
    .point-e { right: 2%; top: 50%; transform: translateY(-50%); }
    .point-s { bottom: 2%; left: 50%; transform: translateX(-50%); }
    .point-w { left: 2%; top: 50%; transform: translateY(-50%); }

    .point-n.active { transform: translateX(-50%) scale(1.15); }
    .point-e.active { transform: translateY(-50%) scale(1.15); }
    .point-s.active { transform: translateX(-50%) scale(1.15); }
    .point-w.active { transform: translateY(-50%) scale(1.15); }

    .needle {
      position: absolute;
      width: 8px;
      height: 40%;
      bottom: 50%;
      left: calc(50% - 4px);
      transform-origin: bottom center;
      transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
      pointer-events: none;
      z-index: 10;
    }

    .needle-tip {
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 22px solid #22b7ff;
      position: absolute;
      top: 0;
      left: -3px;
    }

    .needle-shaft {
      width: 4px;
      height: calc(100% - 20px);
      background: #22b7ff;
      position: absolute;
      bottom: 0;
      left: 2px;
      border-radius: 2px;
    }

    .center-pivot {
      position: absolute;
      width: 18px;
      height: 18px;
      background: #1e2945;
      border: 3px solid #ffffff;
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
      z-index: 12;
    }

    .readout {
      display: flex;
      gap: 8px;
      justify-content: center;
      align-items: center;
      margin: 8px 0;
    }

    .badge {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }

    .badge-primary {
      background: #e0f2fe;
      border-color: #bae6fd;
      color: #0284c7;
    }

    .controls {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 340px;
      justify-content: center;
    }

    .turn-btn {
      flex: 1;
      padding: 8px 4px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .turn-btn:hover {
      background: #f1f5f9;
    }

    .turn-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }
  </style>
</head>
<body>

  <div class="main-stage">
    <div class="point-label point-n active" id="lbl-n">N</div>
    <div class="point-label point-e" id="lbl-e">E</div>
    <div class="point-label point-s" id="lbl-s">S</div>
    <div class="point-label point-w" id="lbl-w">W</div>

    <div class="compass-circle"></div>

    <svg class="sweep-svg" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="44" fill="none" stroke="#f1f5f9" stroke-width="8" />
      <path id="arc-path" fill="none" stroke="#22b7ff" stroke-width="8" stroke-linecap="round" d="" />
    </svg>

    <div class="needle" id="needle">
      <div class="needle-tip"></div>
      <div class="needle-shaft"></div>
    </div>
    <div class="center-pivot"></div>
  </div>

  <div class="readout">
    <div class="badge badge-primary" id="deg-badge">0° · North</div>
    <div class="badge" id="turn-badge">Start</div>
  </div>

  <div class="controls">
    <button class="turn-btn active" data-step="0">
      <span>0°</span>
      <span>N</span>
    </button>
    <button class="turn-btn" data-step="1">
      <span>90°</span>
      <span>¼ turn</span>
    </button>
    <button class="turn-btn" data-step="2">
      <span>180°</span>
      <span>½ turn</span>
    </button>
    <button class="turn-btn" data-step="3">
      <span>270°</span>
      <span>¾ turn</span>
    </button>
    <button class="turn-btn" data-step="4">
      <span>360°</span>
      <span>Full</span>
    </button>
  </div>

  <script>
    const steps = [
      { deg: 0, dir: 'N', label: '0° · North', turn: 'Start' },
      { deg: 90, dir: 'E', label: '90° · East', turn: '1 Right Angle' },
      { deg: 180, dir: 'S', label: '180° · South', turn: '2 Right Angles' },
      { deg: 270, dir: 'W', label: '270° · West', turn: '3 Right Angles' },
      { deg: 360, dir: 'N', label: '360° · North', turn: '4 Right Angles' }
    ];

    let currentStep = 0;
    const needle = document.getElementById('needle');
    const arcPath = document.getElementById('arc-path');
    const degBadge = document.getElementById('deg-badge');
    const turnBadge = document.getElementById('turn-badge');
    const buttons = document.querySelectorAll('.turn-btn');

    function updateArc(deg) {
      if (deg === 0) {
        arcPath.setAttribute('d', '');
        return;
      }
      if (deg >= 360) {
        arcPath.setAttribute('d', 'M 94 50 A 44 44 0 1 1 93.99 49.9');
        return;
      }
      const rad = (deg * Math.PI) / 180;
      const x = 50 + 44 * Math.cos(rad);
      const y = 50 + 44 * Math.sin(rad);
      const largeArc = deg > 180 ? 1 : 0;
      arcPath.setAttribute('d', `M 94 50 A 44 44 0 ${largeArc} 1 ${x.toFixed(2)} ${y.toFixed(2)}`);
    }

    function setStep(idx) {
      currentStep = idx;
      const s = steps[idx];

      needle.style.transform = `rotate(${s.deg}deg)`;
      updateArc(s.deg);

      degBadge.textContent = s.label;
      turnBadge.textContent = s.turn;

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

      const activeDir = s.dir.toLowerCase();
      ['n', 'e', 's', 'w'].forEach(d => {
        document.getElementById(`lbl-${d}`).classList.toggle('active', d === activeDir);
      });
    }

    buttons.forEach((btn, idx) => {
      btn.addEventListener('click', () => setStep(idx));
    });

    setStep(0);
  </script>
</body>
</html>

Stand up on your feet, face forward toward your imaginary North, and try making a full 360° spin right on the spot!

math

The Four Cardinal Points and Right-Angle Turns. Relate North, East, South, and West to 90°, 180°, 270°, and 360° clockwise turns.

Angles, Directions, and Compass Points (Curriculum for Excellence Second Level)

Turning and Right Angles in the Environment

Compass Directions, Quarter Turns, and Angles

Adopt a Concrete-Pictorial-Abstract (CPA) pedagogical sequence: start with whole-body physical rotation on a floor compass using mnemonics like 'Never Eat Shredded Wheat' (North, East, South, West in clockwise order), transition to screen-based or programmable floor robots (e.g., Bee-Bot / Roamer), and consolidate understanding by mapping quarter, half, three-quarter, and full turns directly to $90^\circ, 180^\circ, 270^\circ$, and $360^\circ$ respectively.

The Four Cardinal Points and Right-Angle Turns

The Four Main Directions

One Quarter Turn: 90°

Half Turn: 180°