mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
db754538b7
* modularize plugins: edit index.ts and example files (WIP)
* continue modularizing plugins: edit index.ts and example files (WIP)
* continue modularizing plugins: edit index.ts and example files (WIP)
* continue modularizing plugins and example files, make info static in plugin classes
* add preload flag to plugin info, fix a few parameterType values
* change preload flags in plugin info from audio/image/video strings to boolean
* convert more plugins and example files
* convert more plugins/examples, sync with webgazer branch plugins/examples (not working on this branch)
* remove preload flag from info, change to ParameterType, change to "ALL_KEYS"/"NO_KEYS", change KEY type to KEYS for array params
* remove descriptions from plugin info, fix some ALL_KEYS/NO_KEYS errors
* remove descriptions and add pretty names to plugin info
* remove/edit comments re ALL_KEYS/NO_KEYS and TS errors
* fix some preload plugin errors and convert example file (plugin still not working due to getAutoPreloadList)
* convert RDK plugin and example file
* convert preload plugin and example, add JsPsych getTimelineDescription method for auto-preloading (still not working for audio due to getAudioBuffer
* fix jsPsych getTimelineDescription method so that it does recursive search
* add image and video preloading to plugin examples
* Merge branch 'modularization' into modularization-plugins
* add tests for reconstruction
* fix timeline array getter method: add private timelineDescription var, set to timeline array in run(), rename getTimelineDescription to getTimeline
* changes in response to PR review: fix JsDoc comments, fix array: true in param info, change HTML string param types, add JsDoc author/file/see docs for all plugin classes, switch to @ts-expect-error. Thanks @bjoluc!
* fix JsDoc comments for plugin classes and preload trials parameter
* change preload type to boolean in ParameterInfo interface, and add `preload: false` to virtual-chinrest item_path image parameter
* All my tests except for preload plugin (will do that tomorrow)
* minor fixes to reconstruction tests
* Update preload plugin tests
* Finish test conversion
* switch to arrow functions to fix this keyword errors in plugins, add audio preloading into plugin example files, fix typos
* convert non-plugin example files (WIP, not tested)
* Fix allow_held_keys -> allow_held_key parameter in virtual-chinrest plugin
* Fix `keyboardListener` type in serial-reaction-time plugin
* type fixes for RDK, simplifying `correctOrNot()` function
* fixed ["ALL_KEYS"] => "ALL_KEYS" for iat plugins and tests
* Build jspsych packages before everything else
Dependent builds were previously failing due to missing type definitions
* Remove console.log from html-keyboard-response tests
I think I accidentially committed it.
* fix the delayed start to animation bug (#1885)
* round all RTs to nearest int (#2108)
* fixes and tests #1900 - IAT parameter problems
* finish converting/testing example files, add init settings, add audio preloading, fix errors
* fix progress-bar timeline to demo an example where auto-updating the progress bar works well
* Revert "round all RTs to nearest int (#2108)"
This reverts commit f53145d2e3.
* change how delayed timeline variables are implemented
* use static for generate_stimulus method so that it can be called on the vsl-grid-scene class
* fix external-html plugin and example (switch to arrow function for proper this context, fix incorrect parameter name)
* remove outdated TO DO comments
Co-authored-by: bjoluc <mail@bjoluc.de>
Co-authored-by: Josh de Leeuw <josh.deleeuw@gmail.com>
97 lines
3.2 KiB
HTML
97 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../packages/jspsych/dist/index.browser.js"></script>
|
|
<script src="../packages/plugin-canvas-button-response/dist/index.browser.js"></script>
|
|
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css">
|
|
</head>
|
|
<body></body>
|
|
<script>
|
|
|
|
var jsPsych = initJsPsych({
|
|
on_finish: function () {
|
|
jsPsych.data.displayData();
|
|
}
|
|
});
|
|
|
|
// stimulus function that takes the canvas and additional parameters (radius, color)
|
|
// this can be called inside of an anonymous stimulus function, which takes the canvas (c) as its only argument
|
|
function filledCirc(canvas, radius, color) {
|
|
var ctx = canvas.getContext("2d");
|
|
ctx.beginPath();
|
|
ctx.arc(250, 250, radius, 0, 2 * Math.PI);
|
|
ctx.fillStyle = color;
|
|
ctx.fill();
|
|
}
|
|
|
|
var circle_1 = {
|
|
type: jsPsychCanvasButtonResponse,
|
|
stimulus: function (c) {
|
|
filledCirc(c, 100, 'blue');
|
|
},
|
|
choices: ['Red', 'Green', 'Blue'],
|
|
prompt: '<p>What color is the circle?</p>',
|
|
data: { color: 'blue', radius: 100 }
|
|
};
|
|
|
|
var circle_2 = {
|
|
type: jsPsychCanvasButtonResponse,
|
|
stimulus: function (c) {
|
|
filledCirc(c, 150, 'green');
|
|
},
|
|
choices: ['Larger', 'Smaller'],
|
|
stimulus_duration: 1000,
|
|
prompt: '<p>Is this circle larger or smaller than the last one?</p>' +
|
|
'<p>Stimulus will be hidden after 1 second.</p>',
|
|
data: { color: 'green', radius: 150 }
|
|
};
|
|
|
|
// write the canvas stimulus drawing function without using a named function
|
|
// the anonymous function must take the canvas as an argument
|
|
var lines = {
|
|
type: jsPsychCanvasButtonResponse,
|
|
stimulus: function (c) {
|
|
var ctx = c.getContext("2d");
|
|
// first line
|
|
ctx.beginPath();
|
|
ctx.moveTo(300, 10);
|
|
ctx.lineTo(300, 300);
|
|
ctx.lineWidth = 10;
|
|
ctx.strokeStyle = 'MediumBlue';
|
|
ctx.stroke();
|
|
// second line
|
|
ctx.beginPath();
|
|
ctx.moveTo(20, 200);
|
|
ctx.lineTo(100, 350);
|
|
ctx.lineWidth = 10;
|
|
ctx.strokeStyle = 'MediumPurple';
|
|
ctx.stroke();
|
|
},
|
|
choices: ['Blue line', 'Purple line'],
|
|
prompt: '<p>Which line is longer?</p>',
|
|
data: { line1_color: 'blue', line1_length: 290, line2_color: "purple", line2_length: 170 }
|
|
};
|
|
|
|
// to use the canvas stimulus function with timeline variables,
|
|
// the jsPsych.timelineVariable() function can be used inside your stimulus function
|
|
var circle_procedure = {
|
|
timeline: [{
|
|
type: jsPsychCanvasButtonResponse,
|
|
stimulus: function (c) {
|
|
filledCirc(c, jsPsych.timelineVariable('radius'), jsPsych.timelineVariable('color'));
|
|
},
|
|
choices: ['Red', 'Green', 'Blue'],
|
|
prompt: '<p>What color is the circle?</p>',
|
|
data: { radius: jsPsych.timelineVariable('radius'), color: jsPsych.timelineVariable('color') }
|
|
}],
|
|
timeline_variables: [
|
|
{ radius: 100, color: 'red' },
|
|
{ radius: 200, color: 'green' },
|
|
{ radius: 50, color: 'blue' }
|
|
]
|
|
};
|
|
|
|
jsPsych.run([circle_1, circle_2, lines, circle_procedure]);
|
|
|
|
</script>
|
|
</html> |