Recording key press during the experiment...

Question

Hi! I'm working on a perceptual experiment, which should record the time stamps of the keypress (the space bar) during the video play. How do I embed it in the script?

Also, I'm curious about the upper limit of key press rate that can be registered on SoSci Survey - How fast are participants "allowed" to press? Is there a fixed latency between keypress and the time record, or does it depend on every participant's device?

Thank you so much!

Answer 1

Well, I have a good message for you and ... well, another one.

The good mesage is that you are about to learn something new, JavaScript. The other message is that you will have to do that learning.

First thing you should become clear about is how you want to store the times. The easiest solution was a comma-separated list of timestamps, e.g.

1234, 1345, 1456, ...

Make sure you can work with that later in your analysis. If not, you can also store the timestamps into different variables, but that will limit data collection to a specific number of key presses.

SO, how to record the timestamps? YOu need an internal variable on the page (assume its ID is IV01_01), and your video HTML tag needs an HTML ID, let's assume the ID is myVIdeo.

So, you can simply write the timestamp to the internal variable whenever the space bar is pressed.

var input = document.getElementById("IV01_01");
var video = document.getElementById("myVideo");
document.addEventListener("keydown", function(objEvent) {
    if (objEvent.keyCode == 32) {
         input.value = input.value + ", " + video.currentTime;
    }
});

upper limit of key press rate

That will depend on the system and browser the respondent is using. Let's assume that humans will not be able to outpress a halfway modern computer.

Is there a fixed latency between keypress and the time record

Unless the device is under heavy load, this latency will be much smaller than human response time. Usually you can assume an accuracy of about 1-2 frames. When you have 60 Hz, that is about 20-30 millisconds. Note: There is no use in trying to reduce the latency unless your respondents have a faster screen.

Comments

Thank you so much!! I will try incorporating the code, and will come back to you if it works (also, in case anyone sees this wants to know how it works in the end).

---

Hi there! The good news is, it works really well :) The other news though, is that I'm having trouble recording this text input as a variable to my data output. I've tried to save the keypress as an internal variable, but it did not appear in the data.

Here's how it looks on my script:

//Play video and allow keypress input
<video width="500" height="400" id="stimulus">
  <source src="myVideo.mp4" type="video/mp4" />
</video>
<input type="text" id="timestamp" />

//Recording the time stamps
<script type="text/javascript">
<!--
var input = document.getElementById("timestamp");
var video = document.getElementById("stimulus");

document.addEventListener("keydown", function(evt) {
    if (evt.keyCode == 32) {
         input.value = input.value + ", " + video.currentTime;
    }
});

//Store time stamps of key press as an internal variable
document.getElementById("timestamp").value = time.stamp;

// -->
</script>

But the variable did not appear on my data. Did I miss anything?
Again, many thanks!

---

>  I've tried to save the keypress as an internal variable, but it did not appear in the data.

Did you drag the internal variable on the page (above the script)?
https://www.soscisurvey.de/help/doku.php/en:create:questions:internal

What ist the part that works?

And what does the browser's javascript console (e.g., Ctrl+Shift+I) say?

You're also welcome to post a pretest URL that leads directly (!) to the respective page in your questionnaire.

---

Awesome! I came across your intro about the internal variable just after posting the reply this morning. I will give it a try :) The page right now works, only that the timestamps appear under the video, and cannot be recorded (demo: https://www.soscisurvey.de/6_1demo/).

My supervisor and I at Uni Hamburg are hoping to talk to you via email about potentially working together on this as a novel approach & a promising method that the music psych community adopt frequently. Would you be so kind to leave your email address?

Best,

---

>  The page right now works, only that the timestamps appear under the video

Looks like you have inserted an input manually:

<input type="text" id="timestamp" placeholder="Type here" value="">

And this works together with that line:

var input = document.getElementById("timestamp");

So, if you just removed the above input, put an internal variable on the page (let's say IV01_01) and then replaced the line to define which input to use, you shall be done:

var input = document.getElementById("IV01_01");

> My supervisor and I at Uni Hamburg are hoping to talk to you via email

You can write me to info@soscisurvey.de, but please be aware that I am a bit slow in answering emails and we'll also start into our summer vacation in few days.