Counter for animation count

Hi all,

I’m working on a fun animation where you can animate a puppet by moving your curser over certain buttons or by clicking on the buttons. However, I can’t find out how to create a counter so show how many times someone has run an animation. It needs to count to infinitely. Think of this website: http://trumpdonald.org. Each time you Trump, you the counter adds your Trump.

Hope someone can help me out with this. Im willing to share the project as soon as the rest is finished.

Marc

1 Like

This requires some amount of code.

That site appears to use a server-side counter; this means that each time the button is pressed, a request is made to a server running code that updates the count. There are many ways in which this could be handled, and some is dependent on what services your web host offer. A general/simple flow would be:

  1. Initial count is loaded with the page into a javascript variable
  2. On Scene Load, this is set to the inner HTML of an element to display the count
  3. On Button Click, an AJAX request is made to the server to increment the count.
  4. The server returns a new count as a result of the request in step 3
  5. The Inner HTML of the display element is set to this result

If you do not care about a global count, and only want a local number, the JavaScript to do this is relatively short.

Step One:
Create a Text element, Set the value to 0, and give it a Unique Element ID in the Identity inspector like “myCounter”

Step Two:
Add an On Scene Load action to Run JavaScript… and make a new javascript function with this code:

window.clickCount = 0;

Step Three:
For your interaction, (say an On Mouse Click action on a button), run this JavaScript code:

window.clickCount += 1;
hypeDocument.getElementById("myCounter").innerHTML = "" + window.clickCount;

There’s of course fancier ways to do this, but that’s the general flow.

4 Likes

Hi Jonathan,

Many thanks for the tip. I do need a global count incorporated in every button. I have created a puppet that you can animate by going over several buttons. The idea is that very movement from whoever contributes. Just like the example. Do you think there is a standard script for that?

There might be something semi-standard, but it relies on a lot of assumptions. I’d look for something using PHP as that is likely the most compatible with servers.

Oh ffs, an extra parenthesis.

And here’s a working version:

clicker.hype.zip (15.9 KB)

1 Like