Geek Answers Handbook

Create a jquery stopwatch that starts with custom focus, stops focusing and starts a new timer

I am going to create a simple web application that allows the user to independently test math problems. First, the user selects the type of problem that she would like to do, and then how much she would like to do.

As the user encounters problems, I would like to talk about how long it will take to complete each problem. This is the code showing the problems on the page:

function displayMult ($i)
{
echo '<table class="basic">';
    for($k=0; $k < $i; ++$k) // display problems
    {
        $user_response[$k] = 'user_response' . $k ;
        echo '<tr>';
        echo '<td>' . number_format($_SESSION['mult_one'][$k]) . '</td>';
        echo '<td>'. ' x ' . '</td>';
        echo '<td>' . number_format($_SESSION['mult_two'][$k]) . '</td>';
        echo '<td>' . ' =   <input type="text" class="field" name="user_response' . $k . '"' . 'id="u_r' . $k . '" />' . '</td>';
        echo '<td id="timer_' . $k . '">test</td>';
        echo '</tr>';
    }
echo '</table>';
}

jQuery . , , , 1) , , , 2) . , , .

$(document).ready(function() {
    $('.field').focus(stopwatch('#timer_0'));
});

function stopwatch(container) {
  var interval;
  return function() {
    if (interval) {
       clearInterval(interval); 
    }
    else{
        var count = 0;
        interval = setInterval(function() {
            count++;
            $(container).html(count + ' seconds');
        }, 1000);
    }
  };
}

jquery, ! .

+5
2

my go at it

var timer_id;

$(document).ready(function() {
    $('.field').focus(function() {
        $(this).addClass('active_input');
        timer_id = setInterval('tick()', 1000);
    }).blur(function() {
        $(this).removeClass('active_input');
        clearTimeout(timer_id);
    });
});

function tick() {
    var id_n = $('.active_input').attr('id').substring(3);
    var t_td = $('#timer_' + id_n);
    var t = parseInt(t_td.text(), 10);
    if (isNaN(t)) {
        t = '1 second';
    } else {
        t++;
        t += ' seconds'
    }
    t_td.text(t);
}
+4

1: , , , , focus(), , . jQuery 1.5, HTML, , jquery.data().

2: , , , count interval , . - , .data() , , , .

PHP:

function displayMult ($i)
{
echo '<table class="basic">';
    for($k=0; $k < $i; ++$k) // display problems
    {
        $user_response[$k] = 'user_response' . $k ;
        echo '<tr>';
        echo '<td>' . number_format($_SESSION['mult_one'][$k]) . '</td>';
        echo '<td>'. ' x ' . '</td>';
        echo '<td>' . number_format($_SESSION['mult_two'][$k]) . '</td>';
        echo '<td>' . ' =   <input data-timer="#timer_' . $k . '" type="text" class="field" name="user_response' . $k . '"' . 'id="u_r' . $k . '" />' . '</td>';
        echo '<td id="timer_' . $k . '">test</td>';
        echo '</tr>';
    }
echo '</table>';
}

JS:

$(document).ready(function() {
    $('.field').focus(function() {
        var timer_id = $(this).data("timer");
        stopwatch("#" + timer_id);
    });
    $('.field').blur(function() {
        var timer_id = $(this).data("timer");
        stopwatch("#" + timer_id);
    });
});

function stopwatch(container_id) {
  var $container = $(container_id);
  var time_now = new Date();
  var time_started = $container.data("time");
  if (time_started) {
    time_taken = time_now - time_started; // This is in milliseconds
    $container.html(time_taken / 1000 + ' seconds');
  }
  else {
    $container.data("time", time_now);
  }
}
+1

More articles:


All Articles