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

minor docs updates

Browse Source
This commit is contained in:
Josh de Leeuw 2019-07-16 11:39:39 -04:00
parent c5bc9023e3
commit ef5b1f53ff
2 changed files with 3 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
README.md
View File

@ -5,168 +5,7 @@ jsPsych is a JavaScript library for creating behavioral experiments that run in
Examples Examples
---------- ----------
These examples are intended to illustrate what jsPsych code and experiments look like. There is a larger set of example code in the [examples folder](/examples). Several example experiments and plugin demonstrations are available in the `/examples` folder.
#### #1: Displaying instructions [(code)](https://github.com/jspsych/jsPsych/tree/master/examples/demos/demo_1.html)
<div display="flex">
<img src="https://user-images.githubusercontent.com/14092539/28126774-801ea42e-66f8-11e7-9b6a-c8bad0026bec.gif" align="right" width=50% />
<div markdown="1" style="width: 50%;">
<sub>
```javascript
var trial = {
type: 'instructions',
pages: [
'Welcome to the experiment. Click next to begin.',
'<p>In this experiment, you will view a ' +
'series of images and answer questions.</p>' +
'<p>Answer with the keys "y" or "n".</p>',
'<p>Here is an example:</p>' +
'<img src="img/age/of2.jpg"></img>' +
'<p>Is this person OLD or YOUNG?</p>'
],
show_clickable_nav: true
}
jsPsych.init({
timeline: [trial],
});
```
</sub>
</div>
</div>
#### #2: Displaying images and recording a response [(code)](https://github.com/jspsych/jsPsych/tree/master/examples/demos/demo_2.html)
<div display="flex">
<img src="https://user-images.githubusercontent.com/14092539/28125911-0504cca2-66f6-11e7-8f5b-c9686f63aaa8.gif" align="right" width=50% />
<div markdown"2" style="width: 50%;">
<sub>
```javascript
var trial_1 = {
type: "image-keyboard-response",
stimulus: 'img/happy_face_1.jpg',
choices: ['y', 'n'],
prompt: '<p>Is this face happy? Y or N.</p>'
}
var trial_2 = {
type: 'image-keyboard-response',
stimulus: 'img/sad_face_2.jpg',
choices: ['y', 'n'],
prompt: '<p>Is this face happy? Y or N.</p>'
}
var trial_3 = {
type: 'image-keyboard-response',
stimulus: 'img/happy_face_2.jpg',
choices: ['y', 'n'],
prompt: '<p>Is this face happy? Y or N.</p>'
}
jsPsych.init({
timeline: [trial_1, trial_2, trial_3],
default_iti: 250
});
```
</sub>
</div>
</div>
#### #3: A flanker task showing a few advanced features of the library [(code)](https://github.com/jspsych/jsPsych/tree/master/examples/demos/demo_3.html)
<div display="flex">
<img src="https://user-images.githubusercontent.com/14092539/28126802-97b50d08-66f8-11e7-9a45-46561ab51a5f.gif" align="right" width=50% />
<div markdown="3" style="width: 50%;">
<sub>
```javascript
var test_stimuli = [
{ stimulus: "<<<<<", data: {stim_type: 'congruent'} },
{ stimulus: ">>>>>", data: {stim_type: 'congruent'} },
{ stimulus: "<<><<", data: {stim_type: 'incongruent'} },
{ stimulus: ">><>>", data: {stim_type: 'incongruent'} }
];
var test = {
timeline: [{
type: 'html-keyboard-response',
choices: [37, 39],
stimulus: jsPsych.timelineVariable('stimulus'),
data: jsPsych.timelineVariable('data'),
post_trial_gap: 1500,
response_ends_trial: true
}],
timeline_variables: test_stimuli,
sample: {type: 'fixed-repetitions', size: 2}
};
var debrief = {
type: "html-keyboard-response",
stimulus: function() {
var congruent_rt = Math.round(jsPsych.data.get()
.filter({stim_type: 'congruent'}).select('rt').mean());
var incongruent_rt = Math.round(jsPsych.data.get()
.filter({stim_type: 'incongruent'}).select('rt').mean());
return "<p style='font-size:25px'>Your average response"+
"time for congruent trials was <strong>"+congruent_rt+
"ms</strong>.</p>"+
"<p style='font-size:25px'>Your average response time for"+
"incongruent trials was <strong>"+incongruent_rt+
"ms</strong>.</p>";
}
};
jsPsych.init({
timeline: [test, debrief],
});
```
</sub>
</div>
</div>
Documentation Documentation
------------- -------------
@ -197,7 +36,7 @@ Wondering if jsPsych can be used for research that depends on accurate response
* [de Leeuw, J. R., & Motz, B. A. (2016). Psychophysics in a Web browser? Comparing response times collected with JavaScript and Psychophysics Toolbox in a visual search task. *Behavior Research Methods*, *48*(1), 1-12.](http://link.springer.com/article/10.3758%2Fs13428-015-0567-2) * [de Leeuw, J. R., & Motz, B. A. (2016). Psychophysics in a Web browser? Comparing response times collected with JavaScript and Psychophysics Toolbox in a visual search task. *Behavior Research Methods*, *48*(1), 1-12.](http://link.springer.com/article/10.3758%2Fs13428-015-0567-2)
* [Hilbig, B. E. (2016). Reaction time effects in lab- versus web-based research: Experimental evidence. *Behavior Research Methods*, *48*(4), 1718-1724.](http://dx.doi.org/10.3758/s13428-015-0678-9) * [Hilbig, B. E. (2016). Reaction time effects in lab- versus web-based research: Experimental evidence. *Behavior Research Methods*, *48*(4), 1718-1724.](http://dx.doi.org/10.3758/s13428-015-0678-9)
* [Pinet, S., Zielinski, C., Mathôt, S. et al. (in press). Measuring sequences of keystrokes with jsPsych: Reliability of response times and interkeystroke intervals. *Behavior Research Methods*.](http://link.springer.com/article/10.3758/s13428-016-0776-3) * [Pinet, S., Zielinski, C., Mathôt, S. et al. (2017). Measuring sequences of keystrokes with jsPsych: Reliability of response times and interkeystroke intervals. *Behavior Research Methods*, *49*(3), 1163-1176.](http://link.springer.com/article/10.3758/s13428-016-0776-3)
* [Reimers, S., & Stewart, N. (2015). Presentation and response time accuracy in Adobe Flash and HTML5/JavaScript Web experiments. *Behavior Research Methods*, *47*(2), 309-327.](http://link.springer.com/article/10.3758%2Fs13428-014-0471-1) * [Reimers, S., & Stewart, N. (2015). Presentation and response time accuracy in Adobe Flash and HTML5/JavaScript Web experiments. *Behavior Research Methods*, *47*(2), 309-327.](http://link.springer.com/article/10.3758%2Fs13428-014-0471-1)

3
docs/tutorials/hello-world.md
View File

@ -21,8 +21,7 @@ Create a folder on your computer to put the experiment files in. Once you've cre
To edit jsPsych code you'll need a programming-friendly text editor. Some free options are: To edit jsPsych code you'll need a programming-friendly text editor. Some free options are:
* [Atom](https://atom.io) (Windows, OSX, Linux) * [Atom](https://atom.io) (Windows, OSX, Linux)
* [Notepad++](http://notepad-plus-plus.org/) (Windows) * [VSCode](https://code.visualstudio.com/) (Windows, OSX, Linux)
* [TextMate](http://macromates.com/) (OSX)
Once you've got a text editor that you like, create a new file in the experiment folder called `experiment.html` Once you've got a text editor that you like, create a new file in the experiment folder called `experiment.html`