HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 11:10:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add css_classes to plugin overview docs, add example HTML file #832

Browse Source
This commit is contained in:
Becky Gilbert 2021-01-11 17:34:08 -08:00
parent f39f394866
commit 29d5aaa1c4
2 changed files with 47 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/plugins/overview.md
View File

@ -46,6 +46,7 @@ on_finish | function | `function(){ return; }` | A callback function to execute
on_start | function | `function(){ return; }` | A callback function to execute when the trial begins, before any loading has occurred. See [this page](../overview/callbacks.md) for more details.
on_load | function | `function(){ return; }` | A callback function to execute when the trial has loaded, which typically happens after the initial display of the plugin has loaded. See [this page](../overview/callbacks.md) for more details.
data | object | *undefined* | An object containing additional data to store for the trial. See [this page](../overview/data.md) for more details.
css_classes | string | null | A list of CSS classes to add to the jsPsych display element for the duration of this trial. This allows you to create custom formatting rules that are only applied to specific trials. See jsPsych/examples/css-classes-parameter.html for examples.
## Data collected by plugins

46
examples/css-classes-parameter.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-image-keyboard-response.js"></script>
<script src="../plugins/jspsych-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css">
<style>
.condition1 {
color: red;
font: small-caps bold 30px/30px Arial, sans-serif;
line-height: 150%;
}
.condition2 {
color: green;
font-size: 40px;
text-decoration: underline wavy blue;
line-height: 200%;
}
</style>
</head>
<body></body>
<script>
var trial_procedure = {
timeline: [{
type: 'html-keyboard-response',
stimulus: jsPsych.timelineVariable('stim'),
css_classes: jsPsych.timelineVariable('css_class')
}],
timeline_variables: [
{css_class: ['condition1'], stim: 'This is the style for Condition 1.<br>Press any key to continue.'},
{css_class: ['condition2'], stim: 'This is the style for Condition 2.'},
{css_class: ['condition1'], stim: 'Here&#39;s Condition 1 again.'},
{css_class: ['condition2'], stim: 'Here&#39;s Condition 2 again.'},
]
}
jsPsych.init({
timeline: [trial_procedure]
});
</script>
</html>