Problem 1

Your boss has asked you to create multiple pages to improve interactivity in the web site. You decide to try out creating an interactive registration form for the vendors who will be at the rummage sale! You are going to use your programming skills and mix them with what you learn in this chapter.

Learning Outcomes

Demonstrate creativity and problem-solving skills.

Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

Step 1. Create the overall HTML structure

Save this file. Add this to your web site in the homework folder after you have completed both problems.

1. Gather your data and create your basic page navigation structure.

1. Edit the week8-1.html pages 2. Make sure you have links to all of the pages for this week and the home button in your main navigation menu. You should have a consistent style or theme for your web site that is unique. Dont copy off of other web sites! The book has many examples (http://www.apress.com/9781430239604?gtmf=s (Links to an external site.) (Links to an external site.)). Review listing-05.html (drag and drop example) from Chapter 37 and the other examples! Use the drag and drop example as a book to guide you. But make sure to write your own code! I expect to see comments thoroughly documenting the game. Warning: Most of the web sites listed on Code Project and Stack Overflow are way more advanced then what you are asked to here. Do your own work --- or you will lose points!

Step 2. Create the Interactive Drag and Drop Program

2. Build an interactive program with JavaSript.	Create a drag and drop puzzle game. 1. Take a picture and cut it into 4 equal pieces in your favorite graphic editing program. Save the pictures as .png, .gif, or .jpg formats. 2. On your web page, show the user what the final image should look like. 3. Create the source image objects. Create 4 image tags with the images set to the four puzzle pieces. 4. Create the target div tags. Have 4 div tags. Use CSS so that the div tags are setup with a gray border and the same dimensions as the image puzzle pieces. 5. The user should be able to drag the pieces from the images to the div tags. When the user has dragged all four to the correct place, then display a message to the user that the user won the game! Note that there are many different ways to solve this problem. Its up to you to be creative. Ive given some direction. The goal is to meet the program requirements above, demonstrate your understanding of the DOM and write efficient code that works!
3. Review and document your program.	Review your program to make sure you also used descriptive names for the variables, classes and other elements and stuctures. Preview and test your program. Again, make sure there is adequate documentation in the CSS, HTML and JavaScript programs! If you need additional screen shots to show your program, just add them here.
Include a screen shot of your web pages showing your web page in the browser.
Show the HTML, CSS, and JavaScript code.