Associating a timer on flag click on individual nodes for individual users

Question

I have a custom field "Time to Finish" in my custom content type in Drupal7. The "Time to Finish" is basically a timer of sorts. whenever the users click a flag (which is placed on nodes of that custom content type) the timer should start. The difficulty associated with this is that:

1. Every node of that content type has different Time to Finish
2. The timer should start on flag click (the flag is same on all node, "Start Flag")
3. Every user would have their own timer then depending on when they click on the Start Flag

The admin while creating the content should have the option to fill in the field "Time to Finish" and on flag click the timer should start. Any suggestions. Would really appreciate it.

Thanks

Edit: I found this module which solves half of my issue,i.e, to assign every individual node their own Time To Finish field. Countdown Timer Field helped with this. Now i need that on "START FLAG" click the timer should start, not before that.

EDIT 2: i have opened a feature request issue for this at http://drupal.org/node/1948958 but can anyone help me do this. It will not only solve my use case but i think is a necessary feature to be added

EDIT 3: if there is any other solution i am eager to hear it as well.

Answer 1

Create tpl file for field field--field-name.tpl.php. place it to your

if Field nameis: field_page_photos
then File name will: field--field-page-photos.tpl.php

clear cache.

paste below code to your tpl field file.

<div class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <?php if (!$label_hidden): ?>
    <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
  <?php endif; ?>
  <div class="start-timer">START FLAG</div>
  <div class="starttime">
  <div class="field-items"<?php print $content_attributes; ?>>
    <?php foreach ($items as $delta => $item): ?>
      <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?></div>
    <?php endforeach; ?>
  </div></div>
</div>
<script type="text/javascript" charset="utf-8">
(function($){$('.starttime').hide();$('.start-timer').click(function(){$('.starttime').show();});})(jQuery);
</script>