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 want to throw a fun snack party for your class, but you do not know which fruit your friends like best.

To find out, we can become data detectives and ask an **investigation question** that lets us count the answers.

How do we make sure our question is easy to count?

A **testable question** gives clear choices so you can easily count every friend's answer.

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

  .nav {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 420px;
  }

  .nav-btn {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid transparent;
    background: #ffffff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #6b7280;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
  }

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

  .stage {
    width: 100%;
    max-width: 420px;
    height: 300px;
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
  }

  .q-box {
    background: #f0f9ff;
    border: 1px solid #b9e6fe;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #0284c7;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .view-panel {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 40px;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 0 16px;
  }

  .view-panel.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Untestable / Messy Layout */
  .scatter-area {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .bubble {
    position: absolute;
    background: #f1f5f9;
    border: 1px dashed #94a3b8;
    color: #475569;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 13px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: drift 4s ease-in-out infinite alternate;
  }

  @keyframes drift {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-4px) rotate(2deg); }
  }

  /* Testable / Chart Layout */
  .chart-area {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
  }

  .chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 28%;
  }

  .stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
    width: 100%;
    align-items: center;
  }

  .token {
    width: 100%;
    max-width: 60px;
    height: 24px;
    background: #e0f2fe;
    border: 1px solid #7dd3fc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .view-panel.active .token {
    transform: translateY(0);
    opacity: 1;
  }

  .col-label {
    font-size: 18px;
    margin-top: 4px;
  }

  .status-tag {
    position: absolute;
    bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .status-tag.bad { color: #e11d48; }
  .status-tag.good { color: #059669; }
</style>
</head>
<body>

<div class="nav">
  <button class="nav-btn active" id="btn-unclear">
    <span>❓</span> Open
  </button>
  <button class="nav-btn" id="btn-testable">
    <span>🎯</span> Testable
  </button>
</div>

<div class="stage">
  <div class="q-box" id="q-text">What is fun?</div>

  
  <div class="view-panel active" id="panel-unclear">
    <div class="scatter-area">
      <div class="bubble" style="top: 10%; left: 8%;">🎮 games?</div>
      <div class="bubble" style="top: 8%; right: 6%;">😴 sleeping</div>
      <div class="bubble" style="top: 38%; left: 25%;">🍕 eating cake</div>
      <div class="bubble" style="top: 42%; right: 10%;">⚽ park running</div>
      <div class="bubble" style="top: 68%; left: 10%;">🐶 my dog</div>
      <div class="bubble" style="top: 70%; right: 18%;">✨ everything</div>
    </div>
    <div class="status-tag bad">✕ Hard to count</div>
  </div>

  
  <div class="view-panel" id="panel-testable">
    <div class="chart-area">
      <div class="chart-col">
        <div class="stack">
          <div class="token" style="transition-delay: 0.1s">🐶</div>
          <div class="token" style="transition-delay: 0.2s">🐶</div>
          <div class="token" style="transition-delay: 0.3s">🐶</div>
          <div class="token" style="transition-delay: 0.4s">🐶</div>
        </div>
        <div class="col-label">🐶</div>
      </div>

      <div class="chart-col">
        <div class="stack">
          <div class="token" style="transition-delay: 0.15s">🐱</div>
          <div class="token" style="transition-delay: 0.25s">🐱</div>
          <div class="token" style="transition-delay: 0.35s">🐱</div>
        </div>
        <div class="col-label">🐱</div>
      </div>

      <div class="chart-col">
        <div class="stack">
          <div class="token" style="transition-delay: 0.2s">🐰</div>
          <div class="token" style="transition-delay: 0.3s">🐰</div>
        </div>
        <div class="col-label">🐰</div>
      </div>
    </div>
    <div class="status-tag good">✓ Easy to count</div>
  </div>
</div>

<script>
  const btnUnclear = document.getElementById('btn-unclear');
  const btnTestable = document.getElementById('btn-testable');
  const panelUnclear = document.getElementById('panel-unclear');
  const panelTestable = document.getElementById('panel-testable');
  const qText = document.getElementById('q-text');

  function setMode(mode) {
    if (mode === 'unclear') {
      btnUnclear.classList.add('active');
      btnTestable.classList.remove('active');
      panelUnclear.classList.add('active');
      panelTestable.classList.remove('active');
      qText.textContent = 'What is fun?';
    } else {
      btnTestable.classList.add('active');
      btnUnclear.classList.remove('active');
      panelTestable.classList.add('active');
      panelUnclear.classList.remove('active');
      qText.textContent = 'Favourite pet?';
    }
  }

  btnUnclear.addEventListener('click', () => setMode('unclear'));
  btnTestable.addEventListener('click', () => setMode('testable'));
</script>
</body>
</html>

What happens if we accidentally push friends toward our own favorite choice?

A **fair question** gives every choice an equal chance and does not tell your friends what to say.

<!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;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }

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

    /* Mode Switcher */
    .toggle-group {
      display: flex;
      background: #e5e7eb;
      padding: 4px;
      border-radius: 24px;
      gap: 4px;
    }

    .toggle-btn {
      border: none;
      background: transparent;
      padding: 8px 18px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    }

    .toggle-btn.active {
      background: #ffffff;
      color: #10b981;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .toggle-btn.active.biased {
      color: #f59e0b;
    }

    /* Visual Stage */
    .stage {
      width: 100%;
      background: #ffffff;
      border-radius: 16px;
      padding: 16px 12px 14px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Scale SVG */
    .scale-svg {
      width: 220px;
      height: 96px;
      overflow: visible;
    }

    .beam-group {
      transform-origin: 110px 32px;
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .pan-left, .pan-right {
      transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Choices Display */
    .choices-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 360px;
    }

    .choice-card {
      background: #f8f9fa;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      border: 2px solid transparent;
      transition: transform 0.3s ease, border-color 0.3s ease, opacity 0.3s ease, background 0.3s ease;
    }

    .choice-icon {
      font-size: 26px;
      line-height: 1;
    }

    .meter-track {
      width: 100%;
      height: 6px;
      background: #e5e7eb;
      border-radius: 3px;
      overflow: hidden;
    }

    .meter-fill {
      height: 100%;
      background: #10b981;
      border-radius: 3px;
      width: 33.3%;
      transition: width 0.4s ease, background-color 0.4s ease;
    }

    /* Status Indicator */
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      background: #ecfdf5;
      color: #059669;
      transition: all 0.3s ease;
    }

    /* Biased state styling */
    body.is-biased .beam-group {
      transform: rotate(-14deg);
    }

    body.is-biased .pan-left {
      transform: rotate(14deg);
    }

    body.is-biased .pan-right {
      transform: rotate(14deg);
    }

    body.is-biased .choice-card:nth-child(1) {
      background: #fffbeb;
      border-color: #f59e0b;
      transform: translateY(-2px);
    }

    body.is-biased .choice-card:nth-child(1) .meter-fill {
      width: 85%;
      background: #f59e0b;
    }

    body.is-biased .choice-card:nth-child(2),
    body.is-biased .choice-card:nth-child(3) {
      opacity: 0.4;
    }

    body.is-biased .choice-card:nth-child(2) .meter-fill,
    body.is-biased .choice-card:nth-child(3) .meter-fill {
      width: 15%;
      background: #9ca3af;
    }

    body.is-biased .status-badge {
      background: #fffbeb;
      color: #d97706;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    
    <div class="toggle-group" role="tablist">
      <button class="toggle-btn active" id="fairBtn" role="tab" aria-selected="true">
        <span>⚖️</span> Fair
      </button>
      <button class="toggle-btn" id="biasedBtn" role="tab" aria-selected="false">
        <span>👉</span> Tricky
      </button>
    </div>

    
    <div class="stage">
      
      <svg class="scale-svg" viewBox="0 0 220 96">
        
        <polygon points="110,48 98,88 122,88" fill="#cbd5e1"/>
        <rect x="94" y="86" width="32" height="4" rx="2" fill="#94a3b8"/>
        
        
        <g class="beam-group">
          
          <line x1="30" y1="32" x2="190" y2="32" stroke="#64748b" stroke-width="4" stroke-linecap="round"/>
          <circle cx="110" cy="32" r="5" fill="#475569"/>

          
          <g class="pan-left" style="transform-origin: 35px 32px;">
            <line x1="35" y1="32" x2="20" y2="60" stroke="#94a3b8" stroke-width="1.5"/>
            <line x1="35" y1="32" x2="50" y2="60" stroke="#94a3b8" stroke-width="1.5"/>
            <path d="M 16 60 Q 35 68 54 60 Z" fill="#94a3b8"/>
          </g>

          
          <g class="pan-right" style="transform-origin: 185px 32px;">
            <line x1="185" y1="32" x2="170" y2="60" stroke="#94a3b8" stroke-width="1.5"/>
            <line x1="185" y1="32" x2="200" y2="60" stroke="#94a3b8" stroke-width="1.5"/>
            <path d="M 166 60 Q 185 68 204 60 Z" fill="#94a3b8"/>
          </g>
        </g>
      </svg>

      
      <div class="choices-grid">
        <div class="choice-card">
          <span class="choice-icon">🍎</span>
          <div class="meter-track">
            <div class="meter-fill"></div>
          </div>
        </div>

        <div class="choice-card">
          <span class="choice-icon">🍌</span>
          <div class="meter-track">
            <div class="meter-fill"></div>
          </div>
        </div>

        <div class="choice-card">
          <span class="choice-icon">🍇</span>
          <div class="meter-track">
            <div class="meter-fill"></div>
          </div>
        </div>
      </div>

      
      <div class="status-badge" id="statusBadge">
        <span>✓</span> Equal Chance
      </div>
    </div>
  </div>

  <script>
    const fairBtn = document.getElementById('fairBtn');
    const biasedBtn = document.getElementById('biasedBtn');
    const statusBadge = document.getElementById('statusBadge');

    function setFair() {
      document.body.classList.remove('is-biased');
      fairBtn.classList.add('active');
      fairBtn.setAttribute('aria-selected', 'true');
      biasedBtn.classList.remove('active', 'biased');
      biasedBtn.setAttribute('aria-selected', 'false');
      statusBadge.innerHTML = '<span>✓</span> Equal Chance';
    }

    function setBiased() {
      document.body.classList.add('is-biased');
      biasedBtn.classList.add('active', 'biased');
      biasedBtn.setAttribute('aria-selected', 'true');
      fairBtn.classList.remove('active');
      fairBtn.setAttribute('aria-selected', 'false');
      statusBadge.innerHTML = '<span>✕</span> Pushed Choice';
    }

    fairBtn.addEventListener('click', setFair);
    biasedBtn.addEventListener('click', setBiased);
  </script>
</body>
</html>

Can you spot the difference between a question that is tricky and one that is clear and fair?

Pick two games, like tag and hide-and-seek. Ask a friend: 'Which playground game do you want to play today?'

math

Formulating Clear and Testable Investigation Questions. Develop specific, measurable, and unbiased statistical inquiry questions for school-wide investigations.

The PPDAC Data Problem Solving Cycle in the Scottish Curriculum

Primary Statistics and Data Handling: Posing Meaningful Questions

Posing Investigative Questions in the Statistical Enquiry Cycle

To develop mastery in formulating statistical inquiry questions, instruction should bridge young learners' natural curiosity with structured investigative habits. Use the PPDAC framework to demonstrate that questions must anticipate varied outcomes across a defined population. Engage pupils in sorting games where they classify candidate questions as 'Deterministic' (single fact), 'Biased/Subjective' (leading/vague), or 'Statistical' (measurable with variability). Scaffold question refinement using sentence stems such as 'What is the distribution of [variable] among [target group]?' to ensure full alignment with Curriculum for Excellence benchmarks.

Formulating Clear and Testable Investigation Questions

Questions We Can Count

Keeping Questions Fair

Practice Your Question