Skip to content

Instantly share code, notes, and snippets.

@thachhoang

thachhoang/index.html

Created October 3, 2012 17:25
Show Gist options
  • Save thachhoang/3828447 to your computer and use it in GitHub Desktop.
Save thachhoang/3828447 to your computer and use it in GitHub Desktop.
Download ZIP
Given a multiple-choice question, record the very first answer test-takers choose.
Raw
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>
Raw
test.php
<?php
if( $_POST["id"] && $_POST["group"] )
{
echo "Server here. The first answer for ". $_POST["group"]. " is ". $_POST["id"]. ".";
exit();
}
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment