1.1.0 • Published 4 years ago
pursuit-rotor-task v1.1.0
pursuit-rotor-task
Web Component for Pursuit Rotor Task to embed in web application.
Available as Open Material in Gorilla.sc
Usage
npm Package
The component available in npm:
npm install pursuit-rotor-task
HTML
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.
API
Component Attributes
component-radiusThe radius of the circle bounded by a square. The square is the component size. Default:"100px".dot-radiusThe radius of the rotor. Default:"40px".circle-timeThe number of seconds to complete a round. Default:"10".rounds-countThe amount of turns until the stop. Default:"1".red-alertShow red alert when the user mouse is out the rotor. Default:"true"green-alertShow green alert when the user mouse is in the rotor. Default:"true"timerCount down seconds before the experiment start. Default:"0". (If the value is0, the experiment will start when the user on the rotor)
Finish
To get the task results, you can listen to the finish event.
The finish event returns this data in the detail:
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));Contributing
To run it locally, you just need to clone the repository and open the src/index.html file.
To control the component attributes, edit the index.html file.
To see the results, open the browser DevTools (F12) and look at the console.