How to go automatically from one iamge to next within a row or from one row to

[multanip]

Below is the code I ahve trying to play around with but with no luck and error mesages.
I have four items in a group and each item has three images. So each time from one image to the next or from item to next item in a list I need them to move on automatically after 400 ms. Below code I have been playing around with but running into error messages about running order. How do allow images go automatically from one image to next within a row or to the next slide automatically. When I remove newKey(“stop early”, “FJ”).callback(getTimer(“mid-image”).stop()) and getTimer(“mid-image”) and bring back the sapce button, the errors disappear. the transition has be automatic and I am stuck on where to fix this or what to put in.

newTrial("pre_task_eyetracking", newVar("400_ms").global().set(v=>Date.now()+0.00666667*60*1000) )
,
Template("EyeTracking_english.csv", row=> 
    newTrial( "eyetracking",
        getVar("four_minutes_later").test.is(v=>Date.now()>=v).success(end()).failure(  
            newTimer("check_end", 100).callback(
                getVar("four_minutes_later").test.is(v=>Date.now()>=v)
                    .success( end() )
                    .failure( getTimer("check_end").start() )
            ).start(),
        defaultImage.center().print(),     // all newImage commands will automatically print the image centered when run
        defaultImage.size(400,300).print(),
        defaultText.center().print() // all newText commands will automatically print the text centered when run
        ,
    newEyeTracker("tracker",1).callback( function (x,y) {
        if (this != getEyeTracker("tracker")._element.elements[0]) return;
        getEyeTracker("tracker")._element.counts._Xs.push(x);
        getEyeTracker("tracker")._element.counts._Ys.push(y);
        })
    ,
    newFunction(()=>{
        getEyeTracker("tracker")._element.counts._Xs = [];
        getEyeTracker("tracker")._element.counts._Ys = [];
    }).call()
    ,
            getEyeTracker("tracker")
            .calibrate(5)  // Make sure that the tracker is still calibrated
            .log()  // log the calibration scores
        ,
        newTimer("pre-trial", 250).start().wait()
        ,
        newImage("image1", row.main_picture),// the first image is set in design.csv
        //newText("pressSpace", "Press Space to move on"), // some instructions so the participant knows what to do
        //newKey("space", " ").wait(),
        getImage("image1").remove(),//getText("pressSpace").remove(),// take the image and text off the page after the keypress
        newKey("stop early", "FJ").callback(getTimer("mid-image").stop()),
        newTimer("mid-image", 400),//.start().wait(),// wait 400ms before moving on to the next image
        getTimer("mid-image")
        .log()
        ,
        newImage("image2", "Neutral.jpg"),// we always use middleImage.png as the middle image
        newAudio("audio", row.wav_file).play(), // the audio file is set in design.csv
        newText("AudioSpace", "Please wait for the audio to finish and then press Space").print(), // we reuse the same Text element as before (same instructions)
        getKey("space").wait(), // we reuse the same Key element as before (keypress on Space)
        getAudio("audio").wait("first"), // wait until the Audio element has finished playing back
        getImage("image2").remove(),getText("AudioSpace").remove(),
        newTimer("last-image", 400).start().wait()//wait 400ms befoere moving to the last iamge
        .log()
        ,
        newImage("image3", row.end_picture), // the third image is set in design.csv
        getText("pressSpace").print(),
        getKey("space").wait(),
        getImage("image3").remove(),getText("pressSpace").remove()
        .log()
        ,
        newTimer("post-trial", 250).start().wait() // wait 250ms before moving on to the next trial
        ,
        getText("pressSpace").print(),
        getKey("space").wait()
        .center()
        )
    )
.noHeader()
  .log("group"                  ,row.group)
  .log("Condition"              ,row.Condition)
  .log("ID_No"                  ,row.ID_No)
  .log("main_picture"           ,row.main_picture)
  .log("ViewportWidth" 	    	,window.innerWidth	 		) // Screensize: width
  .log("ViewportHeight"	    	,window.innerHeight 		) // Screensize: heigth
);

