Numbered voting

I would be so very grateful if someone could help me out! I have been searching the internet for ages now looking for a way to achieve the desired user interactivity mentioned below (perhaps there is a similar script available already that I don't know of?).

The problem:

Supporting image: http://img.photobucket.com/albums/v291/Dark_Jessa/btn_instructions.jpg

There is a list of candidates, each with a circle next to them. When a user clicks inside a circle, a number will appear inside. This process will continue for all other circles, with numbers appearing in ascending order.

If a user changes their mind on the number they have given a circle, the user can click on the number and it will go away from the circle.

When the user clicks inside another circle, the number inside the circle will be replaced by the number that was being held by the cursor.

EXAMPLE: The user wants “David MORGAN” to be their second choice. So the user will click inside the circle next to “David MORGAN”. The number ‘3’, which was previously in the circle, is now removed form the circle.

The user now clicks on the circle next to “Steve PRATT”, which has the number ‘2’ inside. The number ‘3’ which was attached to the user cursor has now replaced the number 2 upon click. The user is now invisibly holding onto the 开发者_StackOverflownumber ‘3’.

The next part I would like is for there to be a submit button. When the user presses the button, their circle choices will be displayed on the new page, so they can confirm the selection.

If they press the submit button, and all circles have not been entered, they will be taken to a page informing them of this.

I don't need any of the data recorded permanently, just the choices recorded temporary on the confirmation.

Any ideas? :3

A rank should be unassigned, assigned to a candidate, or held "by the mouse" for assignment. Code something that puts each rank in one of these three states.

For example, use two (non-global) variables, (e.g.) nextRank and nowRank. The value of nextRank means all ranks >= nextRank are unassigned.

When the user clicks on an empty circle:

1. if nowRank is a positive integer, assign the candidate the rank nowRank and set nowRank to 0
2. else assign the candidate nextRank and increment nextRank

When the user clicks on a filled circle,

1. if nowRank is a positive integer, swap the candidate's rank and nowRank (if non-zero)
2. else set nowRank to the candidate's rank and clear the candidate's rank.

Since this is a homework questions, here's another scenario for you to consider: clicking a ranked candidate unassigns that rank, but won't assign a previously unassigned rank. Ranks are only assigned when a candidate has no rank. How would you implement this?