Home/ Questions/Q 6318293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T15:37:22+00:00

The Challenge: Assign a click event to something which will draw a tally mark

  • 0

The Challenge:
Assign a click event to something which will draw a tally mark inside a container. The tally mark should respect other tally marks already drawn so the positioning of the tally marks makes sense. After every click, tally marks should represent total number of clicks thus far.

These are tally marks: 

1       2          3              4                 5
▼       ▼          ▼              ▼                 ▼

Tally marks example

The following example has a tally mark count of 83:
enter image description here

Challenge Rules:

  • Must use JQuery & HTML 5.
  • Tally marks must be added to a container, not the body.
  • The container where you draw the tallies must grow to accommodate new tallies.
  • Sprite or CSS3 for the actual tick mark is up to you. Feel free to use the first image as your sprite 🙂
  • Increment ONLY – no need to remove tallies. Once they are scratched into a prison cell wall, they are there for life!
  • Must post a link to a working demo on http://jsfiddle.net/
  • Have fun!
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Working demo

    $.fn.tallier = function () {
    var $this = this,
        bgUrl = 'https://i.stack.imgur.com/96hvp.png',
        bgHeight = 125,
        bgVals = [
            [45, 25], // width, background-position X
            [65, -35],
            [85, -115],
            [105, -215],
            [140, -360]
        ],
        count = 0;

    $this.click(function(e) {
        count++;

        // add new tally box every 5th
        if (count%5 == 1) {
            var $newTally = $('<div>').addClass('tally');
            $newTally.css({
                          background: 'url("' + bgUrl + '") ' +
                            bgVals[0][1] + 'px 0 no-repeat transparent',
                          float: 'left',
                          width: bgVals[0][0] + 'px',
                          height: bgHeight + 'px'
                      });
            $this.append($newTally);
        }

        // change background position and width for new tally
        var $lastTally = $this.find('.tally:last'),
            i = count%5 - 1;
        i = i < 0 ? 4 : i;
        $lastTally.css({
            'background-position': bgVals[i][1] + 'px 0',
            width: bgVals[i][0] + 'px'
        });
    });
};

// invoke
$('#tally').tallier();
$('#tally').click();

    Demo

    • 0