Logging Keypresses within iFrame - is it possible?? | XM Community
Skip to main content

Hello everyone,
I am trying to create a survey with a little tetris game (URL) within my Qualtrics Survey and would like to record the participants key presses, specifically the space-bar. For that I have created the iframe like this:

And in my Question, I have put the following javascript to record the spacebar presses:
image.pngI have also added an embedded data field in the survey builder: "space_counter"
Unfortunately the code doesn't work with the iFrame and doesn't show up in the recorded data. (I tried it with other questions without an iFrame and it works fine)
How can I log the keypresses that are happening in the iFrame (tetris game)? Or is it technically impossible to solve?
Thank you so much for your help!

Birte
Just including a post I found on Stack Overflow. Let me know if it helps.
javascript - Listen for mouse click and keypress events within iframe - Stack Overflow

Thank you for your help! I checked out the link but the code only seems to work, if the domains of the parent and child page are from the same origin. I am using an iframe to open an URL to an online tetris game (https://lucasrmagalhaes.github.io/github-games/%22), which is not from the same source as Qualtrics.
Do you have any other alternatives in mind?
Thank you so much in advance!

Birte
I am not sure how useful this suggestion would be but hope it helps!
You can detect the iframe on the screen by using Intersection Observer https://github.com/WICG/IntersectionObserver
javascript - How to get the height and width of an iframe - Stack Overflow
Post which you can use something like (Use JavaScript to Detect What Key the User Pressed - CodeinWP):
window.addEventListener('keydown', function (e) {
document.querySelector('p').innerHTML = `You pressed ${e.key}`;
}, false);
It will detect the whole window for a keypress and not just within iFrame.
I also think you should have a look at this page if you are facing an issue of parent and child not from same source
javascript - How to use keypress event in an iframe input from its parent page? - Stack Overflow
Hope it helps!

Leave a Reply


Terms & Conditions