Merge pull request #10 from NCMlab/main

finished Stroop Color Word
jspsych · Mar 12, 2021 · 3365f43 · 3365f43
2 parents 0c34a64 + 035d5eb
commit 3365f43
Show file tree

Hide file tree

Showing 176 changed files with 19,437 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/StroopColorWord/.DS_Store b/StroopColorWord/.DS_Store
diff --git a/StroopColorWord/README.md b/StroopColorWord/README.md
@@ -0,0 +1,39 @@
+# Stroop color, word task with keyboard input
+Script copyright: 03-01-2021 Jason Steffener, Neurocognitive Mapping Laboratory
+
+# Background
+This is an implementation of the classic Stroop task with keyboard input. 
+
+# Task Description
+Participants see rectangles of different color and need to indentify the color of the rectangle. Participants are next shown words presented in black font color and they need to identify the color that the word represents. Finally, participants see words, which are the same names of colors as in teh previous task, and they need to identify the font color that the word is presented in.
+
+The three parts of the Stroop are broekn into three separate HTML files. 
+For each task instructions are shown to the participant where they are told what to do and which keys to use to respond. 
+After the instructions practice trials are presented and accuracy feedback is provided. If the participant gets 50% accuracy then the test trials are run. If accuracy is below 50% then the practice is run a second time. Practice will be run a maximum of 3 times if accuracy is below 50%. After that the test trials are presented. Test trials do not present feedback. The same structure is used for the Color, Word and Color/Word versions of the task.
+
+Currently, when the task is completed the results are automatically saved as CSV files. Note, no participant ID is included in the name and files will be overwritten upon a subsequent run of the code.
+
+# Duration
+This depends on the timing parameters chosen and the response time of the participants. 
+
+# Results File Information
+The results fil contains trial level information about response time, accuracy, key press and time elapsed. Fixation, practice and test trials are included in the document. To get responses only for test trials the results need to be filtered to only include "test trials" in the "type" column of the results.
+
+# Experimental Set-up
+There is a setup file which allows the researcher to modify all instructions, timing and number fo trials for all three of the tasks.
+
+# Stimuli
+The "color" part of the task uses rectangles as stimuli. The "word" part of the task uses the words: red, yellow, green and blue as stimuli presented in black font color. The "color/word" part of the task uses the same words presented in any of the colors. Therefore, some trials are considered congruent where the word and color match. Other trials are considered incongruent where the word and the colors do not match.
+
+
+# Modifiable Parameters
+All instructional text. 
+The number of trials for practice and test phases.
+Font size of the instructional text
+Font size of the stimuli text
+Feedback length
+Colors used. For instance, the green is rather bright.
+
+
+
+
diff --git a/StroopColorWord/StroopColor.html b/StroopColorWord/StroopColor.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+  <head>
+
+    <meta charset="UTF-8">
+    <meta name="description" content="jsPsych Stroop: Color Task">
+    <meta name="keywords" content="HTML, CSS, JavaScript">
+    <meta name="author" content="Jason Steffener, NCMLab">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stroop: Color</title>
+    <script src="jspsych-6.2.0/jspsych.js"></script>
+    <script src="jspsych-6.2.0/plugins/jspsych-html-keyboard-response.js"></script>
+    <script src="jspsych-6.2.0/plugins/jspsych-image-keyboard-response.js"></script>
+    <script src="jspsych-6.2.0/plugins/jspsych-fullscreen.js"></script>
+     <script src="jspsych-6.2.0/plugins/jspsych-instructions.js"></script>
+    <script src="StroopColorWord_Setup_EN.js"></script>
+    <link href="jspsych-6.2.0/css/jspsych.css" rel="stylesheet" type="text/css">
+    <link href="StroopColorWord.css" rel="stylesheet">
+    <style>
+      .stimulus { font-size: StimulusFontSize; }
+    </style>
+
+  </head>
+  <script>
+
+  	/* create timeline */
+    var timeline = [];
+    // Make experiment run in full screen mode
+    // Note, that the fullscreen plugin needs to imported above
+    timeline.push({
+      type: 'fullscreen',
+      fullscreen_mode: FullScreenMode
+    });
+
+   /* Create the initial welcome and instructions for practice.
+   This uses the built in instructions module. Make sure it gets imported above */ 
+    var ColorInstr = {
+       type: 'instructions',
+       pages: ColorInstrText,
+       show_clickable_nav: true
+    }
+    /* After practice is completed the performance is being checked. If accuracy is below 50% then the practice is repeated.
+    These are the instructions stating that practice will be repeated. */
+    var ColorPoorPerfInstr = {
+       type: 'instructions',
+       pages: ColorInstrPoorPerformanceText,
+       show_clickable_nav: true
+    }
+    /* Instructions shown to participants before test trials begin. */
+    var ColorTestInstr = {
+       type: 'instructions',
+       pages: ColorTestInstrText,
+       show_clickable_nav: true
+    }
+
+      /* define thank you trial */
+    var thank_you = {
+      	type: "html-keyboard-response",
+      	stimulus: ColorThankYouText
+    };
+
+    var Stimulus = {
+      type: 'html-keyboard-response',
+      stimulus: function()
+      { 
+        var Stim = '<svg width="400" height="100"><rect width="400" height="100" style="fill:rgb'+jsPsych.timelineVariable('Color', true)+'; stroke-width:3;stroke:rgb(0,0,0)" /></svg>'
+        var temp = PutIntoTable('',Stim)
+        return temp;
+      },
+      choices: ResponseChoices,
+      post_trial_gap: 0,
+      on_finish: function(data){
+        data.correct = data.key_press == jsPsych.pluginAPI.convertKeyCharacterToKeyCode(data.letter);
+        // This used later on to filter trials
+        /* If the ESCAPE key is pressed the current timeline is ended and the thank you screen is shown */
+        if (data.key_press == 27) {
+          //jsPsych.endCurrentTimeline();
+          jsPsych.end();
+        }
+      },
+    }
+
+    var prac_stimulus = Object.assign({}, Stimulus)
+    prac_stimulus = Object.assign(prac_stimulus, {    
+      data: {
+        letter: jsPsych.timelineVariable('letter'),
+        type: 'practice trial'
+      }
+    })
+
+    var test_stimulus = Object.assign({}, Stimulus)
+    test_stimulus = Object.assign(test_stimulus, {    
+      data: {
+        letter: jsPsych.timelineVariable('letter'),
+        type: 'test trial'
+      }
+    })
+
+  	var fixation = {
+  	  type: 'html-keyboard-response',
+  	  stimulus: function(){
+        var temp = PutIntoTable('','+')
+        return temp;
+      },
+  	  choices: jsPsych.NO_KEYS,
+  	  trial_duration: function(){
+          return jsPsych.randomization.sampleWithoutReplacement([250, 500, 750, 1000, 1250, 1500, 1750, 2000], 1)[0];
+        },
+      data: {type: 'fixation'}
+  	}
+
+    /* ARROWS 37 = left, 38 = up, 39 = right, 40 = down */
+    /* Escape = 27 */ 
+    var feedback = {
+      type: 'html-keyboard-response',
+      trial_duration: FeedbackLength,
+      stimulus: function(){
+        var last_trial_correct = jsPsych.data.get().last(1).values()[0].correct;
+        if(last_trial_correct){
+            var temp = PutIntoTable('','Correct!')
+            return temp;
+        } else {
+            var temp = PutIntoTable('','Incorrect')
+            return temp;;
+        }
+      }
+    }
+    // Define a practice procedure which provides feedback
+    var practice_procedure = {
+      timeline: [fixation, prac_stimulus, feedback],
+      timeline_variables: StroopWordList,
+      sample: {
+        type: 'fixed-repetitions',
+        size: ColorPracticeRepeats, 
+      }
+    }
+    // Define the test procedure which does NOT provide feedback
+    var test_procedure = {
+      timeline: [fixation, test_stimulus],
+      timeline_variables: StroopWordList,
+      sample: {
+        type: 'fixed-repetitions',
+        size: ColorTestRepeats, 
+      }
+    }
+    // Prepare debriefing for after the practice trials
+    var debrief = {
+      type: "html-keyboard-response",
+        stimulus: function() {
+          var DataFromThisPracticeRun = jsPsych.data.get().filter({type: 'practice trial'}).last(4*ColorPracticeRepeats)
+          var total_trials = DataFromThisPracticeRun.count();
+          var NumberCorrect = DataFromThisPracticeRun.filter({correct: true}).count()
+          var accuracy = Math.round(NumberCorrect / total_trials * 100);
+          return "<p>You responded correctly on <strong>"+accuracy+"%</strong> of the "+total_trials+" trials.</p> " +
+          "<p>Press any key to continue the experiment. </p>";
+
+        }
+    };
+    // This a conditional block which checks to see if the performance during practice was good enough
+    // if performance on the practice is above 50% accurate then the test procedure is done.
+    // otherwise practice is done again
+    // If accuracy is below 50% then run what is in the  if_node timeline, else skip it
+    var if_node = {
+      timeline: [ColorPoorPerfInstr, practice_procedure, debrief],
+      conditional_function: function(){
+        // check performance on the practice
+            var DataFromThisPracticeRun = jsPsych.data.get().filter({type: 'practice trial'}).last(4*ColorPracticeRepeats)
+              var total_trials = DataFromThisPracticeRun.count();
+              var NumberCorrect = DataFromThisPracticeRun.filter({correct: true}).count()
+              var accuracy = Math.round(NumberCorrect / total_trials * 100);
+          if (accuracy < 50) {
+            return true;
+          } else {
+            return false;
+          }
+      }
+    }
+
+    timeline.push(ColorInstr);
+    // run the practice trials
+    timeline.push(practice_procedure);
+    // provide feedback as to their performance
+    timeline.push(debrief);
+    // decide if the person did well enough
+    timeline.push(if_node);
+    // decide if the person did well enough
+    timeline.push(if_node);
+    // Present test instructions
+    timeline.push(ColorTestInstr);
+    // run the test
+    timeline.push(test_procedure);
+    timeline.push(thank_you);
+
+    /* start the experiment */
+    //jatos.onLoad(function() {  
+    jsPsych.init({
+    // This sets the width of the experiment to 600 pixels. This will wrap all text to that amount.
+      experiment_width: 600,
+    	timeline: timeline,
+      on_interaction_data_update: function(data) {
+        console.log(JSON.stringify(data))
+      },
+      on_finish: function() {
+        jsPsych.data.get().localSave('csv','StroopColorMydata.csv');
+      }
+      //on_finish: saveData
+    });
+    //});
+  </script>
+</html>
diff --git a/StroopColorWord/StroopColorWord.css b/StroopColorWord/StroopColorWord.css
@@ -0,0 +1 @@
+body {background-color: rgb(150, 150, 150)}