SendResults("Send");

[multanip]

This is the most recent script. still no luck in figuring out how to move automaticallz to next image or page automatically

PennController.ResetPrefix(null) // Keep this here
PennController.DebugOff()
//The experiment is design for Eng based study 
//CREDIT: The credit for the picture and Audio to Psychling lab and Dr. Dato for all the files
//Credit: the script was learned and borrowed from PCIbex website
//
//Resources such as audio and video are located in a server
PreloadZip("https://psyli-lab.research-zas.de/Eye-tracking_eng_Priya/Eyetracker_eng_resources/Images.zip")
PreloadZip("https://psyli-lab.research-zas.de/Eye-tracking_eng_Priya/Eyetracker_eng_resources/Audio.zip")
PreloadZip("https://psyli-lab.research-zas.de/Eye-tracking_eng_Priya/Eyetracker_eng_resources/Neutral.zip")

//URL where the PHP and data is stored 
EyeTrackerURL("https://psyli-lab.research-zas.de/Eye-tracking_eng_Priya/Eyetracker_eng_results/Eng_eyetracker_priya.php")

var showProgressBar = false;

//Sequence of the experiment
Sequence("Preload","Welcome","Webcam_Check","ChromeCheck","L1Check","Introduction","Consent","QuestionairePage","WebcamSetUp","AudioSetUp","Instructions","Counter",randomize("eyetracking"),"Send","Exit")
// CheckPreloaded
CheckPreloaded("Preload")

//Welcome message
newTrial("Welcome",
    newVar("Subject", randomnumber = Math.floor(Math.random()*1000000))
        .global()
        .log()
    ,
    newText("WelcomeMessage", "<b>Hello and Thank you very much for participating in our eye-tracking experiment.</b><br><br>Before we proceed, we have three quick questions.</b> <br><br>Please press the <b>SPACEBAR</b> to continue.")
    ,
    newCanvas("InstructionsCanvas", "80vw" , "40vh")
        .add(0,0, getText("WelcomeMessage"))//https://farm.pcibex.net/r/wqCsWk/experiment.html?test=true
        .print("center at 50%", "top at 25%")
    ,
    newKey("next", " ")
        .wait()
)
//.setOption("hideProgressBar", true)   


//Asking Participants whether they give permission to the Webcam, reminder to use chrome, and English language skill L1. If answer 'no' to any of these questiosn, they cannot participate in the experiment.
newTrial("Webcam_Check",
    newText("Permission_Webcam", "Question 1:<br><br> In order to be able to record your line of sight on the computer screen, we ask for permission to access your webcam. We will <b>not</b> record a video of you or collect any other data that allows conclusions to be drawn about your identity. Do you give your permission for us to access your webcam?")
    ,
    newText("No_Permission", "<p><b>No, I don't give permission.</b><br>Click the 'N' on the keyboard</p>")
    ,
    newText("Yes_Permission", "<p><b>Yes, I give permission.</b><br>Click the 'Y' on the keyboard</p>")
    ,
    newCanvas("ChecksCanvas", "60vw" , "20vh") 
        .add("center at 50%", "top at 10%", getText("Permission_Webcam"))
        .add("center at 20%", "top at 80%", getText("Yes_Permission"))
        .add("center at 80%", "top at 80%", getText("No_Permission"))
        .print("center at 50%","top at 25%")
    , 
    newKey("yes_no", "NY")
        .wait()
    ,
    getKey("yes_no")
        .test.pressed("Y")
        .failure(
            getCanvas("ChecksCanvas")
                .remove()
            ,
            newCanvas("No_Permission", "60vw" , "20vh")
                .add("center at 50%", "top at 10%", newText("Unfortunately, you cannot participate in this study. Please close this window by ending the browser session, possible pop-up windows can be ignored."))
                .print("center at 50%", "top at 25%")
            ,
            newButton("waitforever")
            .wait()
        )
)

