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

make card image optional

Browse Source
This commit is contained in:
Josh de Leeuw 2022-04-08 13:14:51 -04:00
parent 99bf2924be
commit c7799f15ae
3 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/plugins/virtual-chinrest.md
View File

@ -21,7 +21,7 @@ Parameters can be left unspecified if the default value is acceptable.
| pixels_per_unit | numeric | 100 | After the scaling factor is applied, this many pixels will equal one unit of measurement, where the units are indicated by `resize_units`. This is only used when resizing is done after the trial ends (i.e. the `resize_units` parameter is not "none"). |
| adjustment_prompt | HTML string | "Click and drag the lower right corner of the image until it is the same size as a credit card held up to the screen. You can use any card that is the same size as a credit card, like a membership card or driver's license. If you do not have access to a real card you can use a ruler to measure the image width to 3.37 inches or 85.6 mm." | This string can contain HTML markup. Any content here will be displayed **below the card stimulus** during the resizing phase. |
| adjustment_button_prompt | HTML string | "Click here when the image is the correct size" | Content of the button displayed below the card stimulus during the resizing phase. |
| item_path | string | "img/card.png" | Path of the item to be presented in the card stimulus during the resizing phase. _The default image is available in `/examples/img/card.png`_ |
| item_path | string | null | Path of the item to be presented in the card stimulus during the resizing phase. If `null` then no image is shown, and a solid color background is used instead. _An example image is available in `/examples/img/card.png`_ |
| item_height_mm | numeric | 53.98 | The known height of the physical item (e.g. credit card) to be measured, in mm. |
| item_width_mm | numeric | 85.6 | The known width of the physical item (e.g. credit card) to be measured, in mm. |
| item_init_size | numeric | 250 | The initial size of the card stimulus, in pixels, along its largest dimension. |

3
examples/jspsych-virtual-chinrest.html
View File

@ -25,7 +25,8 @@
type: jsPsychVirtualChinrest,
blindspot_reps: 2,
resize_units: "cm",
pixels_per_unit: 50
pixels_per_unit: 50,
item_path: 'img/card.png',
};
// one blindspot estimate

9
packages/plugin-virtual-chinrest/src/index.ts
View File

@ -42,8 +42,7 @@ const info = <const>{
item_path: {
type: ParameterType.IMAGE,
pretty_name: "Item path",
default: "img/card.png",
// TO DO: I think the background image should be optional, in which case we don't want to try to auto-preload this parameter?
default: null,
preload: false,
},
/** The height of the item to be measured, in mm. */
@ -191,7 +190,11 @@ class VirtualChinrestPlugin implements JsPsychPlugin<Info> {
/** create content for first screen, resizing card */
let pagesize_content = `
<div id="page-size">
<div id="item" style="border: none; height: ${start_div_height}px; width: ${start_div_width}px; margin: 5px auto; background-color: none; position: relative; background-image: url(${trial.item_path}); background-size: 100% auto; background-repeat: no-repeat;">
<div id="item" style="border: none; height: ${start_div_height}px; width: ${start_div_width}px; margin: 5px auto; background-color: #ddd; position: relative; ${
trial.item_path === null
? ""
: `background-image: url(${trial.item_path}); background-size: 100% auto; background-repeat: no-repeat;`
}">
<div id="jspsych-resize-handle" style="cursor: nwse-resize; background-color: none; width: ${adjust_size}px; height: ${adjust_size}px; border: 5px solid red; border-left: 0; border-top: 0; position: absolute; bottom: 0; right: 0;">
</div>
</div>