// Set font-size to 60%
main.setfontsize(60);

// Change background color 
main.style("background-color", "lavender"); // change mainblock to lavender
main.style("body-background-color", "lavender"); // change body/border or mainblock to lavender



// PREPARING PRELOADING
// // Reasure participant the expriment is not crashed
text("Starting up the experiment can take a minute"); // Show text while preloading

//Create variables 
var neutral = ["old_male_neutral.jpg","middleaged_male_neutral.jpg","young_male_neutral.jpg","old_female_neutral.jpg","middleaged_female_neutral.jpg","young_female_neutral.jpg"], // Variable with neutral faces for main experiment
    happy = ["old_male_happy.jpg","middleaged_male_happy.jpg","young_male_happy.jpg","old_female_happy.jpg","middleaged_female_happy.jpg","young_female_happy.jpg"], // Variable with happy faces for main experiment
    i, // Variable for the for loops
    e; // Variable to record RT



//PRELOADING
// Preload all main-images through a for loop
for (i = 0; i < neutral.length; i = i + 1)
{
    preload(neutral[i]); // loop through array with all neutral faces
    preload(happy[i]); // loop through array with all happy faces 
}

// Await till all preloading is completed
image.await("preloading_completed"); 
clear(); // Clear the text "Starting up the experiment can take a minute"



