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 asking a friend: "Do you want yummy sweet strawberries, or yucky green beans?"

That is not fair! You pushed them to pick strawberries before they even had a chance to think.

<!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>Biased vs Fair Survey Questions</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Tabs */
    .tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .tab-btn {
      padding: 10px 12px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 10px;
      border: 2px solid transparent;
      background: #eef2f6;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .tab-btn:hover {
      background: #e2e8f0;
    }

    .tab-btn.active-biased {
      background: #fef2f2;
      color: #dc2626;
      border-color: #fca5a5;
    }

    .tab-btn.active-fair {
      background: #f0fdf4;
      color: #16a34a;
      border-color: #86efac;
    }

    /* Main Display Area */
    .display-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .question-badge {
      font-size: 15px;
      font-weight: 600;
      line-height: 1.35;
      padding: 10px 12px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      text-align: center;
    }

    .highlight-lead {
      color: #dc2626;
      font-weight: 700;
      text-decoration: underline wavy #fca5a5;
    }

    /* Scale Illustration */
    .scale-wrapper {
      position: relative;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .scale-svg {
      width: 100%;
      max-width: 280px;
      height: 90px;
      overflow: visible;
    }

    .beam {
      transform-origin: 140px 42px;
      transition: transform 0.4s ease;
    }

    .beam.tilted {
      transform: rotate(11deg);
    }

    .beam.balanced {
      transform: rotate(0deg);
    }

    .pan-left, .pan-right {
      transition: transform 0.4s ease;
    }

    .tilted .pan-left {
      transform: translateY(-8px);
    }

    .tilted .pan-right {
      transform: translateY(8px);
    }

    .balanced .pan-left,
    .balanced .pan-right {
      transform: translateY(0);
    }

    /* Results comparison */
    .bars-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-top: 4px;
    }

    .bar-row {
      display: grid;
      grid-template-columns: 36px 1fr 40px;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 500;
    }

    .bar-track {
      background: #f1f5f9;
      height: 22px;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
    }

    .bar-fill {
      height: 100%;
      border-radius: 6px;
      transition: width 0.4s ease, background-color 0.3s;
    }

    .fill-strawberry {
      background: #f87171;
    }

    .fill-other {
      background: #94a3b8;
    }

    .bar-count {
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      color: #475569;
    }

    /* Status Label */
    .status-tag {
      align-self: center;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .status-biased {
      background: #fee2e2;
      color: #b91c1c;
    }

    .status-fair {
      background: #dcfce7;
      color: #15803d;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="tabs">
      <button class="tab-btn active-biased" id="btnBiased" type="button">
        ⚠️ Biased Question
      </button>
      <button class="tab-btn" id="btnFair" type="button">
        ⚖️ Fair Question
      </button>
    </div>

    <div class="display-box">
      <div class="status-tag status-biased" id="statusBadge">
        ⚠️ Unbalanced (Pushed)
      </div>

      <div class="question-badge" id="questionText">
        "<span class="highlight-lead">Since sweet strawberries are best</span>, what fruit do you like?"
      </div>

      <div class="scale-wrapper">
        <svg class="scale-svg" viewBox="0 0 280 90" aria-hidden="true">
          
          <polygon points="140,42 124,80 156,80" fill="#cbd5e1" stroke="#94a3b8" stroke-width="2" stroke-linejoin="round"/>
          <circle cx="140" cy="42" r="5" fill="#475569" />

          
          <g id="scaleBeam" class="beam tilted">
            
            <line x1="30" y1="42" x2="250" y2="42" stroke="#475569" stroke-width="4" stroke-linecap="round"/>

            
            <g class="pan-left">
              <line x1="50" y1="42" x2="50" y2="60" stroke="#94a3b8" stroke-width="2"/>
              <ellipse cx="50" cy="62" rx="24" ry="6" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>
              <text x="50" y="55" font-size="16" text-anchor="middle">🍏</text>
            </g>

            
            <g class="pan-right">
              <line x1="230" y1="42" x2="230" y2="60" stroke="#94a3b8" stroke-width="2"/>
              <ellipse cx="230" cy="62" rx="24" ry="6" fill="#fee2e2" stroke="#fca5a5" stroke-width="2"/>
              <text x="230" y="55" font-size="20" text-anchor="middle" id="strawberryIcons">🍓🍓</text>
            </g>
          </g>
        </svg>
      </div>

      <div class="bars-container">
        <div class="bar-row">
          <span style="font-size: 18px;">🍓</span>
          <div class="bar-track">
            <div class="bar-fill fill-strawberry" id="barStrawberry" style="width: 85%;"></div>
          </div>
          <span class="bar-count" id="countStrawberry">85%</span>
        </div>

        <div class="bar-row">
          <span style="font-size: 18px;">🍏</span>
          <div class="bar-track">
            <div class="bar-fill fill-other" id="barOther" style="width: 15%;"></div>
          </div>
          <span class="bar-count" id="countOther">15%</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    const btnBiased = document.getElementById('btnBiased');
    const btnFair = document.getElementById('btnFair');
    const questionText = document.getElementById('questionText');
    const statusBadge = document.getElementById('statusBadge');
    const scaleBeam = document.getElementById('scaleBeam');
    const barStrawberry = document.getElementById('barStrawberry');
    const barOther = document.getElementById('barOther');
    const countStrawberry = document.getElementById('countStrawberry');
    const countOther = document.getElementById('countOther');
    const strawberryIcons = document.getElementById('strawberryIcons');

    function showBiased() {
      btnBiased.className = 'tab-btn active-biased';
      btnFair.className = 'tab-btn';

      statusBadge.className = 'status-tag status-biased';
      statusBadge.textContent = '⚠️ Unbalanced (Pushed)';

      questionText.innerHTML = '"<span class="highlight-lead">Since sweet strawberries are best</span>, what fruit do you like?"';

      scaleBeam.className = 'beam tilted';
      strawberryIcons.textContent = '🍓🍓';

      barStrawberry.style.width = '85%';
      countStrawberry.textContent = '85%';

      barOther.style.width = '15%';
      countOther.textContent = '15%';
    }

    function showFair() {
      btnFair.className = 'tab-btn active-fair';
      btnBiased.className = 'tab-btn';

      statusBadge.className = 'status-tag status-fair';
      statusBadge.textContent = '⚖️ Balanced (Fair)';

      questionText.innerHTML = '"What is your favourite fruit?"';

      scaleBeam.className = 'beam balanced';
      strawberryIcons.textContent = '🍓';

      barStrawberry.style.width = '50%';
      countStrawberry.textContent = '50%';

      barOther.style.width = '50%';
      countOther.textContent = '50%';
    }

    btnBiased.addEventListener('click', showBiased);
    btnFair.addEventListener('click', showFair);
  </script>
</body>
</html>

A **survey** is a list of questions we ask people to find out what they think or like.

A good survey must be **fair**, which means it does not tilt the answer toward one side.

What happens when a question tries to nudge you toward an answer?

A **leading question** tries to lead you to one special answer, like giving a big hint.

If you ask, "Don't you agree that dogs are the cutest pets?", you are telling them to say yes.

<!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>Identifying Survey Bias</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -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;
    }
    .main-container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    /* Switch tabs */
    .tab-bar {
      display: flex;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 12px;
      gap: 4px;
    }
    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 10px 8px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.25s, color 0.25s, box-shadow 0.25s;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    /* Question card */
    .question-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      text-align: center;
      transition: border-color 0.3s, background 0.3s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .question-card.biased {
      border-color: #f59e0b;
      background: #fffbeb;
    }
    .question-card.fair {
      border-color: #22b7ff;
      background: #f0f9ff;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 10px;
      border-radius: 20px;
    }
    .badge-biased {
      background: #fde68a;
      color: #92400e;
    }
    .badge-fair {
      background: #bae6fd;
      color: #0369a1;
    }
    .q-text {
      font-size: 17px;
      font-weight: 700;
      line-height: 1.3;
      color: #1e2945;
    }
    /* Results Visual */
    .results-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .bar-row {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 32px;
    }
    .pet-icon {
      font-size: 22px;
      width: 30px;
      text-align: center;
      flex-shrink: 0;
    }
    .bar-track {
      flex: 1;
      height: 20px;
      background: #f1f5f9;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }
    .bar-fill {
      height: 100%;
      border-radius: 10px;
      transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
    }
    .bar-val {
      font-size: 13px;
      font-weight: 700;
      width: 38px;
      text-align: right;
      color: #475569;
      flex-shrink: 0;
    }
    /* Scale status */
    .scale-indicator {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      padding-top: 4px;
      border-top: 1px dashed #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="main-container">
    
    <div class="tab-bar">
      <button class="tab-btn active" id="btnBiased">⚠️ Biased Question</button>
      <button class="tab-btn" id="btnFair">⚖️ Fair Question</button>
    </div>

    
    <div class="question-card biased" id="qCard">
      <span class="badge badge-biased" id="qBadge">⚠️ Leading</span>
      <div class="q-text" id="qText">"Don't you agree dogs are the cutest pets?"</div>
    </div>

    
    <div class="results-card">
      <div class="bar-row">
        <span class="pet-icon">🐶</span>
        <div class="bar-track">
          <div class="bar-fill" id="fillDog" style="width: 88%; background: #f59e0b;"></div>
        </div>
        <span class="bar-val" id="valDog">88%</span>
      </div>

      <div class="bar-row">
        <span class="pet-icon">🐱</span>
        <div class="bar-track">
          <div class="bar-fill" id="fillCat" style="width: 6%; background: #cbd5e1;"></div>
        </div>
        <span class="bar-val" id="valCat">6%</span>
      </div>

      <div class="bar-row">
        <span class="pet-icon">🐰</span>
        <div class="bar-track">
          <div class="bar-fill" id="fillRabbit" style="width: 4%; background: #cbd5e1;"></div>
        </div>
        <span class="bar-val" id="valRabbit">4%</span>
      </div>

      <div class="bar-row">
        <span class="pet-icon">🦜</span>
        <div class="bar-track">
          <div class="bar-fill" id="fillBird" style="width: 2%; background: #cbd5e1;"></div>
        </div>
        <span class="bar-val" id="valBird">2%</span>
      </div>

      <div class="scale-indicator" id="scaleStatus">
        <span>⚠️ Skewed Results (Pushed toward Dog)</span>
      </div>
    </div>
  </div>

  <script>
    const btnBiased = document.getElementById('btnBiased');
    const btnFair = document.getElementById('btnFair');
    const qCard = document.getElementById('qCard');
    const qBadge = document.getElementById('qBadge');
    const qText = document.getElementById('qText');
    const fillDog = document.getElementById('fillDog');
    const fillCat = document.getElementById('fillCat');
    const fillRabbit = document.getElementById('fillRabbit');
    const fillBird = document.getElementById('fillBird');
    const valDog = document.getElementById('valDog');
    const valCat = document.getElementById('valCat');
    const valRabbit = document.getElementById('valRabbit');
    const valBird = document.getElementById('valBird');
    const scaleStatus = document.getElementById('scaleStatus');

    function showBiased() {
      btnBiased.classList.add('active');
      btnFair.classList.remove('active');

      qCard.className = 'question-card biased';
      qBadge.className = 'badge badge-biased';
      qBadge.textContent = '⚠️ Leading';
      qText.textContent = '"Don\'t you agree dogs are the cutest pets?"';

      fillDog.style.width = '88%';
      fillDog.style.background = '#f59e0b';
      valDog.textContent = '88%';

      fillCat.style.width = '6%';
      fillCat.style.background = '#cbd5e1';
      valCat.textContent = '6%';

      fillRabbit.style.width = '4%';
      fillRabbit.style.background = '#cbd5e1';
      valRabbit.textContent = '4%';

      fillBird.style.width = '2%';
      fillBird.style.background = '#cbd5e1';
      valBird.textContent = '2%';

      scaleStatus.innerHTML = '<span>⚠️ Skewed Results (Pushed toward Dog)</span>';
    }

    function showFair() {
      btnFair.classList.add('active');
      btnBiased.classList.remove('active');

      qCard.className = 'question-card fair';
      qBadge.className = 'badge badge-fair';
      qBadge.textContent = '⚖️ Neutral';
      qText.textContent = '"What is your favorite pet?"';

      fillDog.style.width = '38%';
      fillDog.style.background = '#22b7ff';
      valDog.textContent = '38%';

      fillCat.style.width = '32%';
      fillCat.style.background = '#22b7ff';
      valCat.textContent = '32%';

      fillRabbit.style.width = '18%';
      fillRabbit.style.background = '#22b7ff';
      valRabbit.textContent = '18%';

      fillBird.style.width = '12%';
      fillBird.style.background = '#22b7ff';
      valBird.textContent = '12%';

      scaleStatus.innerHTML = '<span>⚖️ Balanced Results (True Opinions)</span>';
    }

    btnBiased.addEventListener('click', showBiased);
    btnFair.addEventListener('click', showFair);
  </script>
</body>
</html>

To make it fair, simply ask: "What is your favorite pet?" and let them choose.

Can using strong words also trick our answers?

**Loaded words** are words packed with big feelings, like "boring", "gross", or "amazing".

When we put loaded words in a question, it makes one choice sound super good and another sound bad.

<!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;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    min-height: 100%;
    user-select: none;
  }

  .toggle-bar {
    display: flex;
    gap: 8px;
    background: #e9ecef;
    padding: 4px;
    border-radius: 24px;
  }

  .toggle-btn {
    border: none;
    background: transparent;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .toggle-btn.active {
    background: #ffffff;
    color: #1e2945;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  .scale-stage {
    width: 100%;
    max-width: 360px;
    height: 240px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px 0;
  }

  .fulcrum {
    position: absolute;
    bottom: 24px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 50px solid #64748b;
    z-index: 1;
  }

  .stand-pole {
    position: absolute;
    bottom: 70px;
    width: 8px;
    height: 70px;
    background: #64748b;
    border-radius: 4px;
    z-index: 1;
  }

  .pivot-dot {
    position: absolute;
    top: 96px;
    width: 14px;
    height: 14px;
    background: #1e2945;
    border-radius: 50%;
    z-index: 4;
  }

  .beam-assembly {
    position: absolute;
    top: 102px;
    width: 280px;
    height: 2px;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center;
    z-index: 2;
  }

  .beam {
    width: 100%;
    height: 6px;
    background: #334155;
    border-radius: 3px;
    position: absolute;
    top: -3px;
  }

  .pan-hanger {
    position: absolute;
    top: 3px;
    width: 110px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .hanger-left { left: -15px; }
  .hanger-right { right: -15px; }

  .strings {
    width: 70px;
    height: 45px;
    border-left: 2px solid #94a3b8;
    border-right: 2px solid #94a3b8;
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    background: transparent;
  }

  .pan {
    width: 84px;
    height: 12px;
    background: #475569;
    border-radius: 0 0 12px 12px;
    display: flex;
    justify-content: center;
    position: relative;
  }

  .weight {
    position: absolute;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.5s ease;
  }

  .weight-dislike {
    background: #fee2e2;
    color: #dc2626;
    border: 2px solid #f87171;
    width: 76px;
    height: 38px;
  }

  .weight-like {
    background: #e0f2fe;
    color: #0284c7;
    border: 2px solid #38bdf8;
    width: 60px;
    height: 32px;
  }

  .loaded-extra {
    position: absolute;
    top: -32px;
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.4s ease;
  }

  /* Biased state transforms */
  .state-biased .beam-assembly {
    transform: rotate(-14deg);
  }
  .state-biased .hanger-left {
    transform: rotate(14deg);
  }
  .state-biased .hanger-right {
    transform: rotate(14deg);
  }
  .state-biased .weight-dislike {
    transform: scale(1.18);
    background: #fecaca;
  }
  .state-biased .loaded-extra {
    opacity: 1;
    transform: translateY(0);
  }

  /* Fair state */
  .state-fair .beam-assembly {
    transform: rotate(0deg);
  }
  .state-fair .hanger-left {
    transform: rotate(0deg);
  }
  .state-fair .hanger-right {
    transform: rotate(0deg);
  }
  .state-fair .weight-dislike {
    width: 60px;
    height: 32px;
  }

  .status-badge {
    font-size: 14px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .badge-biased {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
  }

  .badge-fair {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
  }
</style>
</head>
<body>

  <div class="toggle-bar">
    <button class="toggle-btn active" id="btnBiased" onclick="setMode('biased')">⚠️ Loaded</button>
    <button class="toggle-btn" id="btnFair" onclick="setMode('fair')">⚖️ Fair</button>
  </div>

  <div class="scale-stage state-biased" id="stage">
    <div class="stand-pole"></div>
    <div class="fulcrum"></div>
    <div class="pivot-dot"></div>

    <div class="beam-assembly">
      <div class="beam"></div>

      
      <div class="pan-hanger hanger-left">
        <div class="weight weight-dislike">
          <div class="loaded-extra">"boring"</div>
          👎 Dislike
        </div>
        <div class="strings"></div>
        <div class="pan"></div>
      </div>

      
      <div class="pan-hanger hanger-right">
        <div class="weight weight-like">
          👍 Like
        </div>
        <div class="strings"></div>
        <div class="pan"></div>
      </div>
    </div>
  </div>

  <div id="statusBadge" class="status-badge badge-biased">
    ⚠️ Tilted Results
  </div>

<script>
  function setMode(mode) {
    const stage = document.getElementById('stage');
    const badge = document.getElementById('statusBadge');
    const btnBiased = document.getElementById('btnBiased');
    const btnFair = document.getElementById('btnFair');

    if (mode === 'biased') {
      stage.className = 'scale-stage state-biased';
      btnBiased.classList.add('active');
      btnFair.classList.remove('active');
      badge.className = 'status-badge badge-biased';
      badge.innerHTML = '⚠️ Tilted Results';
    } else {
      stage.className = 'scale-stage state-fair';
      btnFair.classList.add('active');
      btnBiased.classList.remove('active');
      badge.className = 'status-badge badge-fair';
      badge.innerHTML = '⚖️ Balanced & Fair';
    }
  }
</script>
</body>
</html>

Instead of asking "Do you dislike boring rainy days?", a fair question asks, "How do you feel about rainy days?"

What if the question is okay, but the answer choices mix people up?

**Confusing choices** happen when answer options overlap, make no sense, or leave out the real answer.

If you ask "What color is your shirt?" and the choices are "Red", "Blue", and "Pizza", nobody knows what to pick!

<!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>Survey Options Bias</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
  }
  .controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }
  .tab-btn {
    border: none;
    background: #e2e8f0;
    color: #475569;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
  }
  .tab-btn.active {
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
  }
  .survey-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    width: 100%;
    max-width: 380px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .q-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
  }
  .q-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .respondent {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 4px 8px;
    border-radius: 8px;
    color: #64748b;
  }
  .options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .opt-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    transition: all 0.2s ease;
  }
  .opt-btn.flawed-item {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
    animation: pulseWarn 1.8s infinite;
  }
  .opt-btn.valid-match {
    border-color: #86efac;
    background: #f0fdf4;
    color: #15803d;
  }
  @keyframes pulseWarn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2); }
  }
  .outcome-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.3s ease, color 0.3s ease;
  }
  .outcome-bad {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fee2e2;
  }
  .outcome-good {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #dcfce7;
  }
  .reaction-emoji {
    font-size: 24px;
    line-height: 1;
  }
