mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
update docs and add demo
This commit is contained in:
Josh de Leeuw
parent
554408cb46
commit
78df74d186
99
docs/demos/jspsych-extension-mouse-tracking-demo1.html
Normal file
99
docs/demos/jspsych-extension-mouse-tracking-demo1.html
Normal file
@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<!--<script src="../../packages/extension-mouse-tracking/dist/index.browser.js"></script>-->
|
||||
<script src="https://unpkg.com/@jspsych/extension-mouse-tracking@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych({
|
||||
extensions: [
|
||||
{ type: jsPsychExtensionMouseTracking, params: {minimum_sample_time: 0} }
|
||||
]
|
||||
});
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({task: 'draw'}).last(1).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div id="target" style="width:250px; height: 250px; background-color: #333; margin: auto;"></div>',
|
||||
choices: ['Done'],
|
||||
prompt: "<p>Move your mouse around inside the square.</p>",
|
||||
extensions: [
|
||||
{type: jsPsychExtensionMouseTracking, params: {targets: ['#target']}}
|
||||
],
|
||||
data: {
|
||||
task: 'draw'
|
||||
}
|
||||
};
|
||||
|
||||
var replay = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div id="target" style="width:250px; height: 250px; background-color: #333; margin: auto; position: relative;"></div>',
|
||||
choices: ['Done'],
|
||||
prompt: "<p>Here's the recording of your mouse movements</p>",
|
||||
on_load: function(){
|
||||
var mouseMovements = jsPsych.data.get().last(1).values()[0].mouse_tracking_data;
|
||||
var targetRect = jsPsych.data.get().last(1).values()[0].mouse_tracking_targets['#target'];
|
||||
|
||||
var startTime = performance.now();
|
||||
|
||||
function draw_frame() {
|
||||
var timeElapsed = performance.now() - startTime;
|
||||
var points = mouseMovements.filter((x) => x.t <= timeElapsed);
|
||||
var html = ``;
|
||||
for(var p of points){
|
||||
html += `<div style="width: 3px; height: 3px; background-color: blue; position: absolute; top: ${p.y - 1 - targetRect.top}px; left: ${p.x - 1 - targetRect.left}px;"></div>`
|
||||
}
|
||||
document.querySelector('#target').innerHTML = html;
|
||||
if(points.length < mouseMovements.length) {
|
||||
requestAnimationFrame(draw_frame);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw_frame);
|
||||
|
||||
},
|
||||
data: {
|
||||
task: 'replay'
|
||||
}
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, replay, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -9,4 +9,5 @@ For an overview of what extensions are and how they work, see our [extensions ov
|
||||
|
||||
Extension | Description
|
||||
------ | -----------
|
||||
[jspsych‑ext‑webgazer](../extensions/webgazer.md) | Enables eye tracking using the [WebGazer](https://webgazer.cs.brown.edu/) library.
|
||||
[mouse‑tracking](../extensions/mouse-tracking.md) | Enables tracking of mouse movements and recording location of objects on screen.
|
||||
[webgazer](../extensions/webgazer.md) | Enables eye tracking using the [WebGazer](https://webgazer.cs.brown.edu/) library.
|
||||
105
docs/extensions/mouse-tracking.md
Normal file
105
docs/extensions/mouse-tracking.md
Normal file
@ -0,0 +1,105 @@
|
||||
# mouse-tracking
|
||||
|
||||
This extension supports mouse tracking.
|
||||
Specifically, it can record the `x` `y` coordinates and time of [mousemove events](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event).
|
||||
It also allows recording of the [bounding rectangle](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of elements on the screen to support the calculation of mouse events relative to different elements.
|
||||
|
||||
## Parameters
|
||||
|
||||
### Initialization Parameters
|
||||
|
||||
Initialization parameters can be set when calling `initJsPsych()`
|
||||
|
||||
```js
|
||||
initJsPsych({
|
||||
extensions: [
|
||||
{type: jsPsychExtensionMouseTracking, params: {...}}
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
minimum_sample_time | number | 0 | The minimum time between mouse samples. If mouse events occur more rapidly than this limit, they will not be recorded. Use this if you want to keep the data files smaller and don't need high resolution tracking data. The default value of 0 means that all events will be recorded.
|
||||
|
||||
### Trial Parameters
|
||||
|
||||
Trial parameters can be set when adding the extension to a trial object.
|
||||
|
||||
```js
|
||||
var trial = {
|
||||
type: jsPsych...,
|
||||
extensions: [
|
||||
{type: jsPsychExtensionWebgazer, params: {...}}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Parameter | Type | Default Value | Description
|
||||
----------|------|---------------|------------
|
||||
targets | array | [] | A list of elements on the page that you would like to record the coordinates of for comparison with the WebGazer data. Each entry in the array should be a valid [CSS selector string](https://www.w3schools.com/cssref/css_selectors.asp) that identifies the element. The selector string should be valid for exactly one element on the page. If the selector is valid for more than one element then only the first matching element will be recorded.
|
||||
|
||||
## Data Generated
|
||||
|
||||
Name | Type | Value
|
||||
-----|------|------
|
||||
mouse_tracking_data | array | An array of objects containing mouse movement data for the trial. Each object has an `x`, a `y`, and a `t` property. The `x` and `y` properties specify the mouse coordinates in pixels relative to the top left corner of the viewport and `t` specifies the time in milliseconds since the start of the trial.
|
||||
mouse_tracking_targets | object | An object contain the pixel coordinates of elements on the screen specified by the `.targets` parameter. Each key in this object will be a `selector` property, containing the CSS selector string used to find the element. The object corresponding to each key will contain `x` and `y` properties specifying the top-left corner of the object, `width` and `height` values, plus `top`, `bottom`, `left`, and `right` parameters which specify the [bounding rectangle](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of the element.
|
||||
|
||||
## Examples
|
||||
|
||||
???+ example "Record mouse movement data and play it back"
|
||||
=== "Code"
|
||||
```javascript
|
||||
var trial = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div id="target" style="width:250px; height: 250px; background-color: #333; margin: auto;"></div>',
|
||||
choices: ['Done'],
|
||||
prompt: "<p>Move your mouse around inside the square.</p>",
|
||||
extensions: [
|
||||
{type: jsPsychExtensionMouseTracking, params: {targets: ['#target']}}
|
||||
],
|
||||
data: {
|
||||
task: 'draw'
|
||||
}
|
||||
};
|
||||
|
||||
var replay = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div id="target" style="width:250px; height: 250px; background-color: #333; margin: auto; position: relative;"></div>',
|
||||
choices: ['Done'],
|
||||
prompt: "<p>Here's the recording of your mouse movements</p>",
|
||||
on_load: function(){
|
||||
var mouseMovements = jsPsych.data.get().last(1).values()[0].mouse_tracking_data;
|
||||
var targetRect = jsPsych.data.get().last(1).values()[0].mouse_tracking_targets['#target'];
|
||||
|
||||
var startTime = performance.now();
|
||||
|
||||
function draw_frame() {
|
||||
var timeElapsed = performance.now() - startTime;
|
||||
var points = mouseMovements.filter((x) => x.t <= timeElapsed);
|
||||
var html = ``;
|
||||
for(var p of points){
|
||||
html += `<div style="width: 3px; height: 3px; background-color: blue; position: absolute; top: ${p.y - 1 - targetRect.top}px; left: ${p.x - 1 - targetRect.left}px;"></div>`
|
||||
}
|
||||
document.querySelector('#target').innerHTML = html;
|
||||
if(points.length < mouseMovements.length) {
|
||||
requestAnimationFrame(draw_frame);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw_frame);
|
||||
|
||||
},
|
||||
data: {
|
||||
task: 'replay'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../../demos/jspsych-extension-mouse-tracking-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-extension-mouse-tracking-demo1.html">Open demo in new tab</a>
|
||||
@ -117,6 +117,7 @@ nav:
|
||||
- 'webgazer-validate': 'plugins/webgazer-validate.md'
|
||||
- Extensions:
|
||||
- 'List of Extensions': 'extensions/list-of-extensions.md'
|
||||
- 'mouse-tracking': 'extensions/mouse-tracking.md'
|
||||
- 'webgazer': 'extensions/webgazer.md'
|
||||
- Developers:
|
||||
- 'Configuration': 'developers/configuration.md'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user