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 you just finished building a huge Lego fortress, and you ask your best friend to check it out.

When you make something using a computer or tablet—like a digital drawing, a slide show, or a mini-game—it is called a **digital artifact**.

Looking closely at a classmate's project to share helpful thoughts is called giving **feedback**.

<!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%;
    }

    .main-layout {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Screen / Artifact Container */
    .screen-stage {
      position: relative;
      background: #ffffff;
      border-radius: 12px;
      border: 2px solid #e2e8f0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 14px;
      overflow: hidden;
    }

    .screen-header {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f1f5f9;
    }
    .win-dot { width: 8px; height: 8px; border-radius: 50%; }
    .dot-r { background: #ff5f56; }
    .dot-y { background: #ffbd2e; }
    .dot-g { background: #27c93f; }
    .screen-title {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-left: 4px;
    }

    /* Digital Project Mockup */
    .slide-canvas {
      position: relative;
      background: #f0f9ff;
      border: 1px dashed #bae6fd;
      border-radius: 8px;
      height: 160px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 10px;
      align-items: center;
    }

    .slide-art {
      background: #e0f2fe;
      border-radius: 6px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      position: relative;
      transition: box-shadow 0.3s ease;
    }

    .slide-text-box {
      background: #ffffff;
      border-radius: 6px;
      height: 100%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      position: relative;
      transition: box-shadow 0.3s ease;
    }

    .bar {
      height: 8px;
      border-radius: 4px;
      background: #cbd5e1;
    }
    .bar-lg { width: 85%; background: #22b7ff; }
    .bar-md { width: 65%; }
    .bar-sm { width: 45%; }

    /* Focus Highlight Rings */
    .highlight-active {
      box-shadow: 0 0 0 3px #22b7ff;
    }

    /* Floating Feedback Bubble */
    .feedback-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      padding: 6px 12px;
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.25);
      border: 1px solid #bae6fd;
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
    }

    /* Step Selector Tabs */
    .steps-row {
      display: flex;
      gap: 8px;
      width: 100%;
    }

    .step-btn {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 4px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      transition: all 0.2s ease;
    }

    .step-btn span.emoji {
      font-size: 20px;
    }

    .step-btn.active {
      background: #f0f9ff;
      border-color: #22b7ff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.2);
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="screen-stage">
      <div class="screen-header">
        <div class="win-dot dot-r"></div>
        <div class="win-dot dot-y"></div>
        <div class="win-dot dot-g"></div>
        <span class="screen-title">Classmate Artifact</span>
      </div>

      <div class="slide-canvas">
        <div id="artBox" class="slide-art highlight-active">
          <span>🚀</span>
        </div>
        <div id="textBox" class="slide-text-box">
          <div class="bar bar-lg"></div>
          <div class="bar bar-md"></div>
          <div class="bar bar-sm"></div>
        </div>

        <div id="bubble" class="feedback-badge">
          <span>🌟</span> <span>Praise</span>
        </div>
      </div>
    </div>

    
    <div class="steps-row">
      <button class="step-btn active" onclick="setStep(0)">
        <span class="emoji">🌟</span>
        <span>1. Praise</span>
      </button>
      <button class="step-btn" onclick="setStep(1)">
        <span class="emoji">❓</span>
        <span>2. Ask</span>
      </button>
      <button class="step-btn" onclick="setStep(2)">
        <span class="emoji">💡</span>
        <span>3. Suggest</span>
      </button>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const data = [
      {
        emoji: '🌟',
        label: 'Praise',
        highlightArt: true,
        highlightText: false
      },
      {
        emoji: '❓',
        label: 'Ask',
        highlightArt: false,
        highlightText: true
      },
      {
        emoji: '💡',
        label: 'Suggest',
        highlightArt: true,
        highlightText: true
      }
    ];

    let currentStep = 0;
    const btns = document.querySelectorAll('.step-btn');
    const bubble = document.getElementById('bubble');
    const artBox = document.getElementById('artBox');
    const textBox = document.getElementById('textBox');

    function setStep(idx) {
      currentStep = idx;
      btns.forEach((b, i) => {
        b.classList.toggle('active', i === idx);
      });

      const s = data[idx];
      bubble.innerHTML = `<span>${s.emoji}</span> <span>${s.label}</span>`;
      
      artBox.classList.toggle('highlight-active', s.highlightArt);
      textBox.classList.toggle('highlight-active', s.highlightText);
    }

    // Auto cycle softly
    setInterval(() => {
      setStep((currentStep + 1) % data.length);
    }, 3500);
  </script>
</body>
</html>

How do we review a friend's project so our feedback is super helpful instead of hurtful?

A great reviewing tool is called **Two Stars and a Wish**.

You find two **stars** (things that work really well) and one **wish** (one specific thing that could be even better).

<!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: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }
    .artifact-frame {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 14px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      border: 1px solid #e2e8f0;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
    }
    .slide-canvas {
      background: #f8fafc;
      border: 2px dashed #cbd5e1;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }
    .item-box {
      border-radius: 8px;
      padding: 8px 10px;
      background: #ffffff;
      border: 2px solid transparent;
      transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .item-box.active-star {
      border-color: #f59e0b;
      background: #fffbeb;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
    }
    .item-box.active-wish {
      border-color: #8b5cf6;
      background: #f5f3ff;
      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
    }
    .item-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }
    .item-media {
      height: 64px;
      border-radius: 6px;
      background: #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
    }
    .item-text {
      font-size: 14px;
      font-weight: 550;
      color: #475569;
    }
    .tag {
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 999px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .active-star .tag {
      opacity: 1;
      background: #fef3c7;
      color: #b45309;
    }
    .active-wish .tag {
      opacity: 1;
      background: #ede9fe;
      color: #6d28d9;
    }
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }
    .btn-tab {
      flex: 1;
      padding: 10px 4px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 10px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .btn-tab.active {
      color: #0f172a;
      border-color: #22b7ff;
      background: #f0f9ff;
    }
    .btn-tab.active.star-btn {
      border-color: #f59e0b;
      background: #fffbeb;
      color: #b45309;
    }
    .btn-tab.active.wish-btn {
      border-color: #8b5cf6;
      background: #f5f3ff;
      color: #6d28d9;
    }
  </style>
</head>
<body>
  <div class="artifact-frame">
    <div class="slide-canvas">
      <div id="target-0" class="item-box active-star">
        <span class="item-title">Clear Title</span>
        <span class="tag">⭐ Star 1</span>
      </div>
      <div id="target-1" class="item-box">
        <div style="display:flex; align-items:center; gap:8px;">
          <span style="font-size: 22px;">🪐</span>
          <span class="item-text">Helpful Image</span>
        </div>
        <span class="tag">⭐ Star 2</span>
      </div>
      <div id="target-2" class="item-box">
        <span class="item-text" style="font-size: 12px; opacity: 0.85;">Larger Text</span>
        <span class="tag">✨ Wish</span>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn-tab star-btn active" onclick="setStep(0)">⭐ Star 1</button>
    <button class="btn-tab star-btn" onclick="setStep(1)">⭐ Star 2</button>
    <button class="btn-tab wish-btn" onclick="setStep(2)">✨ Wish</button>
  </div>

  <script>
    let current = 0;
    let timer = null;
    const tabs = document.querySelectorAll('.btn-tab');
    const targets = [
      document.getElementById('target-0'),
      document.getElementById('target-1'),
      document.getElementById('target-2')
    ];

    function render() {
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === current);
      });
      targets.forEach((el, i) => {
        el.classList.remove('active-star', 'active-wish');
        if (i === current) {
          el.classList.add(i === 2 ? 'active-wish' : 'active-star');
        }
      });
    }

    function setStep(index) {
      current = index;
      render();
      resetAutoPlay();
    }

    function resetAutoPlay() {
      clearInterval(timer);
      timer = setInterval(() => {
        current = (current + 1) % 3;
        render();
      }, 3500);
    }

    resetAutoPlay();
  </script>
</body>
</html>

Let's put on our reviewer hats and try this on a real classroom project!

Your classmate Mia made a science slide about the T-Rex. Let's examine what she created.

<!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: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      gap: 12px;
      user-select: none;
    }

    /* Tab Controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 10px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
    }
    .tab-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.2);
    }

    /* Slide Artifact Frame */
    .slide-canvas {
      width: 100%;
      max-width: 440px;
      aspect-ratio: 16 / 10;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      padding: 16px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }

    /* Slide Elements */
    .slide-title-box {
      border-radius: 8px;
      padding: 6px 12px;
      text-align: center;
      transition: all 0.25s ease;
      position: relative;
    }
    .slide-title {
      font-size: 26px;
      font-weight: 900;
      color: #16a34a;
      letter-spacing: 1px;
      line-height: 1.1;
    }

    .slide-body {
      flex: 1;
      display: flex;
      gap: 12px;
      align-items: center;
      margin-top: 10px;
    }

    .slide-img-box {
      flex: 1;
      height: 100%;
      background: #f1f5f9;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 54px;
      position: relative;
      transition: all 0.25s ease;
    }

    .slide-text-box {
      flex: 1;
      height: 100%;
      background: #f8fafc;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      position: relative;
      transition: all 0.25s ease;
    }
    .text-line {
      height: 8px;
      background: #cbd5e1;
      border-radius: 4px;
    }
    .text-line.short { width: 60%; }
    .text-line.tiny {
      height: 6px;
      background: #94a3b8;
    }

    /* Inspect Highlight Styles */
    .highlight {
      box-shadow: 0 0 0 3px #22b7ff;
      background: #f0f9ff !important;
    }

    /* Badge Tag */
    .inspect-tag {
      position: absolute;
      top: -8px;
      right: -6px;
      background: #1e2945;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      display: none;
      align-items: center;
      gap: 4px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
    .highlight .inspect-tag {
      display: flex;
    }
    .star-tag { background: #d97706; }
    .wish-tag { background: #0284c7; }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="tab-btn active" onclick="setFocus(0)">⭐ Title</button>
    <button class="tab-btn" onclick="setFocus(1)">⭐ Image</button>
    <button class="tab-btn" onclick="setFocus(2)">💡 Text</button>
  </div>

  
  <div class="slide-canvas">
    
    <div id="target-title" class="slide-title-box highlight" onclick="setFocus(0)">
      <div class="slide-title">T-REX</div>
      <div class="inspect-tag star-tag">⭐ Big &amp; Bold</div>
    </div>

    
    <div class="slide-body">
      <div id="target-img" class="slide-img-box" onclick="setFocus(1)">
        <span>🦖</span>
        <div class="inspect-tag star-tag">⭐ Clear</div>
      </div>

      <div id="target-text" class="slide-text-box" onclick="setFocus(2)">
        <div class="text-line"></div>
        <div class="text-line tiny"></div>
        <div class="text-line tiny short"></div>
        <div class="inspect-tag wish-tag">💡 Details</div>
      </div>
    </div>
  </div>

  <script>
    const targets = [
      document.getElementById('target-title'),
      document.getElementById('target-img'),
      document.getElementById('target-text')
    ];
    const buttons = document.querySelectorAll('.tab-btn');

    function setFocus(index) {
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });
      targets.forEach((target, i) => {
        target.classList.toggle('highlight', i === index);
      });
    }
  </script>
</body>
</html>

First, look for the **stars**: Mia picked an awesome, clear photo of the dinosaur, and her green title is big and bold.

Next, look for the **wish**: the neon yellow text is hard to see on a white background, and the gray button needs words so we know what it does.

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

  .tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 20px;
  }

  .tab-btn {
    border: none;
    background: transparent;
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
  }

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

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

  .preview-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .title-sample {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.5px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
  }

  /* Wish State (Issues) */
  .state-wish .title-sample {
    color: #ffee55;
    text-shadow: 0 0 1px #eab308;
  }

  .btn-sample {
    width: 140px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.3s ease;
    border: none;
  }

  .state-wish .btn-sample {
    background: #cbd5e1;
    color: transparent;
  }

  /* Fixed State */
  .state-fixed .title-sample {
    color: #1e2945;
    text-shadow: none;
  }

  .state-fixed .btn-sample {
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(34, 183, 255, 0.3);
  }

  /* Feedback Callout Badges */
  .badge {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
  }

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

  .badge-fixed {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
  }

  .state-wish .show-fixed,
  .state-fixed .show-wish {
    display: none;
  }

  .state-wish .show-wish,
  .state-fixed .show-fixed {
    display: inline-flex;
  }
</style>
</head>
<body>

<div class="tabs">
  <button id="btnWish" class="tab-btn active" onclick="showState('wish')">1. The Wish 💭</button>
  <button id="btnFixed" class="tab-btn" onclick="showState('fixed')">2. Improved ✨</button>
</div>

<div id="stage" class="artifact-stage state-wish">
  
  <div class="preview-item">
    <div class="title-sample">Mia's Game</div>
    <span class="badge badge-wish show-wish">⚠️ Low Contrast</span>
    <span class="badge badge-fixed show-fixed">✓ Easy to Read</span>
  </div>

  
  <div class="preview-item">
    <div class="btn-sample">
      <span class="show-fixed">Play ▶</span>
    </div>
    <span class="badge badge-wish show-wish">⚠️ Missing Words</span>
    <span class="badge badge-fixed show-fixed">✓ Clear Action</span>
  </div>
</div>

<script>
  function showState(state) {
    const stage = document.getElementById('stage');
    const btnWish = document.getElementById('btnWish');
    const btnFixed = document.getElementById('btnFixed');

    if (state === 'wish') {
      stage.className = 'artifact-stage state-wish';
      btnWish.classList.add('active');
      btnFixed.classList.remove('active');
    } else {
      stage.className = 'artifact-stage state-fixed';
      btnFixed.classList.add('active');
      btnWish.classList.remove('active');
    }
  }
</script>

</body>
</html>

Why is the second review so much better? It gives Mia exact steps to fix her work without hurting her feelings.

When feedback helps someone build and fix their project, we call it **constructive feedback**.

Always make sure your suggestions are **kind**, **specific**, and **helpful**.

Next time you look at a classmate's digital project, remember to spot the stars first, then share a friendly wish!

technology

Reviewing Digital Artifacts Made by Others. Examine a digital artifact created by a classmate and describe what works well and what could be improved.

We Are Digital Citizens: Giving Kind & Constructive Feedback

CS Fundamentals: Pair Programming, Peer Review, and Giving Feedback

Teaching Elementary Students to Give and Receive Quality Peer Feedback

When teaching 2nd graders how to review digital artifacts, use structured protocols like 'Two Stars and a Wish' or 'Glow and Grow' alongside visual sentence starters displayed on the board. Model the peer review routine through whole-group fishbowl critiques before independent peer review, emphasizing that reviewing is part of the design and editing process. Ensure students distinguish between functional usability (e.g., readability, contrast, working audio/animations) and subjective aesthetic taste.

Reviewing Digital Artifacts Made by Others

Two Stars and a Wish

Worked Example: Mia's Dinosaur Slide