//Chrome
newTrial("ChromeCheck",
    newText("ChromeCheckText", "Question 2:<br><br>The display and the course of the experiment will only work without problems if you use the Google Chrome browser on a laptop or desktop computer (not on a smartphone or tablet). Are you currently using Google Chrome?</p>")
    ,
    newText("NoChrome", "<p><b>No, I'm not currently using any of the options</b><br>Click the 'N' on the keyboard</p>")
    ,
    newText("YesChrome", "<p><b>Yes, I'm currently using Chrome Browser</b><br>Click the 'Y' on the keyboard</p>")
    ,
    newCanvas("ChecksCanvas", "60vw" , "20vh")
        .add("center at 50%", "top at 10%", getText("ChromeCheckText"))
        .add("center at 20%", "top at 80%", getText("YesChrome"))
        .add("center at 80%", "top at 80%", getText("NoChrome"))
        .print("center at 50%", "top at 25%")
    ,
    newKey("yesno", "NY")
        .wait()
    , 
    getKey("yesno")
        .test.pressed("Y")
            .failure(
            getCanvas("ChecksCanvas")
                .remove()
            ,
            newCanvas("NoChrome", "60vw" , "20vh")
                .add("center at 50%", "top at 10%", newText("Unfortunately, the experiment only works with Google Chrome (which can be downloaded for free). Please close this window by ending the browser session (possible pop-up windows can be ignored) and open the link to the experiment again with Google Chrome."))
                .print("center at 50%", "top at 25%")
            ,
            newButton("waitforever")
                .wait()
        )
)

//Language check
newTrial("L1Check",
    newText("L1CheckText","Question 3:<br><br> In order to take part in this study, you must speak <b>English as your mother tongue</b>. Is English your mother tongue?</p>")
    ,
    newText("NoL1","<p><b>No, English is not my mother tongue</b><br>Click 'N' on the keyboard<b><p>")
    ,
    newText("YesL1","<p><b>Yes, English is my mother tongue</b><br>Click 'Y' on the keyboard</b></p>")
    ,
    newCanvas("ChecksCanvas", "60vw" , "20vh")
        .add("center at 50%", "top at 10%", getText("L1CheckText"))
        .add("center at 20%", "top at 80%", getText("YesL1"))
        .add("center at 80%", "top at 80%", getText("NoL1"))
        .print("center at 50%", "top at 25%")
    ,
    newKey("yesno", "NY")
        .wait()
    ,
    getKey("yesno")
        .test.pressed("Y")
            .failure(
            getCanvas("ChecksCanvas")
                .remove()
            ,
            newCanvas("NoL1", "60vw" , "20vh")
                .add("center at 50%", "top at 10%", newText("Unfortunately, you are not eligible to participate in this study. Please close this window by ending your browser session (any pop-up windows can be ignored.)"))
                .print("center at 50%", "top at 25%")
            ,
            newButton("waitforever")
                .wait()
        )
)

//Introduction
newTrial("Introduction",
    newText("IntroductionText","<b>Thank you for answering the questions about the system requirements!</b><br><br>The eye-tracking experiment will be very simple and will take about 10-15 minutes. Look at the three pictures and listen to the sentence for the middle picture. <br><br>Your task is to look at the images and the content of the spoken sentences as closely as possible. Press SPACE to continue in between pictures and trials. During the entire experiment, please try to sit as still as possible but comfortably and never take your eyes off the computer screen.<br><br>We will <b>not</b> record a video of you or collect any other data that allows conclusions to be drawn about your identity. We will only collect data related to your eye movements on the computer screen.<br><br>It is important that you are in a well-lit and quiet environment, otherwise the webcam will not be able to detect your eye movements. Please turn off any music and other applications and websites (such as cell phones, email notifications, etc.) that could distract you during the experiment.<br><br>The next pages will be displayed in full screen mode. Please do not close the full screen for the remainder of the experiment.<br><br>Click the <b>SPACEBAR</b> to continue.")
    ,
    newCanvas("InstructionsCanvas", "60vw" , "20vh")
        .add(0,0, getText("IntroductionText"))
        .css("front-size","25px")
        .print("center at 50%", "top at 25%")
    ,
    newKey("next", " ")
        .wait()
    ,
    fullscreen()
)
//.setOption("hideProgressBar",true)

