Use timer for items in a random generator based question

Question

Hello!
We would like to show a series of pictures in random order, with presenting the picture for 50ms, then hiding the picture and displaying a question, when the participant answered, it should move on to the next picture.
So far we implemented that using the random generator function and combining that with a timer (java script).
The is the php code:

   // loopPage(48) provides a number between 0 and 48 (plus one at every repetition)
$i = loopPage(48);  // Here you can enter the number of images you want to show

// Show the chosen picture
$varID = 'FP01x'.sprintf('%02d', $i + 1);  // Variable IDs are FP01x01 to FP01x20
$img = value($varID, 'label');

// The HTML-Tag <img> shows one image, the filename will be shown with src 
html('
  <div style="margin: 3em; text-align: center">
    <img src="'.$img.'" alt="" />
  </div>
');


// Create the fitting question ID and show the question using question()
question('EM'.sprintf('%02d', $i + 1))

This is the java script code:

   <script type="text/javascript">
<!--
  SoSciTools.submitButtonsHide();
  SoSciTools.attachEvent(window, "load", function(evt) {
  // don't show question and next button
  document.getElementById("EM01").style.display = "none";

  // Start Timer 
  window.setTimeout(next, 50);

  // Hide picture and show question
  document.getElementById("FP01").style.display = "none";
  document.getElementById("EM01").style.display

});
</script>

I'm not sure why the time function does not work in terms of displaying/hiding the picture/question? Any help with this would be much appreciated!
Thank you!
All the best,
Hedwig

Answer 1

When working with short presentation times (50 ms = 3 frames on the screen), you should be aware of a few things:

• The browser requires a fw ms to create the page - depending on the computer this is usually <10 ms.
• The screen does only refesh 50 or 100 times per second, giving you an inaccuracy of about 16ms.
• It may require quite some time for the browser to retrieve the image from the server. You shall preload all images to the browser cache before displaying them.
• If requires longer to display an image for the first time, then to display it, after it has been hidden. If you're working with large images, you may have to display and hide the image, to display them later in the experiment (but on the same page). This is, what the AMP module in SoSci Survey does (only available when bought separately).

So my first suggestion would be to preload the images (Googel will tell you how). Any my second suggestion is that you start with the image hidden (display="none"), and then start you JavaScript not before the page has been loaded (completely, see window.onload). Then let your JavaScript display the image, and hide it after 50 (or 60) ms. Then display the question.

If you use Firefox, you can track the processing times very accurate, using the developer tools.

Answer 2

Okay, I get the timing issue.
Regarding how to combine the PHO code and the java script, I still seem to do something wrong as the picture is presented with the question at the same time and does not disappear.

On the same page I included first the random generator question (FP01),
then this PHP code that includes the preload now:

// loopPage(48) provides a number between 0 and 48 (plus one at every repetition)
$i = loopPage(48);  // Here you can enter the number of images you want to show

// Show the chosen picture
$varID = 'FP01x'.sprintf('%02d', $i + 1);  // Variable IDs are FP01x01 to FP01x20
$img = value($varID, 'label');

// The HTML-Tag <img> shows one image, the filename will be shown with src 
html('
  <div id="preload">
  <div style="margin: 3em; text-align: center">
    <img src="'.$img.'" alt="" />
  </div>
');

// Create the fitting question ID and show the question using question()
question('EM'.sprintf('%02d', $i + 1));

And then this java script, that now includes hiding the picture first and loading the page thereafter:

<script type="text/javascript">
<!--
  //hide next button
  SoSciTools.submitButtonsHide();

  //hide picture initially
  document.getElementById("FP01").style.display = "none";
  //load page
  SoSciTools.attachEvent(window, "load", function(evt) {
  // don't show question and next button
  document.getElementById("EM01").style.display = "none";
  SoSciTools.submitButtonsHide();

  // Start Timer 
  window.setTimeout(next, 60);

  // Hide picture and show question
  document.getElementById("FP01").style.display = "none";
  document.getElementById("EM01").style.display

});
</script>

Comments

Great, and then I assume that I can use php to add randomised prime pictures? (replacing the img that I now put into the "prime" field?)

---

It should work to use a series of placeholders, i.e., <img src="%image1%" alt="">, and prepare these placeholders with PHP, yes.

---

Brilliant, thank you!
Just one more question: when that question “starts” one of the images flickers on the screen, where could that come from?
See this pretest view:
https://www.soscisurvey.de/PersonalityRWAemotion/?act=YVlzGYR56L8eodod8OAFlPft

Thanks!

---

That's actually not a but, it's a feature: It is not one image that flickers, but all off them (overlayed - reload the page a few times, to see that). This ensures that the images are not only preloaded, but also pre-rendered by the browser when they are needed. It was a learning from out AMP implementations, that the first rendering of an image could take e.g. 20 ms. If your display time is only 50 ms overall, the effective time shrinks to 30 ms.

Pre-rendering unfortunately requires the image to actually appear on the screen. This is why there's a "flicker" before the first item.

---

Okay, got it, thank you!