Homework 4

Submission deadline: Wednesday November 27, 11:59pm

Review deadline: Wednesday December 4, 11:59pm

Submission link: http://www.crowdgrader.org/crowdgrader/venues/view_venue/193#

This is a homework on Ajax. It consists of two parts.

Please make a homepage at default/index that allows people to proceed to part 1 and part 2.

Part 1

Write a web page that displays, as <div>'s one below the other, the US presidents presidents since WWII, or any other group of 10-12 people, as you like. On the side of each name, there should be two buttons: a + and a - button, and a count. Initially, all counts are 0.

When you press on a + or - button, the following should happen:

• You cannot decrement people who are already at 0.
• The +1 or -1 increment is communicated to the server, which stores the total for each person in a table with two fields: "name" and "count".
  • The count displayed for the person is incremented/decremented.

When you press the Submit button, you are then led to a second page (normally, not via Ajax), where you can read the counts for the various people. You can use a SQLFORM.grid here, so that viewer can sort the output either by name, or by count.

Part 2

Use a group of 10-12 people that have a chronological order (US presidents make a very good example here). Initially, you show them in <div>s one below the other, in a random order. Users can sort them up or down (hint: use JQuery UI sortable). Once they are ordered correctly, the <div>s where the names are written all turn yellow-gold, and "You Won!" appears at the top of the page. Hint: to detect when the user is done moving an element around, look at the update event for sortable.