how to stop response time and count mouse clicks
<p>The code below is a dynamic way of displaying each option as checkbox buttons for each question:</p>

<pre><code>        function ExpandOptionType($option) { 
                $options = explode('-', $option);
                if(count($options) &gt; 1) {
                    $start = array_shift($options);
                    $end = array_shift($options);
                    do {
                        $options[] = $start;
                    }while(++$start &lt;= $end);
                 }
                 else{
                    $options = explode(' or ', $option);
                 }
                 echo '&lt;p&gt;';
                 foreach($options as $indivOption) {
                     echo '&lt;div id="ck-button"&gt;&lt;label class="fixedLabelCheckbox"&gt;&lt;input type="checkbox" name="options[]" id="option-' . $indivOption . '" value="' . $indivOption . '" /&gt;&lt;span&gt;' . $indivOption . '&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;';
                 }
                  echo '&lt;/p&gt;';


            }


            foreach ($arrQuestionId as $key=&gt;$question) {

            ?&gt;

            &lt;p&gt;&lt;?php echo ExpandOptionType(htmlspecialchars($arrOptionType[$key])); ?&gt;&lt;/p&gt;

    &lt;p&gt;&lt;input type='text' class='questionIds' name='questionids' value='&lt;?php echo htmlspecialchars($arrQuestionId[$key]); ?&gt;' /&gt;&lt;/p&gt;

    &lt;p&gt;&lt;input type='text' class='responseTime' name='responsetime' value='00:00:00' /&gt;&lt;/p&gt;

    &lt;p&gt;&lt;input type='text' class='mouseClick' name='mouseclick' value='0' /&gt;&lt;/p&gt;

}
</code></pre>

<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>

<pre><code>&lt;p&gt;&lt;input type='text' class='responseTime' name='responsetime' value='00:00:00' /&gt;&lt;/p&gt;

&lt;p&gt;&lt;input type='text' class='mouseClick' name='mouseclick' value='0' /&gt;&lt;/p&gt;
</code></pre>

<p>Now this is my questions:</p>

<ol>
<li><p>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</p></li>
<li><p>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.</p></li>
</ol>

<p>How can the above be achieved?</p>

<p>Below is a jsfiddle showing sample code of what it looks like for one question:</p>

<p><a href="http://jsfiddle.net/zAFND/630/" rel="nofollow">http://jsfiddle.net/zAFND/630/</a></p>

<p>UPDATE:</p>

<p>Source code showing multiple questions example:</p>

<pre><code>QUESTION 1:

&lt;p&gt;
&lt;div id="ck-button"&gt;
&lt;label class="fixedLabelCheckbox"&gt;
&lt;input type="checkbox" name="options[]" id="option-A" value="A" /&gt;
&lt;span&gt;A&lt;/span&gt;
&lt;/label&gt;
&lt;/div&gt;

&lt;div id="ck-button"&gt;
&lt;label class="fixedLabelCheckbox"&gt;
&lt;input type="checkbox" name="options[]" id="option-B" value="B" /&gt;
&lt;span&gt;B&lt;/span&gt;
&lt;/label&gt;
&lt;/div&gt;

&lt;div id="ck-button"&gt;
&lt;label class="fixedLabelCheckbox"&gt;
&lt;input type="checkbox" name="options[]" id="option-C" value="C" /&gt;
&lt;span&gt;C&lt;/span&gt;
&lt;/label&gt;
&lt;/div&gt;

&lt;div id="ck-button"&gt;
&lt;label class="fixedLabelCheckbox"&gt;
&lt;input type="checkbox" name="options[]" id="option-D" value="D" /&gt;
&lt;span&gt;D&lt;/span&gt;
&lt;/label&gt;
&lt;/div&gt;

&lt;div id="ck-button"&gt;
&lt;label class="fixedLabelCheckbox"&gt;
&lt;input type="checkbox" name="options[]" id="option-E" value="E" /&gt;
&lt;span&gt;E&lt;/span&gt;
&lt;/label&gt;
&lt;/div&gt;

&lt;div id="ck-button"&gt;
&lt;label class="fixedLabelCheckbox"&gt;
&lt;input type="checkbox" name="options[]" id="option-F" value="F" /&gt;
&lt;span&gt;F&lt;/span&gt;
&lt;/label&gt;
&lt;/div&gt;

&lt;/p&gt;

&lt;p&gt;&lt;input type='text' class='questionIds' name='questionids' value='73' /&gt;&lt;/p&gt;


&lt;p&gt;&lt;input type='text' class='responseTime' name='responsetime' value='00:00:00' /&gt;&lt;/p&gt;

&lt;p&gt;&lt;input type='text' class='mouseClick' name='mouseclick' value='0' /&gt;&lt;/p&gt;



QUESTION 2:

&lt;p&gt;
&lt;div id="ck-button"&gt;
&lt;label class="fixedLabelCheckbox"&gt;
&lt;input type="checkbox" name="options[]" id="option-A" value="A" /&gt;
&lt;span&gt;A&lt;/span&gt;
&lt;/label&gt;
&lt;/div&gt;

&lt;div id="ck-button"&gt;
&lt;label class="fixedLabelCheckbox"&gt;
&lt;input type="checkbox" name="options[]" id="option-B" value="B" /&gt;
&lt;span&gt;B&lt;/span&gt;
&lt;/label&gt;
&lt;/div&gt;

&lt;div id="ck-button"&gt;
&lt;label class="fixedLabelCheckbox"&gt;
&lt;input type="checkbox" name="options[]" id="option-C" value="C" /&gt;
&lt;span&gt;C&lt;/span&gt;
&lt;/label&gt;
&lt;/div&gt;

&lt;div id="ck-button"&gt;
&lt;label class="fixedLabelCheckbox"&gt;
&lt;input type="checkbox" name="options[]" id="option-D" value="D" /&gt;
&lt;span&gt;D&lt;/span&gt;
&lt;/label&gt;
&lt;/div&gt;

&lt;div id="ck-button"&gt;
&lt;label class="fixedLabelCheckbox"&gt;
&lt;input type="checkbox" name="options[]" id="option-E" value="E" /&gt;
&lt;span&gt;E&lt;/span&gt;
&lt;/label&gt;
&lt;/div&gt;

&lt;/p&gt;

&lt;p&gt;&lt;input type='text' class='questionIds' name='questionids' value='74' /&gt;&lt;/p&gt;


&lt;p&gt;&lt;input type='text' class='responseTime' name='responsetime' value='00:00:00' /&gt;&lt;/p&gt;

&lt;p&gt;&lt;input type='text' class='mouseClick' name='mouseclick' value='0' /&gt;&lt;/p&gt;
</code></pre>
