Help editing jsPsych documentation - First-time contributors welcome!

[becky-gilbert]

Hi folks,

Do you want to contribute to jsPsych by helping make changes to the documentation?

We want to update the jsPsych plugin documentation pages so that the examples include a live demo alongside the code. You'll be able to run the demo right inside the documentation page, or click a link to open it in a new browser tab. Here's what it will look like.

Pretty snazzy, huh?

We've already set this up for 4 of the plugin pages. We're wondering if anyone wants to help out by applying these same changes to the remaining docs pages and creating a demo HTML file for each example. This might be of interest if you want to become a jsPsych contributor. It's also a good way to get some experience with Git/Github. If you'd like to help out, please comment on the issue thread: #164.

Thanks!

[jodeleeuw]

Also, if anyone wants to create additional demos for some of the plugins that would be a welcome contribution too! Some of the plugin docs pages have just a single example, while others have several. It would be great to have more demos that show a wider variety of the kinds of things that plugins can do.

[alexburm]

Hi guys,
I am interested. I have used jsPsych and have experience as both a researcher and web developer. I also have experience running experiments on the web but have not used jsPsych for this purpose as yet but do plan too. Let me know how many demos etc you need and some more details and i'll see if i can fit it in.
Thanks,
Alex B

[jodeleeuw]

Hi @alexburm,

Feel free to take on as little/much of this as you have time for.

If you look at the docs-demos branch you'll see how @becky-gilbert has implemented changes to the docs files to convert the existing code snippets into snippets + demos. This involves moving the code snippet into a demo file (with a few surrounding details) and using some markdown to render the demo and snippet together.

You could start with as few of the plugin docs pages as you'd like, and submit a pull request to the docs-demos branch to add your work in.

[jodeleeuw]

Oh, and if you are interested in adding additional demos you can just go ahead and create whatever snippets seem logical and complimentary to the existing examples.

[becky-gilbert]

Oh good idea about adding more demos! I don't think they should be fancy or complicated, since the point of the demos is just to give people a quick sense of what the plugin/parameters do.

[kurokida]

Let me ask some questions.

Should I add demo files in the jsPsych-docs-demos\docs\plugins\demos folder ? Is the location correct?

Also, it would be nice to be able to see who is making the demos for which plugins, wouldn't it? While it is acceptable to have multiple demos for the same plugin, I think such a list is necessary to save time.

[jodeleeuw]

Yep, that's the correct location.

I think if you post which plugins you are updating here then that will avoid duplicate effort. Another way to avoid duplicate effort is to open a PR after a small amount of work. @becky-gilbert or I can try to review it quickly and merge it so that anyone else working on the branch will see it if they are pulling frequently.

[becky-gilbert]

Just bumping this plea for help! You can find a list of plugins that have already been updated/claimed here. We still need help setting up the live demos for any plugins that aren't in that list.

Thanks!

[fatemene]

Thanks a lot for your kind reply. This code gives me a list of 3 alternatives, but I want to get is to have three lists of alternatives, so that the participant would choose once between the first list of alternatives ["a", "b", "c"], then the second list of alternatives [["a", "b", "c"] and so on. I have 100 questions per experiment and around 24000 questions in total.

[kurokida]

If I understand your explanation correctly, why don't you use the jspsych-survey-multi-choice plugin, not the maxdiff plugin.
If you really want to use the maxdiff plugin, you will have to modify the plugin, in my opinion.

[fatemene]

Thanks once more for your kind attempts to help. I want the participants to choose the best and the worst in each list of alternatives and the most suitable plugin is maxdiff. I wish there was a demo of it with more than one set of alternatives.

[fatemene]

@kurokida Thanks a lot for your replies.
Also, I would like to thank @jodeleeuw for developing jsPsych and the great tutorials. Also, Cognition.run is great. My colleague (Habib Rostami, Persian Gulf University) helped with a solution that I would like to share with the community. Hope it helps everybody with a maxdiff design:
const jsPsych = initJsPsych();
var timeline= [];
const test_stimuli = [
["apple", "kiwi", "orange", "banana"],
["cherry", "pineapple", "apricot", "orange"],
["apple", "cherry", "bluberry", "kiwi"]
]

for (i = 0 ; i < test_stimuli.length ; ++ i){
var maxdiff = {
type: jsPsychMaxdiff,
alternatives: test_stimuli[i],
labels:['Most Preferred', 'Least Preferred'],
preamble: '

Please select your most preferred and least preferred fruits. To proceed, you are required to make a choice on each value.

',
randomize_alternative_order: true,
required: true
};
timeline.push(maxdiff);
}
jsPsych.run(timeline);

The link to the demo on cognition.run: https://dlt7p1tmh9.cognition.run

[fatemene]

I forgot to add that for experiments with many choices, the structure of the .js file to be uploaded should be as follows:
const test_stimuli = [
["apple", "kiwi", "orange", "banana"],
["cherry", "pineapple", "apricot", "orange"],
["apple", "cherry", "bluberry", "kiwi"]
]

[jodeleeuw]

@becky-gilbert and @kurokida: I've been thinking about how to handle the plugins where a demo embedded in the page won't work well. The ones that I think are going to be a problem are:

• jspsych-fullscreen
• jspsych-resize
• jspsych-virtual-chinrest
• jspsych-webgazer-init-camera
• jspsych-webgazer-calibrate
• jspsych-webgazer-validate

I think in this case we should make the only option be to open the demo in a new tab. We can have the Demo tab still there, with a short message that says something like This plugin either requires or works best with a larger window. You can open the demo in a new tab. What do you think?

[jodeleeuw]

Actually, I just tried it out for the fullscreen plugin and it works OK. The <iframe> becomes fullscreen. But for some of the others we still might need to do this.

[kurokida]

I agree with your suggestion.

[jodeleeuw]

Update as of Aug. 31 2021. The initial implementation of this is complete for all plugins. Thanks to everyone who contributed. It would be great to have even more examples added to the documentation, so if you are seeing this message and would like to contribute a great thing to do would be to find plugins that have relatively few examples and add new ones to illustrate additional things that can be accomplished with that particular plugin.