HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-12 08:38:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Now works and allows users to press any key to continue

Browse Source
This commit is contained in:
KristinDiep 2017-04-06 02:03:20 -04:00
parent b7d43b3280
commit 0d3b935bb1
2 changed files with 59 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
examples/iat-example.html → examples/jspsych-iat.html
View File

@ -43,7 +43,7 @@ var category_block = {
var instructions_block = { var instructions_block = {
type: 'text', type: 'text',
text: "<div style='position: fixed; left: 100px; top: 80px;'><p>Press E for:<br> " + text: "<div style='position: fixed; left: 100px; top: 80px;'><p>Press E for:<br> " +
"<strong>YOUNG</strong></p></div>" + "<div style='position: fixed; right: 100px; top: 80px;'><p>Press I for:<br>" + "<strong>OLD</strong></p></div>" + "<strong>OLD</strong></p></div>" + "<div style='position: fixed; right: 100px; top: 80px;'><p>Press I for:<br>" + "<strong>YOUNG</strong></p></div>" +
"<div style='position: relative; width: 900px;'>" + "<div style='position: relative; width: 900px;'>" +
"<p>Put a left finger on the <strong>E</strong> key for items that belong to the Old People category. Put a right finger on the " + "<p>Put a left finger on the <strong>E</strong> key for items that belong to the Old People category. Put a right finger on the " +
"<strong>I</strong> key for items that belong to the Young People " + "<strong>I</strong> key for items that belong to the Young People " +
@ -65,27 +65,27 @@ var trial_block = {
wrong_image_name: 'red X', wrong_image_name: 'red X',
display_feedback: true, display_feedback: true,
timing_response: 3000, //Only if display_feedback is false timing_response: 3000, //Only if display_feedback is false
left_category_key: 'E', left_category_key: 'e',
right_category_key: 'I', right_category_key: 'i',
left_category_label: ['young'], left_category_label: ['old'],
right_category_label: ['old'], right_category_label: ['young'],
key_to_move_forward: [], key_to_move_forward: [jsPsych.ALL_KEYS],
response_ends_trial: true response_ends_trial: true
} }
], ],
timeline_variables: [ timeline_variables: [
{stimulus: "age/of1.jpg", stim_key_association: "right"}, {stimulus: "age/of1.jpg", stim_key_association: "left"},
{stimulus: "age/of2.jpg", stim_key_association: "right"}, {stimulus: "age/of2.jpg", stim_key_association: "left"},
{stimulus: "age/of3.jpg", stim_key_association: "right"}, {stimulus: "age/of3.jpg", stim_key_association: "left"},
{stimulus: "age/om1.jpg", stim_key_association: "right"}, {stimulus: "age/om1.jpg", stim_key_association: "left"},
{stimulus: "age/om2.jpg", stim_key_association: "right"}, {stimulus: "age/om2.jpg", stim_key_association: "left"},
{stimulus: "age/om3.jpg", stim_key_association: "right"}, {stimulus: "age/om3.jpg", stim_key_association: "left"},
{stimulus: "age/yf1.jpg", stim_key_association: "left"}, {stimulus: "age/yf1.jpg", stim_key_association: "right"},
{stimulus: "age/yf4.jpg", stim_key_association: "left"}, {stimulus: "age/yf4.jpg", stim_key_association: "right"},
{stimulus: "age/yf5.jpg", stim_key_association: "left"}, {stimulus: "age/yf5.jpg", stim_key_association: "right"},
{stimulus: "age/ym2.jpg", stim_key_association: "left"}, {stimulus: "age/ym2.jpg", stim_key_association: "right"},
{stimulus: "age/ym3.jpg", stim_key_association: "left"}, {stimulus: "age/ym3.jpg", stim_key_association: "right"},
{stimulus: "age/ym5.jpg", stim_key_association: "left"} {stimulus: "age/ym5.jpg", stim_key_association: "right"}
], ],
randomize_order: true, randomize_order: true,
repititions: 2 repititions: 2
@ -121,7 +121,7 @@ var trial_block2 = {
right_category_key: 'I', right_category_key: 'I',
left_category_label: ['bad'], left_category_label: ['bad'],
right_category_label: ['good'], right_category_label: ['good'],
key_to_move_forward: [], key_to_move_forward: [jsPsych.ALL_KEYS],
response_ends_trial: true response_ends_trial: true
} }
], ],
@ -150,8 +150,8 @@ var trial_block2 = {
var instructions_block3 = { var instructions_block3 = {
type: 'text', type: 'text',
text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br> " + text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br> " +
"<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD PEOPLE</strong></div>" + "<div style='position: fixed; right: 100px; top: 80px;'>" + "<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: fixed; right: 100px; top: 80px;'>" +
"Press 'I' for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG PEOPLE</strong></div>" + "Press 'I' for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" +
"<p style='padding-top: 100px'>Use <strong>E</strong> for Bad and for " + "<p style='padding-top: 100px'>Use <strong>E</strong> for Bad and for " +
"Old People<br>" + "Use <strong>I</strong> for Good and for Young People<br>" + "Old People<br>" + "Use <strong>I</strong> for Good and for Young People<br>" +
"Each item belongs to only one category.<br><br>" + "If you " + "Each item belongs to only one category.<br><br>" + "If you " +
@ -173,9 +173,9 @@ var trial_block3 = {
timing_response: 3000, //Only if display_feedback is false timing_response: 3000, //Only if display_feedback is false
left_category_key: 'E', left_category_key: 'E',
right_category_key: 'I', right_category_key: 'I',
left_category_label: ['bad', 'old people'], left_category_label: ['bad', 'old'],
right_category_label: ['good', 'young people'], right_category_label: ['good', 'young'],
key_to_move_forward: [], key_to_move_forward: [jsPsych.ALL_KEYS],
response_ends_trial: true response_ends_trial: true
} }
], ],
@ -215,9 +215,9 @@ var trial_block3 = {
var instructions_block4 = { var instructions_block4 = {
type: 'text', type: 'text',
text: "<div style='float: left;'>Press 'E' for:<br> " + text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br> " +
"<strong>Bad</strong><br>" + "or<br>" + "<strong>Old People</strong></div>" + "<div style='float:right;'>" + "<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: fixed; right: 100px; top: 80px;'>" +
"Press 'I' for:<br>" + "<strong>Good</strong><br>" + "or<br>" + "<strong>Young People</strong></div>" + "Press 'I' for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" +
"<p style='padding-top: 100px'>This is the same as the previous part.<br>" + "Use <strong>E</strong> for Bad and for " + "<p style='padding-top: 100px'>This is the same as the previous part.<br>" + "Use <strong>E</strong> for Bad and for " +
"Old People<br>" + "Use <strong>I</strong> for Good and for Young People<br>" + "Old People<br>" + "Use <strong>I</strong> for Good and for Young People<br>" +
"Each item belongs to only one category.<br><br>" + "If you " + "Each item belongs to only one category.<br><br>" + "If you " +
@ -239,9 +239,9 @@ var trial_block4 = {
timing_response: 3000, //Only if display_feedback is false timing_response: 3000, //Only if display_feedback is false
left_category_key: 'E', left_category_key: 'E',
right_category_key: 'I', right_category_key: 'I',
left_category_label: ['bad', 'old people'], left_category_label: ['bad', 'old'],
right_category_label: ['good', 'young people'], right_category_label: ['good', 'young'],
key_to_move_forward: [], key_to_move_forward: [jsPsych.ALL_KEYS],
response_ends_trial: true response_ends_trial: true
} }
], ],
@ -281,8 +281,8 @@ var trial_block4 = {
var instructions_block5 = { var instructions_block5 = {
type: 'text', type: 'text',
text: "<div style='float: left;'>Press 'E' for:<br>" + "<strong>Young People</strong></div>" + text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br>" + "<strong>YOUNG</strong></div>" +
"<div style='float: right;'>Press 'I' for:<br>" + "<strong>Old People</strong></div>" + "<div style='position: fixed; right: 100px; top: 80px;'>Press 'I' for:<br>" + "<strong>OLD</strong></div>" +
"<p style='padding-top: 100px'>Watch out, the labels have changed positions!<br>" + "<p style='padding-top: 100px'>Watch out, the labels have changed positions!<br>" +
"Use <strong>E</strong> for Young People<br>" + "Use <strong>I</strong> for Old People<br><br>" + "Use <strong>E</strong> for Young People<br>" + "Use <strong>I</strong> for Old People<br><br>" +
"If you make a mistake, a red X will appear. Press the keys listed below " + "If you make a mistake, a red X will appear. Press the keys listed below " +
@ -303,9 +303,9 @@ var trial_block4 = {
timing_response: 3000, //Only if display_feedback is false timing_response: 3000, //Only if display_feedback is false
left_category_key: 'E', left_category_key: 'E',
right_category_key: 'I', right_category_key: 'I',
left_category_label: ['young people'], left_category_label: ['young'],
right_category_label: ['old people'], right_category_label: ['old'],
key_to_move_forward: [], key_to_move_forward: [jsPsych.ALL_KEYS],
response_ends_trial: true response_ends_trial: true
} }
], ],
@ -329,9 +329,9 @@ var trial_block4 = {
var instructions_block6 = { var instructions_block6 = {
type: 'text', type: 'text',
text: "<div style='float: left;'>Press 'E' for:<br>" + "<strong>Bad</strong><br>" + "or<br>" + text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br>" + "<strong>BAD</strong><br>" + "or<br>" +
"<strong>Old People</strong></div>" + "<div style='float: right;'>Press 'I' for:<br>" + "<strong>Good</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: fixed; right: 100px; top: 80px;'>Press 'I' for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" +
"<strong>Young People</strong></div>" + "<strong>YOUNG</strong></div>" +
"<p style='padding-top: 100px'>Use <strong>E</strong> for Bad and for Old People<br>" + "<p style='padding-top: 100px'>Use <strong>E</strong> for Bad and for Old People<br>" +
"Use <strong>I</strong> for Good and for Young People<br><br>" + "Use <strong>I</strong> for Good and for Young People<br><br>" +
"If you make a mistake, a red X will appear. Press the keys listed below " + "If you make a mistake, a red X will appear. Press the keys listed below " +
@ -352,9 +352,9 @@ var trial_block4 = {
timing_response: 3000, //Only if display_feedback is false timing_response: 3000, //Only if display_feedback is false
left_category_key: 'E', left_category_key: 'E',
right_category_key: 'I', right_category_key: 'I',
left_category_label: ['bad', 'old people'], left_category_label: ['bad', 'old'],
right_category_label: ['good', 'young people'], right_category_label: ['good', 'young'],
key_to_move_forward: [] key_to_move_forward: [jsPsych.ALL_KEYS],
} }
], ],
timeline_variables: [ timeline_variables: [
@ -393,8 +393,8 @@ var trial_block4 = {
var instructions_block7 = { var instructions_block7 = {
type: 'text', type: 'text',
text: "<div style='float: left;'>Press 'E' for:<br>" + "<strong>Bad</strong><br>" + "or<br>" + text: "<div style='position: fixed; left: 100px; top: 80px;'>Press 'E' for:<br>" + "<strong>Bad</strong><br>" + "or<br>" +
"<strong>Old People</strong></div>" + "<div style='float: right;'>Press 'I' for:<br>" + "<strong>Good</strong><br>" + "or<br>" + "<strong>Old People</strong></div>" + "<div style='position: fixed; right: 100px; top: 80px;'>Press 'I' for:<br>" + "<strong>Good</strong><br>" + "or<br>" +
"<strong>Young People</strong></div>" + "<strong>Young People</strong></div>" +
"<p style='padding-top: 100px'>This is the same as the previous part<br>" + "<p style='padding-top: 100px'>This is the same as the previous part<br>" +
"Use <strong>E</strong> for Bad and for Old People<br>" + "Use <strong>E</strong> for Bad and for Old People<br>" +
@ -425,11 +425,11 @@ var trial_block4 = {
// timeline.push(welcome_block); // timeline.push(welcome_block);
// timeline.push(category_block); // timeline.push(category_block);
// timeline.push(instructions_block); // timeline.push(instructions_block);
timeline.push(trial_block); // timeline.push(trial_block);
timeline.push(instructions_block2); // timeline.push(instructions_block2);
timeline.push(trial_block2); // timeline.push(trial_block2);
timeline.push(instructions_block3); // timeline.push(instructions_block3);
timeline.push(trial_block3); // timeline.push(trial_block3);
timeline.push(instructions_block4); timeline.push(instructions_block4);
timeline.push(trial_block4); timeline.push(trial_block4);
timeline.push(instructions_block5); timeline.push(instructions_block5);

17
plugins/jspsych-iat.js
View File

@ -1,6 +1,6 @@
/** /**
* jspsych-single-stim * jspsych-single-stim
* Josh de Leeuw * Kristin Diep
* *
* plugin for displaying a stimulus and getting a keyboard response * plugin for displaying a stimulus and getting a keyboard response
* *
@ -40,6 +40,7 @@
trial.right_category_label = trial.right_category_label || ['right']; trial.right_category_label = trial.right_category_label || ['right'];
trial.stim_key_association = trial.stim_key_association || 'undefined'; trial.stim_key_association = trial.stim_key_association || 'undefined';
trial.response_ends_trial = (typeof trial.response_ends_trial == 'undefined') ? true : trial.response_ends_trial; trial.response_ends_trial = (typeof trial.response_ends_trial == 'undefined') ? true : trial.response_ends_trial;
trial.timing_response = trial.timing_response || 0;
trial.key_to_move_forward = trial.key_to_move_forward || jsPsych.ALL_KEYS; trial.key_to_move_forward = trial.key_to_move_forward || jsPsych.ALL_KEYS;
trial.is_html = (typeof trial.is_html == 'undefined') ? false : trial.is_html; trial.is_html = (typeof trial.is_html == 'undefined') ? false : trial.is_html;
trial.prompt = trial.prompt || ""; trial.prompt = trial.prompt || "";
@ -64,9 +65,9 @@
html_str += "<div style='position: relative; width: 100%; height: 100%' id='jspsych-iat-stim'>"; html_str += "<div style='position: relative; width: 100%; height: 100%' id='jspsych-iat-stim'>";
if (!trial.is_html) { if (!trial.is_html) {
html_str += "<div style='align:center;'><img src='"+trial.stimulus+"' id='jspsych-iat-stim'></img></div>"; html_str += "<div style='position: relative; width: 100%; height: 100%'><img src='"+trial.stimulus+"' id='jspsych-iat-stim'></img></div>";
} else { } else {
html_str += "<div style='align:center;'><p id='jspsych-iat-stim'>"+trial.stimulus+"</p></div>"; html_str += "<div style='position: relative; width: 100%; height: 100%'><p id='jspsych-iat-stim'>"+trial.stimulus+"</p></div>";
} }
html_str += "<div id='trial_left_align' style='position: fixed; left: 100px; top: 80px;'>"; html_str += "<div id='trial_left_align' style='position: fixed; left: 100px; top: 80px;'>";
@ -100,11 +101,11 @@
var wImg = document.getElementById("wrongImgID"); var wImg = document.getElementById("wrongImgID");
//wImg.style.visibility = "hidden"; //wImg.style.visibility = "hidden";
if(trial.key_to_move_forward.length == 0) { if(trial.key_to_move_forward.length == 1) {
html_str += "<p>If you press the wrong key, a " + trial.wrong_image_name + " will appear. Press any key to continue.</p>";
} else if(trial.key_to_move_forward.length == 1) {
if(trial.key_to_move_forward[0] == "other key") { if(trial.key_to_move_forward[0] == "other key") {
html_str += "<p>If you press the wrong key, a " + trial.wrong_image_name + " will appear. Press the other key to continue.</p>" html_str += "<p>If you press the wrong key, a " + trial.wrong_image_name + " will appear. Press the other key to continue.</p>"
} else if(trial.key_to_move_forward[0] == jsPsych.ALL_KEYS) {
html_str += "<p>If you press the wrong key, a " + trial.wrong_image_name + " will appear. Press any key to continue.</p>"
} else { } else {
html_str += "<p>If you press the wrong key, a " + trial.wrong_image_name + " will appear. Press " + trial.key_to_move_forward[0] + " to continue.</p>"; html_str += "<p>If you press the wrong key, a " + trial.wrong_image_name + " will appear. Press " + trial.key_to_move_forward[0] + " to continue.</p>";
} }
@ -205,7 +206,7 @@
} else if(trial.response_ends_trial && trial.display_feedback != true) { } else if(trial.response_ends_trial && trial.display_feedback != true) {
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({ var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: end_trial, callback_function: end_trial,
valid_responses: [] valid_responses: [jsPsych.ALL_KEYS]
}); });
} }
} }
@ -234,7 +235,7 @@
} else if(trial.response_ends_trial && trial.display_feedback != true) { } else if(trial.response_ends_trial && trial.display_feedback != true) {
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({ var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: end_trial, callback_function: end_trial,
valid_responses: [] valid_responses: [jsPsych.ALL_KEYS]
}); });
} }
} }