-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #101 from younesStrittmatter/extension-touchscreen…
…-buttons Extension touchscreen buttons
- Loading branch information
Showing
7 changed files
with
215 additions
and
310 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@jspsych-contrib/extension-touchscreen-buttons": major | ||
| --- | ||
|
|
||
| naming of layouts, arbitrary amount of buttons, easier customization of button position and size |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
122 changes: 58 additions & 64 deletions
122
packages/extension-touchscreen-buttons/docs/jspsych-touchscreen-buttons.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +1,95 @@ | ||
| # touchscreen-buttons extension | ||
|
|
||
| This extension displays touch buttons allows the subject to respond to stimuli via touchscreen on mobile devices. The touch button send key press events so that all jsPsych plugins that use keyboard input are compatible. | ||
| This extension displays touch buttons allows the subject to respond to stimuli via touchscreen on mobile devices. The | ||
| touch button send key press events so that all jsPsych plugins that use keyboard input are compatible. | ||
|
|
||
| ## Citation | ||
|
|
||
| ## Parameters | ||
|
|
||
| ### Layouts | ||
|
|
||
| In the initialisation stage of the extension you can initialize layouts of buttons. These can then be used in the trials. | ||
| In the initialisation stage of the extension you can initialize layouts of buttons. These can then be used in the | ||
| trials. | ||
|
|
||
| | Parameter | Description | | ||
| | --------- | ------------------- | | ||
| | params | An array of layouts | | ||
| | Parameter | Description | | ||
| |-----------|--------------------------| | ||
| | params | An dictionary of layouts | | ||
|
|
||
| #### Example | ||
|
|
||
| ```javascript | ||
| let jsPsych = initJsPsych({ | ||
| extensions: [{ | ||
| type: jsPsychExtensionTouchscreenButtons, params: [ | ||
| { | ||
| middle: {key: 'm'} | ||
| }, // layout 0 | ||
| { | ||
| left: {key: 'l'}, | ||
| right: {key: 'r'} | ||
| }, // layout 1 | ||
| { | ||
| left_bottom: {key: 'r'}, | ||
| left_top: {key: 'g'}, | ||
| right_bottom: {key: 'y'}, | ||
| right_top: {key: 'b'} | ||
| } | ||
| ] | ||
| }] | ||
| }); | ||
| extensions: [{ | ||
| type: jsPsychExtensionTouchscreenButtons, params: { | ||
| instruction_layout: [{ key: 'm' }], // first layout | ||
| direction_layout: [{ key: 'l', preset: 'left'}, { key: 'r', preset: 'right'}], // second layout | ||
| stroop_layout: [ | ||
| { key: 'r', preset: 'bottom_left' }, | ||
| { key: 'g', preset: 'top_left' }, | ||
| { key: 'y', preset: 'bottom_right'}, | ||
| { key: 'b', preset: 'top_right' } | ||
| ] | ||
| } | ||
| }] | ||
| }); | ||
| ``` | ||
|
|
||
| Every layout can contain any combination of the following buttons: | ||
|
|
||
| | Button | Default position | | ||
| | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | | ||
| | middle | bottom center of the screen. | | ||
| | left | bottom left of the screen. | | ||
| | right | bottom right of the screen. | | ||
| | left_bottom | bottom left of the screen more to the vertical center. This should be used along left_top if 2 buttons should be presented on the left side | | ||
| | left_top | bottom left of the screen more to the horizontal center. This should be used along left_bottom if 2 buttons should be presented on the left side | | ||
| | right_bottom | bottom right of the screen more to vertical middle. This should be used along right_top if 2 buttons should be presented on the right side | | ||
| | right_top | top right of the screen more to the middle. This should be used along right_top if 2 buttons should be presented on the right side | changes to the VAS response), and the trial ends when `trial_duration` has elapsed. | | ||
| Every layout can contain an array of buttons of arbitrary length. | ||
|
|
||
| ### Buttons | ||
|
|
||
| The buttons can be initialised with the following parameters | ||
|
|
||
| | Parameter | Desription | | ||
| | --------- | ---------------------------------------------------------------------------------------------------- | | ||
| | key | This is a mandatory parameter. The key press that is send when touching the button | | ||
| | color | Not mandatory. The color of the button | | ||
| | innerText | Not mandatory. Inner text of the button | | ||
| | style | Not mandatory. Here most css styles can be customized (including the position and size of the button | | ||
| | Parameter | Description | | ||
| |------------|----------------------------------------------------------------------------------------------------------------------------------------------------------| | ||
| | key | This is a mandatory parameter. The key press that is send when touching the button | | ||
| | position_x | Not mandatory. The x-position in % of screen width (from the left) of the button. Can be given as a css-string to use (for example, 50vw, 120px, ...) | | ||
| | position_y | Not mandatory. The y-position in % of screen height (from the bottom) of the button. Can be given as a css-string to use (for example, 50vw, 120px, ...) | | ||
| | size | Not mandatory. The size in % of screen width (diameter) of the button. Can be given as a css-string to use (for example, 50vw, 120px, ...) | | ||
| | color | Not mandatory. The color of the button | | ||
| | innerText | Not mandatory. Inner text of the button | | ||
| | style | Not mandatory. Here most css styles can be customized (including the position and size of the button | | ||
| | preset | Not mandatory. A selection of predefined positions/sizes: [left, right, bottom_left, bottom_right, top_left, top_right] | | ||
|
|
||
| #### Example | ||
|
|
||
| ```javascript | ||
| let jsPsych = initJsPsych({ | ||
| extensions: [{ | ||
| type: jsPsychExtensionTouchscreenButtons, params: [ | ||
| { | ||
| middle: { | ||
| key: 'm', | ||
| color: 'blue', | ||
| style: {top: '2vw', fontWeight: 'bold', boxShadow: "1vw 1vw 2vw 1vw #0009"}, | ||
| innerText: 'press' | ||
| } | ||
| } | ||
| ] | ||
| }] | ||
| }); | ||
| extensions: [{ | ||
| type: jsPsychExtensionTouchscreenButtons, | ||
| params: { | ||
| example_layout: [ | ||
| { | ||
| key: 'm', | ||
| color: 'blue', | ||
| style: { top: '2vw', fontWeight: 'bold', boxShadow: "1vw 1vw 2vw 1vw #0009" }, | ||
| innerText: 'press' | ||
| } | ||
| ] // array of buttons (here one) | ||
| } | ||
| }] | ||
| }) | ||
| ; | ||
| ``` | ||
|
|
||
| ### Trial | ||
|
|
||
| In the jsPsych trials you only have to choose from the specified layouts. ATTENTION: The choices and correct_choices parameter of the trial must match the keys specified in the extensions initialisation. | ||
| In the jsPsych trials you only have to choose from the specified layouts. ATTENTION: The choices and correct_choices | ||
| parameter of the trial must match the keys specified in the extension initialisation. | ||
|
|
||
| #### Example | ||
|
|
||
| ```javascript | ||
| let trial = { | ||
| type: jsPsychRok, // can be used with plugins that use keyboard as input | ||
| response_ends_trial: true, | ||
| choices: ['l', 'r'], | ||
| correct_choice: ['r'], | ||
| extensions: [ | ||
| { | ||
| type: jsPsychExtensionTouchscreenButtons, params: {layout: 1} | ||
| } | ||
| ] | ||
| }; | ||
| type: jsPsychRok, // can be used with plugins that use keyboard as input | ||
| response_ends_trial: true, | ||
| choices: ['l', 'r'], | ||
| correct_choice: ['r'], | ||
| extensions: [ | ||
| { | ||
| type: jsPsychExtensionTouchscreenButtons, params: { layout: 'example_layout' } | ||
| } | ||
| ] | ||
| }; | ||
| ``` |
Oops, something went wrong.