Welcome! To play this Code Breakers Challenge, please be sure to use Google Chrome
We will be working with JavaScript to hunt for clues hidden on this website
To begin the challenge, right click on the page and select "Inspect" or "Inspect Element"
If that doesn't work, press CTRL + Shift + "J" on Windows or CMD + Shift + "J" on Mac
Click on the tab that says "Console"
In this area, type begin()
Congrats! You've just used a Function
A Function tells JavaScript to do some tasks
Any word that's followed by parenthesis () is a function
Next, we will use the css() function together with a selector. We'll go over selectors in a moment
Type the following into the Console:
$('#mario').css('display', 'block')
You can also copy and paste this selector and function into the Console
(Whatever you do, don't click the Win Button!)
You found me!
You just selected me by using my ID
Any word that follows the # symbol is an element's unique ID
We can use IDs to talk to a part of a website using JavaScript
For the next clue, click on Minecraft Animators
Cool! So let's give this a try on your own
Select the element with an ID of luigi and use this function
.css('display', 'block')
If you are stuck, type help1 into the Console
Remember, to select an element, use $('#element_id')
Hello!
So far we have learned how to use Selectors and Functions
As a reminder, we use selectors like this: $('#element_id')
and we use functions like this: someFunctionName()
We can combine them with a period to run a function on the selection
For the next step, click on the course Code Breakers below
But be careful! I heard Bowser and his gang were lurking around here
Much better!
Now that everything is working, let's go play some Tennis
Use the function playTennis to begin
Remember, functions end with ()
Good work! Peach showed up, but it looks like she was shrunken!
Let's use the css function again, but this time we will change the height property
Use a selector for the ID peach and run the function .css('height', '250px')
For a hint, type help3 into the Console
Oh man! Now a Koopa is here
Let's try to knock his shell off
use a function called jumpOnKoopa
Remember, functions end with ()
Good job!
Now let's go play some Tennis...
Oh man, the Koopa came back with his friends
Quick, let's hop in our go-kart and get out of here!
Use the function goKart
We finally made it to the tennis court!
While we wait for Mario, let's review selectors
Using the id of 'thisText', let's change the color of this sentence
Use a selector and run the css function to set color to blue
Hint: the CSS function is written like this: .css('style', 'value')
If you are stuck, type help4 in the Console for help
Oh no! While we were waiting, Bowser showed up.
This is it, let's defeat him once and for all
Let's try using a power up
Use the function powerUp
Remember, functions end with ()
Well Done!
You've defeated Bowser using the power of code
Let's go use our new powers to learn some more
Minecraft® Animators
Use your favorite Minecraft® characters to create your own animated short film!
MakerLab: First 3D Creation
Learn how to create your own 3D objects and models from scratch!
Minecraft® Modders
Modify and create your own Minecraft® characters, tools, mobs, and more!
App Attack!
Dive into making your own apps, just like the ones you’d see on the App Store!
Minecraft® Designers
Fill a Minecraft® world with your own custom designs and creations!
Code Breakers
Learn how to use code in making your ideas become reality!
Girl Gamers
Why should boys have all the fun? There's plenty of exciting games that girls can make in this course!
Make Your First Video Game!
Create your first platformer video game using characters that you choose!
Make Your First 3D Video Game!
Make your own fun and challenging 3D game with industry grade software!
Video Game Odyssey
Learn the art of building your own web enabled games done right in your browser.
Video Game Animation
Dive into making sprites move around and animate in a video game!
App Adventures: The Next Level!
Take a step further in mobile app creation and bring your ideas to life!
LEGO® Video Games
Create an awesome video game adventure with your own LEGO® characters!
LEGO® YOUniverse
Make your own visual story for your favorite LEGO® characters.
LEGO® Films & Stop Action
Create your own short film using your favorite LEGO® toys and characters!
Digital Storytellers
Design a storyboard and create your own digital tale where you’re the star!
Creative Design and Robotics
Harness the power of robotics by learning how to build and program bots!
*All classes are 9am to 4pm M-Th
**Ages 7 -11
***6/08 and 7/05 are shortened weeks.