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 two people apply for an automotive technician job: one has top certifications and great experience, while the other is the manager's friend with zero training.

When hiring decisions ignore skill and effort, both the hardest-working candidates and the business lose out.

How do fair workplaces ensure that effort and ability decide who gets ahead?

In a **meritocracy**, rewards like hiring, raises, and promotions are based entirely on your abilities, job performance, and work ethic.

**Equal opportunity** means every person has the exact same fair chance to compete for those rewards, free from unlawful bias.

<!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>Equal Opportunity Principle</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
    }

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

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

    /* Toggle controls */
    .toggle-row {
      display: flex;
      background: #e9ecef;
      border-radius: 12px;
      padding: 4px;
      gap: 4px;
    }

    .toggle-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    }

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

    /* Track stage */
    .track-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 20px 16px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .target-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 12px;
      border-bottom: 2px dashed #e6e6e6;
    }

    .badge-label {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .badge-rule {
      font-size: 13px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      transition: background 0.3s, color 0.3s;
    }

    .bias-state .badge-rule {
      background: #fee2e2;
      color: #b91c1c;
    }

    .equal-state .badge-rule {
      background: #dbeafe;
      color: #1d4ed8;
    }

    /* Lanes */
    .lanes {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
    }

    .lane {
      position: relative;
      height: 48px;
      background: #f8fafc;
      border-radius: 24px;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      padding: 0 10px;
    }

    /* Finish goal icon */
    .goal-icon {
      position: absolute;
      right: 12px;
      font-size: 20px;
      opacity: 0.9;
    }

    /* Runner item */
    .runner {
      position: absolute;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 2;
    }

    /* Obstacle Barrier */
    .barrier {
      position: absolute;
      width: 6px;
      height: 34px;
      background: #ef4444;
      border-radius: 3px;
      left: 52%;
      z-index: 1;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Equal start line marker */
    .start-line {
      position: absolute;
      top: -6px;
      bottom: -6px;
      left: 14px;
      width: 2px;
      background: #22b7ff;
      border-radius: 1px;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 0;
    }

    /* Dynamic positions per mode */
    /* BIAS MODE */
    .bias-state .runner-1 { left: 45%; }
    .bias-state .runner-2 { left: 16%; }
    .bias-state .runner-3 { left: 6%; }
    .bias-state .barrier { opacity: 1; transform: scaleY(1); }
    .bias-state .start-line { opacity: 0; }

    /* EQUAL MODE */
    .equal-state .runner-1 { left: 14px; }
    .equal-state .runner-2 { left: 14px; }
    .equal-state .runner-3 { left: 14px; }
    .equal-state .barrier { opacity: 0; transform: scaleY(0); }
    .equal-state .start-line { opacity: 1; }

    /* Key evaluation metric banner */
    .eval-box {
      background: #f1f5f9;
      border-radius: 8px;
      padding: 10px;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .eval-box span {
      color: #22b7ff;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="toggle-row">
      <button class="toggle-btn" id="btnBias" onclick="setMode(false)">
        <span>🚫</span> With Bias
      </button>
      <button class="toggle-btn active" id="btnEqual" onclick="setMode(true)">
        <span>⚖️</span> Equal Opportunity
      </button>
    </div>

    
    <div class="track-card equal-state" id="stage">
      <div class="target-header">
        <div class="badge-label">
          <span>🏁</span> Opportunity
        </div>
        <div class="badge-rule" id="statusLabel">
          Fair Starting Line
        </div>
      </div>

      <div class="lanes">
        <div class="start-line"></div>

        
        <div class="lane">
          <div class="runner runner-1" title="Candidate A">👩🏽</div>
          <div class="barrier" style="display:none;"></div>
          <div class="goal-icon">🏆</div>
        </div>

        
        <div class="lane">
          <div class="runner runner-2" title="Candidate B">👨🏻</div>
          <div class="barrier"></div>
          <div class="goal-icon">🏆</div>
        </div>

        
        <div class="lane">
          <div class="runner runner-3" title="Candidate C">👩🏼‍🦽</div>
          <div class="barrier"></div>
          <div class="goal-icon">🏆</div>
        </div>
      </div>

      <div class="eval-box" id="evalText">
        Judged only by: <span>Skills & Merit</span> ⭐
      </div>
    </div>
  </div>

  <script>
    function setMode(isEqual) {
      const stage = document.getElementById('stage');
      const btnBias = document.getElementById('btnBias');
      const btnEqual = document.getElementById('btnEqual');
      const statusLabel = document.getElementById('statusLabel');
      const evalText = document.getElementById('evalText');

      if (isEqual) {
        stage.className = 'track-card equal-state';
        btnEqual.classList.add('active');
        btnBias.classList.remove('active');
        statusLabel.textContent = 'Fair Starting Line';
        evalText.innerHTML = 'Judged only by: <span>Skills & Merit</span> ⭐';
      } else {
        stage.className = 'track-card bias-state';
        btnBias.classList.add('active');
        btnEqual.classList.remove('active');
        statusLabel.textContent = 'Unfair Barriers';
        evalText.innerHTML = 'Blocked by: <span style="color:#ef4444;">Unlawful Bias</span> 🛑';
      }
    }
  </script>
</body>
</html>

What laws make sure employers follow these fair principles in the real world?

In 1964, Congress passed **Title VII of the Civil Rights Act** to ban employment discrimination based on race, color, religion, sex, or national origin.

Additional federal laws expanded protections, including the **Equal Pay Act** of 1963 (equal pay for equal work) and the **Age Discrimination in Employment Act** of 1967 (ADEA; protecting workers aged 40 and older).

The **Americans with Disabilities Act** requires reasonable accommodations for qualified individuals with disabilities, while the **Genetic Information Nondiscrimination Act** bars bias based on genetic data.

Later statutes include the Americans with **Disabilities Act** of 1990 (ADA; requiring reasonable accommodations for qualified individuals) and the **Genetic Information Nondiscrimination Act** of 2008 (GINA).

<!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, Helvetica, Arial, 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;
  }

  .nav-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    width: 100%;
    max-width: 440px;
  }

  .nav-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #4b5563;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }

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

  .candidates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 440px;
    margin-bottom: 14px;
  }

  .candidate-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 2px solid #e5e7eb;
    transition: border-color 0.3s, box-shadow 0.3s;
    position: relative;
  }

  .avatar {
    font-size: 38px;
    line-height: 1;
    margin-bottom: 6px;
  }

  .cand-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .badge-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }

  .qual-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 6px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .qual-badge.good {
    background: #ecfdf5;
    color: #059669;
  }

  .qual-badge.poor {
    background: #fef2f2;
    color: #dc2626;
  }

  .status-tag {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    transition: all 0.3s;
  }

  .card-hired {
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
  }

  .card-hired .status-tag {
    background: #10b981;
    color: #ffffff;
  }

  .card-rejected {
    border-color: #e5e7eb;
    opacity: 0.55;
  }

  .card-rejected .status-tag {
    background: #f3f4f6;
    color: #9ca3af;
  }

  .card-violation {
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  }

  .card-violation .status-tag {
    background: #f59e0b;
    color: #ffffff;
  }

  .outcome-banner {
    width: 100%;
    max-width: 440px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.3s, color 0.3s;
  }

  .outcome-lawful {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
  }

  .outcome-unlawful {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
  }
