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

edited examples

Browse Source
This commit is contained in:
KristinDiep 2017-07-17 10:19:41 -04:00
parent 65e41900a0
commit 505121e455
33 changed files with 100 additions and 426 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,21 +2,21 @@
<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-html-keyboard-response.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
</head> </head>
<body></body> <body></body>
<script> <script>
var first = { var first = {
type: 'text', type: 'html-keyboard-response',
text: 'first trial; new trial added when on_finish is called', stimulus: 'first trial; new trial added when on_finish is called',
on_finish: function(){ on_finish: function(){
jsPsych.pauseExperiment(); jsPsych.pauseExperiment();
jsPsych.addNodeToEndOfTimeline({ jsPsych.addNodeToEndOfTimeline({
timeline: [{ timeline: [{
type: 'single-stim', type: 'image-keyboard-response',
stimulus: 'img/happy_face_4.jpg' stimulus: 'img/happy_face_4.jpg'
}] }]
}, jsPsych.resumeExperiment) }, jsPsych.resumeExperiment)

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

@ -2,15 +2,15 @@
<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-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
</head> </head>
<body></body> <body></body>
<script> <script>
var trial = { var trial = {
type: 'text', type: 'html-keyboard-response',
text: 'Hello. This is in a loop. Press R to repeat this trial, or C to continue.', stimulus: 'Hello. This is in a loop. Press R to repeat this trial, or C to continue.',
choices: ['r','c'] choices: ['r','c']
} }
@ -26,14 +26,14 @@
} }
var pre_if_trial = { var pre_if_trial = {
type: 'text', type: 'html-keyboard-response',
text: 'The next trial is in a conditional statement. Press S to skip it, or V to view it.', stimulus: 'The next trial is in a conditional statement. Press S to skip it, or V to view it.',
choices: ['s','v'] choices: ['s','v']
} }
var if_trial = { var if_trial = {
type: 'text', type: 'html-keyboard-response',
text: 'You chose to view the trial. Press any key to continue.' stimulus: 'You chose to view the trial. Press any key to continue.'
} }
var if_node = { var if_node = {
@ -49,8 +49,8 @@
} }
var after_if_trial = { var after_if_trial = {
type: 'text', type: 'html-keyboard-response',
text: 'This is the trial after the conditional.' stimulus: 'This is the trial after the conditional.'
} }
jsPsych.init({ jsPsych.init({

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

@ -3,7 +3,7 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
<style> <style>
img { img {
@ -14,7 +14,7 @@
<body></body> <body></body>
<script> <script>
var block_1 = { var block_1 = {
type: 'single-stim', type: 'image-keyboard-response',
stimulus: 'img/happy_face_1.jpg', stimulus: 'img/happy_face_1.jpg',
choices: [89, 78], // Y or N choices: [89, 78], // Y or N
prompt: '<p class="center-content">The data displayed on the next page should have a subject and completed property. Press Y or N.</p>' prompt: '<p class="center-content">The data displayed on the next page should have a subject and completed property. Press Y or N.</p>'

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

@ -3,7 +3,7 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
<style> <style>
img { img {
@ -14,7 +14,7 @@
<body></body> <body></body>
<script> <script>
var block_1 = { var block_1 = {
type: 'single-stim', type: 'image-keyboard-response',
stimulus: 'img/happy_face_1.jpg', stimulus: 'img/happy_face_1.jpg',
choices: [89, 78], // Y or N choices: [89, 78], // Y or N
prompt: '<p class="center-content">Data should have a random int 0-19 on next page. Y or N.</p>', prompt: '<p class="center-content">Data should have a random int 0-19 on next page. Y or N.</p>',

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

@ -4,7 +4,7 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
<style> <style>
img { img {
@ -24,11 +24,10 @@
var trial_3 = { var trial_3 = {
stimulus: '<p>Console should be showing data from the timeline after each trial.</p>', stimulus: '<p>Console should be showing data from the timeline after each trial.</p>',
is_html: true
} }
var node = { var node = {
type: 'single-stim', type: 'image-keyboard-response',
timeline: [trial_1, trial_2, trial_3], timeline: [trial_1, trial_2, trial_3],
choices: [89, 78], // Y or N choices: [89, 78], // Y or N
prompt: '<p class="center-content">Have you seen this face before? Y or N.</p>', prompt: '<p class="center-content">Have you seen this face before? Y or N.</p>',

20
examples/demo-flanker.html
View File

@ -3,8 +3,8 @@
<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-html-keyboard-response.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"> <link rel="stylesheet" href="../css/jspsych.css">
</head> </head>
<body> <body>
@ -15,14 +15,14 @@
/*set up welcome block*/ /*set up welcome block*/
var welcome = { var welcome = {
type: "text", type: "html-keyboard-response",
text: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
/*set up instructions block*/ /*set up instructions block*/
var instructions = { var instructions = {
type: "text", type: "html-keyboard-response",
text: "<p>In this task, you will see five arrows on the screen, like the example below.</p>"+ stimulus: "<p>In this task, you will see five arrows on the screen, like the example below.</p>"+
"<img src='img/inc1.png'></img>"+ "<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>"+
@ -53,9 +53,9 @@
/* defining test timeline */ /* defining test timeline */
var test = { var test = {
timeline: [{ timeline: [{
type: 'single-stim', type: 'image-keyboard-response',
choices: [37, 39], choices: [37, 39],
timing_response: 1500, trial_duration: 1500,
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
data: jsPsych.timelineVariable('data'), data: jsPsych.timelineVariable('data'),
on_finish: function(data){ on_finish: function(data){
@ -77,8 +77,8 @@
/*defining debriefing block*/ /*defining debriefing block*/
var debrief = { var debrief = {
type: "text", type: "html-keyboard-response",
text: function() { stimulus: function() {
var total_trials = jsPsych.data.get().filter({trial_type: 'single-stim'}).count(); var total_trials = jsPsych.data.get().filter({trial_type: 'single-stim'}).count();
var accuracy = Math.round(jsPsych.data.get().filter({correct: true}).count() / total_trials * 100); var accuracy = Math.round(jsPsych.data.get().filter({correct: true}).count() / total_trials * 100);
var congruent_rt = Math.round(jsPsych.data.get().filter({correct: true, stim_type: 'congruent'}).select('rt').mean()); var congruent_rt = Math.round(jsPsych.data.get().filter({correct: true, stim_type: 'congruent'}).select('rt').mean());

23
examples/demo-simple-rt-task.html
View File

@ -3,8 +3,8 @@
<head> <head>
<title>My experiment</title> <title>My experiment</title>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-text.js"></script> <script src="../plugins/jspsych-html-keyboard-response.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
</head> </head>
<body></body> <body></body>
@ -15,15 +15,15 @@
/* define welcome message trial */ /* define welcome message trial */
var welcome_block = { var welcome_block = {
type: "text", type: "html-keyboard-response",
text: "Welcome to the experiment. Press any key to begin." stimulus: "Welcome to the experiment. Press any key to begin."
}; };
timeline.push(welcome_block); timeline.push(welcome_block);
/* define instructions trial */ /* define instructions trial */
var instructions = { var instructions = {
type: "text", type: "html-keyboard-response",
text: "<p>In this experiment, a circle will appear in the center " + stimulus: "<p>In this experiment, a circle will appear in the center " +
"of the screen.</p><p>If the circle is <strong>blue</strong>, " + "of the screen.</p><p>If the circle is <strong>blue</strong>, " +
"press the letter F on the keyboard as fast as you can.</p>" + "press the letter F on the keyboard as fast as you can.</p>" +
"<p>If the circle is <strong>orange</strong>, press the letter J " + "<p>If the circle is <strong>orange</strong>, press the letter J " +
@ -45,18 +45,17 @@
]; ];
var fixation = { var fixation = {
type: 'single-stim', type: 'html-keyboard-response',
stimulus: '<div style="font-size:60px;">+</div>', stimulus: '<div style="font-size:60px;">+</div>',
is_html: true,
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
timing_response: function(){ trial_duration: function(){
return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0]; return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
}, },
data: {test_part: 'fixation'} data: {test_part: 'fixation'}
} }
var test = { var test = {
type: "single-stim", type: "image-keyboard-response",
stimulus: jsPsych.timelineVariable('stimulus'), stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'], choices: ['f', 'j'],
data: jsPsych.timelineVariable('data'), data: jsPsych.timelineVariable('data'),
@ -76,8 +75,8 @@
/* define debrief */ /* define debrief */
var debrief_block = { var debrief_block = {
type: "text", type: "html-keyboard-response",
text: function() { stimulus: function() {
var trials = jsPsych.data.get().filter({test_part: 'test'}); var trials = jsPsych.data.get().filter({test_part: 'test'});
var correct_trials = trials.filter({correct: true}); var correct_trials = trials.filter({correct: true});

11
examples/display-element-to-embed-experiment.html
View File

@ -4,7 +4,8 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<script src="../plugins/jspsych-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
<style> <style>
p { line-height: 1.5em; font-size: 18px; } p { line-height: 1.5em; font-size: 18px; }
@ -31,14 +32,14 @@
<script> <script>
var trial_1 = { var trial_1 = {
type: 'single-stim', type: 'image-keyboard-response',
stimulus: 'img/happy_face_1.jpg', stimulus: 'img/happy_face_1.jpg',
choices: [89, 78], // Y or N choices: [89, 78], // Y or N
prompt: '<p class="center-content">Have you seen this face before? Y or N.</p>' prompt: '<p class="center-content">Have you seen this face before? Y or N.</p>'
} }
var trial_2 = { var trial_2 = {
type: 'single-stim', 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
timing_response: 5000, timing_response: 5000,
@ -46,7 +47,7 @@
} }
var trial_3 = { var trial_3 = {
type: 'single-stim', type: 'html-keyboard-response',
choices: jsPsych.NO_KEYS, // Y or N choices: jsPsych.NO_KEYS, // Y or N
timing_response: 5000, timing_response: 5000,
prompt: '<p class="center-content">No response allowed. 5s wait.</p>', prompt: '<p class="center-content">No response allowed. 5s wait.</p>',
@ -55,7 +56,7 @@
} }
var node = { var node = {
type: 'single-stim', type: 'html-keyboard-response',
timeline: [trial_1, trial_2, trial_3], timeline: [trial_1, trial_2, trial_3],
} }

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

@ -4,7 +4,8 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-html-keyboard-response.js"></script>
<script src="../plugins/jspsych-image-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
<style> <style>
img { img {
@ -24,7 +25,7 @@
} }
var block = { var block = {
type: 'single-stim', type: 'image-keyboard-response',
choices: [89, 78], // Y or N choices: [89, 78], // Y or N
prompt: '<p class="center-content">Press Y to Continue. Press N to end this node of the experiment.</p>', prompt: '<p class="center-content">Press Y to Continue. Press N to end this node of the experiment.</p>',
on_finish: function(data) { on_finish: function(data) {
@ -36,9 +37,8 @@
} }
var after_block = { var after_block = {
type: 'single-stim', type: 'html-keyboard-response',
stimulus: '<p>The next node</p>', stimulus: '<p>The next node</p>',
is_html: true
} }
jsPsych.init({ jsPsych.init({

4
examples/end-experiment.html
View File

@ -3,7 +3,7 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
<style> <style>
img { img {
@ -23,7 +23,7 @@
} }
var block = { var block = {
type: 'single-stim', type: 'image-keyboard-response',
choices: [89, 78], // Y or N choices: [89, 78], // Y or N
prompt: '<p class="center-content">Press Y to Continue. Press N to end the experiment</p>', prompt: '<p class="center-content">Press Y to Continue. Press N to end the experiment</p>',
on_finish: function(data) { on_finish: function(data) {

5
examples/exclusions.html
View File

@ -3,7 +3,7 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
<style> <style>
img { img {
@ -16,9 +16,8 @@
</body> </body>
<script> <script>
var trial_1 = { var trial_1 = {
type: 'single-stim', type: 'html-keyboard-response',
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.', 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
} }

2
examples/jspsych-categorize-html.html
View File

@ -22,7 +22,7 @@
correct_text: "<p>Correct. This color is %ANS%.</p>", correct_text: "<p>Correct. This color is %ANS%.</p>",
incorrect_text: "<p>Incorrect. This color is %ANS%. Please press the correct key to continue.</p>", incorrect_text: "<p>Incorrect. This color is %ANS%. Please press the correct key to continue.</p>",
prompt: "<p>Press B if the square is blue. Press P if the square is purple.</p>", prompt: "<p>Press B if the square is blue. Press P if the square is purple.</p>",
timing_response: 1500, trial_duration: 1500,
show_feedback_on_timeout: false, show_feedback_on_timeout: false,
force_correct_button_press: true force_correct_button_press: true
}; };

2
examples/jspsych-categorize-image.html
View File

@ -22,7 +22,7 @@
correct_text: "<p>Correct. This face is %ANS%.</p>", correct_text: "<p>Correct. This face is %ANS%.</p>",
incorrect_text: "<p>Incorrect. This face is %ANS%. Please press the correct key to continue.</p>", incorrect_text: "<p>Incorrect. This face is %ANS%. Please press the correct key to continue.</p>",
prompt: "<p>Press H if the face is happy. Press S if the face is sad.</p>", prompt: "<p>Press H if the face is happy. Press S if the face is sad.</p>",
timing_response: 1500, trial_duration: 1500,
show_feedback_on_timeout: false, show_feedback_on_timeout: false,
force_correct_button_press: true force_correct_button_press: true
}; };

43
examples/jspsych-html.html
View File

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-external-html.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
</head>
<body></body>
<script>
/*
this demo will only work if run online or with special permissions enable offline
for chrome, launch the browser from the command-line:
chrome --allow-file-access-from-files
*/
var check_consent = function(elem) {
if (document.getElementById('consent_checkbox').checked) {
return true;
} else {
alert("If you wish to participate, you must check the box next to the statement 'I agree to participate in this study.'");
return false;
}
return false;
};
var consent_block = {
type: "external-html",
force_refresh: true,
url: "external_html/simple_consent.html",
cont_btn: "start",
check_fn: check_consent
}
jsPsych.init({
timeline: [consent_block],
on_finish: function() {
jsPsych.data.displayData();
}
});
</script>
</html>

46
examples/jspsych-multi-stim-multi-response.html
View File

@ -1,46 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-multi-stim-multi-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img {
width: 300px;
}
</style>
</head>
<body></body>
<script>
var trial_1 = {
type: 'multi-stim-multi-response',
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_1.jpg'],
choices: [
[89, 78]
], // Y or N
timing_stim: [1000, -1],
prompt: '<p class="center-content">Is the second person happier than the first? Y or N.</p>'
}
var trial_2 = {
type: 'multi-stim-multi-response',
stimuli: ['img/happy_face_1.jpg'],
choices: [
[89, 78],
[49, 50, 51, 52, 53]
], // Y or N , 1 - 5
timing_stim: [-1],
prompt: '<p class="center-content">Rate the happiness of the person on a scale of 1-5, and press Y or N to indicate if you have seen the face before.</p>'
}
jsPsych.init({
timeline: [trial_1, trial_2],
on_finish: function() {
jsPsych.data.displayData();
}
});
</script>
</html>

46
examples/jspsych-palmer.html
View File

@ -1,46 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="js/snap.svg-min.js"></script>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-palmer.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
</head>
<body></body>
<script>
// create a stimulus using the generate_stimulus method
var square_size = 3; // number of rows and columns
var grid_spacing = 75; // pixels
var circle_size = 20; // radius in pixels
var configuration = [0,1,0,0,1,1,0,0,1,1,0,0,1,0,0,0,1,0,0,1]; // see definition above
var stimulus = jsPsych.plugins.palmer.generate_stimulus(square_size, grid_spacing, circle_size, configuration);
// show stimulus using single-stim plugin
var stim_block = {
type: 'single-stim',
stimulus: stimulus,
is_html: true,
timing_response: 2000,
response_ends_trial: false
};
var test_block = {
type: 'palmer',
configuration: [0,1,0,0,1,1,0,0,1,1,0,0,1,0,0,0,1,0,0,1],
editable: true,
show_feedback: true,
timing_feedback: 2000,
prompt: '<p>Create the image you just saw. Click two circles to add or remove a line between them. Click submit when you are done.</p>'
};
jsPsych.init({
timeline: [stim_block, test_block],
on_finish: function() { jsPsych.data.displayData(); }
});
</script>
</html>

5
examples/jspsych-reconstruction.html
View File

@ -2,7 +2,7 @@
<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-html-keyboard-response.js"></script>
<script src="../plugins/jspsych-reconstruction.js"></script> <script src="../plugins/jspsych-reconstruction.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
</head> </head>
@ -19,11 +19,10 @@
} }
var pre_test = { var pre_test = {
type: 'single-stim', type: 'html-keyboard-response',
stimulus: '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+ stimulus: '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+
'<div style="display: block; position: absolute; top: '+(150 - 210/2)+'px; left:'+(150 - 210/2)+'px; background-color: #000000; '+ '<div style="display: block; position: absolute; top: '+(150 - 210/2)+'px; left:'+(150 - 210/2)+'px; background-color: #000000; '+
'width: 210px; height: 210px;"></div></div>', 'width: 210px; height: 210px;"></div></div>',
is_html: true,
choices: ['c'], choices: ['c'],
post_trial_gap: 1250, post_trial_gap: 1250,
prompt: '<p>Study the size of this square carefully. On the next screen you will have to recreate it. When you are ready, press C.</p>' prompt: '<p>Study the size of this square carefully. On the next screen you will have to recreate it. When you are ready, press C.</p>'

4
examples/jspsych-same-different.html
View File

@ -3,7 +3,7 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-same-different.js"></script> <script src="../plugins/jspsych-same-different-image.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
<style> <style>
img { img {
@ -14,7 +14,7 @@
<body></body> <body></body>
<script> <script>
var trial = { var trial = {
type: 'same-different', type: 'same-different-image',
stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'], stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
prompt: "<p>Press S if the faces had the same emotional expression. Press D if the faces had different emotional expressions.</p>", prompt: "<p>Press S if the faces had the same emotional expression. Press D if the faces had different emotional expressions.</p>",
same_key: 'S', same_key: 'S',

41
examples/jspsych-single-audio.html
View File

@ -1,41 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-audio.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
</head>
<body><p>If you are seeing this message, then you are probably running this example file offline.
Loading the audio files offline requires running your browser in a special mode.
See <a href="https://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file">this Q&A</a>
for examples of how to get this working with Chrome. Other browsers have similar features that you can find more information on via Google.</p></body>
<script>
/*
this demo will only work if run online or with special permissions enable offline
for chrome, launch the browser from the command-line:
chrome --allow-file-access-from-files
*/
var block_1 = {
type: 'single-audio',
trial_ends_after_audio: true,
timeline: [
{stimulus: 'sound/tone.mp3'},
{stimulus: function() { return 'sound/sound.mp3'; }},
{stimulus: 'sound/hammer.mp3'}
],
prompt: 'the trial should advance automatically after sound completes, or press any key to advance'
}
jsPsych.init({
timeline: [block_1],
preload_audio: ['sound/sound.mp3'],
on_finish: function() {jsPsych.data.displayData();}
});
</script>
</html>

35
examples/jspsych-slider-response.html~HEAD
View File

@ -1,35 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-slider-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img {
width: 200px;
height: 150px;
margin: 10px;
}
</style>
</head>
<body></body>
<script>
var block_1 = {
type: 'slider-response',
stimulus: '<p>How similar are these pictures?</p><img src="img/happy_face_1.jpg"></img><img src="img/sad_face_1.jpg"></img>',
labels: ["Not at all similar", "Sort of", "Identical"],
min: 0,
max: 2,
step: 1
}
jsPsych.init({
timeline: [block_1],
on_finish: function() {
jsPsych.data.displayData();
}
});
</script>
</html>

31
examples/jspsych-survey-multi-select.html
View File

@ -4,19 +4,13 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Document</title> <title>Document</title>
<<<<<<< HEAD:examples/jspsych-survey-multi-select.html
<script src="../jspsych.js" ></script> <script src="../jspsych.js" ></script>
<script src="../plugins/jspsych-survey-multi-select.js" ></script> <script src="../plugins/jspsych-survey-multi-select.js" ></script>
=======
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-survey-multi-picture.js"></script>
>>>>>>> update examples; tweak plugin fixes:examples/jspsych-survey-multi-picture.html
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
</head> </head>
<body> <body>
</body> </body>
<<<<<<< HEAD:examples/jspsych-survey-multi-select.html
<script> <script>
var questions=["Which of these colors do you like?", "Which of these foods do you like?"] var questions=["Which of these colors do you like?", "Which of these foods do you like?"]
var choices = [ var choices = [
@ -40,29 +34,4 @@
}, },
}); });
</script> </script>
=======
<script>
var questions = ["Please choose the picture which describes the following sentence: The dog is chased by the cat."]
var choices = [{
url: "http://www.gameswithwords.org/WhichEnglish/images/1_2.jpg",
label: ""
}, {
url: "http://www.gameswithwords.org/WhichEnglish/images/1_1.jpg",
label: ""
}]
var multi_choice_block = {
type: 'survey-multi-picture',
questions: questions,
options: [choices],
horizontal: true
};
jsPsych.init({
timeline: [multi_choice_block],
on_finish: function(data) {
jsPsych.data.displayData();
},
});
</script>
>>>>>>> update examples; tweak plugin fixes:examples/jspsych-survey-multi-picture.html
</html> </html>

31
examples/jspsych-survey-slider.html
View File

@ -1,31 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-survey-slider.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img {
width: 200px;
height: 150px;
margin: 10px;
}
</style>
</head>
<body></body>
<script>
var block_1 = {
type: 'survey-slider',
questions: ['<p>How similar are these pictures?</p><img src="img/happy_face_1.jpg"></img><img src="img/sad_face_1.jpg"></img>'],
}
jsPsych.init({
timeline: [block_1],
on_finish: function() {
jsPsych.data.displayData();
}
});
</script>
</html>

1
examples/jspsych-survey-text.html
View File

@ -15,6 +15,7 @@
var survey_block = { var survey_block = {
type: 'survey-text', type: 'survey-text',
questions: page_1_questions, questions: page_1_questions,
values: ['age', 'Location'],
rows: [1, 8], rows: [1, 8],
columns: [50, 20] columns: [50, 20]
}; };

28
examples/jspsych-text.html
View File

@ -1,28 +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 = {
type: 'text',
text: 'Welcome to the experiment. Press any key to begin.'
}
var mouse = {
type: 'text',
allow_mouse_click: true,
text: 'Click the mouse to continue.'
}
jsPsych.init({
timeline: [block, mouse],
on_finish: function() { jsPsych.data.displayData(); }
});
</script>
</html>

6
examples/jspsych-visual-search-circle.html
View File

@ -5,7 +5,7 @@
<script src="js/snap.svg-min.js"></script> <script src="js/snap.svg-min.js"></script>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-text.js"></script> <script src="../plugins/jspsych-html-keyboard-response.js"></script>
<script src="../plugins/jspsych-visual-search-circle.js"></script> <script src="../plugins/jspsych-visual-search-circle.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
</head> </head>
@ -13,8 +13,8 @@
<script> <script>
var intro = { var intro = {
type: 'text', type: 'html-keyboard-response',
text: '<p>You will see a set of Ns on the following screens. Press J if there is a backwards N. If there is no backwards N press F.</p><p>Press any key to begin.</p>' stimulus: '<p>You will see a set of Ns on the following screens. Press J if there is a backwards N. If there is no backwards N press F.</p><p>Press any key to begin.</p>'
} }
var trial_1 = { var trial_1 = {

6
examples/jspsych-xab.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-xab.js"></script> <script src="../plugins/jspsych-xab-image.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
<style> <style>
img { img {
@ -15,10 +15,10 @@
<script> <script>
var trial = { var trial = {
type: 'xab', type: 'xab-image',
stimuli: ['img/happy_face_1.jpg', 'img/happy_face_2.jpg'], stimuli: ['img/happy_face_1.jpg', 'img/happy_face_2.jpg'],
prompt: "<p>Press Q if the face you just saw is on the left. Press P if the face you just saw is on the right.</p>", prompt: "<p>Press Q if the face you just saw is on the left. Press P if the face you just saw is on the right.</p>",
timing_response: 2000 trial_duration: 2000
} }
jsPsych.init({ jsPsych.init({

19
examples/lexical-decision.html
View File

@ -4,8 +4,7 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-text.js"></script> <script src="../plugins/jspsych-html-keyboard-response.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>
<style> <style>
.stimulus { font-size: 32px; } .stimulus { font-size: 32px; }
@ -16,8 +15,8 @@
var timeline = []; var timeline = [];
var instructions = { var instructions = {
type: 'text', type: 'html-keyboard-response',
text: '<p>Each screen will show either an English word or letters that do not form a word.</p>'+ stimulus: '<p>Each screen will show either an English word or letters that do not form a word.</p>'+
'<p>Press Y if the letters form a valid word.</p><p>Press N if the letters do not form a valid word.</p>'+ '<p>Press Y if the letters form a valid word.</p><p>Press N if the letters do not form a valid word.</p>'+
'<p>When you are ready to begin, press Y or N.</p>', '<p>When you are ready to begin, press Y or N.</p>',
choices: ['y','n'] choices: ['y','n']
@ -72,17 +71,15 @@
randomize_order: true, randomize_order: true,
timeline: [ timeline: [
{ {
type: 'single-stim', type: 'html-keyboard-response',
stimulus: '<p class="stimulus">+</p>', stimulus: '<p class="stimulus">+</p>',
is_html: true,
choices: jsPsych.NO_KEYS, choices: jsPsych.NO_KEYS,
timing_response: 500, trial_duration: 500,
post_trial_gap: 0 post_trial_gap: 0
}, },
{ {
type: 'single-stim', type: 'html-keyboard-response',
stimulus: function(){ return "<p class='stimulus'>"+jsPsych.timelineVariable('word')+"</p>"; }, stimulus: function(){ return "<p class='stimulus'>"+jsPsych.timelineVariable('word')+"</p>"; },
is_html: true,
choices: ['y','n'], choices: ['y','n'],
post_trial_gap: 500, post_trial_gap: 500,
data: function(){ data: function(){
@ -105,8 +102,8 @@
timeline.push(trials); timeline.push(trials);
var debrief = { var debrief = {
type: 'text', type: 'html-keyboard-response',
text: function(){ stimulus: function(){
var high_frequency = jsPsych.data.getData({word_frequency: 'high', correct: true}); var high_frequency = jsPsych.data.getData({word_frequency: 'high', correct: true});
var low_frequency = jsPsych.data.getData({word_frequency: 'low', correct: true}); var low_frequency = jsPsych.data.getData({word_frequency: 'low', correct: true});

10
examples/pause-unpause.html
View File

@ -3,15 +3,15 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-text.js"></script> <script src="../plugins/jspsych-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
</head> </head>
<body></body> <body></body>
<script> <script>
var first = { var first = {
type: 'text', type: 'html-keyboard-response',
text: 'first trial! experiment will pause for 2s in between trials. press any key.', stimulus: 'first trial! experiment will pause for 2s in between trials. press any key.',
post_trial_gap: 0, post_trial_gap: 0,
on_finish: function(){ on_finish: function(){
jsPsych.pauseExperiment(); jsPsych.pauseExperiment();
@ -20,8 +20,8 @@
} }
var second = { var second = {
type: 'text', type: 'html-keyboard-response',
text: 'second trial!' stimulus: 'second trial!'
} }
jsPsych.init({ jsPsych.init({

34
examples/progress-bar.html
View File

@ -1,42 +1,34 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<<<<<<< HEAD:examples/progress-bar.html
=======
>>>>>>> update examples; tweak plugin fixes:examples/jspsych-single-stim.html
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<script src="../plugins/jspsych-text.js"></script> <script src="../plugins/jspsych-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
<style> <style>
img { img {
width: 300px; width: 300px;
} }
</style> </style>
<<<<<<< HEAD:examples/progress-bar.html
=======
</head> </head>
>>>>>>> update examples; tweak plugin fixes:examples/jspsych-single-stim.html
<body></body> <body></body>
<script> <script>
var trial_1 = { var trial_1 = {
type: 'single-stim', type: 'image-keyboard-response',
stimulus: 'img/happy_face_1.jpg', stimulus: 'img/happy_face_1.jpg',
choices: [89, 78], // Y or N choices: [89, 78], // Y or N
prompt: '<p class="center-content">Have you seen this face before? Y or N.</p>' prompt: '<p class="center-content">Have you seen this face before? Y or N.</p>'
} }
var trial_2 = { var trial_2 = {
type: 'single-stim', 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 class="center-content">Have you seen this face before? Y or N.</p>' prompt: '<p class="center-content">Have you seen this face before? Y or N.</p>'
} }
var trial_3 = { var trial_3 = {
type: 'single-stim', type: 'image-keyboard-response',
<<<<<<< HEAD:examples/progress-bar.html
stimulus: 'img/happy_face_3.jpg', stimulus: 'img/happy_face_3.jpg',
choices: [89, 78], // Y or N choices: [89, 78], // Y or N
prompt: '<p class="center-content">Have you seen this face before? Y or N.</p>' prompt: '<p class="center-content">Have you seen this face before? Y or N.</p>'
@ -53,26 +45,14 @@
} }
var end_screen = { var end_screen = {
type: 'text', type: 'html-keyboard-response',
text: 'The experiment is over.' stimulus: 'The experiment is over.'
} }
jsPsych.init({ jsPsych.init({
timeline: [trial_1, trial_2, trial_3], //block_set, end_screen], timeline: [trial_1, trial_2, trial_3], //block_set, end_screen],
show_progress_bar: true, show_progress_bar: true,
=======
choices: jsPsych.NO_KEYS, // Y or N
timing_response: 2000,
prompt: '<p class="center-content">No response allowed. 2s wait.</p>',
stimulus: '<p>:)</p>',
is_html: true
}
jsPsych.init({
timeline: [trial_1, trial_2, trial_3],
>>>>>>> update examples; tweak plugin fixes:examples/jspsych-single-stim.html
on_finish: function() { on_finish: function() {
jsPsych.data.displayData(); jsPsych.data.displayData();
} }

5
examples/timeline-variables-sampling.html
View File

@ -3,7 +3,7 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
<style> <style>
</style> </style>
@ -25,10 +25,9 @@
timeline_variables: timeline_variables, timeline_variables: timeline_variables,
timeline: [ timeline: [
{ {
type: 'single-stim', type: 'html-keyboard-response',
choices: jsPsych.ALL_KEYS, choices: jsPsych.ALL_KEYS,
stimulus: jsPsych.timelineVariable('v1'), stimulus: jsPsych.timelineVariable('v1'),
is_html: true
} }
], ],
sample: { sample: {

12
examples/timeline-variables.html
View File

@ -4,8 +4,9 @@
<head> <head>
<script src="../jspsych.js"></script> <script src="../jspsych.js"></script>
<script src="../plugins/jspsych-single-stim.js"></script> <script src="../plugins/jspsych-image-keyboard-response.js"></script>
<script src="../plugins/jspsych-single-audio.js"></script> <script src="../plugins/jspsych-audio-keyboard-response.js"></script>
<script src="../plugins/jspsych-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link> <link rel="stylesheet" href="../css/jspsych.css"></link>
<style> <style>
img { img {
@ -28,14 +29,13 @@
timeline_variables: timeline_variables, timeline_variables: timeline_variables,
timeline: [ timeline: [
{ {
type: 'single-stim', type: 'html-keyboard-response',
choices: ['none'], // Y or N choices: ['none'], // Y or N
stimulus: "<p style='text-align:center; font-size:80px;'>+</p>", stimulus: "<p style='text-align:center; font-size:80px;'>+</p>",
timing_response: 500, trial_duration: 500,
is_html: true
}, },
{ {
type: 'single-stim', type: 'image-keyboard-response',
choices: [89, 78], // Y or N choices: [89, 78], // Y or N
stimulus: jsPsych.timelineVariable('v1'), stimulus: jsPsych.timelineVariable('v1'),
prompt: function() { return '<p class="center-content">Have you seen '+jsPsych.timelineVariable('v2', true)+ ' before? Y or N.</p>' } prompt: function() { return '<p class="center-content">Have you seen '+jsPsych.timelineVariable('v2', true)+ ' before? Y or N.</p>' }

4
plugins/jspsych-xab-html.js
View File

@ -16,9 +16,9 @@ jsPsych.plugins['xab-html'] = (function() {
name: 'xab-html', name: 'xab-html',
description: '', description: '',
parameters: { parameters: {
stimulus: { stimuli: {
type: jsPsych.plugins.parameterType.HTML_STRING, type: jsPsych.plugins.parameterType.HTML_STRING,
pretty_name: 'Stimulus', pretty_name: 'Stimuli',
array: true, array: true,
default: undefined, default: undefined,
description: 'Array of 2 or 3 paths to images.' description: 'Array of 2 or 3 paths to images.'

3
plugins/jspsych-xab-image.js
View File

@ -18,8 +18,9 @@ jsPsych.plugins['xab-image'] = (function() {
name: 'xab-image', name: 'xab-image',
description: '', description: '',
parameters: { parameters: {
stimuli: {
type: jsPsych.plugins.parameterType.IMAGE, type: jsPsych.plugins.parameterType.IMAGE,
pretty_name: 'Stimulus', pretty_name: 'Stimuli',
array: true, array: true,
default: undefined, default: undefined,
description: 'Array of 2 or 3 HTML elements.' description: 'Array of 2 or 3 HTML elements.'