Web Component for Pursuit Rotor Task to embed in web application.
Available as Open Material in Gorilla.sc
The component available in [npm]:
npm install pursuit-rotor-task
To use in an HTML document, just add the script and use the component:
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/pursuit-rotor-task/src/PursuitRotorTask.min.js"></script> </head> <body> <pursuit-rotor-task></pursuit-rotor-task> </body> </html>
You can look on the
docs/index.html file (also available in Github Pages here) to see more complicated example.
component-radiusThe radius of the circle bounded by a square. The square is the component size. Default:
dot-radiusThe radius of the rotor. Default:
circle-timeThe number of seconds to complete a round. Default:
rounds-countThe amount of turns until the stop. Default:
red-alertShow red alert when the user mouse is out the rotor. Default:
green-alertShow green alert when the user mouse is in the rotor. Default:
timerCount down seconds before the experiment start. Default:
"0". (If the value is
0, the experiment will start when the user on the rotor)
To get the task results, you can listen to the
finish event returns this data in the
outCountCount the times the user left the rotor.
inCountCount the times the user enter the rotor.
inTimeMsCount how many milliseconds the user was in the rotor.
outTimeMsCount how many milliseconds the user was out the rotor.
document .querySelector("pursuit-rotor-task") .addEventListener("finish", (e) => console.log(e.detail));
To run it locally, you just need to clone the repository and open the
To control the component attributes, edit the
To see the results, open the browser DevTools (F12) and look at the console.