</style>
</head>
<body>

  <div class="nav-bar">
    <button class="nav-btn active" id="btnMerit" onclick="setMode('merit')">
      <span>⚖️</span> Merit Decision
    </button>
    <button class="nav-btn" id="btnBias" onclick="setMode('bias')">
      <span>⚠️</span> Favoritism Bias
    </button>
  </div>

  <div class="candidates-grid">
    
    <div class="candidate-card card-hired" id="cardA">
      <div class="avatar">👩‍🔧</div>
      <div class="cand-name">Candidate A</div>
      <div class="badge-list">
        <div class="qual-badge good">📜 Certified</div>
        <div class="qual-badge good">⭐ Experienced</div>
      </div>
      <div class="status-tag" id="tagA">Hired ✓</div>
    </div>

    
    <div class="candidate-card card-rejected" id="cardB">
      <div class="avatar">👤</div>
      <div class="cand-name">Candidate B</div>
      <div class="badge-list">
        <div class="qual-badge poor">✕ No Training</div>
        <div class="qual-badge">🤝 Friend</div>
      </div>
      <div class="status-tag" id="tagB">—</div>
    </div>
  </div>

  <div class="outcome-banner outcome-lawful" id="outcomeBanner">
    <span>⚖️</span> Lawful EEO Principle
  </div>

  <script>
    function setMode(mode) {
      const btnMerit = document.getElementById('btnMerit');
      const btnBias = document.getElementById('btnBias');
      const cardA = document.getElementById('cardA');
      const cardB = document.getElementById('cardB');
      const tagA = document.getElementById('tagA');
      const tagB = document.getElementById('tagB');
      const banner = document.getElementById('outcomeBanner');

      if (mode === 'merit') {
        btnMerit.classList.add('active');
        btnBias.classList.remove('active');

        cardA.className = 'candidate-card card-hired';
        tagA.textContent = 'Hired ✓';

        cardB.className = 'candidate-card card-rejected';
        tagB.textContent = '—';

        banner.className = 'outcome-banner outcome-lawful';
        banner.innerHTML = '<span>⚖️</span> Lawful EEO Principle';
      } else {
        btnBias.classList.add('active');
        btnMerit.classList.remove('active');

        cardA.className = 'candidate-card card-rejected';
        tagA.textContent = '—';

        cardB.className = 'candidate-card card-violation';
        tagB.textContent = 'Hired ⚠️';

        banner.className = 'outcome-banner outcome-unlawful';
        banner.innerHTML = '<span>⚠️</span> Equal Opportunity Violation';
      }
    }
  </script>
