Programming Project 3:
Art Catalog Enhancements

In previous mini-labs and in Lab 4, you created an Art Catalog. In this project, you will add new functionality that will allow us to select a subset of pieces from the catalog to create a list of pieces to include in a special exhibit.

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 the previous mini-labs or Lab 4. If you worked with someone on the Virtual Pet programming project, you might consider working with someone else for this project. We expect that the programming will be your group's effort and not the effort of other persons. If you have questions or need assistance with your program, the instructor and the TAs are very willing to help and are available during their office hours.

Check out the page on programming tips to help you. Also, look at the page on PP 3 grading criteria (and grading criteria for Mini-Labs 7 - 9 and Lab 4) to see the breakdown of the points given for this project.

Polish Existing Work

• Good programs include good indentation, good variable names, and comments that help the author (or someone else) understand who developed the program and what is going on. (See the grading criteria to see how comments and program style are evaluated.)

  • Make sure you have comments at the top of your file giving your name, the names of anyone who has assisted you, and a short description of the project.
  • Every function should have a comment describing the purpose of that function, and what parameters it expects (if any). Add comments inside the functions wherever the code might be difficult to follow. Continue to do this as you complete the programming project.
  • Clean up your indentation and fix any obscure variable names.
  • Keep these guidelines in mind as you continue to work on your project.

• If you have not done so already, add an appropriate title to your page. Add appropriate headings to your page now and as you continue to work on it.

Build a Special Exhibit List

• To create a special exhibit list consisting of a subset of artworks from the art catalog, you will first add a checkbox to the beginning of each row in the table. Modify the addTableRow function and insert the following before the code for the first cell:

  
    var cell = row.insertCell(cellNum++);
    var checked = "";  // Checkboxes start out not checked.
    // Give each checkbox a unique id using the row number.
    cell.innerHTML = "<input type='checkbox' id='check" + nextRow + "' " +
                  checked + " onclick='functionName(this, " + nextRow + ");'>";
  
  

  functionName is just a placeholder for the name of a function you are about to write.

  Test that your checkboxes appear correctly when you load the page. Don't try clicking on them yet, though, since you haven't yet written the code that gets executed when you check or uncheck a checkbox.

• Next, write the function that gets called when the user checks, or unchecks, one of the checkboxes. (A starting skeleton is below.) When a checkbox becomes checked, the function should update the catalog entry to indicate that the it has been selected. If a checkbox is unchecked, the entry becomes unselected. In other words, clicking on the checkbox toggles the artwork between the selected and not-selected states. (One possible name for this function is toggleSelected, or even just toggle.)

  What parameters does this new function need, and what does it need to do? It needs to know the current state of the checkbox (checked or unchecked?) and which artwork in the catalog is to be selected or unselected. This implies that it needs the checkbox, the art catalog array, and the integer index of the artwork to be affected. Unfortunately, we cannot pass the art catalog array as a parameter in the checkbox's onClick attribute, so we must use the name of the array from the body section of the page instead (which might have been called myArray, as in the example below). That leaves two parameters to be passed in: the checkbox and the table row, which is also the index into the catalog array.

  
  //---------------
  // ??? functionName ???
  // functionName and this comment should be changed to something more useful.
  function functionName(checkbox, rowNumber)
  {
      // Use the array name from the BODY section.  (might not be myArray)
      var catalogArray = myArray;
  
      // DO SOMETHING USEFUL HERE
  }
  
  

  Choose a good function name and update your checkbox code in addTableRow to use that name also. The function should check the truth value of checkbox.checked (where checkbox is whatever name you gave the first parameter) and set catalogArray[rowNumber].selected to true or false accordingly (where rowNumber is whatever name you gave the 2^nd parameter).

  If you want a quick test that your new function is operating correctly before going on, inside the end of your function you can call alert with an embedded call to your toString function to show you the values for the catalog entry you have just changed.

• As a further test, select some entries and then sort by artist name. Do the selected checkboxes remain selected? If not, notice that the code provided to you for adding a checkbox to the table assumes that the checkbox should not be checked. If the entry's selected field is true, however, the check variable should be "checked" rather than an empty string.

  Test this sequence of behaviors again.

• When the user is done selecting the artwork to include in an upcoming special exhibit, they should be able to click on a button that generates a list of the selected pieces.

  • Create a new, empty table for the special exhibit list. Put the HTML code for the new table where you want the table to appear (but not within the script section of your page). Give it a different table id.
  • Create a button similar to your sorting button, although this one does not need to sort the data, it just needs to build a table. Pass the buildTable function your new table, rather than the original. If you test it at this point, you should get a new table, although it will include all of the catalog entries, not just the selected ones.
  • Add an extra parameter to the buildTable function that will allow you to specify whether to include all entries or only include selected entries in the table. Modify the code in the function to either add all entries or only selected entries, depending on the value of the new parameter. Using the parameter, build the original table and sorted table with all entries, but build the exhibit table to only include selected entries. (What should this button do if no catalog entries have been selected? What if they have all been selected? What if you change which entries have been selected and try to re-generate the list?)

• Add headings, instructions, and other formatting as appropriate, to make your page easier to read and use. (Optional: If you want a heading for the exhibit list to show up only when such a list is generated, create a function that produces both the heading and calls buildTable, and call that function rather than buildTable from your latest button.)

• Enhancement: Your special exhibit list, like the catalog, contains checkboxes in every row, but the checkboxes are meaningless in the exhibit list. You can eliminate them by adding an additional parameter to the addTableRow function to indicate whether or not you want to include a checkbox, and then modifying the function to only create a table cell containing a checkbox when the parameter is true. Modify the buildTable function to pass an appropriate true/false value as the extra parameter.

  Test your program to make sure that everything is still working correctly.

Sorting by Date

• When preparing to choose pieces for a special exhibit, it can be useful to first sort the catalog by artist, but it might also be useful to be able to sort the artwork by date. Define functions similar to the ones you wrote in Lab 4 to sort by date rather than by artist name, and provide a second sorting button.

Final Touches

• Once the Special Exhibit List and both sorting buttons are functioning properly, add graphics or text to the page to improve the user interface. Add text to describe what to do and align the list and buttons in an easy-to-read format. Include your name(s) on the page, as well as in the code.
• Be sure to prrof-read your source code to make sure that your comments, variable names, and indentation present a professional look. Remember that the human audience is as important to good code as the computer.