mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
update readme
This commit is contained in:
Josh de Leeuw
parent
dd46c7e017
commit
5551a996b0
119
README.md
119
README.md
@ -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).
|
||||
|
||||
#### #1: Displaying instructions [(code)](https://github.com/jspsych/jsPsych/tree/master/examples/demos/demo_1.html)
|
||||
|
||||
<div>
|
||||
#### #1: [Displaying instructions](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>
|
||||
@ -28,25 +27,23 @@ These examples are intended to illustrate what jsPsych code and experiments look
|
||||
|
||||
|
||||
|
||||
var trial = {
|
||||
type: 'instructions',
|
||||
pages: [
|
||||
'Welcome to the experiment. Click next to begin.',
|
||||
var trial = {
|
||||
type: 'instructions',
|
||||
pages: [
|
||||
'Welcome to the experiment. Click next to begin.',
|
||||
'<div>In this experiment, you will view a ' +
|
||||
'series of images and answer questions.<br>' +
|
||||
'Answer with the keys "y" or "n".',
|
||||
'Here is an example:<br><br> ' +
|
||||
'<img src="img/age/of2.jpg"></img><br><br>' +
|
||||
'Is this person OLD or YOUNG?'
|
||||
],
|
||||
show_clickable_nav: true
|
||||
}
|
||||
|
||||
'<div>In this experiment, you will view a ' +
|
||||
'series of images and answer questions.<br>' +
|
||||
'Answer with the keys "y" or "n".',
|
||||
|
||||
'Here is an example:<br><br> ' +
|
||||
'<img src="img/age/of2.jpg"></img><br><br>' +
|
||||
'Is this person OLD or YOUNG?'
|
||||
],
|
||||
show_clickable_nav: true
|
||||
}
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial],
|
||||
});
|
||||
jsPsych.init({
|
||||
timeline: [trial],
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -64,7 +61,7 @@ jsPsych.init({
|
||||
</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">
|
||||
<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",
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: [89, 78],
|
||||
prompt: '<p>Is this face happy? Y or N.</p>'
|
||||
}
|
||||
}
|
||||
|
||||
var trial_2 = {
|
||||
type: 'image-keyboard-response',
|
||||
stimulus: 'img/sad_face_2.jpg',
|
||||
choices: [89, 78], // Y or 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: [89, 78], // Y or 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: [89, 78], // Y or 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: [89, 78], // Y or N
|
||||
prompt: '<p>Is this face happy? Y or N.</p>',
|
||||
}
|
||||
|
||||
|
||||
jsPsych.init({
|
||||
timeline: [trial_1, trial_2, trial_3],
|
||||
default_iti: 250
|
||||
});
|
||||
jsPsych.init({
|
||||
timeline: [trial_1, trial_2, trial_3],
|
||||
default_iti: 250
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -117,8 +114,7 @@ jsPsych.init({
|
||||
</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)
|
||||
#### #3: [A flanker task](https://github.com/jspsych/jsPsych/tree/master/examples/demos/demo_3.html) showing a few advanced features of the library
|
||||
|
||||
<div display="flex">
|
||||
<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
|
||||
var test_stimuli = [
|
||||
{ stimulus: "<<<<<", data: { stim_type: 'congruent'} },
|
||||
{ stimulus: ">>>>>", data: { stim_type: 'congruent'} },
|
||||
{ stimulus: "<<><<", data: { stim_type: 'incongruent'} },
|
||||
{ stimulus: ">><>>", data: { stim_type: 'incongruent'} } ];
|
||||
{ stimulus: "<<<<<", data: {stim_type: 'congruent'} },
|
||||
{ stimulus: ">>>>>", data: {stim_type: 'congruent'} },
|
||||
{ stimulus: "<<><<", data: {stim_type: 'incongruent'} },
|
||||
{ stimulus: ">><>>", data: {stim_type: 'incongruent'} }
|
||||
];
|
||||
|
||||
var test = {
|
||||
timeline: [{
|
||||
@ -139,7 +136,8 @@ var test = {
|
||||
stimulus: jsPsych.timelineVariable('stimulus'),
|
||||
data: jsPsych.timelineVariable('data'),
|
||||
post_trial_gap: 1500,
|
||||
response_ends_trial: true }],
|
||||
response_ends_trial: true
|
||||
}],
|
||||
timeline_variables: test_stimuli,
|
||||
sample: {type: 'fixed-repetitions', size: 2}
|
||||
};
|
||||
@ -147,24 +145,21 @@ var test = {
|
||||
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>";
|
||||
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>";
|
||||
}
|
||||
};
|
||||
|
||||
var timeline = [];
|
||||
timeline.push(test);
|
||||
timeline.push(debrief);
|
||||
jsPsych.init({
|
||||
timeline: timeline,
|
||||
timeline: [test, debrief],
|
||||
});
|
||||
```
|
||||
</sub>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user