//Consent Form
newTrial("Consent",
    newHtml("consent_form","consent_pilot_5item_eng.html")
        .center()
        .cssContainer({"width":"720px"})
        .checkboxWarning("You must give your consent to continue.")
        .print()
    ,
     newButton("continue", "Click here to continue.")
        .center()
        .print()
        .wait(getHtml("consent_form").test.complete()
                  .failure(getHtml("consent_form").warn())
        )
)
//.setOption("hideProgressBar", true)

//Participant Questionaire
newTrial("QuestionairePage",
    newHtml("Questionnaire","questionnaire_pilot_eng.html")
        .center()
        .cssContainer({"width":"720px"})
        .checkboxWarning("You must give your consent to continue.")
        .print()
    ,
    newButton("continue","Click here to continue.")
        .center()
        .print()
        .wait(getHtml("Questionnaire").test.complete()
                  .failure(getHtml("Questionnaire").warn())
        )
) 
//.setOption("hideProgressBar", true)


//Set up the webcam:need calibrtion, the resources will preload at the same time. 
newTrial("WebcamSetUp",
    newText("WebcamSetUpText", "The next few pages will help you set up the webcam and audio player. The webcam is set up through a simple calibration process. You will see video of the webcam recording during the calibration process. As previously mentioned, we will not store any footage of these webcam recordings. Please make sure your face is fully visible and that you are centered in front of your webcam.<br><br>You can start the calibration process when the box is GREEN by clicking the start button that will appear in the center of the computer screen.<br><br>During the calibration process, you will see eight dots on the screen. Please click on all these points and follow the mouse pointer closely with your eyes. Once you have clicked all the dots, a new dot will appear in the middle of the screen. Please click on this dot and <b>look at it for three seconds</b> so that the algorithm can check if the calibration process was successful.<br><br>If the calibration fails, the last step repeated again. <br><br> Press <b>SPACEBAR</b> to continue.")
        .center()
        .print()
    ,
    newKey("next", " ")
        .wait( newEyeTracker("tracker").test.ready())
    ,
    fullscreen()
    ,
    // Start calibrating the eye-tracker, allow for up to 3 attempts
    // 50 means that calibration succeeds when 50% of the estimates match the click coordinates
    // Increase the threshold for better accuracy, but more risks of losing participants
    getEyeTracker("tracker").calibrate(5,3)
  )
  .noHeader()
  //.setOption("hideProgressBar", true)

// Audio set-up
newTrial("AudioSetUp",
    newText("AudioInstructions", "The webcam is now calibrated so that the audio player can be set up in the next step. In this experiment, you will hear several sentences. You can play a sample sentence that will appear in this study by pressing the play button. Please use the audio recording to adjust the volume as well. You can play this sample set as many times as you like. Once you're ready, you can go to the next page.")
    , 
    newAudio("cocktail","02_1_b_test.wav") ///ADDD EXAMPLE WAV TO CHECK 
    ,
    newCanvas( "myCanvas", "60vw" , "60vh")
        .settings.add(0,0, getText("AudioInstructions"))
        .settings.add("center at 50%", "top at 20%", getAudio("cocktail"))
        .print("center at 50%", "top at 25%")
    ,
    newButton("Next Page")
        .center()
        .print("center at 50%", "top at 70%")
        .wait()
)
    .setOption("hideProgressBar", true)

