Question Selector

HTML

<div class="questionWrapper">
	<p>SINGLE Choice Question</p>
    <input id="40" type="text" name="40" />
	<ul class="singleChoice" data-question="#40">
		<li>Option 1</li>
		<li>Option 2</li>
		<li>Option 3</li>
	</ul>
</div>
		
<div class="questionWrapper">
   <p>MULTI Choice Question</p>
    <input id="41" type="text" name="41" />
	<ul class="multiChoice" data-question="#41">
		<li>Option1</li>
		<li>Option2</li>
		<li>Option3</li>
	</ul>
</div>

<div class="questionWrapper">
   <p>SORTABLE Question</p>
    <input id="42" type="text" name="42" />
	<ul class="sortable" data-question="#42">
		<li>Option1</li>
		<li>Option2</li>
		<li>Option3</li>
	</ul>
</div>

CSS

.ui-selected { color:red; }
.questionWrapper { border: 1px solid green; padding: 5px; margin: 5px; }
li { cursor: pointer; }
input { width: 400px; font-size: 13px; background-color: #AEFFAD; border: 1px solid grey;padding:3px;  }

JavaScript

//Code for Single Choice Question
$("ul.singleChoice li").click(function() {
    $(this).addClass("ui-selected").siblings().removeClass("ui-selected");
    var currentQuestion = $(this).parent('ul');
    $(currentQuestion.data('question')).val("Single|"+$(this).text());
});

//Code for Multi Choice Question
$("ul.multiChoice li").click(function() {
    $(this).toggleClass('ui-selected');
    
    var currentQuestion = $(this).parent('ul');
    var selectedAnswers = new Array("Multi");
    currentQuestion.children('li.ui-selected').each(function() {
        selectedAnswers.push($(this).text());
    });
    
    $(currentQuestion.data('question')).val(selectedAnswers.join('|'));
});

//Code for Sortable Question 
$('.sortable').sortable({
    update: function(event, ui) {
        var currentQuestion = $(this).sortable("widget");
        var sortOrder = new Array("Sortable");
        currentQuestion.children('li').each(function() {
            sortOrder.push($(this).text());
        });
        
        $(currentQuestion.data('question')).val(sortOrder.join('|'));
     }
});