</body>
</html>

**The Equal Employment Opportunity Commission** (EEOC) is the federal administrative agency responsible for enforcing federal anti-discrimination laws, investigating charges of discrimination, and mediating workplace disputes.

How do these legal protections look when applied to a real workplace decision?

Consider a manufacturing company hiring a lead welder between two applicants with very different qualifications.

<!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>Equal Opportunity Principles</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;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .toggle-group {
      display: flex;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 24px;
      gap: 4px;
      margin-bottom: 20px;
    }
    .toggle-btn {
      border: none;
      background: transparent;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      color: #64748b;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .toggle-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
    .candidates-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 500px;
      margin-bottom: 16px;
    }
    .candidate-tile {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      border: 2px solid transparent;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .candidate-tile.selected {
      border-color: #22b7ff;
      box-shadow: 0 4px 16px rgba(34, 183, 255, 0.2);
    }
    .candidate-tile.selected-error {
      border-color: #ef4444;
      box-shadow: 0 4px 16px rgba(239, 68, 68, 0.18);
    }
    .avatar {
      font-size: 38px;
      margin-bottom: 8px;
    }
    .title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .metrics {
      font-size: 13px;
      color: #64748b;
      line-height: 1.5;
    }
    .outcome-box {
      width: 100%;
      max-width: 500px;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 13px;
    }
    .status-valid {
      background: #dcfce7;
      color: #15803d;
    }
    .status-invalid {
      background: #fee2e2;
      color: #b91c1c;
    }
  </style>
</head>
<body>

  <div class="toggle-group">
    <button class="toggle-btn active" id="btnEeo" onclick="setMode('eeo')">⚖️ EEO Merit</button>
    <button class="toggle-btn" id="btnBias" onclick="setMode('bias')">🚫 Favoritism</button>
  </div>

  <div class="candidates-grid">
    <div class="candidate-tile selected" id="tile1">
      <div class="avatar">👨‍🔧</div>
      <div class="title">Candidate A</div>
      <div class="metrics">
        📜 Certified<br>
        ⭐ 5 Yrs Exp
      </div>
    </div>

    <div class="candidate-tile" id="tile2">
      <div class="avatar">🤝</div>
      <div class="title">Candidate B</div>
      <div class="metrics">
        ❌ No Certs<br>
        👥 Friend
      </div>
    </div>
  </div>

  <div class="outcome-box" id="outcome">
    <span>Hired: <strong>Candidate A</strong></span>
    <span class="status-badge status-valid">✓ Merit-Based</span>
  </div>

  <script>
    function setMode(mode) {
      const btnEeo = document.getElementById('btnEeo');
      const btnBias = document.getElementById('btnBias');
      const tile1 = document.getElementById('tile1');
      const tile2 = document.getElementById('tile2');
      const outcome = document.getElementById('outcome');

      if (mode === 'eeo') {
        btnEeo.classList.add('active');
        btnBias.classList.remove('active');
        
        tile1.className = 'candidate-tile selected';
        tile2.className = 'candidate-tile';

        outcome.innerHTML = '<span>Hired: <strong>Candidate A</strong></span><span class="status-badge status-valid">✓ Merit-Based</span>';
      } else {
        btnBias.classList.add('active');
        btnEeo.classList.remove('active');

        tile1.className = 'candidate-tile';
        tile2.className = 'candidate-tile selected-error';

        outcome.innerHTML = '<span>Hired: <strong>Candidate B</strong></span><span class="status-badge status-invalid">⚠️ Unlawful Bias</span>';
      }
    }
  </script>
</body>
</html>

A common mistake is thinking equal opportunity guarantees everyone the exact same outcome or promotion.

In reality, equal opportunity guarantees a **fair process** at the starting line, while your **work ethic** and results determine how far you go.

When you step into your next job interview, your proven skills and reliable habits are your strongest competitive advantage.

career

Equal Opportunity Laws and Principles. Explain equal opportunity principles and identify key protections under U.S. employment law.

EEOC Youth@Work Educational Curriculum & Video Modules

The Civil Rights Act of 1964 and the Equal Employment Opportunity Commission

Equality, Opportunity, and the Civil Rights Act in the American Workplace

When teaching 9th-grade CTE/Career Readiness students (aligned with TEKS 127.15), emphasize the connection between personal career agency (hard work, skill development, and ethics) and structural legal protections (EEO laws). Use case-based reasoning and role-playing where students act as HR investigators analyzing realistic scenarios. Clarify the boundary between poor management/unfairness and legally actionable discrimination to build critical workplace literacy.

Equal Opportunity Laws and Principles

Equal Opportunity and Meritocracy

Key Federal Protections