Adding a second to timer when icon is clicked
<p>In my number game children have 30 seconds to shoot the number icons that realate to a given question like "even numbers". I have recently added two clock icons as a bonus. When they shoot the blue one it will add 3 seconds and shooting the red one will take off 3 seconds.  </p>

<p>At the moment the clocks are assumed as wrong but I because of the if statement below. Is there a way I can incorporate the clocks into this click function, or will I have to start a new one? Also how do I add and take seconds from the timer?</p>

<pre><code>    $(".character").click(function() {
    if ($(this).hasClass("wrong")) {
        $(this).effect("bounce", {
            times: 2,
            direction: 'left'
        }, 300, function() {
            $(this).slideUp("fast")
        });
        miss++;
        attempted++;
        $("#miss").html("Wrong: " + miss);
    } else {
        $(this).effect("explode", 300);
        hit++;
        attempted++;
        $("#hit").html("Right: " + hit);
    }
});
});
</code></pre>

<p>Here is the list of icons</p>

<pre><code>&lt;ul id="container"&gt;
    &lt;li&gt;&lt;div id="char1" class="character right" vaule="1"&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div id="char2" class="character right" vaule="2"&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div id="char3" class="character right" vaule="3"&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div id="char4" class="character right" vaule="4"&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div id="char5" class="character right" vaule="5"&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div id="char6" class="character right" vaule="6"&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div id="char7" class="character right" vaule="7"&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div id="char8" class="character right" vaule="8"&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div id="char9" class="character right" vaule="9"&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div id="char10" class="character right" vaule="0"&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div id="char11" class="character clock up"&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div id="char12" class="character clock down"&gt;&lt;/div&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Fiddle: <a href="http://jsfiddle.net/cFKHq/13/" rel="nofollow">http://jsfiddle.net/cFKHq/13/</a></p>
