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

If you traveled back to 1650 Boston and tried to start your own church, you would be arrested, fined, and possibly banished into the wilderness.

While many early settlers crossed the Atlantic to escape religious punishment in Europe, most did not believe in **religious freedom** for anyone outside their own faith.

So how did a collection of strict, intolerant colonies gradually transform into a nation with freedom of religion?

## Mandatory Uniformity: Massachusetts Bay

The **Puritans** settled Massachusetts Bay in 1630 to build a strict, pure community based strictly on their own Bible interpretations. In their colony, government leaders and church ministers worked together to punish anyone who disagreed with official doctrine.

When leaders like **Roger Williams** argued that government should not force religious beliefs, and **Anne Hutchinson** led home Bible studies questioning ministers, the Puritan court banished both from the colony.

<!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>Banishment to Religious Freedom</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

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

    .tab-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #6b7280;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }

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

    .stage-container {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 280px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      overflow: hidden;
    }

    .scene {
      position: absolute;
      inset: 0;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease, transform 0.35s ease;
      transform: translateY(6px);
    }

    .scene.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .colony-box {
      border-radius: 10px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 2px solid transparent;
    }

    .mass-box {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .rhode-box {
      background: #e0f2fe;
      border-color: #7dd3fc;
    }

    .colony-title {
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 999px;
      letter-spacing: 0.3px;
    }

    .badge-strict {
      background: #fed7aa;
      color: #9a3412;
    }

    .badge-free {
      background: #bbf7d0;
      color: #166534;
    }

    .center-flow {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 10px 0;
    }

    .figure {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

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

    .figure-label {
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      text-align: center;
    }

    .arrow-track {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      color: #ef4444;
      font-weight: 700;
      font-size: 12px;
    }

    .arrow-track.safe {
      color: #0284c7;
    }

    .arrow-icon {
      font-size: 22px;
      line-height: 1;
    }

    .status-banner {
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      color: #475569;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 12px;
    }

    .btn-ctrl {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }

    .btn-ctrl:hover {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  
  <div class="nav-tabs">
    <button class="tab-btn active" data-step="0">1. Strict Rule</button>
    <button class="tab-btn" data-step="1">2. Banishment</button>
    <button class="tab-btn" data-step="2">3. Haven</button>
  </div>

  
  <div class="stage-container">
    
    
    <div class="scene active" id="scene-0">
      <div class="colony-box mass-box">
        <div class="colony-title">⛪ Massachusetts Bay</div>
        <span class="badge badge-strict">One Faith Enforced</span>
      </div>

      <div class="center-flow">
        <div class="figure">
          <div class="figure-avatar">📖</div>
          <div class="figure-label">Roger<br>Williams</div>
        </div>
        <div class="arrow-track">
          <span>❌</span>
          <span style="font-size: 11px;">Dissent</span>
        </div>
        <div class="figure">
          <div class="figure-avatar">🗣️</div>
          <div class="figure-label">Anne<br>Hutchinson</div>
        </div>
      </div>

      <div class="status-banner">
        Mandatory Puritan Conformity
      </div>
    </div>

    
    <div class="scene" id="scene-1">
      <div class="colony-box mass-box">
        <div class="colony-title">⚖️ Puritan Court</div>
        <span class="badge" style="background:#fee2e2; color:#b91c1c;">Cast Out</span>
      </div>

      <div class="center-flow">
        <div class="figure">
          <div class="figure-avatar">🚶‍♂️</div>
          <div class="figure-label">Banished</div>
        </div>
        <div class="arrow-track">
          <span class="arrow-icon">➔ ➔</span>
          <span style="font-size: 11px;">1635–1638</span>
        </div>
        <div class="figure">
          <div class="figure-avatar">🚶‍♀️</div>
          <div class="figure-label">Exiled</div>
        </div>
      </div>

      <div class="status-banner" style="color: #b91c1c; border-color: #fca5a5;">
        Expelled for Beliefs
      </div>
    </div>

    
    <div class="scene" id="scene-2">
      <div class="colony-box rhode-box">
        <div class="colony-title">🕊️ Rhode Island</div>
        <span class="badge badge-free">Religious Freedom</span>
      </div>

      <div class="center-flow">
        <div class="figure">
          <div class="figure-avatar">🤝</div>
          <div class="figure-label">Providence<br>Haven</div>
        </div>
        <div class="arrow-track safe">
          <span class="arrow-icon">✦</span>
          <span style="font-size: 11px;">Conscience</span>
        </div>
        <div class="figure">
          <div class="figure-avatar">📜</div>
          <div class="figure-label">Church &amp;<br>State Separated</div>
        </div>
      </div>

      <div class="status-banner" style="color: #0369a1; border-color: #bae6fd;">
        All Faiths Welcomed
      </div>
    </div>

  </div>

  
  <div class="controls">
    <button class="btn-ctrl" id="prevBtn">◀ Back</button>
    <button class="btn-ctrl" id="nextBtn">Next ▶</button>
  </div>

  <script>
    const tabs = document.querySelectorAll('.tab-btn');
    const scenes = document.querySelectorAll('.scene');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    let currentStep = 0;

    function goToStep(index) {
      currentStep = (index + tabs.length) % tabs.length;
      tabs.forEach((tab, idx) => {
        tab.classList.toggle('active', idx === currentStep);
      });
      scenes.forEach((scene, idx) => {
        scene.classList.toggle('active', idx === currentStep);
      });
    }

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        goToStep(parseInt(tab.dataset.step, 10));
      });
    });

    prevBtn.addEventListener('click', () => goToStep(currentStep - 1));
    nextBtn.addEventListener('click', () => goToStep(currentStep + 1));
  </script>
