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

update readme

Browse Source
This commit is contained in:
Josh de Leeuw 2017-07-12 23:02:44 -04:00
parent dd46c7e017
commit 5551a996b0
1 changed files with 57 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
README.md
View File

@ -7,9 +7,8 @@ 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). 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) #### #1: [Displaying instructions](https://github.com/jspsych/jsPsych/tree/master/examples/demos/demo_1.html)
<div display="flex">
<div>
<img src="https://user-images.githubusercontent.com/14092539/28126774-801ea42e-66f8-11e7-9b6a-c8bad0026bec.gif" align="right" width=50% /> <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%;"> <div markdown="1" style="width: 50%;">
<sub> <sub>
@ -28,25 +27,23 @@ These examples are intended to illustrate what jsPsych code and experiments look
var trial = { var trial = {
type: 'instructions', type: 'instructions',
pages: [ pages: [
'Welcome to the experiment. Click next to begin.', 'Welcome to the experiment. Click next to begin.',
'<div>In this experiment, you will view a ' +
'<div>In this experiment, you will view a ' + 'series of images and answer questions.<br>' +
'series of images and answer questions.<br>' + 'Answer with the keys "y" or "n".',
'Answer with the keys "y" or "n".', 'Here is an example:<br><br> ' +
'<img src="img/age/of2.jpg"></img><br><br>' +
'Here is an example:<br><br> ' + 'Is this person OLD or YOUNG?'
'<img src="img/age/of2.jpg"></img><br><br>' + ],
'Is this person OLD or YOUNG?' show_clickable_nav: true
], }
show_clickable_nav: true
}
jsPsych.init({ jsPsych.init({
timeline: [trial], timeline: [trial],
}); });
@ -64,7 +61,7 @@ jsPsych.init({
</div> </div>
#### #2: Displaying images and recording a response [(code)](https://github.com/jspsych/jsPsych/tree/master/examples/demos/demo_2.html) #### #2: [Displaying images and recording a response](https://github.com/jspsych/jsPsych/tree/master/examples/demos/demo_2.html)
<div display="flex"> <div display="flex">
<img src="https://user-images.githubusercontent.com/14092539/28125911-0504cca2-66f6-11e7-8f5b-c9686f63aaa8.gif" align="right" width=50% /> <img src="https://user-images.githubusercontent.com/14092539/28125911-0504cca2-66f6-11e7-8f5b-c9686f63aaa8.gif" align="right" width=50% />
@ -79,32 +76,32 @@ jsPsych.init({
var trial_1 = { var trial_1 = {
type: "image-keyboard-response", type: "image-keyboard-response",
stimulus: 'img/happy_face_1.jpg', stimulus: 'img/happy_face_1.jpg',
choices: [89, 78], choices: [89, 78],
prompt: '<p>Is this face happy? Y or N.</p>' prompt: '<p>Is this face happy? Y or N.</p>'
} }
var trial_2 = { var trial_2 = {
type: 'image-keyboard-response', type: 'image-keyboard-response',
stimulus: 'img/sad_face_2.jpg', stimulus: 'img/sad_face_2.jpg',
choices: [89, 78], // Y or N choices: [89, 78], // Y or N
prompt: '<p>Is this face happy? Y or N.</p>' prompt: '<p>Is this face happy? Y or N.</p>'
} }
var trial_3 = { var trial_3 = {
type: 'image-keyboard-response', type: 'image-keyboard-response',
stimulus: 'img/happy_face_2.jpg', stimulus: 'img/happy_face_2.jpg',
choices: [89, 78], // Y or N choices: [89, 78], // Y or N
prompt: '<p>Is this face happy? Y or N.</p>', prompt: '<p>Is this face happy? Y or N.</p>',
} }
jsPsych.init({ jsPsych.init({
timeline: [trial_1, trial_2, trial_3], timeline: [trial_1, trial_2, trial_3],
default_iti: 250 default_iti: 250
}); });
@ -117,8 +114,7 @@ jsPsych.init({
</div> </div>
</div> </div>
#### #3: [A flanker task](https://github.com/jspsych/jsPsych/tree/master/examples/demos/demo_3.html) showing a few advanced features of the library
#### #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"> <div display="flex">
<img src="https://user-images.githubusercontent.com/14092539/28126802-97b50d08-66f8-11e7-9a45-46561ab51a5f.gif" align="right" width=50% /> <img src="https://user-images.githubusercontent.com/14092539/28126802-97b50d08-66f8-11e7-9a45-46561ab51a5f.gif" align="right" width=50% />
@ -127,10 +123,11 @@ jsPsych.init({
```javascript ```javascript
var test_stimuli = [ var test_stimuli = [
{ stimulus: "<<<<<", data: { stim_type: 'congruent'} }, { stimulus: "<<<<<", data: {stim_type: 'congruent'} },
{ stimulus: ">>>>>", data: { stim_type: 'congruent'} }, { stimulus: ">>>>>", data: {stim_type: 'congruent'} },
{ stimulus: "<<><<", data: { stim_type: 'incongruent'} }, { stimulus: "<<><<", data: {stim_type: 'incongruent'} },
{ stimulus: ">><>>", data: { stim_type: 'incongruent'} } ]; { stimulus: ">><>>", data: {stim_type: 'incongruent'} }
];
var test = { var test = {
timeline: [{ timeline: [{
@ -139,7 +136,8 @@ var test = {
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
data: jsPsych.timelineVariable('data'), data: jsPsych.timelineVariable('data'),
post_trial_gap: 1500, post_trial_gap: 1500,
response_ends_trial: true }], response_ends_trial: true
}],
timeline_variables: test_stimuli, timeline_variables: test_stimuli,
sample: {type: 'fixed-repetitions', size: 2} sample: {type: 'fixed-repetitions', size: 2}
}; };
@ -147,24 +145,21 @@ var test = {
var debrief = { var debrief = {
type: "html-keyboard-response", type: "html-keyboard-response",
stimulus: function() { stimulus: function() {
var congruent_rt = Math.round(jsPsych.data.get() var congruent_rt = Math.round(jsPsych.data.get()
.filter({stim_type: 'congruent'}).select('rt').mean()); .filter({stim_type: 'congruent'}).select('rt').mean());
var incongruent_rt = Math.round(jsPsych.data.get() var incongruent_rt = Math.round(jsPsych.data.get()
.filter({stim_type: 'incongruent'}).select('rt').mean()); .filter({stim_type: 'incongruent'}).select('rt').mean());
return "<p style='font-size:25px'>Your average response"+ return "<p style='font-size:25px'>Your average response"+
"time for congruent trials was <strong>"+congruent_rt+ "time for congruent trials was <strong>"+congruent_rt+
"ms</strong>.</p>"+ "ms</strong>.</p>"+
"<p style='font-size:25px'>Your average response time for"+ "<p style='font-size:25px'>Your average response time for"+
"incongruent trials was <strong>"+incongruent_rt+ "incongruent trials was <strong>"+incongruent_rt+
"ms</strong>.</p>"; "ms</strong>.</p>";
} }
}; };
var timeline = [];
timeline.push(test);
timeline.push(debrief);
jsPsych.init({ jsPsych.init({
timeline: timeline, timeline: [test, debrief],
}); });
``` ```
</sub> </sub>