Skip to content

Commit

Permalink
minor docs updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@jodeleeuw
jodeleeuw committed Jul 16, 2019
1 parent c5bc902 commit ef5b1f5
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 165 deletions.
165 changes: 2 additions & 163 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,168 +5,7 @@ jsPsych is a JavaScript library for creating behavioral experiments that run in
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).

#### #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>
Several example experiments and plugin demonstrations are available in the `/examples` folder.

Documentation
-------------
Expand Down Expand Up @@ -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)
* [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)


Expand Down
3 changes: 1 addition & 2 deletions docs/tutorials/hello-world.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:

* [Atom](https://atom.io) (Windows, OSX, Linux)
* [Notepad++](http://notepad-plus-plus.org/) (Windows)
* [TextMate](http://macromates.com/) (OSX)
* [VSCode](https://code.visualstudio.com/) (Windows, OSX, Linux)

Once you've got a text editor that you like, create a new file in the experiment folder called `experiment.html`

Expand Down

0 comments on commit ef5b1f5

Please sign in to comment.