• Assigned: Fri 11/9
• Due: print out of code - Wed 11/21, 5PM - slide under my office door if you do not turn it in directly to me; Brief demo for me by 1PM Tue 11/20
• Weight: 15

Description

In this assignment you will create interactive, electronic flashcards. The basic, non-interactive web page is in the skeleton. Do not make any changes to the HTML of the skeleton. The necessary CSS is also provided, but you are free to make modifications if you like. The structure of the HTML in the skeleton is explained in this text file and screen shots of its behavior are here. A short example of buttons, form, input and checkboxes is here.

Requirements

It is strongly recommended that you grow this program one small step at a time. Suggested breakdown:

1. jQuery for the expander. The HTML has all the classes and ids you will need. Similar to the tabs assignment, implement expansion by clicking on the expander icon (actually, the bounding box of the icon) to reveal the answer to the question. Unlike tabs, the expanders are independent. Any subset of them can be expanded at the same time.
2. Shuffle button. Reuse the JS code from Assignment 9, Shuffle 'Em Up. This will give you an array of the problem numbers in random order. Next, as a separate method called reorder use the array to change the order of the problems on the page. The easiest way to do this is to create a new div for the reordered list of problems, and, one by one, copy them from the old div into the new one. When finished, you can remove the old div that is no longer needed. You can assume that the problems are sequentially numbered starting with 1.
3. Erase button and delete box. You will not need to create a new div as with the Shuffle button. Simply remove the selected problems.

Turn in the following in the following order:

1. Cover page.
2. JS / jQuery code
3. HTML of head element showing how you partitioned your JS into separate, external files. Please do not show the entire head element, just the JS files that are loaded. My solution has JS files: controlPanel (for Shuffle and Erase), expander, erase, reorder (Assignment 9), and shuffle. You are not required to have the exact same files.

Important Points

• As you grow this program step by step, I like to enter the new JS code within the script tag of the head element of the page itself. Once the code is fully debugged and working, put the code into an exteranal and and link the page to it. Analagous to dividing Java programs into classes, this divides your JS code into small files each of which accomplishes a single purpose.
• Debriefing – What have you learned from this assignment? What, in general, have you learned about jQuery?

Grading

• 35% Expander
• 35% Shuffle
  10% Erase button and delete box
  
• 20% Good programming style
  • Well written jQuery (not just Java style jQuery). Appropriate use of chaining, implicit loops, and jQuery member functions. Overuse of chaining can lead to difficult to understand code. However, for this assignment, you will not be counted off for "too much chaining."
  • General good programming practice: indentation (especially with chaining), clarity, simplicity, code in external files, small files, etc.
  • Good descriptive names and the use of naming variables. This is demonstrated in my examples where, usually at the start of a function, I parse the elements and assign a name to each: headerContent, divId, parent, etc.

Objectives

More practice with jQuery. Create a large web program with multiple pieces.