//INFORMED CONSENT
radio("
Informed consent 
 
 Welcome to this experiment. The experiment takes approximately 3 minutes. Participation is entirely voluntary and you may withdraw at any time. 
 
 Do you consent to participate in this experiment?",['Yes','No'], "consent");
// Gives 2 options in a drop-down menu, saves as 'consent'

// If loop: stops the experiment if the participant does not consent
if (response.consent === "No")
{
    text("The experiment stops here. Thank you for your attention.");
    return; // Stops the script. End of script
}


//DEMOGRAPHIC QUESTIONS
// Gender question
radio("What is your gender?",
     ['Female','Male','Non-binary','Other','Prefer not to say'],"gender"); // Gives 4 options in a drop-down menu, saves as 'gender'
// Age question
input("What is your age?","age"); // Gives a stand-alone input() function, saves as 'age'


// INSTRUCTIONS
var a = main.addblock("center","top",165,50); //Create block for instruction text 
var instruction = ("
Instructions
 
 In this experiment, you'll be presented with emotional faces. Your task is to identify the emotion displayed in the centre & ignore the surrounding emotional faces. 
 
  
 
 Press H, if the face in the centre displays a HAPPY emotion 
 
 Press N, if the face in the centre displays a NEUTRAL emotion  
  
 
  Try to respond as fast as possible  
 
 
 Before starting the experiment, we will kick off with some practice trials. 
 
 Take a moment to get comfortable, and make sure you are in a quiet environment where you can concentrate. 
 
  Click OK to start the practice trials  
" );
// Create instruction text

// Show instruction text till OK
a.text(instruction);

// Create function for OK button
function bottom_button()
{
    var b = main.addblock(35,75,30,30); // Create block for OK button
    b.button(); // Add OK button 
    await("button:click"); // Wait for OK button click to continue with real experiment
    main.removeblock(b); // Removes block b
    await(500);  // Wait for a time for next screen
}

bottom_button(); // Get OK button
a.clear(); // Clear block a (instructions)


// PREPARATIONS    

// Create blocks in which center target (c), left flanker (l) & right flanker (r) will be shown
c = main.addblock("center", "center", 25, 30); // Create block for center target 
l = main.addblock("left", "center", 25, 30); // Create block for left flanker 
r = main.addblock("right", "center", 25, 30); // Create block for right flanker

// Change background color to white (for expriment)
main.style("background-color", "white"); // change mainblack to white
main.style("body-background-color", "white"); // change body/border or mainblock to white

// Create function to show different trials
function ToShowImages(condition){
    // Selects the trial based on the condition given (0 till 3)
    // 0 = "N - N - N"
    // 1 = "N - H- N"
    // 2 = "H - N - H"
    // 3 = "H - H -H"
    // To achieve this, we modulo the number given to get the target & devide the number to get the flankers
    
    // Make neutral anf happy current list to remove values (to avoid same faces in 1 trial)
    N_curr = ["old_male_neutral.jpg","middleaged_male_neutral.jpg","young_male_neutral.jpg","old_female_neutral.jpg","middleaged_female_neutral.jpg","young_female_neutral.jpg"];
    H_curr = ["old_male_happy.jpg","middleaged_male_happy.jpg","young_male_happy.jpg","old_female_happy.jpg","middleaged_female_happy.jpg","young_female_happy.jpg"];
    emotion_curr = [N_curr, H_curr]; // Variable to select updated emotions
    
    // Shuffle list to get random images
    shuffle(H_curr);
    shuffle(N_curr);
    
    // Set the centre image (through modulo)
    centre_emotion = emotion_curr[condition % 2]; 
    centre_image = centre_emotion[0];
    
    // Set centre image
    c.setimage(centre_image);
    
    // Remove centre image value from both the neutral and happy array
    if (centre_emotion == N_curr) {
        N_curr = N_curr.filter(image => image !== centre_image); // Removes the centre image from neutral current list
        centre_image = centre_image.replace("_neutral", "_happy"); // Change the neutral string to be happy string (to avoid same face in flankers)  
        H_curr = H_curr.filter(image => image !== centre_image); // Remove the happy image from the happy list
    }
    else if (centre_emotion == H_curr){
        H_curr = H_curr.filter(image => image !== centre_image); // Removes the centre image from happy current list
        centre_image = centre_image.replace("_happy", "_neutral"); // Change the happy string to be neutral string (to avoid same face in flankers)
        N_curr = N_curr.filter(image => image !== centre_image); // Remove the neutral image from the neutral list
    }

    // Update the array to not get the same face 
    emotion_curr = [N_curr, H_curr];
    
    // Set the emotion for the flanker (through division)
    flank_emotion = emotion_curr[Math.floor(condition / 2)];
    
    // Set flanker images
    r.setimage(flank_emotion[0]);
    l.setimage(flank_emotion[1]);
}


// PRACTICE 
// Create 2 trials for a congruent (neutral target) and incongruent (neutral target) condition (PRACTICE)
cond_list = shuffle([0, 2]); 

// For loop for practice (2 trials total)
for (i = 0; i < cond_list.length; i = i + 1)
{
    c.text("X", 150); // Show fixation cross in c-block (1500 ms, 150% fontsize)
    await(1500);
    c.clear(); // Remove fixation cross
    ToShowImages(cond_list[i]); // Show one trial (3 pictures)
    e = awaitkey('h,n', 3000);// Wait for 3 sec until either the h-key or the n-key has been pressed & measures time til keypress
    
    log(e.RT, cond_list[i] + "_practice_RT"); // Stores the RT for each conditon as "condition + _practice_rt"
    log(e.key, cond_list[i] + "_practice_key"); // Stores the kepress for each condition as "condition + _practice_key"
    
    c.clear(); // Remove picture from block c
    l.clear(); // Remove picture from block l
    r.clear(); // Remove picture from block r
    
    if (e.type === "timeout") // If RT>3sec...
    {
            text("Please, try to respond faster next time (within 3 seconds)"); // Display text: participant needs to react faster (for 2 sec)
            await(1500); 
    }
    
    clear();  // Clear text before showing next image
}

// Change background color to lavender (for debriefing practice)
main.style("background-color", "lavender"); // change mainblack to lavender
main.style("body-background-color", "lavender"); // change body/border or mainblock to lavender

// DEBRIEFING (practice)
var a = main.addblock("center","top",115,90); //Create block for practice debriefing
a.text("Now you understand what the experiment looks like, the real experiment starts by clicking the OK button. 
 
 
 Keep in mind: 
 
  
 
 Press H, if the face in the centre displays a HAPPY emotion 
 
 Press N, if the face in the centre displays a NEUTRAL emotion  
  
 
 
 Good luck! 
");
bottom_button(); // Get OK button
a.clear(); // Clear text before starting main experiment



// MAIN EXPERIMENT 
// Change background color to white (for experiment)
main.style("background-color", "white"); // change mainblack to white
main.style("body-background-color", "white"); // change body/border or mainblock to white

// Create 4 trials for each condition (MAIN)
cond_list = shuffle([0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3]);

// Create variables to track participants' correct trials & RTs per emotion
neutral_correct = 0; 
neutral_RT = 0;
happy_correct = 0;
happy_RT = 0;

// For loop for MAIN experiment (16 trials total)
for (i = 0; i < cond_list.length; i = i + 1)
{
    c.text("X", 150); // Show fixation cross in c-block (1500 ms, 150% fontsize)
    await(1500);
    c.clear(); // Remove fixation cross
    
    ToShowImages(cond_list[i]); // Show one trial (3 pictures)
    e = awaitkey('h,n', 3000);// Wait for 3 sec until either the h-key or the n-key has been pressed & measures time til keypress or 3 sec
    
    if (cond_list[i] === 0 | cond_list[i] === 2 & e.key === "n"){
        // Track amount correct and total RT if target is neutral
        ++neutral_correct; 
        neutral_RT += e.RT;
        
        // Make sure to log RT and key only when answer was correct
        log(e.RT, cond_list[i] + "_main_RT"); // Stores the RT for each condition as "condition + _main_rt"
        log(e.key, cond_list[i] + "_main_key"); // Stores the kepress for each condition as "condition + _main_key"
    }
    else if (cond_list[i] === 1 | cond_list[i] === 3 & e.key === "h"){
        // Track amount correct and total RT if target if happy
        ++happy_correct; 
        happy_RT += e.RT;
        
        // Make sure to log RT and key only when answer was correct
        log(e.RT, cond_list[i] + "_main_RT"); // Stores the RT for each condition as "condition + _main_rt"
        log(e.key, cond_list[i] + "_main_key"); // Stores the kepress for each condition as "condition + _main_key"
    }
    
    c.clear(); // Remove picture from block c
    l.clear(); // Remove picture from block l
    r.clear(); // Remove picture from block r
    
    if (e.type === "timeout") // If RT>3sec...
    {
            text("Please, try to respond faster next time (within 3 seconds)"); // Display text: participant needs to react faster (for 2 sec)
            await(2000);
    }
    
    clear();  // Clear text before showing next image
    
}

// Change background color to lavender (for debriefing experiment)
main.style("background-color", "lavender"); // change mainblack to lavender
main.style("body-background-color", "lavender"); // change body/border or mainblock to lavender

// DEBRIEFING (main experiment)
var t = addblock("center","center",50,90); // Create block to show average RT

// Show participant average RT for neutral and happy stimuli
t.text("Your average reaction time was: 
 
"
    + (neutral_RT/neutral_correct).toFixed(0) // Rounds the RT to 0 decimals
    + " ms for neutral stimuli 
 
"
    + (happy_RT/happy_correct).toFixed(0) // Rounds the RT to 0 decimals
    + " ms for happy stimuli 
 
");

bottom_button(); // Wait for OK click to continue 


// RATING THE EMOTIONS
// Remove all blocks
main.removeblock(c);
main.removeblock(l); 
main.removeblock(r); 
main.removeblock(a);
main.removeblock(t);

// Rate neutral emotion
scale("How accurate were the neutral pictures (did they come over as neutral to you)?",
          "Not accurate","Very accurate","neutral_rating"); // Gives select drop-down form to acces neutral rating with 5 point Likert scale, saves as "neutral_rating"
           
// Rate happy emotion
scale("How accurate were the happy pictures (did they come over as happy to you)?",
          "Not accurate","Very accurate","happy_rating"); // Gives select drop-down form to acces happy rating with 5 point Likert scale, saves as "happy_rating"


// END OF EXPERIMENT
text("Thank you for participating! 
 In this experiment, we were investigating how different emotional expressions, like happy and neutral faces, impact your ability to focus on a central target while ignoring surrounding emotional distractors. 
 
 
  Press any key to end the experiment  
"); 
await("keypress"); // Display thank you text till any keypress

Data inspection is forthcoming!

In the mean time, authors may download their own data and make it available as an Excel file. Check out the 'Stimuli and Files' tab.