An Interactive question editor: HW8 Partial

From HW8: www.csce242.com. By jmvidal.

HTML

<span id="qtext" class="editable"> Enter your question here...</span>

<ul id="choices">
    <li><span class="editable">Choice...</span>
        <a href="#" class="delchoice">X</a></li>
    <li><span class="editable">Choice...</span> 
        <a href="#" class="delchoice">X</a></li>
</ul>
<a href="#" id="addchoice">+</a><br/>
<input type="button" value="Submit" id="submit"/>
<div id="theform"></div>

CSS

.editable:hover {
    background-color: yellow;}

ul { list-style: decimal }

#addchoice, .delchoice {
    text-decoration: none;
}

JavaScript

//Allow user to edit span element.
function editHandler() {
    //first replace the span with an input
    $(this).replaceWith('<input id="usertext" value="' + $(this).text() + '"/>');
    //now set up an event-handler for #usertext to turn it back to a span
    $('#usertext').focus().select();
    $('#usertext').focusout( //'tab' or click somewhere else.
    function() {
        $(this).replaceWith('<span id="usertext" class="editable">' + $('#usertext').val() + '</span>');
    })
}

//adds a new choice
function addChoice() {
    $('#choices').append('<li><span class="editable">Choice...</span> <a href="#" class="delchoice">X</a></li>');  
}

function deleteChoice(){
    $(this).parent().remove();
}

//extracts the text from the current question and sends it to the server
function submitQuestion(){
    var qtext = $('#qtext').text();
    var choices = [null,null,null,null,null]; 
    $('li span.editable').each(function(index){
        choices[index] = $(this).text();
    });
    alert('POSTing qtext=' + qtext + ' c0=' + choices[0] + ' c1=' + choices[1]);
    //I have not tested this next call but chrome tools says it works
    $.postGo('/echo/html', {
        questionText: qtext,
        choice0: choices[0], choice1: choices[1], choice2: choices[2],
        choice3: choices[3], choice4: choices[4] });
}
//Use .live because we will be adding more .editables at runtime.
$('.editable').live('click', editHandler);
$('#addchoice').click(addChoice);
$('.delchoice').live('click', deleteChoice);
$('#submit').click(submitQuestion);


//from http://stackoverflow.com/questions/1149454/non-ajax-get-post-using-jquery-plugin.
(function($) {
    $.extend({
        getGo: function(url, params) {
            document.location = url + '?' + $.param(params);
        },
        postGo: function(url, params) {
            var $form = $("<form>")
                .attr("method", "post")
                .attr("action", url);
            $.each(params, function(name, value) {
          ...