JavaScript Programming Basics
Kalamazoo College

PROGRAMMING PROJECT 2:
CD O
RDER FORM

due on Wednesday of Seventh Week


Review Of: Chapter 5 (JavaScript Programming), Mini-Labs 5 and 6, and Lab 5.

In previous mini-labs and in Lab 5, we have created a CD Order Form that will allow someone to check which CD titles they wish to buy. We need to modify our order form so that something happens when we check a box. Also we need to print the order to the user. We also need to create a better user environment for the page.

You may work individually or in groups of 2 people to finish this project. These groups do not need to be the same as the groups for mini-labs 4 and 5 or Lab 5. If you worked with someone on the first programming project, you might consider working with someone else for this project. You may utilize anyone you find reliable to answer questions and help debug but your group should attempt the programming on your own before seeking help.

Check out the page on programming tips to help you. Also, look at the page on grading criteria to see the breakdown of the points given for this project. Turn in the URL (location) of your CD Order Form on the due date. For example, you may have the URL be http://cc.kzoo.edu/~k97ab01/cdorder.html, where k97ab01 is your email username.


Order Form Enhancements

  1. The first thing you need to do is to make the CDArray variable known to all the functions. To do this move the statement before all the function definitions, right after the "hide contents" statement in the header.

  2. Next, we need a function to mark the correct CD as having been bought when the CD has been selected. This function would be called in the checkbox object using the onClick event by adding the following command to the document.writeln for the checkboxes:
    "onClick='toggleBought(this, CDArray, "+i+")'"
    where CDArray is the name of your array holding CD information and i is the variable of your for loop. The function togglebought needs three parameters: one to hold the checkbox information, one to hold the CD array and one to hold the integer to index the CD Array. This function should check the truth value of checkboxname.checked, where checkboxname is the name you gave the checkbox parameter. If that value is true then you can make CDArray[i].bought=true, otherwise make CDArray[i].bought=false.

  3. We need to be able to sort the CDs by either artist or title. There should be two buttons (one for each sort) that call the correct function to sort the data and then print the CDs back to the table in the sorted order. The following function can be used to redisplay the array in the table:
    function DisplayToTable(CDArray)
    {
      for (var i=0; i < CDArray.length; i++)
      {
            document.formname.elements[3*i].checked=CDArray[i].bought;
            document.formname.elements[3*i+1].value=CDArray[i].artist;
            document.formname.elements[3*i+2].value=CDArray[i].title;
      }
    }
    
    where formname is replaced by the name you have given your form. If you added any objects above the table of CDs see your instructor to get the modifications to the above function or move those objects beneath the table. The algorithm for sorting was developed in Lab 5. You will need to copy the function that sorts the CDs by title to a new function name. You will also need to make the appropriate changes to the new function so it sorts by artist instead of title. The last statement in your sort functions should be to call DisplayToTable instead of the document2.writeln statements from the lab. (Now is the time to delete the statements that say "DO NOT DELETE these comment lines and the following 6 lines UNTIL you are ready to begin PROGRAMMING PROJECT #2"!) Check your page to see that the sort routines work.

  4. We need a button to indicate when the user is finished selecting the CDs they wish to purchase and has checked all the corresponding checkboxes. Create a text area and when the button is clicked (use the onClick attribute) display the user's order to the text area. You can add text to the text area as you did in the Expert System. Use a loop and an if statement to check each CD to see if the user has indicated they wish to purchase that CD. The only CDs that should be printed to the text area are the ones the user has checked to buy. Make sure you add descriptive text to the text area. Check your page to make sure that the correct CDs are printed in the text area. To insert a carriage return in your text area add the control sequence \n to your message being printed. You need to display a message (using the alert or confirm functions) to the buyer that they will need to print their order and mail it to the company to purchase the CDs. You will not need to email or send the order in any other way.

  5. Once the CD order form is functioning properly, add graphics or text to the page to make it a better user interface. Add text to describe what to do, align the order form and other buttons in an easy-to-read format and add an appropriate background. Remember to add comments to your code.

  6. Challenge Problem: This problem is optional, and is not worth any points - it is just for fun! Add a startOver function and button to your CD order form that resets your form to its original condition.