Can I use Anvil for timing reactions in the browser?

Anvil Q&A
1

Hello all,

I’m looking to build a reaction timer app for a friend’s business. Came across Anvil today (via Hacker News) and wondering if it’s suitable. I need:

  1. To show a button/image on screen, and start a timer
  2. Stop the timer when the user clicks the button/image
  3. Record the time taken to click and save in the back end DB (repeated for several trials).

I need reaction time at microsecond precision. I found the Timer component, and I think(?) it can tick at that rate. However, I don’t know (a) if that frequency will cause problems, and/or (b) whether a reasonable approach to measuring reaction time is counting ticks in an event handler. Or perhaps there’s a better approach?

Any pointers appreciated.

Thanks.

2

Welcome to the forum!

The timer component is intended for actions that happen without user interaction. Since you’re depending on user interaction, you can just use time.time() to get the start time when you show the image, and use it again when they click the image, then subtract to get the elapsed time. Precision depends on the platform, which in the client will mean the Skulpt implementation of time.time(). Play with it to see if it’s suitable for your needs.

2 Likes
3

excellent, thanks for the quick response @jshaffstall . That seems like a much nicer approach - I’ll have a look.

4

Years ago I have built something similar for a neuropsychologist friend of mine.

At the time Anvil didn’t exist yet and I wrote it all in Javascript. Today I would have used Anvil.

The requirements were to display images and animations. Animations could be objects moving on the screen, or objects appearing in one position and disappearing after a certain time. There was a bar displaying the score, and an animated time bar showing the remaining time.

Today in Anvil I would use a canvas to show whatever I need to show, a timer to manage the animations and the canvas’ click events to manage the user interactions. Using time.time() inside the click event is the best way to know what happened when. Here you can see an example of how to use animations and click events in a canvas.

In a simpler scenario, where graphics is not required and some clickable buttons or links in a fixed position would do, then there is no need to deal with canvasses. Using the click events of buttons or links will do.

Here you need 3 things at microsecond precision:

  1. The time.time() implementation needs to be precise enough. I don’t know the details of the implementation in Skulpt, but I’m guessing it’s using whatever Javascript offers under the hood, so, if you are going to use a browser, Anvil will be as good as any other tool.
  2. The browser / computer needs to be responsive. Windows or Linux are not real time operating systems, so you cannot be sure the browser will be listening to you at microsecond precision. It will be there most of the time, but once in a while it will be busy doing something else and some of your click events may be delayed.
  3. The mouse (or input device) needs to be consistent in its response time. I don’t know if you need any special piece of hardware here.

When we developed the old JavaScript app, we considered all of these factors and decided that it was acceptable to have a small amount of noise caused by the imperfect environment.

3 Likes
5

that’s super helpful @stefano.menci , really appreciate you taking the time to reply.

It will be running in browser and we have control of the hardware (i.e. users will use our hardware, not their own). And I think we’ll be in the same position wrt noise.

Encouraging that you see it as a good fit for Anvil. Thank you.

6

In this case I see Anvil good for two reasons:

  • Writing the logic of the tool in Python will not shorten my life as it would writing it in Javascript
  • Anvil comes with tons of goodies that can be integrated with the tool, like user management, quick deployment, etc.
1 Like