Adventures Home  •  Chat Log
Adventures Home

Five-Minute Mystery Missions

Solve quick, intriguing mysteries in about just five minutes each.

In the TNT Labs, we often ask our novices: “What does Scooby-Doo?” And of course, they say that he solves mysteries! These short activities have a specific location (a ‘scene of the crime’) and a mystery or challenge to be performed, often with Chrome’s DevTools.

The Mysteries

Available Now

Mission #1

Odie Optimization

Location: Entry #71, AskCopilot

Head to Entry #71 in AskCopilot and watch the Odie image load — it’s a large file, so notice how slowly it renders. Use DevTools to find the image element, swap its src to the optimized version (odieInClassroomOptimized.png), and compare load speeds. Open both image URLs in separate browser tabs to see the visual difference.

Mission #2

The Phantom .JPG

Location: Movie Clips page, Monster Mash card

Head to the Movie Clips page and find the Monster Mash card. Use DevTools to swap the monster’s extension from .png to .jpg — then try .jpeg. Do they behave the same way? Find the onerror attribute in the image tag and explain how the site anticipated this failure. Then discover what makes PNG’s transparency a superpower that JPG simply doesn’t have.

Mission #3

The Ghost Card

Location: Movie Clips page, Legacy Clips Index card

Head to the Movie Clips page and find the card labeled Archive in the bottom-right corner — the Legacy Clips Index. Use DevTools to break its image (change the src to any nonexistent filename). Watch what happens to the card. Then try the same thing on any other card. Why does one disappear completely while the other stays visible and clickable?

Mission #4

Hue Done It

Location: JS Apps page, Base Blaster figure

Head to the JS Apps page and find the Base Blaster figure. The app’s color scheme is reds, yellows, and oranges — but look carefully at its icon. Right-click the image and open it in a new tab to see its true colors. Then use DevTools to find the style attribute on that <img> tag and investigate the filter property. Delete it entirely, then restore it and experiment with each function one at a time — sepia, saturate, hue-rotate, and brightness — to discover what each one contributes to the final result.

Mission #5

The Amber Alert

Location: TNT Home page, main navbar

Check out the TNT navbar. The Home link glows amber — every other link is white. This is the way it should be, but our playful mission is to use DevTools to make the first two links in the navbar look like the image below (just for fun!) How can we do this? What class or attribute is responsible?

Target state: Home link is white, About Us link is green
Target state — what your navbar should look like when the mission is complete.
Coming

Mission #6 — TBA

More missions coming as the school year progresses.

All Adventures

Location: Entry #71, AskCopilot

  1. Navigate to Entry #71 in AskCopilot and watch the Odie image load. Notice how slowly it renders.
  2. Open Chrome DevTools (right-click → Inspect, or F12).
  3. In the Elements panel, locate the <img> tag for the Odie image.
  4. Double-click the src attribute value and replace it with odieInClassroomOptimized.png.
  5. Watch the optimized image load — observe the speed difference.
  6. Open both image URLs in separate browser tabs and compare them visually.

Location: Movie Clips page, Monster Mash card

  1. Navigate to the Movie Clips page and find the Monster Mash card.
  2. Right-click the monster image → Inspect (or press F12) to open DevTools.
  3. In the Elements panel, find the <img> tag. Read the entire tag — note every attribute before you change anything.
  4. Double-click the src value and change monster.png to monster.jpg. Observe what happens.
  5. Now change it to monster.jpeg instead. Same result? Both .jpg and .jpeg are valid extensions for the JPEG format — same file type, but the browser treats each as a completely different filename.
  6. Find the onerror attribute on that <img> tag. It reads: this.src=‘images/fallbackMovieIcon.png’; this.onerror=null. This is how the site anticipated a broken image — when any load fails, a fallback is substituted automatically.
  7. Restore src to monster.png. Look closely: does it have a background? That transparent area is a PNG feature — JPG cannot do transparency.
  8. Open images/monster.png directly in a new browser tab to see the transparency clearly.

Location: Movie Clips page, Legacy Clips Index card

  1. Go to the Movie Clips page. Scroll to the very last card — it has a gray badge that says Archive. That is the Legacy Clips Index card.
  2. Right-click the legacy movie clips icon → Inspect (or press F12) to open DevTools.
  3. In the Elements panel, find the <img> tag for this card. Read the full tag — note its onerror attribute: this.style.display=‘none’.
  4. Double-click the src value and change noun-movies-135528-BB46E0.png to ghost.png (a file that doesn’t exist). Press Enter.
  5. The image disappears — and so does the clickable link. The entire click target is gone. You cannot navigate to that page at all.
  6. Now find any other movie card. Its onerror reads this.src=‘images/fallbackMovieIcon.png’; this.onerror=null. Change its src to ghost.png too. What do you see?
  7. A fallback icon appears and the link stays fully clickable, because the <img> element is still in the page — just showing a different picture.
  8. Restore both images by pressing Ctrl+Z in the DevTools Elements panel, or simply refresh the page (DevTools changes are never saved to disk).

Location: JS Apps page, Base Blaster figure

  1. Open the JS Apps page and scroll until you find the Base Blaster figure (a hand icon).
  2. Right-click the icon and choose Open image in new tab. Look at the original image — what color is it? Also read the filename carefully: noun-nine-3678621-1966AB.png. Look up what #1966AB is as a CSS color.
  3. Back on the JS Apps page, right-click the icon → Inspect (or press F12) to open DevTools.
  4. In the Elements panel, find the <img> tag. Read the full style attribute: filter: sepia(1) saturate(6) hue-rotate(10deg) brightness(1.1).
  5. Double-click the filter value and delete the entire thing. Press Enter. The icon reverts to its original color. Now you know what the filter was hiding.
  6. Restore the filter and experiment with each function one at a time — change one value, watch the result, then restore it before changing the next:
  7. Change sepia(1) to sepia(0). The image loses its warm brown tone — sepia converts all colors toward a reddish-brown monochrome at value 1.
  8. Change hue-rotate(10deg) to hue-rotate(90deg), then hue-rotate(180deg). Watch the entire color shift around the color wheel. At 180deg, the warm reds flip to cool greens and teals.
  9. Change saturate(6) to saturate(1). The color becomes much more muted — a value of 1 is “normal,” and 6 means the color is amplified six times its natural intensity.
  10. Restore by pressing Ctrl+Z in DevTools or refreshing the page. Think about this: the original icon, the app’s color scheme, and the filter all came from a design decision. No new image was needed — just CSS.

Location: TNT Home page, main navbar

  1. Open the TNT Home page in a new tab. Look at the navbar — the Home link is amber. Every other link is white.
  2. Right-click the Home link → Inspect (or press F12 and click the element picker).
  3. In the Elements panel, read the full <a> tag for the Home link. Compare it carefully to the <a> tag for About Us. What is different?
  4. In the Styles panel, look for the CSS rule targeting .nav-link.active or .nav-link[aria-current]. What color value does it set?
  5. Make your changes live in DevTools:
    • Double-click the class attribute on the Home link and remove the word active.
    • Double-click the aria-current="page" attribute and delete it entirely.
    • The Home link should now appear white like the others.
  6. Bonus: find the About Us <a> tag. In the Styles panel, click the + to add a new rule and type: color: #2e9e5e !important. The About Us link turns green.
  7. Compare your result to the target image on the mission card. Does your navbar match?
  8. Think about it: aria-current="page" is not just cosmetic — it tells screen readers which page is active. Removing it fixes the color, but also removes an accessibility signal. Why does that matter?