</body>
</html>

What happened to those who were cast out for their beliefs?

## The First Radical Experiment: Rhode Island

After fleeing Massachusetts in 1636, Roger Williams founded **Rhode Island** on the revolutionary idea of complete **separation of church and state**.

Williams believed forced worship offended God, so Rhode Island guaranteed full liberty of conscience to Baptists, Quakers, and Jewish settlers without requiring any church tax or mandatory attendance.

Rhode Island was tiny — could larger, wealthier colonies also make room for different faiths?

## Protected Havens: Maryland and Pennsylvania

Maryland was founded in 1634 by Lord Baltimore as a refuge for persecuted English Catholics. To prevent Protestant settlers from taking away Catholic rights, the colonial assembly passed the **Maryland Toleration Act of 1649**, protecting all Trinitarian Christians.

In 1681, Quaker leader **William Penn** launched Pennsylvania as a "Holy Experiment," guaranteeing religious freedom and fair treatment to anyone who believed in one God.

<!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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .spectrum-nav {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 440px;
      margin-bottom: 12px;
    }

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

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

    .display-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      width: 100%;
      max-width: 440px;
      padding: 16px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 1px solid #f1f5f9;
    }

    .colony-title {
      font-size: 16px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .law-badge {
      font-size: 12px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #475569;
    }

    .groups-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .group-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #fafafa;
      transition: all 0.25s ease;
    }

    .group-name {
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

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

    .allowed {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .denied {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .meter-bar {
      height: 8px;
      background: #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
      margin-top: 4px;
    }

    .meter-fill {
      height: 100%;
      background: #22b7ff;
      border-radius: 4px;
      transition: width 0.3s ease, background-color 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="spectrum-nav">
    <button class="tab-btn" onclick="selectColony(0)" id="tab0">Mass. Bay</button>
    <button class="tab-btn" onclick="selectColony(1)" id="tab1">Maryland</button>
    <button class="tab-btn active" onclick="selectColony(2)" id="tab2">Penn.</button>
  </div>

  <div class="display-card">
    <div class="header-row">
      <div class="colony-title" id="colonyName">🕊️ Pennsylvania</div>
      <div class="law-badge" id="lawLabel">Holy Experiment</div>
    </div>

    <div>
      <div class="meter-bar">
        <div class="meter-fill" id="toleranceMeter" style="width: 100%; background: #059669;"></div>
      </div>
    </div>

    <div class="groups-list">
      <div class="group-item" id="rowPuritan">
        <span class="group-name">📖 Puritans</span>
        <span class="status-badge allowed" id="statPuritan">✓ Protected</span>
      </div>

      <div class="group-item" id="rowChristian">
        <span class="group-name">✝️ Other Christians</span>
        <span class="status-badge allowed" id="statChristian">✓ Protected</span>
      </div>

      <div class="group-item" id="rowOthers">
        <span class="group-name">🌍 Non-Christians</span>
        <span class="status-badge allowed" id="statOthers">✓ Protected</span>
      </div>
    </div>
  </div>

  <script>
    const data = [
      {
        name: '⛪ Massachusetts',
        law: 'Puritan Rule',
        meter: '33%',
        meterColor: '#ef4444',
        puritans: { allowed: true, text: '✓ Protected' },
        christians: { allowed: false, text: '✕ Banished' },
        others: { allowed: false, text: '✕ Banished' }
      },
      {
        name: '📜 Maryland',
        law: 'Toleration Act',
        meter: '66%',
        meterColor: '#f59e0b',
        puritans: { allowed: true, text: '✓ Protected' },
        christians: { allowed: true, text: '✓ Protected' },
        others: { allowed: false, text: '✕ Penalized' }
      },
      {
        name: '🕊️ Pennsylvania',
        law: 'Holy Experiment',
        meter: '100%',
        meterColor: '#059669',
        puritans: { allowed: true, text: '✓ Protected' },
        christians: { allowed: true, text: '✓ Protected' },
        others: { allowed: true, text: '✓ Protected' }
      }
    ];

    function applyStatus(el, isAllowed, text) {
      el.textContent = text;
      el.className = 'status-badge ' + (isAllowed ? 'allowed' : 'denied');
    }

    function selectColony(idx) {
      [0, 1, 2].forEach(i => {
        document.getElementById('tab' + i).classList.toggle('active', i === idx);
      });

      const cur = data[idx];
      document.getElementById('colonyName').textContent = cur.name;
      document.getElementById('lawLabel').textContent = cur.law;

      const meter = document.getElementById('toleranceMeter');
      meter.style.width = cur.meter;
      meter.style.backgroundColor = cur.meterColor;

      applyStatus(document.getElementById('statPuritan'), cur.puritans.allowed, cur.puritans.text);
      applyStatus(document.getElementById('statChristian'), cur.christians.allowed, cur.christians.text);
      applyStatus(document.getElementById('statOthers'), cur.others.allowed, cur.others.text);
    }
  </script>
</body>
</html>

A common mistake is assuming the Maryland Toleration Act gave modern religious freedom to everyone. In reality, the law only protected Christian groups and still carried severe penalties for non-Christians.

These colonial experiments proved that diverse colonies could thrive peacefully, laying the direct foundation for the First Amendment more than a century later.

social-studies

Religious Freedom in Colonial America. Trace how different colonies approached religious freedom, from persecution to toleration.

Religious Liberty in Colonial America (Life, Liberty, and the Pursuit of Happiness)

Religion in Colonial America: Puritans, Quakers, and the Maryland Toleration Act

Colonial Foundations: Tracing the Growth of Religious Freedom (TEKS 8.25A Aligned Unit)

To achieve 8th-grade mastery under TEKS 113.20(b)(25)(A), instruction should emphasize historical causation and progression rather than memorization of isolated facts. Utilizing a visual spectrum of toleration enables students to distinguish between theocracy (Massachusetts Bay), limited protection (Maryland), and institutional pluralism (Pennsylvania and Rhode Island). Primary source analysis using structured excerpts (e.g., John Winthrop's 'City upon a Hill', Roger Williams' 'Bloudy Tenent of Persecution', and the 1649 Maryland Act) develops historical thinking skills and demonstrates how colonial experiences directly informed the First Amendment.