</style>
</head>
<body>

<div class="controls">
  <button class="tab-btn active" id="btnFlawed" onclick="setState('flawed')">⚠️ Flawed</button>
  <button class="tab-btn" id="btnValid" onclick="setState('valid')">✓ Clear</button>
</div>

<div class="survey-card">
  <div class="q-header">
    <div class="q-title">👕 Shirt Color?</div>
    <div class="respondent">
      <span>Target:</span>
      <span style="font-size:16px;">🟢</span>
      <strong style="color:#0f172a;">Green</strong>
    </div>
  </div>

  <div class="options-grid" id="optionsContainer">
    
  </div>

  <div class="outcome-box outcome-bad" id="outcomeBox">
    <span class="reaction-emoji" id="reactionIcon">🤔</span>
    <span id="outcomeText">Irrelevant choices create bias & confusion!</span>
  </div>
</div>

<script>
  const states = {
    flawed: {
      options: [
        { label: 'Red', icon: '🔴', status: 'normal' },
        { label: 'Blue', icon: '🔵', status: 'normal' },
        { label: 'Pizza', icon: '🍕', status: 'flawed' },
        { label: 'None', icon: '⚪', status: 'normal' }
      ],
      isGood: false,
      emoji: '🤔',
      msg: 'No valid option for green shirts!'
    },
    valid: {
      options: [
        { label: 'Red', icon: '🔴', status: 'normal' },
        { label: 'Blue', icon: '🔵', status: 'normal' },
        { label: 'Green', icon: '🟢', status: 'match' },
        { label: 'Other', icon: '⚪', status: 'normal' }
      ],
      isGood: true,
      emoji: '✓',
      msg: 'Clear, exhaustive & unbiased choices!'
    }
  };

  function setState(type) {
    document.getElementById('btnFlawed').classList.toggle('active', type === 'flawed');
    document.getElementById('btnValid').classList.toggle('active', type === 'valid');

    const data = states[type];
    const container = document.getElementById('optionsContainer');
    container.innerHTML = '';

    data.options.forEach(opt => {
      const div = document.createElement('div');
      div.className = 'opt-btn';
      if (opt.status === 'flawed') div.classList.add('flawed-item');
      if (opt.status === 'match') div.classList.add('valid-match');
      div.innerHTML = `<span>${opt.label}</span> <span>${opt.icon}</span>`;
      container.appendChild(div);
    });

    const box = document.getElementById('outcomeBox');
    box.className = 'outcome-box ' + (data.isGood ? 'outcome-good' : 'outcome-bad');
    document.getElementById('reactionIcon').textContent = data.emoji;
    document.getElementById('outcomeText').textContent = data.msg;
  }

  // Initialize
  setState('flawed');
</script>

</body>
</html>

Good survey choices should be clear, separate, and easy to understand.

Next time you ask your class a question, check: is it fair, calm, and easy to answer?

math

Identifying Sources of Bias in Survey Questions. Identify leading questions, emotionally charged language, and confusing options that bias survey responses.

Third Level Maths: Questionnaires, Surveys and Avoiding Bias (MTH 3-20b)

Biased Questioning and Questionnaire Design

Bias in Surveys and Question Phrasing

When addressing Curriculum for Excellence benchmark MTH 3-20b, emphasize the practical data-detective approach: have learners act as 'survey editors' who audit questions from newspapers, school surveys, and adverts. Scaffold learning by first training students to spot overtly loaded adjectives, then moving to subtle structural traps such as overlapping numerical intervals and double-barrelled constructions, before challenging them to redraft flawed questions into objective, fair instruments.

Identifying Sources of Bias in Survey Questions

Leading Questions

Loaded Words