<!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, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .main-grid {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 520px;
    }
    /* Jar Visual Area */
    .jar-stage {
      position: relative;
      width: 180px;
      height: 230px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
    }
    .jar {
      position: relative;
      width: 140px;
      height: 160px;
      border: 4px solid #64748b;
      border-top: none;
      border-radius: 0 0 24px 24px;
      background: rgba(34, 183, 255, 0.08);
      box-shadow: inset 0 -8px 12px rgba(34, 183, 255, 0.15);
      display: flex;
      flex-wrap: wrap;
      align-content: flex-end;
      justify-content: center;
      gap: 6px;
      padding: 12px 10px;
    }
    .jar-lid {
      width: 100px;
      height: 14px;
      border: 4px solid #64748b;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      background: #e2e8f0;
      position: absolute;
      bottom: 160px;
    }
    .star-item {
      width: 34px;
      height: 34px;
      background: #2563eb;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffd700;
      font-size: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
      user-select: none;
      transition: transform 0.3s ease;
    }
    /* Hand & Drawn Block */
    .drawn-star {
      position: absolute;
      top: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      opacity: 0;
      transform: translateY(40px) scale(0.6);
      z-index: 10;
    }
    .drawn-star.active {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .hand-icon {
      font-size: 32px;
      margin-bottom: -6px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }
    /* Checklist Card */
    .checklist-card {
      flex: 1;
      min-width: 210px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .check-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 600;
      padding: 6px 10px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #edf2f7;
    }
    .pill {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 12px;
      font-weight: 700;
    }
    .pill-no {
      background: #f1f5f9;
      color: #64748b;
    }
    .certainty-banner {
      margin-top: 4px;
      background: #ecfdf5;
      border: 2px solid #10b981;
      border-radius: 10px;
      padding: 10px;
      text-align: center;
      color: #065f46;
      font-weight: 800;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .pick-btn {
      margin-top: 14px;
      background: #2563eb;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(37,99,235,0.3);
      transition: background 0.2s, transform 0.1s;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .pick-btn:active {
      transform: translateY(1px);
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="jar-stage">
      <div id="drawnStar" class="drawn-star active">
        <div class="hand-icon">✋</div>
        <div class="star-item">★</div>
      </div>
      <div class="jar-lid"></div>
      <div class="jar">
        <div class="star-item">★</div>
        <div class="star-item">★</div>
        <div class="star-item">★</div>
        <div class="star-item">★</div>
        <div class="star-item">★</div>
      </div>
    </div>

    
    <div class="checklist-card">
      <div class="check-row">
        <span>🔴 Red stars?</span>
        <span class="pill pill-no">No (0)</span>
      </div>
      <div class="check-row">
        <span>🟢 Green stars?</span>
        <span class="pill pill-no">No (0)</span>
      </div>
      <div class="check-row" style="border-color: #bfdbfe; background: #eff6ff;">
        <span>🔵 Blue stars?</span>
        <span class="pill" style="background:#2563eb; color:#fff;">All (5)</span>
      </div>

      <div class="certainty-banner">
        <span>✓ Blue is CERTAIN!</span>
      </div>
    </div>
  </div>

  <button id="pickBtn" class="pick-btn">
    <span>✋</span> Pick a Star
  </button>

  <script>
    const drawn = document.getElementById('drawnStar');
    const btn = document.getElementById('pickBtn');
    let busy = false;

    btn.addEventListener('click', () => {
      if (busy) return;
      busy = true;

      // Animate hand dipping down and pulling up
      drawn.classList.remove('active');
      
      setTimeout(() => {
        drawn.classList.add('active');
        busy = false;
      }, 350);
    });
  </script>
</body>
</html>

Understanding What Is Certain: Things That Must Happen

<!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;
      color: #1e2945;
      background: #fdfbf7;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 14px;
      min-height: 100%;
    }

    .grid {
      display: flex;
      flex-direction: row;
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }

    @media (max-width: 480px) {
      .grid {
        flex-direction: column;
      }
    }

    .scene-card {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 18px;
      padding: 14px 12px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      position: relative;
      user-select: none;
      transition: box-shadow 0.2s ease;
    }

    .scene-card:hover {
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.06);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #fff8e1;
      border: 1px solid #ffe082;
      color: #b78103;
      font-size: 13px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 999px;
      margin-bottom: 10px;
      letter-spacing: 0.2px;
    }

    .badge-icon {
      font-size: 13px;
    }

    .stage {
      width: 100%;
      height: 160px;
      position: relative;
      border-radius: 14px;
      overflow: hidden;
    }

    /* Sun scene */
    .sky-bg {
      background: linear-gradient(180deg, #d8f1fd 0%, #fff2d6 75%, #fce1a8 100%);
    }

    .sun {
      position: absolute;
      width: 46px;
      height: 46px;
      background: #ffb703;
      border: 3px solid #fb8500;
      border-radius: 50%;
      box-shadow: 0 0 16px rgba(251, 133, 0, 0.45);
      bottom: 22px;
      left: 18%;
      transition: transform 1.8s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .sun.risen {
      transform: translate(52px, -80px);
    }

    .sun-ray {
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 2px dashed rgba(251, 133, 0, 0.5);
    }

    .hills {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 60px;
    }

    /* Ball scene */
    .room-bg {
      background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 70%, #d1d5db 100%);
    }

    .child {
      position: absolute;
      top: 14px;
      left: 32px;
      font-size: 52px;
      line-height: 1;
      z-index: 2;
    }

    .ball {
      position: absolute;
      width: 32px;
      height: 32px;
      background: #ef4444;
      border: 2px solid #b91c1c;
      border-radius: 50%;
      box-shadow: inset -4px -4px 0 rgba(0,0,0,0.15);
      top: 50px;
      left: 92px;
      z-index: 3;
      transition: transform 1.2s cubic-bezier(0.35, 0, 0.25, 1);
    }

    .ball.dropped {
      transform: translateY(74px);
    }

    .floor-line {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 16px;
      background: #9ca3af;
      border-top: 2px solid #6b7280;
    }

    .caption {
      margin-top: 10px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
    }

    .tap-hint {
      margin-top: 10px;
      font-size: 12px;
      font-weight: 600;
      color: #6b7280;
      background: #f1f5f9;
      padding: 4px 12px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="scene-card" id="sunCard" onclick="triggerSun()">
      <div class="badge">
        <span class="badge-icon">✦</span> Certain
      </div>
      <div class="stage sky-bg">
        <svg style="position:absolute; inset:0; width:100%; height:100%; z-index:1;" viewBox="0 0 160 160">
          <path d="M 40 125 Q 75 70 100 48" fill="none" stroke="#fb8500" stroke-width="2.5" stroke-dasharray="4 4" />
          <polygon points="104,45 94,48 99,56" fill="#fb8500" />
        </svg>

        <div class="sun risen" id="sun">
          <div class="sun-ray"></div>
        </div>

        <svg class="hills" viewBox="0 0 200 60" preserveAspectRatio="none" style="z-index: 2;">
          <ellipse cx="60" cy="65" rx="80" ry="40" fill="#4ade80" />
          <ellipse cx="150" cy="70" rx="90" ry="45" fill="#22c55e" />
        </svg>
      </div>
      <div class="caption">Sun rises</div>
    </div>

    
    <div class="scene-card" id="ballCard" onclick="triggerBall()">
      <div class="badge">
        <span class="badge-icon">✦</span> Certain
      </div>
      <div class="stage room-bg">
        <div class="child">👧</div>

        <svg style="position:absolute; top:54px; left:106px; width:16px; height:80px; z-index:1;">
          <line x1="8" y1="4" x2="8" y2="66" stroke="#ef4444" stroke-width="2.5" stroke-dasharray="3 3" />
          <polygon points="8,74 3,64 13,64" fill="#ef4444" />
        </svg>

        <div class="ball dropped" id="ball"></div>
        <div class="floor-line"></div>
      </div>
      <div class="caption">Ball falls down</div>
    </div>
  </div>

  <div class="tap-hint">Tap either side to replay ↺</div>

  <script>
    function triggerSun() {
      const sun = document.getElementById('sun');
      sun.classList.remove('risen');
      setTimeout(() => {
        sun.classList.add('risen');
      }, 80);
    }

    function triggerBall() {
      const ball = document.getElementById('ball');
      ball.classList.remove('dropped');
      setTimeout(() => {
        ball.classList.add('dropped');
      }, 80);
    }

    // Gentle auto-loop for Grade 1 visual demonstration
    setInterval(() => {
      triggerSun();
      setTimeout(triggerBall, 1500);
    }, 6000);
  </script>
</body>
</html>

<!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>Certainty - Days of the Week</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: transparent;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px 12px;
      user-select: none;
    }

    .calendar-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 540px;
      margin-bottom: 20px;
    }

    .cal-card {
      flex: 1;
      min-width: 85px;
      max-width: 140px;
      background: #ffffff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.08);
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
    }

    .cal-header {
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .cal-body {
      padding: 14px 4px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .cal-num {
      font-size: 28px;
      font-weight: 800;
      line-height: 1;
      color: #1e2945;
    }

    /* Card Themes */
    .card-mon {
      background: #f5f3ff;
      border: 2px solid #ddd6fe;
    }
    .card-mon .cal-header {
      background: #ede9fe;
      color: #6d28d9;
    }

    .card-tue {
      background: #f0f9ff;
      border: 2px solid #bae6fd;
    }
    .card-tue .cal-header {
      background: #e0f2fe;
      color: #0369a1;
    }

    .card-wed {
      background: #f0fdf4;
      border: 2px solid #86efac;
      box-shadow: 0 6px 16px rgba(22, 163, 74, 0.15);
    }
    .card-wed .cal-header {
      background: #dcfce7;
      color: #15803d;
    }

    .star-icon {
      font-size: 20px;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(234, 179, 8, 0.4));
    }

    .connector {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 20px;
      font-weight: bold;
    }

    .cert-banner {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 4px 14px rgba(30, 41, 69, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      border-left: 5px solid #16a34a;
    }

    .cert-badge {
      background: #dcfce7;
      color: #15803d;
      font-size: 11px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 6px;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }

    .cert-text {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.3;
    }

    @media (max-width: 420px) {
      .cal-header {
        font-size: 11px;
        padding: 6px 2px;
      }
      .cal-num {
        font-size: 22px;
      }
      .cal-card {
        min-width: 75px;
      }
      .cert-text {
        font-size: 13px;
      }
      .connector {
        font-size: 16px;
      }
    }
  </style>
</head>
<body>

  <div class="calendar-row">
    
    <div class="cal-card card-mon">
      <div class="cal-header">Monday</div>
      <div class="cal-body">
        <div class="cal-num">1</div>
      </div>
    </div>

    <div class="connector">➔</div>

    
    <div class="cal-card card-tue">
      <div class="cal-header">Tuesday</div>
      <div class="cal-body">
        <div class="cal-num">2</div>
      </div>
    </div>

    <div class="connector">➔</div>

    
    <div class="cal-card card-wed">
      <div class="cal-header">Wednesday</div>
      <div class="cal-body">
        <div class="cal-num">3</div>
        <span class="star-icon">⭐</span>
      </div>
    </div>
  </div>

  
  <div class="cert-banner">
    <span class="cert-badge">100% MUST HAPPEN</span>
    <span class="cert-text">Wednesday after Tuesday is CERTAIN</span>
  </div>

</body>
</html>

Understanding What Is Impossible: Things That Cannot Happen

Understanding What Is Possible: Things That Might Happen

Sorting Everyday Events: Certain, Possible, or Impossible

Using Chance Language: Certain, Likely, Unlikely, Impossible

Describing Events as More Likely or Less Likely

Using a Visual Likelihood Line from Impossible to Certain

math

Exploring Likelihood and Everyday Chance

Understanding the Probability Scale from 0 to 1 and Percentages

Calculating Theoretical Probability of Equally Likely Outcomes

Calculating the Probability of Complementary Events (Not E)

Listing Systematic Sample Spaces for Single and Combined Events

Calculating Probabilities from Two-Way Frequency Tables

Calculating Expected Frequency in Repeated Trials

Evaluating Risk by Combining Probability with Consequences

Analyzing Lottery, Gambling, and Insurance Choices Using Risk

Making Evidence-Based Decisions Under Uncertainty

Theoretical Probability, Risk, and Decision Making

Understanding Things That Will Definitely Happen: Certain

Understanding Things That Can Never Happen: Impossible

Distinguishing Between Certain and Impossible

Understanding Events That Are Likely to Happen

Understanding Events That Are Unlikely to Happen

Understanding Equal Chance and 50-50 Outcomes

Ordering Events Along a Likelihood Line

The Language of Likelihood and Chance

Predicting Outcomes With Colored Spinners

Predicting Pulls From a Bag of Colored Cubes

Conducting Chance Experiments and Recording Results

Explaining Fair and Unfair Games

Using Chance Vocabulary in Everyday Discussions

Simple Probability Experiments and Fair Games

Using the Language of Chance: Impossible to Certain

Placing Events Along a Probability Scale from 0 to 1

Expressing Probabilities as Fractions, Decimals, and Percentages

Calculating Theoretical Probability of Single Events

Conducting Coin Toss Experiments and Recording Frequencies

Conducting Dice Rolling Experiments with Single and Combined Dice

Foundations of Probability and Theoretical Chance

Designing and Testing Custom Probability Spinners

Conducting Bag-Pull Experiments with Colored Counters

Listing All Possible Outcomes Using Systematic Sample Space Diagrams

Understanding How Repeated Trials Improve Experimental Accuracy

Identifying Fair and Unfair Games of Chance

Making and Justifying Predictions in Weather and Daily Risk Contexts

Experimental Probability, Sample Spaces, and Real-World Risk

Reviewing Theoretical Probability: Scale from 0 to 1

Calculating Probabilities of Complementary and Mutually Exclusive Events

Calculating Relative Frequency and Experimental Probability

Investigating the Law of Large Numbers Through Simulations

Calculating Expected Frequency in Repeated Trials and Surveys

Listing Systematic Sample Spaces Using Sample Space Diagrams

Constructing and Calculating Probabilities from Tree Diagrams

Calculating Conditional Probabilities in Practical Scenarios

Theoretical, Experimental, and Conditional Probability

Calculating Expected Financial Value and Fairness in Games

Assessing Risk: Combining Probability with Severity of Outcomes

Evaluating Insurance, Warranties, and Health Risks Mathematically

Evaluating Weather Forecasts and Disaster Preparedness Probabilities

Making Evidence-Based Decisions Under Uncertainty in Daily Life

Expected Value, Risk Assessment, and Decision Making

Things That Will Definitely Happen: Understanding Certainty

Things That Cannot Happen: Understanding Impossible Events

Things That Might Happen: Exploring Possible Events

Everyday Chance: Certain, Possible, and Impossible

Testing Predictions with a Two-Colour Coin Toss

Predicting and Rolling a Standard Dice

Spinning Spinners with Equal Colour Sections

Spinning Spinners with Unequal Colour Sections

Pulling Coloured Counters from a Mystery Bag

Recording Outcomes of Chance Games with Tallies

Using Likelihood to Make Fair Choices in Games

Comparing Predictions with What Actually Happened

Simple Probability Experiments and Chance Games

Identificar el dato más frecuente: la moda en gráficos

Identificar tendencias de aumento y disminución en datos

Comparar dos conjuntos de datos en un mismo contexto

Sucesos seguros, posibles e imposibles en la vida diaria

Juegos de azar con dados, monedas y ruletas

Comparar posibilidades: más probable y menos probable

Predicciones en bolsas con fichas de colores

Igual de probable: situaciones equitativas de azar

Análisis de datos, tendencias y probabilidad inicial

OGM.1.MD.7

OGM.1.MD.7

Aligned learning resources

Related diagrams