Notes from Qualtrics JS series: Learning to count the number of trials and setting conditions

This is a follow up from this post: @keeyh.mba/notes-from-qualtrics-js-series-learning-to-use-the-event-listener

Qualtrics.SurveyEngine.addOnload(function() {
    var w = 100; // width of the squares
    var d = 350; // distance between the centers of the squares
    var mouseTrajectory = []; // to store the mouse coordinates
    var maxTrials = 4; // set your maximum number of trials here
    var numTrials = 0; // start with 0 trials

    // Create squares
    var square1 = document.createElement('div');
    square1.id = 'square1';
    square1.style.width = w + 'px';
    square1.style.height = w + 'px';
    square1.style.background = 'red'; // Initially red
    square1.style.position = 'absolute';
    square1.style.left = (d/2) - (w/2) + 'px'; // Positioning from the center

    var square2 = document.createElement('div');
    square2.id = 'square2';
    square2.style.width = w + 'px';
    square2.style.height = w + 'px';
    square2.style.background = 'grey'; // Initially grey
    square2.style.position = 'absolute';
    square2.style.left = (d/2) + (w/2) + d + 'px'; // Positioning from the center

    // Append squares to the body of the question
    this.getQuestionContainer().appendChild(square1);
    this.getQuestionContainer().appendChild(square2);

    // Hide next button
    this.hideNextButton();

    // Start timer
    console.log("Timer started");
    var start = new Date();

    // Store start time in embedded data field
    Qualtrics.SurveyEngine.setEmbeddedData('start_time', start.getTime());

  // Event listeners for squares
    square1.addEventListener('click', function() {
        if (numTrials < maxTrials) { // check if the number of trials is less than the max
            square1.style.background = 'grey'; // Change red to grey
            square2.style.background = 'red'; // Change grey to red
            numTrials++; // increment the number of trials
            
            if (numTrials >= maxTrials) { // if max trials reached
                this.clickNextButton(); // advance to next question
            }
        }
    }.bind(this)); // use bind to reference Qualtrics.SurveyEngine

    square2.addEventListener('click', function() {
        if (numTrials < maxTrials) { // check if the number of trials is less than the max
            square2.style.background = 'grey'; // Change red to grey
            square1.style.background = 'red'; // Change grey to red
            numTrials++; // increment the number of trials
            
            if (numTrials >= maxTrials) { // if max trials reached
                this.clickNextButton(); // advance to next question
            }
        }
    }.bind(this)); // use bind to reference Qualtrics.SurveyEngine


    // Event listener for mousemove
    document.addEventListener('mousemove', function(e) {
        // Record the mouse coordinates
        mouseTrajectory.push({
            x: e.clientX,
            y: e.clientY
        });
    });

    // When the survey is submitted, save the mouse trajectory to embedded data
    Qualtrics.SurveyEngine.addOnUnload(function() {
        // Convert the mouseTrajectory array to a string so it can be stored in embedded data
        var mouseTrajectoryString = JSON.stringify(mouseTrajectory);

        // Store the mouse trajectory in embedded data
        Qualtrics.SurveyEngine.setEmbeddedData('mouse_trajectory', mouseTrajectoryString);
    });
});

The new things added are:

// Event listeners for squares
    square1.addEventListener('click', function() {
        if (numTrials < maxTrials) { // check if the number of trials is less than the max
            square1.style.background = 'grey'; // Change red to grey
            square2.style.background = 'red'; // Change grey to red
            numTrials++; // increment the number of trials
            
            if (numTrials >= maxTrials) { // if max trials reached
                this.clickNextButton(); // advance to next question
            }
        }
    }.bind(this)); // use bind to reference Qualtrics.SurveyEngine

This helps check whether the maximum trial is reached, using:

if (numTrials >= maxTrials) 

If its reached, advance to the next question using:

if (numTrials >= maxTrials) { // if max trials reached
                this.clickNextButton(); // advance to next question
            }