mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +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>
149 lines
6.6 KiB
HTML
149 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../packages/jspsych/dist/index.browser.js"></script>
|
|
<script src="../packages/plugin-image-keyboard-response/dist/index.browser.js"></script>
|
|
<script src="../packages/plugin-html-keyboard-response/dist/index.browser.js"></script>
|
|
<script src="../packages/plugin-preload/dist/index.browser.js"></script>
|
|
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css">
|
|
<style>
|
|
/*
|
|
Any CSS classes listed in the 'css_classes' parameter will only be added to the jspsych-content div.
|
|
Certain CSS rules will automatically be applied to all other elements _inside_ this div (stimulus, prompt, etc.),
|
|
through CSS inheritance. However, not all CSS properties are inherited from parent elements.
|
|
To learn more about CSS inheritance, see:
|
|
https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance
|
|
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#inheritance
|
|
https://stackoverflow.com/questions/5612302/which-css-properties-are-inherited
|
|
|
|
In the CSS rules below, the rules are applied to the jspsych-content div, and then applied to
|
|
other elements inside of the jspsych-content div through inheritance. This is why both the stimulus and
|
|
prompt are affected by these rules in the trial_procedure_1 trials.
|
|
*/
|
|
.condition1 {
|
|
color: red;
|
|
font: small-caps bold 25px/25px Arial, sans-serif;
|
|
line-height: 150%;
|
|
}
|
|
.condition2 {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
text-shadow: 2px 2px white;
|
|
line-height: 200%;
|
|
background-color: lightgray
|
|
}
|
|
/*
|
|
It's also possible to use more specific CSS selectors so that the CSS rule only affects certain elements on the page.
|
|
To create these CSS rules, we start with the class name used in "css_classes". This will select the 'parent' element (jspsych-content div):
|
|
.left-align
|
|
After that, add the more specific CSS selector(s) to select any particular element(s) that should be modified inside the parent element.
|
|
For example, to select only the "p" elements that are inside of the 'parent' element, you can use this:
|
|
.left-align p {...}
|
|
This method allows you to use different styles for different 'child' elements inside the jspsych-content div.
|
|
This method also allows you to modify properties that can't be modified through inheritance.
|
|
|
|
Options for CSS selectors include the element's tag name, ID, class, and combinations of these.
|
|
For example, to select a the element with the ID "jspsych-html-keyboard-response-stimulus":
|
|
.left-align #jspsych-html-keyboard-response-stimulus {...}
|
|
Or to select all "p" elements that also have the class "stimulus":
|
|
.left-align p.stimulus {...}
|
|
See here for more info about CSS selectors: https://www.w3schools.com/css/css_selectors.asp
|
|
|
|
In the trial_procedure_2 trials, the stimulus text is inside of <p> tags and the prompt text is not inside of <p> tags.
|
|
Therefore the CSS rules below will only affect the stimulus element in these trials.
|
|
*/
|
|
.left-align p {text-align: left; width: 600px;}
|
|
.right-align p {text-align: right; width: 600px;}
|
|
.teal p {color: teal;}
|
|
.purple p {color: purple;}
|
|
.large-text p {font-size: 40px; line-height: 1.5em;}
|
|
.black-border p {border: 4px solid black;}
|
|
|
|
/*
|
|
The CSS rules below are used in trial_procedure_3 to format the fixation cross
|
|
and move the img element to the left or right.
|
|
*/
|
|
.fixation {font-size: 90px; font-weight: bold;}
|
|
.img-left img {transform: translate(-300px);}
|
|
.img-right img {transform: translate(300px);}
|
|
</style>
|
|
</head>
|
|
<body></body>
|
|
<script>
|
|
|
|
var jsPsych = initJsPsych({
|
|
on_finish: function() {
|
|
jsPsych.data.displayData();
|
|
}
|
|
});
|
|
|
|
var preload = {
|
|
type: jsPsychPreload,
|
|
auto_preload: true
|
|
};
|
|
|
|
var trial_procedure_1 = {
|
|
timeline: [{
|
|
type: jsPsychHtmlKeyboardResponse,
|
|
stimulus: jsPsych.timelineVariable('stim'),
|
|
css_classes: jsPsych.timelineVariable('css_class'),
|
|
prompt: 'This is the prompt.<br>In this set of trials, the CSS styles are applied to the parent element<br>'+
|
|
'and passed on to all other jsPsych content through inheritance,<br>'+
|
|
'which is why they also affect both the stimulus and prompt text.<br>Press any key to continue.',
|
|
save_trial_parameters: {css_classes: true}
|
|
}],
|
|
timeline_variables: [
|
|
{css_class: ['condition1'], stim: '<p>This is a Condition 1 stimulus.</p>'},
|
|
{css_class: ['condition2'], stim: '<p>This is a Condition 2 stimulus.</p>'}
|
|
]
|
|
};
|
|
|
|
var trial_procedure_2 = {
|
|
timeline: [{
|
|
type: jsPsychHtmlKeyboardResponse,
|
|
stimulus: '<p>This is the stimulus.</p>',
|
|
css_classes: jsPsych.timelineVariable('css_classes'),
|
|
prompt: 'In this set of trials, the CSS rules are applied more selectively<br>so that they only affect the stimulus text, not the prompt text<br>'+
|
|
'(see the comments in the HTML file for more information).<br>Press any key to continue.',
|
|
save_trial_parameters: {css_classes: true}
|
|
}],
|
|
timeline_variables: [
|
|
{css_classes: ['teal','left-align','black-border','large-text']},
|
|
{css_classes: ['teal','right-align','black-border','large-text']},
|
|
{css_classes: ['purple','left-align','large-text']},
|
|
{css_classes: ['purple','right-align','large-text']}
|
|
]
|
|
};
|
|
|
|
var trial_procedure_3 = {
|
|
timeline: [
|
|
{
|
|
type: jsPsychHtmlKeyboardResponse,
|
|
stimulus: '+',
|
|
choices: "NO_KEYS",
|
|
trial_duration: 500,
|
|
css_classes: ['fixation']
|
|
},
|
|
{
|
|
type: jsPsychImageKeyboardResponse,
|
|
stimulus: 'img/blue.png',
|
|
css_classes: jsPsych.timelineVariable('image_side'),
|
|
prompt: '<p>Press <strong>f</strong> if the image is on the <strong>left</strong>.</p>'+
|
|
'<p>Press <strong>j</strong> if the image is on the <strong>right</strong>.</p>',
|
|
choices: ['f','j'],
|
|
render_on_canvas: false,
|
|
save_trial_parameters: {css_classes: true},
|
|
data: {correct_response: jsPsych.timelineVariable('correct_response')}
|
|
}
|
|
],
|
|
timeline_variables: [
|
|
{image_side: ['img-left'], correct_response: 'f'},
|
|
{image_side: ['img-right'], correct_response: 'j'}
|
|
]
|
|
};
|
|
|
|
jsPsych.run([preload, trial_procedure_1, trial_procedure_2, trial_procedure_3]);
|
|
|
|
</script>
|
|
</html>
|