Devilish Delights/Creating an Interactive Form Webpage Using HTML
Author: Patricia Janann Nicholson
Curriculum Area: Instructional Technology
Subject Area: Information Design (Web I)
Sunshine State Standard Benchmark:
  • Demonstrate knowledge about the role of the computer in information design.
  • Understand the synthesis of design and technology in the publishing of information electronically in a Web environment.
  • Incorporate visual, information, and programming design into the creation of a Web site.
  • Demonstrate the ability to design the Web site, pages, and graphics using good layout, clean design, and smart choice of color.
  • Understand the technology required to implement a well-designed system of text and graphics that allows the user to navigate with ease.
  • Chart content and workflow to determine site organization and plan site structure.
  • Control the multimedia enhancements of interactivity, audio, moving images (animation or video) and content on demand.
  • Demonstrate the ability to create and work with editable text and artwork to be used on the
  • World Wide Web.
  • Develop an understanding of copyright and its importance in protecting original creative work.
  • Analyze information design for its effectiveness.

 

Grade Level: 9th-12th
Lesson Title: Devilish Delights Ice-cream/Creating an Interactive Form Webpage using HTML in Notepad.
Resources: Nicholson's Lesson Plan Blues:
http://neighbor.firn.edu/class/palm_beach/pahokee_ms/patricia_janann_nicholson/creatingforms/devilishdelights.htm
Learning Objective:

Students will:

  • Read and follow online directions which will result in a completed interactive form Webpage entitled "Devilish Delights."
  • Include a Javascript StartForm() function (inserted into the Notepad Text editor) that will:
    • enter the current date into the Date field.
    • move the cursor to the next field in the form (FirstName).
  • Include a Javascript event handler (inserted into the Notepad Text editor) that will allow participants to choose the color of the background of the form by clicking on a color. The default color for the form will be teal.
  • Include a Javascript (inserted into the Notepad Text editor) that will calculate the total score automatically and store this value in the TOTAL field of a ice-cream personality contest.
  • Include a Javascript (inserted into the Notepad Text editor) that will validate user input. To ensure that only the values 0, 1, 2, 3, 4, or 5 to be entered into the PERS component fields, information must pass information to the function, indicating which field is using it. If the user enters an incorrect value for one of the PERS components, the form should display a dialog box informing the user of the error ("You must enter a 0, 1, 2, 3, 4, of 5").
  • Create a Power Point Presentation promoting the new ice-cream line that will published to the web.
  • Create a Frames Web page that include three pages that load when you enter the site (top, left, and display). The two additional pages already created (power point presentation & forms page) will be external pages that will load in the display window when you click on button links located in the left frame.
Instructions: Students will follow the instructions provided at Nicholson's Lesson Plan Blues Webpage. Finished products are included in the grading rubric listed below.
Assessment Devilish Delights Grading Rubric

Nicholson's Lesson Plan Blues