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.

Coming

Mission #5 — 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.