An Interactive question editor: HW8 Partial

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

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

function changeBackToSpan(){
    $(this).parent().replaceWith('<span class="editable">' + $(this).prev().val()+ '</span>');
}

var original;
function changeBackToOriginal(){
      $(this).parent().replaceWith('<span class="editable">' + original + '</span>');
}

//Allow user to edit span element
function editHandler() {
    //first replace the span with an input
    original = $(this).text();
    $(this).replaceWith('<span><input id="usertext" value="' + $(this).text() + '"/><input id="tempsave" type="button" value="save"/><input type="button" id="tempcancel" value="cancel"/></span>');
    //now set up an event-handler for #usertext to turn it back to a span
   $("#usertext").focus().select();
}

//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);
$('#tempsave').live('click',changeBackToSpan);
$('#tempcancel').live('click',changeBackToOriginal);


//from http://stackoverflow.com/questions/1149454/non-ajax-get-post-using-jquery-plugin.
(function($) {
    $.extend({
       ...