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

updating examples for v6

Browse Source
This commit is contained in:
Josh de Leeuw 2017-06-20 12:02:10 -04:00
parent c739dfcb3b
commit b2b5436c99
20 changed files with 51 additions and 459 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/add-to-end-of-timeline.html
View File

@ -1,12 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-text.js"></script> <script src="../plugins/jspsych-text.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-single-stim.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
</head> </head>
<body></body>
<script> <script>
var first = { var first = {

47
examples/all-keys-no-keys.html
View File

@ -1,47 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img {
width: 300px;
}
</style>
</head>
<body>
</body>
<script>
var trial_1 = {
stimulus: '<p>All keys</p>',
choices: jsPsych.ALL_KEYS
}
var trial_2 = {
stimulus: '<p>No keys</p>',
timing_response: 2000,
choices: jsPsych.NO_KEYS
}
var node = {
type: 'single-stim',
is_html: true,
timeline: [trial_1, trial_2],
}
jsPsych.init({
timeline: [node],
on_finish: function() {
jsPsych.data.displayData();
},
default_iti: 250
});
</script>
</html>

10
examples/conditional-and-loop-functions.html
View File

@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-text.js"></script> <script src="../plugins/jspsych-text.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
</head> </head>
<body></body>
<script> <script>
var block = { var trial = {
type: 'text', type: 'text',
text: 'Hello. This is in a loop. Press R to repeat this trial, or C to continue.', text: 'Hello. This is in a loop. Press R to repeat this trial, or C to continue.',
choices: ['r','c'] choices: ['r','c']
} }
var loop_node = { var loop_node = {
timeline: [block], timeline: [trial],
loop_function: function(data){ loop_function: function(data){
if(jsPsych.pluginAPI.convertKeyCharacterToKeyCode('r') == data[0].key_press){ if(jsPsych.pluginAPI.convertKeyCharacterToKeyCode('r') == data.values()[0].key_press){
return true; return true;
} else { } else {
return false; return false;
@ -39,7 +39,7 @@
var if_node = { var if_node = {
timeline: [if_trial], timeline: [if_trial],
conditional_function: function(){ conditional_function: function(){
var data = jsPsych.data.getLastTrialData(); var data = jsPsych.data.get().last(1).values()[0];
if(data.key_press == jsPsych.pluginAPI.convertKeyCharacterToKeyCode('s')){ if(data.key_press == jsPsych.pluginAPI.convertKeyCharacterToKeyCode('s')){
return false; return false;
} else { } else {

35
examples/conditional-first-trial.html
View File

@ -1,35 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-text.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
</head>
<script>
var if_trial = {
type: 'text',
text: 'The random number generated showed this trial. Press any key to continue.'
}
var if_node = {
timeline: [if_trial],
conditional_function: function(){
console.log('conditional function evaluated');
return false;
}
}
var after_if_trial = {
type: 'text',
text: 'This is the trial after the conditional. Check the console log to see if conditional evaluated.'
}
jsPsych.init({
timeline: [if_node, after_if_trial],
on_finish: function(){jsPsych.data.displayData(); }
});
</script>
</html>

3
examples/data-add-properties.html
View File

@ -2,7 +2,6 @@
<html> <html>
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-single-stim.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
@ -12,7 +11,7 @@
} }
</style> </style>
</head> </head>
<body></body>
<script> <script>
var block_1 = { var block_1 = {
type: 'single-stim', type: 'single-stim',

37
examples/data-add-to-last-trial.html
View File

@ -1,37 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img {
width: 300px;
}
</style>
</head>
<script>
var block_1 = {
type: 'single-stim',
stimulus: 'img/happy_face_1.jpg',
choices: [89, 78], // Y or N
prompt: '<p class="center-content">Data should have "correct: true" property on next page. (Y or N to continue).</p>',
on_finish: function() {
jsPsych.data.addDataToLastTrial({
correct: true
});
}
}
jsPsych.init({
timeline: [block_1],
on_finish: function() {
jsPsych.data.displayData();
}
});
</script>
</html>

3
examples/data-as-function.html
View File

@ -2,7 +2,6 @@
<html> <html>
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-single-stim.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
@ -12,7 +11,7 @@
} }
</style> </style>
</head> </head>
<body></body>
<script> <script>
var block_1 = { var block_1 = {
type: 'single-stim', type: 'single-stim',

51
examples/data-filters.html
View File

@ -1,51 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-text.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img {
width: 300px;
}
</style>
</head>
<script>
var trial_1 = {
data: { prop: 1, type: 1 }
}
var trial_2 = {
data: { prop: 1, type: 2}
}
var trial_3 = {
data: { prop: 2, type: 1}
}
var trial_4 = {
data: { prop: 2, type: 2}
}
var node = {
type: 'text',
timeline: [trial_1, trial_2, trial_3, trial_4],
text: "Press any key. 4 times. Then check console."
}
jsPsych.init({
timeline: [node],
on_finish: function() {
console.log(jsPsych.data.getDataAsJSON([{prop: 1}, {type: 2}]));
console.log(jsPsych.data.getDataAsJSON([{prop: 1, type: 1}, {type: 2, prop: 2}]));
jsPsych.data.displayData();
},
default_iti: 250
});
</script>
</html>

4
examples/data-from-timeline.html
View File

@ -12,7 +12,7 @@
} }
</style> </style>
</head> </head>
<body></body>
<script> <script>
var trial_1 = { var trial_1 = {
stimulus: 'img/happy_face_1.jpg', stimulus: 'img/happy_face_1.jpg',
@ -36,7 +36,7 @@
node_data: true node_data: true
}, },
on_finish: function(){ on_finish: function(){
console.log(JSON.stringify(jsPsych.data.getLastTimelineData())); console.log(jsPsych.data.getLastTimelineData().json());
} }
} }

4
examples/data-from-url.html
View File

@ -1,12 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img { width: 300px; }
</style>
</head> </head>
<body> <body>
<p>The URL variable should be logged to the console</p> <p>The URL variable should be logged to the console</p>

77
examples/demo-flanker.html
View File

@ -2,7 +2,6 @@
<html> <html>
<head> <head>
<title>Flanker Task</title> <title>Flanker Task</title>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-text.js"></script> <script src="../plugins/jspsych-text.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-single-stim.js"></script>
@ -11,6 +10,9 @@
<body> <body>
</body> </body>
<script> <script>
/* experiment parameters */
var reps_per_trial_type = 4;
/*set up welcome block*/ /*set up welcome block*/
var welcome = { var welcome = {
type: "text", type: "text",
@ -20,11 +22,12 @@
/*set up instructions block*/ /*set up instructions block*/
var instructions = { var instructions = {
type: "text", type: "text",
text: "<p>In this task, you will see five arrows on the screen.</p>"+ text: "<p>In this task, you will see five arrows on the screen, like the example below.</p>"+
"<img src='img/inc1.png'></img>"+
"<p>Press the left arrow key if the middle arrow is pointing left. (<)</p>"+ "<p>Press the left arrow key if the middle arrow is pointing left. (<)</p>"+
"<p>Press the right arrow key if the middle arrow is pointing right. (>)</p>"+ "<p>Press the right arrow key if the middle arrow is pointing right. (>)</p>"+
"<p>Press any key to begin.</p>", "<p>Press any key to begin.</p>",
timing_post_trial: 3000 timing_post_trial: 1000
}; };
/*defining stimuli*/ /*defining stimuli*/
@ -47,64 +50,42 @@
} }
]; ];
/*randomising stimuli*/ /* defining test timeline */
var all_trials = jsPsych.randomization.repeat(test_stimuli, 3); var test = {
timeline: [{
/*creating random ISI*/
var post_trial_gap = function() {
return Math.floor(Math.random() * 1500) + 500;
};
/*defining experimental block*/
var test_block = {
type: 'single-stim', type: 'single-stim',
choices: [37, 39], choices: [37, 39],
timing_response: 1500, timing_response: 1500,
stimulus: jsPsych.timelineVariable('stimulus'),
data: jsPsych.timelineVariable('data'),
on_finish: function(data){ on_finish: function(data){
var correct = false; var correct = false;
if(data.direction == 'left' && data.key_press == '37' && data.rt > -1){ if(data.direction == 'left' && data.key_press == 37 && data.rt > -1){
correct = true; correct = true;
} else if(data.direction == 'right' && data.key_press == '39' && data.rt > -1){ } else if(data.direction == 'right' && data.key_press == 39 && data.rt > -1){
correct = true; correct = true;
} }
jsPsych.data.addDataToLastTrial({correct: correct}); data.correct = correct;
}, },
timeline: all_trials, timing_post_trial: function() {
timing_post_trial: post_trial_gap return Math.floor(Math.random() * 1500) + 500;
};
/*function for getting mean RTs and error rates*/
function getSubjectData() {
var trials = jsPsych.data.getData({trial_type: 'single-stim'});
var congruent_trials = jsPsych.data.getData({stim_type: 'congruent', correct: true});
var incongruent_trials = jsPsych.data.getData({stim_type: 'incongruent', correct: true});
var sum_rt_congruent = 0;
for (var i = 0; i < congruent_trials.length; i++) {
sum_rt_congruent += congruent_trials[i].rt;
}
var sum_rt_incongruent = 0;
for (var i = 0; i < incongruent_trials.length; i++) {
sum_rt_incongruent += incongruent_trials[i].rt;
}
return {
congruent_rt: Math.floor(sum_rt_congruent / congruent_trials.length),
incongruent_rt: Math.floor(sum_rt_incongruent / incongruent_trials.length),
accuracy: Math.floor( (congruent_trials.length + incongruent_trials.length) / trials.length * 100)
} }
}],
timeline_variables: test_stimuli,
sample: {type: 'fixed-repetitions', size: reps_per_trial_type}
}; };
/*defining debriefing block*/ /*defining debriefing block*/
var debrief_block = { var debrief = {
type: "text", type: "text",
text: function() { text: function() {
var subject_data = getSubjectData(); var total_trials = jsPsych.data.get().filter({trial_type: 'single-stim'}).count();
return "<p>You responded correctly on "+subject_data.accuracy+"% of the trials.</p> " + var accuracy = Math.round(jsPsych.data.get().filter({correct: true}).count() / total_trials * 100);
"<p>Your average response time for congruent trials was <strong>" + subject_data.congruent_rt + "ms</strong>.</p>"+ var congruent_rt = Math.round(jsPsych.data.get().filter({correct: true, stim_type: 'congruent'}).select('rt').mean());
"<p>Your average response time for incongruent trials was <strong>" + subject_data.incongruent_rt + "ms</strong>.</p>"+ var incongruent_rt = Math.round(jsPsych.data.get().filter({correct: true, stim_type: 'incongruent'}).select('rt').mean());
return "<p>You responded correctly on <strong>"+accuracy+"%</strong> of the trials.</p> " +
"<p>Your average response time for congruent trials was <strong>" + congruent_rt + "ms</strong>.</p>"+
"<p>Your average response time for incongruent trials was <strong>" + incongruent_rt + "ms</strong>.</p>"+
"<p>Press any key to complete the experiment. Thank you!</p>"; "<p>Press any key to complete the experiment. Thank you!</p>";
} }
}; };
@ -113,8 +94,8 @@
var timeline = []; var timeline = [];
timeline.push(welcome); timeline.push(welcome);
timeline.push(instructions); timeline.push(instructions);
timeline.push(test_block); timeline.push(test);
timeline.push(debrief_block); timeline.push(debrief);
/*start experiment*/ /*start experiment*/
jsPsych.init({ jsPsych.init({

2
examples/end-active-node.html
View File

@ -12,7 +12,7 @@
} }
</style> </style>
</head> </head>
<body></body>
<script> <script>
var images = ["img/1.gif", "img/2.gif", "img/3.gif", "img/4.gif", "img/5.gif", "img/6.gif", "img/7.gif", "img/8.gif", "img/9.gif", "img/10.gif"]; var images = ["img/1.gif", "img/2.gif", "img/3.gif", "img/4.gif", "img/5.gif", "img/6.gif", "img/7.gif", "img/8.gif", "img/9.gif", "img/10.gif"];

8
examples/end-experiment.html
View File

@ -2,7 +2,6 @@
<html> <html>
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-single-stim.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
@ -12,7 +11,7 @@
} }
</style> </style>
</head> </head>
<body></body>
<script> <script>
var images = ["img/1.gif", "img/2.gif", "img/3.gif", "img/4.gif", "img/5.gif", "img/6.gif", "img/7.gif", "img/8.gif", "img/9.gif", "img/10.gif"]; var images = ["img/1.gif", "img/2.gif", "img/3.gif", "img/4.gif", "img/5.gif", "img/6.gif", "img/7.gif", "img/8.gif", "img/9.gif", "img/10.gif"];
@ -37,10 +36,7 @@
jsPsych.init({ jsPsych.init({
timeline: [block], timeline: [block]
on_finish: function() {
jsPsych.data.displayData();
}
}); });
</script> </script>

26
examples/error-messages-for-bad-experiment-structures.html
View File

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img { width: 300px; }
</style>
</head>
<script>
// no type parameter below.
var block_1 = {
stimulus: 'img/happy_face_1.jpg',
choices: [89,78], // Y or N
prompt: '<p class="center-content">Have you seen this face before? Y or N.</p>'
}
// should get error message in console about no type parameter.
jsPsych.init({
timeline: [block_1]
});
</script>
</html>

30
examples/error-messages-for-no-plugin.html
View File

@ -1,30 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img { width: 300px; }
</style>
</head>
<body>
<div id="jspsych-target"></div>
</body>
<script>
// no type parameter below.
var block_1 = {
type: 'single-stim',
stimulus: 'img/happy_face_1.jpg',
choices: [89,78], // Y or N
prompt: '<p class="center-content">Have you seen this face before? Y or N.</p>'
}
// should get error message in console about no plugin loaded
jsPsych.init({
timeline: [block_1]
});
</script>
</html>

3
examples/exclusions.html
View File

@ -2,7 +2,6 @@
<html> <html>
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-single-stim.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
@ -18,7 +17,7 @@
<script> <script>
var trial_1 = { var trial_1 = {
type: 'single-stim', type: 'single-stim',
stimulus: 'The experiment has begun!', stimulus: 'The experiment started because your viewing window is at least 1000x500 pixels and you running a browser that supports the WebAudio API. To see the exclusions in action, shrink this window and refresh the page.',
is_html: true is_html: true
} }

30
examples/flex-layout-testing.html
View File

@ -1,30 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-survey-multi-choice.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
</head>
<body></body>
<script>
var opts = ["Strongly Disagree", "Disagree", "Somewhat Disagree", "Neural", "Somewhat Agree", "Agree", "Strongly Agree"];
var trial_1 = {
type: 'survey-multi-choice',
questions: ["I like vegetables.", "I like fruit."],
options: [opts, opts],
}
var trial_2 = {
type: 'survey-multi-choice',
questions: ["I like vegetables."],
options: [opts],
}
jsPsych.init({
timeline: [trial_1, trial_2],
show_progress_bar: true
});
</script>
</html>

27
examples/fullscreen-mouse-bug.html
View File

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-text.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
</head>
<script>
var block_1 = {
type: 'text',
text: 'This trial should display. Click to continue.',
choices: 'mouse'
}
jsPsych.init({
timeline: [block_1],
fullscreen: true,
on_finish: function() {
jsPsych.data.displayData();
}
});
</script>
</html>

39
examples/function-parameters-reset.html
View File

@ -1,39 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-text.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
</head>
<script>
var count = 0;
var block = {
type: 'text',
text: function() {
return 'Each random number should be newly generated. Press any key. This is a random number: '+Math.round(Math.random()*200);
}
}
var loop_node = {
timeline: [block],
loop_function: function(data){
count++;
if(count > 5){
return false;
} else {
return true;
}
}
}
jsPsych.init({
timeline: [loop_node],
on_finish: function(){jsPsych.data.displayData(); }
});
</script>
</html>

56
examples/hierarchical-data.html
View File

@ -1,56 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-text.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img {
width: 300px;
}
</style>
</head>
<script>
var description = {
type: 'text',
text: 'The two single-stim trials should have a which_trial property and a node_level_data property. Press any key.'
}
var trial_1 = {
stimulus: 'img/happy_face_1.jpg',
data: {
which_trial: "trial 1"
}
}
var trial_2 = {
stimulus: 'img/sad_face_1.jpg',
data: {
which_trial: "trial 2"
}
}
var timeline_node = {
timeline: [trial_1, trial_2],
data: {
node_level_data: true
},
type: 'single-stim',
choices: [89, 78], // Y or N
prompt: '<p class="center-content">Have you seen this face before? Y or N.</p>',
}
jsPsych.init({
timeline: [description, timeline_node],
on_finish: function() {
jsPsych.data.displayData();
}
});
</script>
</html>