HW8: Ajaxifying the Question Editor

In this homework we go back to our survey app and implement an ajaxy question editor. That is, you will replace the current question functionality, which only lets the user create a new question or delete an existing question, with new functionality that will let the user edit existing question parts, and which will do this without a full-page reload (which is sooo 10-years ago). Specifically, you will implement the following features:

1. You should start by changing the /survey page. When the user first visits the page it should show some sample text for the question text and two sample choices. The user will be able to edit this question as follows:
   1. The text of the question will show as normal text but if the user hovers over it its background color changes (CSS:hover) . If the user clicks on it the text transforms into a textbox whose value is the current text (same effect as used in flickr, picasaweb and other photo sites to edit the title of a photo), along with a 'save' and 'cancel' button. If the user clicks on 'save' then the new text is saved.
   2. The choices bill be editable in the same way.
   3. Next to each choice there will be an 'X' (or little garbage can if you like). When the user clicks on it that choice will be deleted from the question.
   4. After the last choice there will be a '+'. If the user clicks on it then you will add a new choice field with some sample text in it.
   When he hits the 'create' button then you will generate the POST request that actually creates that question in the database, gives it a unique number, and the re-directs the user to the new question page. For example, if the new question got the number 1234 then the user is redirected to page /1234.
   Notice that this /survey page does not make any XHR calls; it is just one big POST at the end.
2. You will then re-implement the /[0-9]+ pages. These question pages stay the same for anyone who is not the owner of the question. But, the owner of the question will now have the same editing functionality that he has in the /survey page. That is, he will be able to edit the text and add/edit/delete the choices. The be difference is that every time he makes an edit you will perform an XHR POST /1234 request to update that question on the server. Also, there is no 'create' button on this page.
   Note that, even though the user is changing each part of the question separately, it will probably be a lot easier for you to re-submit the whole question each time he changes some part of it. That way you only have to write one 'update question' method, instead of writing a 'change text', 'change choice', 'delete choices' etc. methods. I'll explain more in class.

This homework is due on Monday, March 21 @11am. You can submit it here.

Required Reading

• The jQuery Ajax docs.