0

I'm trying to count the number of mouse clicks for participants playing a video game that I've embedded into the survey platform Qualtrics (i.e., with an iframe). I've adapted the code from (https://math.bu.edu/people/jackwalt/qualtrics-mousetracking/) that spits out the x/y mouse coordinates every 10 ms. However, I cannot get the code to also count the number of mouse clicks that occur within the iframe window. It's pretty easy to get it to count the clicks outside the iframe though. When I run this code it will give me a count of "0" in the data output (i.e., a column in a csv file) but now it also won't give me the x/y coordinates like it originally did. The counting is supposed to occur with the addclick function.I'm assuming I put things in the wrong order/place.

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/
Qualtrics.SurveyEngine.addOnPageSubmit(function(type)
{
    if(type == "next")
    {
        Qualtrics.SurveyEngine.setEmbeddedData("xPos", delayedXPos.join());
        Qualtrics.SurveyEngine.setEmbeddedData("yPos", delayedYPos.join());
        Qualtrics.SurveyEngine.setEmbeddedData("time", delayedTime.join());
        Qualtrics.SurveyEngine.setEmbeddedData("click", numberOfClicks); // Store the number of clicks;
            }
});

});
document.onmousemove = getMousePosition;

//set document to record mouse position


//initialize arrays
var delayedXPos = new Array();
var delayedYPos = new Array();
var delayedTime = new Array();

var iframe = document.getElementById('myFrame');

var xPos = new Array();
var yPos = new Array();


//initialize time variables
var initTime = new Date().getTime();
var timer_is_on=0;
var t;

//time interval for data collection in ms
var dt=10;
let numberOfClicks = 0;

//flag signaling whether getMousePosition has been called
mp_called = 0;

//function that determines action when mouse moves
function getMousePosition(mp)
{
 var divPos = getPosition(document.getElementById("Questions"));
 xPos.push(mp.pageX - divPoss0]);
 yPos.push(mp.pageY - divPoss1]);
 mp_called = 1;
 return true;
}


function addclick() 
{
iframe.addEventListener('load', function() {
// Access the content of the iframe
var iframeContent = iframe.contentDocument || iframe.contentWindow.document;
numberOfClicks++;
document.getElementById('clicks').innerHTML = numberOfClicks;
});
}


iframeContent.addEventListener("click", addclick);

function timedCount()
{
 if(mp_called){
   delayedXPos.push(xPossxPos.length-1]);
   delayedYPos.push(yPossyPos.length-1]);
   var timeInSec = (new Date().getTime()-initTime) / 1000.;
   delayedTime.push(timeInSec);
  }
  t=setTimeout("timedCount()",dt);
}

function doTimer()
{
 if (!timer_is_on)
 {
  initTime = new Date().getTime();
  timer_is_on=1;
  timedCount();
 }
}

function getPosition(obj){

var topValue= 0,leftValue= 0;

while(obj)
{
 leftValue+= obj.offsetLeft;
 topValue+= obj.offsetTop;
 obj= obj.offsetParent;
}

return  leftValue, topValue];
}

//start collecting data after page loads
document.onload = doTimer();


Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

    });

Also here is the HTML code for the embedded game:

<iframe id="myFrame" src="https://minmaxia.com/c2/" width="1024" height="800" style="border:1px solid black;" title="clickpocalypse 2"></iframe>

I'm not sure where I've gone wrong, any help would be much appreciated!!