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

What if you could change a math answer just by giving two numbers a hug?

In math, curved symbols called **brackets** $( )$ act like little hugs that say: "Do us first!"

<!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;
    }
    :root {
      --primary: #22b7ff;
      --primary-dark: #0094d9;
      --text: #1e2945;
      --muted: #6b7280;
      --border: #e2e8f0;
      --bg: #f8f9fa;
      --highlight: #e0f2fe;
      --badge-first: #0284c7;
      --badge-second: #64748b;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: var(--text);
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .main-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .toggle-group {
      display: flex;
      gap: 8px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 10px;
      width: 100%;
      max-width: 360px;
    }
    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 12px;
      font-size: 15px;
      font-weight: 700;
      color: var(--muted);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
      font-family: inherit;
    }
    .tab-btn.active {
      background: #ffffff;
      color: var(--text);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    .equation-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 26px;
      font-weight: 800;
      padding: 12px 16px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid var(--border);
      width: 100%;
      min-height: 64px;
    }
    .bracket {
      color: var(--badge-first);
      font-size: 32px;
      line-height: 1;
      font-weight: 900;
      transition: opacity 0.25s ease;
    }
    .num-op {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .group-box {
      display: inline-flex;
      align-items: center;
      padding: 2px 6px;
      border-radius: 8px;
      transition: all 0.3s ease;
    }
    .group-first {
      background: var(--highlight);
      border: 2px dashed var(--primary);
    }
    .steps-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .step-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid var(--border);
      font-size: 15px;
      font-weight: 600;
    }
    .step-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      color: #ffffff;
    }
    .tag-1 {
      background: var(--badge-first);
    }
    .tag-2 {
      background: var(--badge-second);
    }
    .calc-text {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }
    .calc-res {
      color: var(--badge-first);
    }
    .final-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 800;
      padding: 8px 16px;
      background: #f8fafc;
      border-radius: 10px;
      border: 1px solid var(--border);
      width: 100%;
    }
    .res-pill {
      background: var(--primary);
      color: #ffffff;
      padding: 2px 12px;
      border-radius: 8px;
      font-size: 22px;
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    
    <div class="toggle-group">
      <button class="tab-btn active" id="btn-no" onclick="setMode('no')">2 + 3 × 4</button>
      <button class="tab-btn" id="btn-yes" onclick="setMode('yes')">(2 + 3) × 4</button>
    </div>

    
    <div class="equation-display" id="eq-display">
      
    </div>

    
    <div class="steps-container" id="steps-box">
      
    </div>

    
    <div class="final-row">
      <span>Total</span>
      <span class="res-pill" id="total-val">14</span>
    </div>
  </div>

  <script>
    const data = {
      no: {
        eqHtml: `
          <span class="num-op">2 +</span>
          <div class="group-box group-first">
            <span>3 × 4</span>
          </div>
        `,
        steps: [
          { tag: '1st', label: 'Multiply', math: '3 × 4', res: '12', tagClass: 'tag-1' },
          { tag: '2nd', label: 'Add', math: '2 + 12', res: '14', tagClass: 'tag-2' }
        ],
        total: '14'
      },
      yes: {
        eqHtml: `
          <div class="group-box group-first">
            <span class="bracket">(</span>
            <span>2 + 3</span>
            <span class="bracket">)</span>
          </div>
          <span class="num-op">× 4</span>
        `,
        steps: [
          { tag: '1st', label: 'Brackets', math: '(2 + 3)', res: '5', tagClass: 'tag-1' },
          { tag: '2nd', label: 'Multiply', math: '5 × 4', res: '20', tagClass: 'tag-2' }
        ],
        total: '20'
      }
    };

    function setMode(mode) {
      document.getElementById('btn-no').classList.toggle('active', mode === 'no');
      document.getElementById('btn-yes').classList.toggle('active', mode === 'yes');

      const d = data[mode];
      document.getElementById('eq-display').innerHTML = d.eqHtml;

      const stepsHtml = d.steps.map(s => `
        <div class="step-card">
          <span class="step-tag ${s.tagClass}">${s.tag} · ${s.label}</span>
          <span class="calc-text">${s.math} = <span class="calc-res">${s.res}</span></span>
        </div>
      `).join('');

      document.getElementById('steps-box').innerHTML = stepsHtml;
      document.getElementById('total-val').textContent = d.total;
    }

    setMode('no');
  </script>
</body>
</html>

Normally, we always multiply before we add. But putting **brackets** around numbers forces us to solve that part first.

How can we figure out where to place brackets to hit an exact mystery target?

Imagine we want to make $3 \times 4 + 2 = 18$ true.

We can test each place we could put the brackets like a detective testing clues.

<!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;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    .target-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
      margin-bottom: 16px;
    }

    .target-val {
      color: #2563eb;
      font-weight: 700;
      font-size: 17px;
    }

    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      width: 100%;
      max-width: 380px;
    }

    .tab-btn {
      flex: 1;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      border-radius: 10px;
      padding: 10px 8px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    }

    .tab-btn.active {
      border-color: #2563eb;
      color: #1e2945;
      background: #eff6ff;
    }

    .tab-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #94a3b8;
    }

    .tab-btn.active .tab-label {
      color: #2563eb;
      font-weight: 700;
    }

    .card-display {
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
      width: 100%;
      max-width: 380px;
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .step-row {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 700;
      gap: 6px;
      color: #1e2945;
    }

    .bracket-group {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      background: #f1f5f9;
      border-radius: 8px;
      border: 1.5px dashed #94a3b8;
      transition: all 0.3s ease;
    }

    .bracket-group.highlight {
      background: #dbeafe;
      border-color: #3b82f6;
      border-style: solid;
    }

    .bracket-char {
      color: #2563eb;
      font-weight: 800;
    }

    .arrow-step {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #94a3b8;
      font-size: 13px;
      font-weight: 600;
    }

    .arrow-step span {
      font-size: 16px;
      color: #64748b;
    }

    .result-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 700;
      width: 100%;
      transition: all 0.3s ease;
    }

    .result-badge.incorrect {
      background: #fef2f2;
      color: #ef4444;
      border: 1px solid #fecaca;
    }

    .result-badge.correct {
      background: #f0fdf4;
      color: #16a34a;
      border: 1px solid #bbf7d0;
    }

    .status-icon {
      font-size: 18px;
    }
  </style>