// Experiment instructions//
newTrial("Instructions",
    newText("TaskInstructions", "<p>We are ready to start the experiment! First will be a practice round and then the experiment round. <b>PLEASE keep your gaze FIXED</b> on the computer at ALL TIMES and head must remain still.<br><br>In BOTH practice and experiment round, <b>DO NOT</b> scroll or move up and down or sideways, <b>ONLY</b> or <b>DO as Instructed</b>.<br><br>BEFORE each section, a green dot will appear in the middle of the screen for web re-check. Just look at it <b>for THREE SECONDS</b>. IF the camera is still calibrated, it will continue, otherwise the computer will recalibrate. In Practice and Experiment, you will see a action picture followed by static picture with audio and a final action picture and <b>DO NOT TOUCH THE MOUSE DURING THIS SCREEN</b>. You <b>MUST QUICKLY</b> only look at the picture and then <b>Press SPACEBAR</b>.</b> <br><br> We will now start with the trial run and then the experimental run. It should take approximately 15-20 minutes.")
    ,
    newCanvas("myCanvas", 800 , 300)
        .settings.add(0,0, getText("TaskInstructions"))
        
        .print("center at 50%", "top at 25%")
    ,
    newButton("Begin the Experiment")
        .center()
        .print("center at 50%", "top at 70%")
        .wait()
)
//.setOption("hideProgressBar", true)
//.setOption("hideProgressBar", true)

SetCounter("Counter", "inc", 1);

    //.setOption("hideProgressBar", true)

//Experimental trial
Template("EyeTracking_english.csv", row=>  // all newText commands will automatically print the text centered when run
    newTrial("eyetracking",
        defaultImage.center().print(),     // all newImage commands will automatically print the image centered when run
        defaultImage.size(400,300).print(),
        defaultText.center().print()
    ,
    newEyeTracker("tracker",1).callback( function (x,y) {
        if (this != getEyeTracker("tracker")._element.elements[0]) return;
        getEyeTracker("tracker")._element.counts._Xs.push(x);
        getEyeTracker("tracker")._element.counts._Ys.push(y);
        })
    ,
    newFunction(()=>{
        getEyeTracker("tracker")._element.counts._Xs = [];
        getEyeTracker("tracker")._element.counts._Ys = [];
    }).call()
    ,
        getEyeTracker("tracker")
            .calibrate(5)  // Make sure that the tracker is still calibrated
            .log()  // log the calibration scores
    ,
    newTimer("pre-trial", 250).start().wait()
    ,
    newImage("image1", row.main_picture), // the first image is set in design.csv
    newText("pressSpace", "Press Space to move on"), // some instructions so the participant knows what to do
    newKey("space", " ").wait(),
    getImage("image1").remove(),getText("pressSpace").remove(),// take the image and text off the page after the keypress
    newTimer("mid-image", 400).start().wait() // wait 400ms before moving on to the next image
    .log()
    ,
    newImage("image2", "Neutral.jpg"),// we always use middleImage.png as the middle image
    newAudio("audio", row.wav_file).play(), // the audio file is set in design.csv
    newText("AudioSpace", "Please wait for the audio to finish and then press Space").print(), // we reuse the same Text element as before (same instructions)
    getKey("space").wait(), // we reuse the same Key element as before (keypress on Space)
    getAudio("audio").wait("first"), // wait until the Audio element has finished playing back
    getImage("image2").remove(),getText("AudioSpace").remove(),
    newTimer("last-image", 400).start().wait() //wait 400ms befoere moving to the last iamge
    .log()
    ,
    newImage("image3", row.end_picture), // the third image is set in design.csv
    getText("pressSpace").print(),
       getKey("space").wait(),
        getImage("image3").remove(),getText("pressSpace").remove(),
        newTimer("post-trial", 250).start().wait()
        .log()
        ,
       // newTimer("post-trial", 250).start().wait() // wait 250ms before moving on to the next trial
        //,
        getText("pressSpace").print(),
        getKey("space").wait()
        .center()
    )
.noHeader()
  .log("group"                  ,row.group)
  .log("Condition"              ,row.Condition)
  .log("ID_No"                  ,row.ID_No)
  .log("main_picture"           ,row.main_picture)
  .log("end_picture"           ,row.end_picture)
  .log("ID_No"                   ,row.ID_No)
  .log("ViewportWidth" 	    	,window.innerWidth	 		) // Screensize: width
  .log("ViewportHeight"	    	,window.innerHeight 		) // Screensize: heigth
)

