11. Open the Sleigh Shop Door

Difficulty: 🎄🎄🎄🎄🎄

obj11-t

📜 Info & Hints

Open the Sleigh Shop Door

Visit Shinny Upatree in the Student Union and help solve their problem. What is written on the paper you retrieve for Shinny?

For hints on achieving this objective, please visit the Student Union and talk with Kent Tinseltooth.

🧝🏻‍♂️ Kent Tinseltooth

By the way, have you tried to get into the crate in the Student Union? It has an interesting set of locks.

There are funny rhymes, references to perspective, and odd mentions of eggs!

And if you think the stuff in your browser looks strange, you should see the page source...

Special tools? No, I don't think you'll need any extra tooling for those locks.

BUT - I'm pretty sure you'll need to use Chrome's developer tools for that one.

Or sorry, you're a Firefox fan?

Yeah, Safari's fine too - I just have an ineffible hunger for a physical Esc key.

Edge? That's cool. Hm? No no, I was thinking of an unrelated thing.

Curl fan? Right on! Just remember: the Windows one doesn't like double quotes.

Old school, huh? Oh sure - I've got what you need right here...

And I hear the Holiday Hack Trail game will give hints on the last screen if you complete it on Hard.

🧝🏻‍♂️ Shinny Upatree

Psst - hey!

I'm Shinny Upatree, and I know what's going on!

Yeah, that's right - guarding the sleigh shop has made me privvy to some serious, high-level intel.

In fact, I know WHO is causing all the trouble.

Cindy? Oh no no, not that who. And stop guessing - you'll never figure it out.

The only way you could would be if you could break into my crate, here.

You see, I've written the villain's name down on a piece of paper and hidden it away securely!

Dev Tools

Lynx Dev Tools https://xkcd.com/325/

Curl Dev Tools https://curl.haxx.se/docs/manpage.html

Edge Dev Tools https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console

Safari Dev Tools https://developer.apple.com/safari/tools/

Firefox Dev Tools https://developer.mozilla.org/en-US/docs/Tools

Chrome Dev Tools https://developers.google.com/web/tools/chrome-devtools

Open the Sleigh Shop Door

⚡️ Solution

Go to https://crate.elfu.org/

  1. I locked the crate with the villain's name inside. Can you get it out? You don't need a clever riddle to open the console and scroll a little.

    Need a hint?

    Google: "[your browser name] developer tools console"

    The code is 8 char alphanumeric

    Open the console in Dev tools and scroll up :

    obj11-1

  2. Some codes are hard to spy, perhaps they'll show up on pulp with dye?

    Need a hint?

    Most paper is made out of pulp.

    How can you view this page on paper?

    Emulate print media, print this page, or view a print preview

    Simulate page printing to view a print preview:

    obj11-2-1

    or you can inspect other child elements under the question in inspector tab

    obj11-2-2

  3. This code is still unknown; it was fetched but never shown.

    Need a hint?

    Google: "[your browser name] view network"

    Examine the network requests.

    Open Network tab in Dev tools and check the images:

    obj11-3

  4. Where might we keep the things we forage? Yes, of course: Local barrels!

    Need a hint?

    Google: "[your browser name] view local storage"

    Go to Storage tab > local storage:

    obj11-4

  5. Did you notice the code in the title? It may very well prove vital

    Need a hint?

    There are several ways to see the full page title:

    • Hovering over this browser tab with your mouse

    • Finding and opening the <title> element in the DOM tree

    • Typing document.title into the console

    Go to Inspector tab > expand header tag :

    obj11-5

    or Typing document.title into the console:

    obj11-5-3

    or Hovering over this browser tab with your mouse:

    obj11-5-2

  6. In order for this hologram to be effective, it may be necessary to increase your perspective.

    Need a hint?

    perspective is a css property.

    Find the element with this css property and increase the current value.

    Go to Inspector tab > select the card right to the question > remove perspective property or increase it's value from css panel on the right :

    obj11-6

    obj11-6-2

  7. The font you're seeing is pretty slick, but this lock's code was my first pick.

    Need a hint?

    In the font-family css property, you can list multiple fonts, and the first available font on the system will be used.

    Go to Inspector tab > Select the question > check font-family property from css panel on the right :

    obj11-7

  8. In the event that the .eggs go bad, you must figure out who will be sad.

    Need a hint?

    Google: "[your browser name] view event handlers"

    Go to Inspector tab > Select the question > Expand to see child elements:

    obj11-8

    Click on event for element with class="eggs" : obj11-8-2

  9. This next code will be unredacted, but only when all the chakras are :active.

    Need a hint?

    :active is a css pseudo class that is applied on elements in an active state.

    Google: "[your browser name] force psudo classes"

    Go to Inspector tab > Select the question > Expand to see child elements:

    obj11-9

    Select first child with class="chakra" > Select :hov then :active from css panel on the right to see the 1st part of the code and continue : obj11-9-2

    obj11-9-3

  10. Oh, no! This lock's out of commission! Pop off the cover and locate what's missing.

    Need a hint?

    Use the DOM tree viewer to examine this lock. you can search for items in the DOM using this view.
    You can click and drag elements to reposition them in the DOM tree.
    If an action doesn't produce the desired effect, check the console for error output.
    Be sure to examine that printed circuit board.

    Go to Inspector tab > Select the last lock > remove element with class=cover:

    obj11-10

    obj11-10-2

    Enter the code KD29XJ37 from the lock board.

    Check the console tab

    obj11-10-3

    Error: "Missing macaroni!"

    Lookup element with class .macaroni and drag it inside the locks

    Check the console tab:

    obj11-10-4

    Error: "Missing cotton swab!"

    Lookup element with class .swab and drag it inside the locks

    obj11-10-5

    Check the console tab:

    Error: "Missing gnome!"

    Lookup element with class .gnome and drag it inside the locks

    obj11-10-8

    obj11-10-6

    Check the console tab :

    obj11-10-7

The Answer

The Tooth Fairy

Congratulations! You have completed the Open the Sleigh Workshop Door challenge! 🎉

🧝🏻‍♂️ Shinny Upatree

Wha - what?? You got into my crate?!

Well that's embarrassing...

But you know what? Hmm... If you're good enough to crack MY security...

Do you think you could bring this all to a grand conclusion?

Please go into the sleigh shop and see if you can finish this off!

Stop the Tooth Fairy from ruining Santa's sleigh route!

🎓 What you've learned

  • Using Browser Dev tools.
  • Different between DOM and Page source.
  • Interacting with browser console.
  • Force psudo classes