</head>
<body>

  <div class="target-badge">
    <span>Target:</span>
    <span class="target-val">18</span>
  </div>

  <div class="tabs">
    <button class="tab-btn active" id="btn-opt1" onclick="showOption(1)">
      <span class="tab-label">Position A</span>
      <span>(3 × 4) + 2</span>
    </button>
    <button class="tab-btn" id="btn-opt2" onclick="showOption(2)">
      <span class="tab-label">Position B</span>
      <span>3 × (4 + 2)</span>
    </button>
  </div>

  <div class="card-display" id="display-area">
    
  </div>

  <script>
    const options = {
      1: {
        step1: `<div class="step-row">
                  <div class="bracket-group highlight">
                    <span class="bracket-char">(</span>3 × 4<span class="bracket-char">)</span>
                  </div>
                  <span>+</span>
                  <span>2</span>
                </div>`,
        arrow: `<span>↓</span> 12 + 2`,
        step2: `<div class="step-row" style="color: #64748b;">
                  <span>= 14</span>
                </div>`,
        result: `<div class="result-badge incorrect">
                   <span class="status-icon">✗</span>
                   <span>14 ≠ 18</span>
                 </div>`
      },
      2: {
        step1: `<div class="step-row">
                  <span>3</span>
                  <span>×</span>
                  <div class="bracket-group highlight">
                    <span class="bracket-char">(</span>4 + 2<span class="bracket-char">)</span>
                  </div>
                </div>`,
        arrow: `<span>↓</span> 3 × 6`,
        step2: `<div class="step-row" style="color: #16a34a;">
                  <span>= 18</span>
                </div>`,
        result: `<div class="result-badge correct">
                   <span class="status-icon">✓</span>
                   <span>18 = 18 (True)</span>
                 </div>`
      }
    };

    function showOption(id) {
      document.getElementById('btn-opt1').classList.toggle('active', id === 1);
      document.getElementById('btn-opt2').classList.toggle('active', id === 2);

      const data = options[id];
      const area = document.getElementById('display-area');
      area.innerHTML = `
        ${data.step1}
        <div class="arrow-step">${data.arrow}</div>
        ${data.step2}
        ${data.result}
      `;
    }

    // Initial render
    showOption(1);
  </script>
</body>
</html>

Testing $(3 \times 4) + 2$ gives $12 + 2 = 14$, which is not $18$.

Testing $3 \times (4 + 2)$ gives $3 \times 6 = 18$, which hits our target perfectly!

What happens when an expression uses subtraction instead of addition?

Let's find where brackets belong to make $10 - 2 \times 3 = 24$.

