Macro Assignment #04: Harry Potter and the Chamber of the DOM!

The wizards at Hogwarts need your help! Voldemort has apparently been taking a web development class and is creating havoc by casting a wide array of dangerous JavaScript spells!

Your mission is to work through four (3 'starter' challenges and a final one.) Each challenge is based on a single HTML file. Read through the comments in the HTML file to determine your task, and then solve it using your HTML, CSS and JavaScript skills! When you solve a challenge you can come back here and input any magical results that appear by using the buttons below. Finishing a challenge will reward you with a password. If you collect all three passwords you can open up the final challenge. The source code for the first three challenges can be downloaded here.

When you are finished you should create a new webpage called 'assignment04.html' in your webdev folder. This page should link to the four challenges you worked on here. Also zip up your work and submit it to NYU Classes, as usual.

Voldemort Cleanup!

Voldemort has done it again, and has enchanted yet another webpage! Solve the challenge described in the file 01.html. To check your work type your answer into the blank below. When you successfully cast the spell you will be given a password to prove that you have mastered this challenge!

What image appears? (one word):

Voldemort Cleanup Part 2!

Voldemort is stepping up his attacks and has now started attacking JavaScript code! Solve the challenge described in the file 02.html. To check your work type your answer into the blank below. When you successfully cast the spell you will be given a password to prove that you have mastered this challenge!

What image appears? (one word):

Pixel Spells!

Cast a series of spells to cause the names of familiar Harry Potter words to appear. Instructions on how to get started can be found in the file 01.html. To check your work type your answers into the blanks below. When you successfully cast all of the spells you will be given a password to prove that you have mastered this challenge!

Spell #1:
Spell #2:
Spell #3:

Wizard Summoning!

Dumbledore needs your help to summon a wizard to Hogwarts! Solve the challenge described in the file 02.html. To check your work type your answer into the blank below. When you successfully cast the spell you will be given a password to prove that you have mastered this challenge!

Wizard:

Locked Potions Cabinet!

Professor Snape has locked his potions cabinet and he can't get it open! Solve the challenge described in the file 03.html. To check your work type what was found in the cabinet into the blank below. When you successfully open the cabinet you will be given a password to prove that you have mastered this challenge!

What was found:

Final Challenge!

Type in the three passwords you have obtained throughout your journey. You will then be presented with the final challenge!

Challenge #1:
Challenge #2:
Challenge #3:

[unlocked] The Final Challenge!

For this final challenge you will be building a website that will let users create their own maps of Hogwarts. In video game design we would call a project like this a "level builder" since it can be used to create new environments for players to experience. The core of this system is based on a series of small graphics (32px by 32px) which can be "tiled" next to one another to form a seamless backdrop. Here's a video that shows the desired features of your project:

To get started, download this starter template, which contains all of the images that you will need for this project.

Here's what you will be working on:

  • Create a graphical layout that contains a two columns - one on the left and one on the right
  • The left column should contain a block that is 320px by 320px to hold the user's map. Each individual image tile is 32px by 32px.
  • The right column should contain all of the images included in the downloadable package. Hint: the 'image_array.js' file has an array that contains all of these filenames already!
  • Whenever you click on an image in the right column the following should occur:
    • That image should gain some sort of visual class to show that it is selected.
    • Some variable should be updated to hold the 'src' property of that image so that we can use it to "draw" the map on the left side of the screen
    • Note that under no circumstances should more than one image on the right have the "selected" indicator attached to it.
  • The left column should be filled with 100 divs that are 32px by 32px each. Make these divs float to line up next to one another.
  • Set up each div so that when you hover over them they gain a temporary indicator showing that they are being selected (hint: use a hover state in CSS)
  • Each div should listen for a mouse click. If it is clicked it should use whichever image was selected in the right column and set that as its 'backgroundImage' property.