how to stop response time and count mouse clicks - php

Question

The code below is a dynamic way of displaying each option as checkbox buttons for each question:
function ExpandOptionType($option) {
$options = explode('-', $option);
if(count($options) > 1) {
$start = array_shift($options);
$end = array_shift($options);
do {
$options[] = $start;
}while(++$start <= $end);
}
else{
$options = explode(' or ', $option);
}
echo '<p>';
foreach($options as $indivOption) {
echo '<div id="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options[]" id="option-' . $indivOption . '" value="' . $indivOption . '" /><span>' . $indivOption . '</span></label></div>';
}
echo '</p>';
}
foreach ($arrQuestionId as $key=>$question) {
?>
<p><?php echo ExpandOptionType(htmlspecialchars($arrOptionType[$key])); ?></p>
<p><input type='text' class='questionIds' name='questionids' value='<?php echo htmlspecialchars($arrQuestionId[$key]); ?>' /></p>
<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>
<p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p>
}
Now below I 2 text inputs which are also in the foreach loop, one for response time and other is for counting mouse click:
<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>
<p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p>
Now this is my questions:
The response time text input contains a count up timer. What I want is that if the first button checkbox is clicked in a question, the question's response timer should stop. This is so we know how long it took the user to respond answering a particular question
The mouse click text starts with 0 and what I want this text input to do is for every button checkbox that is clicked in a question, the question's mouse click text input counts up the amount of clicks so we know how many clicks on the question's options the user has compiled.
How can the above be achieved?
Below is a jsfiddle showing sample code of what it looks like for one question:
http://jsfiddle.net/zAFND/630/
UPDATE:
Source code showing multiple questions example:
QUESTION 1:
<p>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-A" value="A" />
<span>A</span>
</label>
</div>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-B" value="B" />
<span>B</span>
</label>
</div>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-C" value="C" />
<span>C</span>
</label>
</div>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-D" value="D" />
<span>D</span>
</label>
</div>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-E" value="E" />
<span>E</span>
</label>
</div>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-F" value="F" />
<span>F</span>
</label>
</div>
</p>
<p><input type='text' class='questionIds' name='questionids' value='73' /></p>
<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>
<p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p>
QUESTION 2:
<p>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-A" value="A" />
<span>A</span>
</label>
</div>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-B" value="B" />
<span>B</span>
</label>
</div>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-C" value="C" />
<span>C</span>
</label>
</div>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-D" value="D" />
<span>D</span>
</label>
</div>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-E" value="E" />
<span>E</span>
</label>
</div>
</p>
<p><input type='text' class='questionIds' name='questionids' value='74' /></p>
<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>
<p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p>

Answer 1

As you created a reference for setinterval that is good. Now you can remove the set interval on click event of first checkbox and add a click event on all checkbox to increase counter.
That will be
$(document).ready(function(){
var checkBox=$('#ck-button').find('input');
var responsetimer=//your interval function
checkbox.filter(':first').bind('click',function(e){
clearInterval(responsetimer);
});
checkbox.bind('click',function(e){
$('.mouseClick').val(parseInt($('.mouseClick').val())+1);
});
});
Well i am not sure about the question you want timer to be stopped at first button click or first time button clicked. If it is first time than dont use the first binding . keep clear interval in second binding itself.
checkbox.bind('click',function(e){
clearInterval(responsetimer);
$('.mouseClick').val(parseInt($('.mouseClick').val())+1);
});
JS fiddle :http://jsfiddle.net/zAFND/631/
for second option
http://jsfiddle.net/zAFND/638/
UPDATE
if you want this for multiple question wrap each question with a div say <div class="queWrap"></div>
Make a array refrence for your interval function so that it can be clear.
Loop to each queWrap and start timer and assign events on checkbox.
Check example for multiple question :http://jsfiddle.net/zAFND/640/