thachhoang/index.html

## index.html
<html>
<head>
    <style>
        label { display: block; }
        .options { margin-bottom: 20px; }
    </style>
    <script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function(){
            initFirstAnswers();
        });

        function initFirstAnswers(){
            // reset displays
            $('.options #firstDisp').html('0');
            // uncheck everything
            $('.options input').removeAttr('checked');
            // remove unfired events
            $('.options input').off('click');

            $('.options input').click(function(){
                // get the question/parent group
                var group = $(this).closest('.options');
                // remove event binding on other answers
                group.find('input').off('click');

                // send first answer info to server
                var firstId = $(this).attr('id'); // first answer id
                var groupId = group.attr('id'); // question id
                $.ajax({
                    type: "POST",
                    url: "test.php",
                    data: { id: firstId, group: groupId }
                }).done(function(msg) {
                    // some feedback is nice
                    alert("Data saved: " + msg);
                    group.find('#firstDisp').html(firstId);
                });
            });
        }
    </script>
</head>
<body>
    <a href="javascript:void(0);" onclick="initFirstAnswers()">Reset everything</a>.<br/><br/>

    <div class="options" id="q1">
        First: <span id="firstDisp">0</span><br /><br />
        <label><input id="1" name="ans" type="checkbox" /> It does not matter</label>
        <label><input id="2" name="ans" type="checkbox" /> which answer you pick</label>
        <label><input id="3" name="ans" type="checkbox" /> you are always wrong</label>
        <label><input id="4" name="ans" type="checkbox" /> and we will record</label>
        <label><input id="5" name="ans" type="checkbox" /> your every mistake</label>
        <label><input id="6" name="ans" type="checkbox" /> for posterity.</label>
    </div>

    <div class="options" id="q2">
        First: <span id="firstDisp">0</span><br /><br />
        <label><input id="1" name="ans2" type="radio" /> It does not matter</label>
        <label><input id="2" name="ans2" type="radio" /> which answer you pick</label>
        <label><input id="3" name="ans2" type="radio" /> you are always wrong</label>
        <label><input id="4" name="ans2" type="radio" /> and we will record</label>
        <label><input id="5" name="ans2" type="radio" /> your every mistake</label>
        <label><input id="6" name="ans2" type="radio" /> for posterity.</label>
    </div>
</body>
</html>

## test.php
<?php
if( $_POST["id"] && $_POST["group"] )
{
	echo "Server here. The first answer for ". $_POST["group"]. " is ". $_POST["id"]. ".";
	exit();
}
?>
	<html>
	<head>
	<style>
	label { display: block; }
	.options { margin-bottom: 20px; }
	</style>
	<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
	$(function(){
	initFirstAnswers();
	});

	function initFirstAnswers(){
	// reset displays
	$('.options #firstDisp').html('0');
	// uncheck everything
	$('.options input').removeAttr('checked');
	// remove unfired events
	$('.options input').off('click');

	$('.options input').click(function(){
	// get the question/parent group
	var group = $(this).closest('.options');
	// remove event binding on other answers
	group.find('input').off('click');

	// send first answer info to server
	var firstId = $(this).attr('id'); // first answer id
	var groupId = group.attr('id'); // question id
	$.ajax({
	type: "POST",
	url: "test.php",
	data: { id: firstId, group: groupId }
	}).done(function(msg) {
	// some feedback is nice
	alert("Data saved: " + msg);
	group.find('#firstDisp').html(firstId);
	});
	});
	}
	</script>
	</head>
	<body>
	<a href="javascript:void(0);" onclick="initFirstAnswers()">Reset everything</a>.<br/><br/>

	<div class="options" id="q1">
	First: <span id="firstDisp">0</span><br /><br />
	<label><input id="1" name="ans" type="checkbox" /> It does not matter</label>
	<label><input id="2" name="ans" type="checkbox" /> which answer you pick</label>
	<label><input id="3" name="ans" type="checkbox" /> you are always wrong</label>
	<label><input id="4" name="ans" type="checkbox" /> and we will record</label>
	<label><input id="5" name="ans" type="checkbox" /> your every mistake</label>
	<label><input id="6" name="ans" type="checkbox" /> for posterity.</label>
	</div>

	<div class="options" id="q2">
	First: <span id="firstDisp">0</span><br /><br />
	<label><input id="1" name="ans2" type="radio" /> It does not matter</label>
	<label><input id="2" name="ans2" type="radio" /> which answer you pick</label>
	<label><input id="3" name="ans2" type="radio" /> you are always wrong</label>
	<label><input id="4" name="ans2" type="radio" /> and we will record</label>
	<label><input id="5" name="ans2" type="radio" /> your every mistake</label>
	<label><input id="6" name="ans2" type="radio" /> for posterity.</label>
	</div>
	</body>
	</html>
	<?php
	if( $_POST["id"] && $_POST["group"] )
	{
	echo "Server here. The first answer for ". $_POST["group"]. " is ". $_POST["id"]. ".";
	exit();
	}
	?>