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

minor cleanup

Browse Source
This commit is contained in:
Josh de Leeuw 2017-06-21 23:17:36 -04:00
parent 12e045b151
commit cb602dbc87
1 changed files with 34 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
examples/jspsych-iat.html
View File

@ -1,8 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>My experiment</title> <title>IAT Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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-iat.js"></script> <script src="../plugins/jspsych-iat.js"></script>
@ -15,22 +14,21 @@
var welcome_block = { var welcome_block = {
type: 'text', type: 'text',
text: '<p>Welcome to the Age Task. In this study you will ' + text: '<p>Welcome to the Age Task. In this study you will ' +
'complete an Implicit Association Test(IAT) in which you ' + 'complete an Implicit Association Test (IAT) in which you ' +
'will be asked to sort pictures and words into groups as ' + 'will be asked to sort pictures and words into groups as ' +
'fast as you can. At the end, you will receive your IAT ' + 'fast as you can.</p><p>Press any key to begin.</p>',
'result along with information about what it means.<br><br> ' + 'Press any key to begin.</p>',
timing_post_trial: 1500 timing_post_trial: 1500
}; };
var category_block = { var category_block = {
type: 'text', type: 'text',
text: '<p>Next, you will use the "E" and "I" computer keys ' + 'to categorize items into groups as fast as you can. ' + text: '<p>Next, you will use the "E" and "I" computer keys ' + 'to categorize items into groups as fast as you can. ' +
'These are the four groups and the items that belong to each:<br><br>' + 'These are the four groups and the items that belong to each:<br><br>' +
'<strong>Good</strong>:<br>' + 'Fabulous, Excitement, Glorious, Cheerful, Cherish, ' + '<strong>Good</strong>:<br>' + 'Fabulous, Excitement, Glorious, Cheerful, Cherish, ' +
'Enjoy, Delightful, Joyous<br><br>' + '<strong>Bad</strong>:<br>' + 'Humiliate, ' + 'Enjoy, Delightful, Joyous<br><br>' + '<strong>Bad</strong>:<br>' + 'Humiliate, ' +
'Evil, Grief, Yucky, Detest, Poison, Abuse, Despise<br><br>' + 'Evil, Grief, Yucky, Detest, Poison, Abuse, Despise<br><br>' +
'<strong>Old</strong>:<br>' + "<img src='img/age/of1.jpg'></img> " + '<strong>Old</strong>:<br>' + "<img src='img/age/of1.jpg'></img> " +
"<img src='img/age/of2.jpg'></img> " + "<img src='img/age/of3.jpg'></img> " + "<img src='img/age/of2.jpg'></img> " + "<img src='img/age/of3.jpg'></img> " +
"<img src='img/age/om1.jpg'></img> " + "<img src='img/age/om2.jpg'></img> " + "<img src='img/age/om1.jpg'></img> " + "<img src='img/age/om2.jpg'></img> " +
"<img src='img/age/om3.jpg'></img><br><br>" + '<strong>Young</strong>:<br>' + "<img src='img/age/om3.jpg'></img><br><br>" + '<strong>Young</strong>:<br>' +
"<img src='img/age/yf1.jpg'></img> " + "<img src='img/age/yf4.jpg'></img> " + "<img src='img/age/yf1.jpg'></img> " + "<img src='img/age/yf4.jpg'></img> " +
@ -42,8 +40,8 @@ var category_block = {
var instructions_block = { var instructions_block = {
type: 'text', type: 'text',
text: "<div style='position: absolute; top: 18%; left: 20%'><p>Press E for:<br><strong>OLD</strong></p></div>" + text: "<div style='position: absolute; top: 18%; left: 20%'><p>Press E for:<br><strong>OLD</strong></p></div>" +
"<div style='position: absolute; top: 18%; right: 20%'><p>Press I for:<br><strong>YOUNG</strong></p></div>" + "<div style='position: absolute; top: 18%; right: 20%'><p>Press I for:<br><strong>YOUNG</strong></p></div>" +
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>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 " + "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>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 " +
"category. Items will appear one at a time.<br><br>" + "If you " + "category. Items will appear one at a time.<br><br>" + "If you " +
@ -63,8 +61,8 @@ var trial_block = {
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>', html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>', bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
force_correct_key_press: true, force_correct_key_press: true,
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: ['OLD'], left_category_label: ['OLD'],
@ -92,8 +90,8 @@ var trial_block = {
var instructions_block2 = { var instructions_block2 = {
type: 'text', type: 'text',
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br><strong>BAD</strong></div>" + text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br><strong>BAD</strong></div>" +
"<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br><strong>GOOD</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br><strong>GOOD</strong></div>" +
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Put a left finger on the <strong>E</strong> key for items that " + "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Put a left finger on the <strong>E</strong> key for items that " +
"belong to the Bad category. Put a right finger on the " + "belong to the Bad category. Put a right finger on the " +
"<strong>I</strong> key for items that belong to the Good " + "<strong>I</strong> key for items that belong to the Good " +
@ -113,8 +111,8 @@ var trial_block2 = {
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>', html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>', bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
force_correct_key_press: true, force_correct_key_press: true,
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: ['BAD'], left_category_label: ['BAD'],
@ -146,11 +144,11 @@ var trial_block2 = {
var instructions_block3 = { var instructions_block3 = {
type: 'text', type: 'text',
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br> " + text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br> " +
"<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>" + "<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>" +
"Press I for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" + "Press I for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" +
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Use <strong>E</strong> for Bad and for " + "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>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 " +
"make a mistake, a red X will appear. Press the keys listed below " + "make a mistake, a red X will appear. Press the keys listed below " +
"to continue. Go as fast as you can while being accurate.<br><br> " + "to continue. Go as fast as you can while being accurate.<br><br> " +
@ -167,8 +165,8 @@ var trial_block3 = {
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>', html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>', bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
force_correct_key_press: true, force_correct_key_press: true,
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: ['BAD', 'OLD'], left_category_label: ['BAD', 'OLD'],
@ -212,11 +210,11 @@ var trial_block3 = {
var instructions_block4 = { var instructions_block4 = {
type: 'text', type: 'text',
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br> " + text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br> " +
"<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>" + "<strong>BAD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>" +
"Press I for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" + "Press I for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>YOUNG</strong></div>" +
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>This is the same as the previous part.<br>" + "Use <strong>E</strong> for Bad and for " + "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>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 " +
"make a mistake, a red X will appear. Press the keys listed below " + "make a mistake, a red X will appear. Press the keys listed below " +
"to continue. Go as fast as you can while being accurate.<br><br> " + "to continue. Go as fast as you can while being accurate.<br><br> " +
@ -233,8 +231,8 @@ var trial_block4 = {
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>', html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>', bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
force_correct_key_press: true, force_correct_key_press: true,
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: ['BAD', 'OLD'], left_category_label: ['BAD', 'OLD'],
@ -297,8 +295,8 @@ var trial_block4 = {
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>', html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>', bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
force_correct_key_press: true, force_correct_key_press: true,
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: ['YOUNG'],
@ -329,7 +327,7 @@ var trial_block4 = {
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>BAD</strong><br>" + "or<br>" + text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>BAD</strong><br>" + "or<br>" +
"<strong>OLD</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" + "<strong>OLD</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br>" + "<strong>GOOD</strong><br>" + "or<br>" +
"<strong>YOUNG</strong></div>" + "<strong>YOUNG</strong></div>" +
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>Use <strong>E</strong> for Bad and for Old People<br>" + "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>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 " +
"to continue. Go as fast as you can while being accurate.<br><br> " + "to continue. Go as fast as you can while being accurate.<br><br> " +
@ -346,8 +344,8 @@ var trial_block4 = {
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>', html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>', bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
force_correct_key_press: true, force_correct_key_press: true,
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: ['BAD', 'OLD'], left_category_label: ['BAD', 'OLD'],
@ -394,8 +392,8 @@ var trial_block4 = {
text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>Bad</strong><br>" + "or<br>" + text: "<div style='position: absolute; top: 18%; left: 20%'>Press E for:<br>" + "<strong>Bad</strong><br>" + "or<br>" +
"<strong>Old People</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br>" + "<strong>Good</strong><br>" + "or<br>" + "<strong>Old People</strong></div>" + "<div style='position: absolute; top: 18%; right: 20%'>Press I for:<br>" + "<strong>Good</strong><br>" + "or<br>" +
"<strong>Young People</strong></div>" + "<strong>Young People</strong></div>" +
"<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>This is the same as the previous part<br>" + "<div style='position: relative; top: 42%; margin-left: auto; margin-right: auto'>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>" +
"Use <strong>I</strong> for Good and for Young People<br>" + "Use <strong>I</strong> for Good and for Young People<br>" +
"Each item belongs to only one category<br><br>" + "Each item belongs to only one category<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 " +
@ -413,7 +411,7 @@ var trial_block4 = {
var total_iat_trials = IATtrials.count(); var total_iat_trials = IATtrials.count();
var percent_correct = Math.floor( n_correct / total_iat_trials * 100 ); var percent_correct = Math.floor( n_correct / total_iat_trials * 100 );
var responseTime = IATtrials.select('rt').mean(); var responseTime = IATtrials.select('rt').mean();
return "<p>You responded correctly on " + percent_correct + "% of the trials. " + return "<p>You responded correctly on " + percent_correct + "% of the trials. " +
"Your average response time was " + "<strong>" + responseTime + "ms</strong></p>"; "Your average response time was " + "<strong>" + responseTime + "ms</strong></p>";
} }
@ -445,4 +443,4 @@ var trial_block4 = {
} }
}); });
</script> </script>
</html> </html>