SendResults("Send");

//Exit
newTrial("Exit",
    exitFullscreen()
    ,
    newText("Final","Thank you. This is the end of the experiment, you can now close this window. Thank you!")
    ,
     newCanvas("myCanvas", "60vw" , "60vh")
        .settings.add(0,0, getText("Final"))
        .css("font-size", "1.1em")
        .print("center at 50%", "middle at 50%")
    ,
    newButton("waitforever")
        .wait() // Not printed: wait on this page forever
)

[Jeremy]

Hi,

Do you mean that each picture should be displayed for 400ms before automatically disappearing, and being replaced with the next picture? What about the middle one, with audio playback: should it also remain on the screen for just 400ms regardless of audio playback, or should it remain on the screen for the whole duration of the audio?

In any case, as long as you have wait on a Key element, the script will not move on to the next lines until the participant presses a key. If instead of waiting for a keypress, you want to wait for some time to elapse, then you need to wait for a Timer element instead. For example, you could replace the line newKey("space", " ").wait(), with newTimer("displayTime", 400).start().wait(), and the first image would remain on the page for 400ms before being removed (because the next command, getImage("image1").remove(), will only be executed once the wait command on the Timer element has been completed)

Note that if you remove the line newKey("space", " ").wait(), then you no longer create a Key element named “space” in your trial, and therefore any future reference to it (getKey("space")) will consequently result in a reference error (but I presume that you would replace all those Key references anyway, if you want everything to move on automatically rather than upon keypress)

Jeremy

[multanip]

Yes, what you wrote is what I want. I want first and the last picture to remain on the screen for 400ms before moving on. tbe audio one needs to rmain until it finishes but there still needs to be 400 ms gap after the audio is finished.
I Tried that already for each of the images except the last image before it moves to the enxt item in the group (newTimer(“displayTime”, 400).start().wait(),), it didn’t work properly. Either it didn’t work or it showed the middle image or the first imaage but not all of them. I removed or at least put double // to turn all the new key inot comment so it does’n interfere. I started getting error messages.
I will try agian.

[multanip]

OR I think my superviors wants the first image to remain for 1000ms then 400ms gap, picture with audio until audio finishes then 400ms gap then last picture for 700ms then moving on to the next item with calibration in the middle. BUT EIHER WAY. I need to learn to do BOTH for experiments in the future so I don’t know if coding it is really that dramatically different for onscreen vs. transition time. BUT I will start with what you wrote.
thanks.

[Jeremy]

The general idea for what you describe could be implemented like this:

newImage("image1", row.main_picture).print(),   // Show the image
newTimer("displayTime1", 1000).start().wait(),  // Wait 1000ms
getImage("image1").remove(),                    // Remove the image
newTimer("gap", 400).start().wait()             // Wait 400ms
,
getEyeTracker("tracker").calibrate(5)           // Calibrate
,
newImage("image2", "Neutral.jpg").print(),      // Show the image
newAudio("audio", row.wav_file).play().wait(),  // Play the audio and wait until playback is over
getImage("image2").remove(),                    // Remove the image
getTimer("gap").start().wait()                  // Wait 400ms
,
newImage("image3", row.end_picture),            // Show the image
newTimer("displayTime2", 700).start().wait(),   // Wait 700ms
getImage("image3").remove()                     // Remove the image

Jeremy

[multanip]

i will try this thank you

[Author]

Posts