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.
Originally, I managed to find the entry point to this challenge by looking in the source code while in the Student Union.
The crate challenge is at https://sleighworkshopdoor.elfu.org/. On load the page there are a bunch of coded locks:
Each one has a question and hints and they all involve using the development tools in the browser to access the codes for the locks.
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.
Google: “[your browser name] developer tools console”
The code is 8 char alphanumeric
By opening the development tools and scrolling back in the console, you will find the first code, eg.
Some codes are hard to spy, perhaps they'll show up on pulp with dye?
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.
The challenge is correctly solved by opening the page in print preview mode as the css for printing is different to that of viewing on the screen.
It can also be seen in the source code.
This code is still unknown; it was fetched but never shown.
Google: “[your browser name] view network”
Examine the network requests.
This code is found by looking at the traffic that is load along with the page:
Where might we keep the things we forage? Yes, of course: Local barrels!
Google: “[your browser name] view local storage”
This is solved by looking in the “Application” tab in Chrome and under Local Storage:
Did you notice the code in the title? It may very well prove vital.
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
As per the hints there are multiple ways to get this code, so lets use 'document.title':
In order for this hologram to be effective, it may be necessary to increase your perspective.
`perspective` is a css property.
Find the element with this css property and increase the current value.
The hologram looks like this initially:
But using the “Elements” inspector it is possible to find the details of the hologram and see that it has style associated with it. One of the elements is “perspective” and if it is changed from 15px to 15000px then the image changes to reveal the code:
The font you're seeing is pretty slick, but this lock's code was my first pick.
In the `font-family` css property, you can list multiple fonts, and the first available font on the system will be used.
The code can be seen in the 'head' section of the page, which can be seen in the development tools or by open the source view of the page:
In the event that the .eggs go bad, you must figure out who will be sad.
Google: “[your browser name] view event handlers”
The first thing to do is look for eggs and I am sure that the Easter Bunny is not involved. Once this has been found in the page source then click on the span and change to the “Event Listeners” view.
This next code will be unredacted, but only when all the chakras are :active.
`:active` is a css pseudo class that is applied on elements in an active state.
Google: “[your browser name] force psudo classes”
This code is revealed on the page when the state of the span tags is changed. This is done by clicking on the page source and then on the top right click ':hov' to reveal other options, including ':active'.
The page now looks like:
Oh, no! This lock's out of commission! Pop off the cover and locate what's missing.
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.
The first thing that I found was the image of the lock by using the Network tab:
It is possible to see the code on the printed circuit board:
In the source code, the button is disabled, so this need to be editted to active the button:
<button data-id=“10” disabled=“disabled”>Unlock</button>
But when the Unlock button is pressed the the message “Missing macaroni!” appears in the console:
It proves necessary to add the following div's inside the lock div
<div class="component macaroni" data-code="A33"></div> <div class="component swab" data-code="J39"></div> <div class="component gnome" data-code="XJ0"></div>
I found it easier to replace the whole list item with the following
<li> <div class="lock c10"> <div class="component macaroni" data-code="A33"></div> <div class="component swab" data-code="J39"></div> <div class="component gnome" data-code="XJ0"></div> <div class="cover"> <button data-id="10">Unlock</button> </div> <input type="text" maxlength="8" data-id="10" values="KD29XJ37"> <button class="switch" data-id="10"></button> <span class="led-indicator locked"></span> <span class="led-indicator unlocked"></span> </div> </li>
This resulted in the following output in the console:
and this image:
So now we now that we are dealing with the Tooth Fairy.
But I wonder what happens if this can be done in under 3 minutes:
and then the challenge is to do it in less than 5 seconds:
Very impressive!! But can you Crack the Crate in less than five seconds?
But that is not going to happen for now.
The Answer is “The Tooth Fairy”