<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    .main-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    /* Target badge */
    .target-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      padding: 8px 18px;
      border-radius: 24px;
      font-size: 17px;
      font-weight: 700;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    .target-val {
      color: #3b82f6;
      font-size: 20px;
    }

    /* Option Toggles */
    .toggle-row {
      display: flex;
      gap: 10px;
      width: 100%;
    }

    .toggle-btn {
      flex: 1;
      background: #ffffff;
      border: 2px solid transparent;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      border-radius: 12px;
      padding: 12px 8px;
      font-size: 17px;
      font-weight: 700;
      color: #6b7280;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }

    .toggle-btn.active {
      background: #ffffff;
      border-color: #3b82f6;
      color: #1e2945;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.18);
    }

    /* Stage Panel */
    .stage-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 24px 20px;
      width: 100%;
      box-shadow: 0 4px 16px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }

    /* Expression display */
    .expr-row {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 800;
      letter-spacing: 1px;
    }

    .bracket-group {
      background: #eff6ff;
      border: 2px dashed #3b82f6;
      color: #1d4ed8;
      padding: 4px 10px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.3s ease;
    }

    .op-text {
      padding: 0 6px;
      color: #1e2945;
    }

    /* Calculation Flow Steps */
    .steps-flow {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
    }

    .arrow-down {
      font-size: 16px;
      color: #94a3b8;
      line-height: 1;
    }

    .step-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 700;
      padding: 8px 18px;
      border-radius: 10px;
      background: #f8fafc;
      width: fit-content;
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;
    }

    .step-sub {
      color: #3b82f6;
      font-weight: 800;
    }

    /* Result Card */
    .result-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 20px;
      border-radius: 12px;
      font-size: 22px;
      font-weight: 800;
      width: 100%;
      transition: all 0.3s ease;
    }

    .result-correct {
      background: #ecfdf5;
      color: #059669;
      border: 1.5px solid #a7f3d0;
    }

    .result-incorrect {
      background: #fef2f2;
      color: #dc2626;
      border: 1.5px solid #fecaca;
    }

    .status-icon {
      font-size: 20px;
    }
  </style>
</head>
<body>

<div class="main-wrap">
  
  <div class="target-badge">
    <span>Target:</span>
    <span class="target-val">24</span>
  </div>

  
  <div class="toggle-row">
    <button class="toggle-btn active" id="btnA" onclick="setOption('A')">(10 − 2) × 3</button>
    <button class="toggle-btn" id="btnB" onclick="setOption('B')">10 − (2 × 3)</button>
  </div>

  
  <div class="stage-card">
    <div class="expr-row" id="exprDisplay">
      
    </div>

    <div class="steps-flow">
      <div class="arrow-down">↓</div>
      <div class="step-box" id="step1Display">
        
      </div>
      <div class="arrow-down">↓</div>
      <div class="result-row" id="resultDisplay">
        
      </div>
    </div>
  </div>
</div>

<script>
  const states = {
    A: {
      expr: '<span class="bracket-group">(10 − 2)</span><span class="op-text">× 3</span>',
      step1: '<span class="step-sub">8</span><span class="op-text">× 3</span>',
      resultClass: 'result-correct',
      resultText: '24',
      symbol: '✓',
      matchText: '= 24'
    },
    B: {
      expr: '<span class="op-text">10 −</span><span class="bracket-group">(2 × 3)</span>',
      step1: '<span class="op-text">10 −</span><span class="step-sub">6</span>',
      resultClass: 'result-incorrect',
      resultText: '4',
      symbol: '✗',
      matchText: '≠ 24'
    }
  };

  let current = 'A';

  function setOption(opt) {
    current = opt;
    document.getElementById('btnA').classList.toggle('active', opt === 'A');
    document.getElementById('btnB').classList.toggle('active', opt === 'B');

    const data = states[opt];
    document.getElementById('exprDisplay').innerHTML = data.expr;
    document.getElementById('step1Display').innerHTML = data.step1;
    
    const resEl = document.getElementById('resultDisplay');
    resEl.className = 'result-row ' + data.resultClass;
    resEl.innerHTML = `<span>${data.resultText}</span> <span>${data.matchText}</span> <span class="status-icon">${data.symbol}</span>`;
  }

  // Initialize
  setOption('A');
</script>

</body>
</html>

Without brackets, $10 - 2 \times 3$ means multiplying first: $10 - 6 = 4$.

When we put brackets around $(10 - 2)$, we subtract first to get $8$, and $8 \times 3 = 24$!

Whenever you see a target number, test each bracket spot one at a time until you find the exact match.

math

Inserting Brackets to Make Equations True. Place brackets into arithmetic expressions to achieve target results.

Order of Operations and BODMAS - 3rd & 4th Level Mathematics

Make 24 and Order of Operations Bracket Puzzles

Introduction to Order of Operations and Parentheses

Curriculum Context Clarification: While the prompt mentions Early Level (P1), standard MTH 4-03b is specifically mapped to Fourth Level (Secondary 1 to Secondary 3 / ages 11–14) within the Scottish Curriculum for Excellence. The pedagogical approach focuses on moving learners from rote mnemonics (e.g., reciting BODMAS) to conceptual understanding of structural grouping, using goal-oriented estimation, systematic bracket testing, and parse trees to build mathematical reasoning.

Inserting Brackets to Make Equations True

Test Every Spot

Target Practice with Subtraction