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

added 'other key' option

Browse Source
This commit is contained in:
KristinDiep 2017-04-01 16:14:57 -04:00
parent 64f8fc7f9f
commit b7d43b3280
2 changed files with 72 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
examples/iat-example.html
View File

@ -42,8 +42,8 @@ var category_block = {
var instructions_block = { var instructions_block = {
type: 'text', type: 'text',
text: "<div style='position: absolute; left: 190px; bottom: 575px;'><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: absolute; right: 190px; bottom: 575px;'><p>Press I for:<br>" + "<strong>OLD</strong></p></div>" + "<strong>YOUNG</strong></p></div>" + "<div style='position: fixed; right: 100px; top: 80px;'><p>Press I for:<br>" + "<strong>OLD</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 " +
@ -93,8 +93,8 @@ var trial_block = {
var instructions_block2 = { var instructions_block2 = {
type: 'text', type: 'text',
text: "<div style='position: absolute; left: 190px; bottom: 575px;'>Press E for:<br> " + text: "<div style='position: fixed; left: 100px; top: 80px;'>Press E for:<br> " +
"<strong>BAD</strong></div>" + "<div style='position: absolute; right: 190px; bottom: 575px;'>" + "<strong>BAD</strong></div>" + "<div style='position: fixed; right: 100px; top: 80px;'>" +
"Press I for:<br>" + "<strong>GOOD</strong></div>" + "Press I for:<br>" + "<strong>GOOD</strong></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 " + "<p>Put a left finger on the <strong>E</strong> key for items that " +
@ -149,9 +149,9 @@ var trial_block2 = {
var instructions_block3 = { var instructions_block3 = {
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 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>" + "Press 'I' for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG PEOPLE</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 " +
@ -424,7 +424,7 @@ var trial_block4 = {
var timeline = []; var timeline = [];
// 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);

113
plugins/jspsych-iat.js
View File

@ -9,7 +9,7 @@
**/ **/
jsPsych.plugins["iat"] = (function() { jsPsych.plugins["iat"] = (function() {
var plugin = {}; var plugin = {};
@ -44,8 +44,9 @@ jsPsych.plugins["iat"] = (function() {
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 || "";
//Creates extra styling needed //Creates extra styling needed
var node = display_element.innerHTML += '<style id="jspsych-iat-css">'; var node = display_element.innerHTML += "<style id='jspsych-iat-css'>";
var cssstr = ".jspsych-iat-left {float: left; margin: 0px 150px 30px 0px;}" + var cssstr = ".jspsych-iat-left {float: left; margin: 0px 150px 30px 0px;}" +
".jspsych-iat-right {float: right; margin: 0px 0px 30px 150px;}" ".jspsych-iat-right {float: right; margin: 0px 0px 30px 150px;}"
@ -60,56 +61,60 @@ jsPsych.plugins["iat"] = (function() {
} }
var html_str = ""; var html_str = "";
html_str += "<div style='position: relative; width: 900px;' 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='position: fixed; width: 170px; height: 110px; left: 560px; bottom: 380px;'><img src='"+trial.stimulus+"' id='jspsych-iat-stim'></img></div>"; html_str += "<div style='align:center;'><img src='"+trial.stimulus+"' id='jspsych-iat-stim'></img></div>";
} else { } else {
html_str += '<div style="position: fixed; width: 170px; height: 110px; left: 560px; bottom: 380px;"><p id="jspsych-iat-stim">'+trial.stimulus+'</p></div>'; html_str += "<div style='align:center;'><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;'>";
if(trial.left_category_label.length == 1) { if(trial.left_category_label.length == 1) {
html_str += '<p>Press ' + trial.left_category_key.toUpperCase() + ' for:<br> ' + html_str += "<p>Press " + trial.left_category_key.toUpperCase() + " for:<br> " +
trial.left_category_label[0].toUpperCase().bold() + '</p>'; trial.left_category_label[0].toUpperCase().bold() + "</p>";
} else { } else {
html_str += '<p>Press ' + trial.left_category_key.toUpperCase() + ' for:<br> ' + html_str += "<p>Press " + trial.left_category_key.toUpperCase() + " for:<br> " +
trial.left_category_label[0].toUpperCase().bold() + '<br>' + 'or<br>' + trial.left_category_label[0].toUpperCase().bold() + "<br>" + "or<br>" +
trial.left_category_label[1].toUpperCase().bold() + '</p>'; trial.left_category_label[1].toUpperCase().bold() + "</p>";
} }
html_str += "</div><div id='trial_right_align' style='position: fixed; right: 100px; top: 80px;'>"; html_str += "</div><div id='trial_right_align' style='position: fixed; right: 100px; top: 80px;'>";
if(trial.right_category_label.length == 1) { if(trial.right_category_label.length == 1) {
html_str += '<p>Press ' + trial.right_category_key.toUpperCase() + ' for:<br> ' + html_str += "<p>Press " + trial.right_category_key.toUpperCase() + " for:<br> " +
trial.right_category_label[0].toUpperCase().bold() + '</p>'; trial.right_category_label[0].toUpperCase().bold() + '</p>';
} else { } else {
html_str += '<p>Press ' + trial.right_category_key.toUpperCase() + ' for:<br> ' + html_str += "<p>Press " + trial.right_category_key.toUpperCase() + " for:<br> " +
trial.right_category_label[0].toUpperCase().bold() + '<br>' + 'or<br>' + trial.right_category_label[0].toUpperCase().bold() + "<br>" + "or<br>" +
trial.right_category_label[1].toUpperCase().bold() + '</p>'; trial.right_category_label[1].toUpperCase().bold() + "</p>";
} }
html_str += "</div><div id='wrongImg' style='position: fixed; width: 800px; height:100px; left: 250px; bottom: 150px;'>"; html_str += "</div><div id='wrongImg' style='position:relative; top: 100px'>";
if(trial.display_feedback == true) { if(trial.display_feedback == true) {
html_str += '<div><img src="' + trial.image_when_wrong + '" style="visibility: hidden;" id="wrongImgID"></img></div>'; html_str += "<div id='wrongImgContainer' style='align:center'><img src='" + trial.image_when_wrong + "' style='visibility: hidden;' id='wrongImgID'></img></div>";
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 == 0) {
html_str += '<p>If you press the wrong key, a ' + trial.wrong_image_name + ' will appear. Press any key to continue.</p>'; 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) { } else if(trial.key_to_move_forward.length == 1) {
html_str += '<p>If you press the wrong key, a ' + trial.wrong_image_name + ' appear. Press ' + trial.key_to_move_forward[0] + ' to continue.</p>'; 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>"
} 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>";
}
} else { } else {
html_str += '<p>If you press the wrong key, a ' + trial.wrong_image_name + ' appear. Press ' + html_str += "<p>If you press the wrong key, a " + trial.wrong_image_name + " will appear. Press " +
keysToContinue + ' ' + trial.key_to_move_forward[lastKey] + ' to continue.</p>'; keysToContinue + " " + trial.key_to_move_forward[lastKey] + " to continue.</p>";
} }
} }
else { else {
html_str += '<p>Trial will continue automatically.</p>'; html_str += "<p>Trial will continue automatically.</p>";
} }
html_str += "</div></div>"; html_str += "</div></div>";
@ -168,7 +173,7 @@ jsPsych.plugins["iat"] = (function() {
var wImg = document.getElementById("wrongImgID"); var wImg = document.getElementById("wrongImgID");
// after a valid response, the stimulus will have the CSS class 'responded' // after a valid response, the stimulus will have the CSS class 'responded'
// which can be used to provide visual feedback that a response was recorded // which can be used to provide visual feedback that a response was recorded
display_element.querySelector('#jspsych-iat-stim').className += ' responded'; display_element.querySelector('#jspsych-iat-stim').className += ' responded';
// only record the first response // only record the first response
if (response.key == -1 ) { if (response.key == -1 ) {
@ -187,43 +192,53 @@ jsPsych.plugins["iat"] = (function() {
wImg.style.visibility = "visible"; wImg.style.visibility = "visible";
} }
if (trial.response_ends_trial && trial.display_feedback == true) { if (trial.response_ends_trial && trial.display_feedback == true) {
if(trial.key_to_move_forward[0] == "other key") {
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({ var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: end_trial, callback_function: end_trial,
valid_responses: trial.key_to_move_forward valid_responses: [trial.right_category_key]
}); });
} else {
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: end_trial,
valid_responses: trial.key_to_move_forward
});}
} 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: []
}); });
} }
} }
} } else if(trial.stim_key_association == "left") {
if(response.rt > -1 && response.key == leftKeyCode) {
else if(trial.stim_key_association == "left") { response.correct = true;
if(response.rt > -1 && response.key == leftKeyCode) { if(trial.response_ends_trial) {
response.correct = true; end_trial();
if(trial.response_ends_trial) { }
end_trial(); } else {
} response.correct = false;
} else { if(trial.display_feedback == true) {
response.correct = false;
if(trial.display_feedback == true) {
wImg.style.visibility = "visible"; wImg.style.visibility = "visible";
}
if (trial.response_ends_trial && trial.display_feedback == true) {
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: end_trial,
valid_responses: trial.key_to_move_forward
});
} else if(trial.response_ends_trial && trial.display_feedback != true) {
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: end_trial,
valid_responses: []
});
} }
if (trial.response_ends_trial && trial.display_feedback == true) {
if(trial.key_to_move_forward[0] == "other key") {
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: end_trial,
valid_responses: [trial.left_category_key]
});
} else {
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: end_trial,
valid_responses: trial.key_to_move_forward
});}
} else if(trial.response_ends_trial && trial.display_feedback != true) {
var keyListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: end_trial,
valid_responses: []
});
} }
} }
}
}; };
// start the response listener // start the response listener