Millisecond Forums

Participants Experiencing Black Screen when Viewing HTML Instruction File

https://forums.millisecond.com/Topic31441.aspx

By BryceUWM - 4/28/2021

Hi there!

Some of our participants are experiencing a black background for the HTML instruction file we are using to introduce our experiment. The HTML files look fine when viewing them on my laptop and desktop computer (within a chrome and when using the inquisit app). She stated she has a Mac, but I'm not sure why this would be an issue. I assumed the App works without a browser, but could the browser (e.g., Safari) possibly cause an issue?

I've attached a screenshot of how it looks and here is the HTML code.

I would greatly appreciate any input on this issue!

Thank you so much!
Bryce

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>


<body>

<center><font size="+1" face="verdana">Awesome! Isn't it easy? ๐Ÿ˜Š
<strong><</strong> for the arrow pointing to the <strong>left</strong>, and <strong>></strong> for the arrow pointing to the <strong>right</strong>. </font> <font size="+1" face="verdana">
</font></center> <br>

<center><font size="+1" face="verdana"><strong><font color="red">NOTE: </font></strong></font><font size="+1" face="verdana">Sometimes, the arrow is shown first followed by <strong> a RED <font size="+1" face="verdana" color="red">X</font> </strong> placed on top of the arrow,<br> indicating that you have to <strong>STOP</strong> your response on that trial. <br> Please make sure your screen is bright enough to easily see the <font size="+1" face="verdana" color="red"><strong>X</font></strong>.<br>

</font></center>

<center>
<table width="900" border="0">
<tr>
  <p><td><center><img src="ssrt_leftarrow.jpg" width="100" height="100"></td></center>
  <td><center><img src="ssrt_leftarrowredx.jpg" width="100" height="100"></td></center></p>
</tr>
<tr>
  <p><td><center><font size="+1" face="verdana" color="blue">When there is NO red X placed over the arrow: <br>
  Press "F" </font></center></td>
  <td><center><font size="+1" face="verdana" color="red">When a red <strong>X</strong> is placed over the arrow:<br>
   Do NOT press any key</p>
</font></center></td>
</tr>
</table>
</center>
<font size="+1" face="verdana">

<center>On about half of the trials, the red <font size="+1" face="verdana" color="red"><strong>X</font></strong> will be presented <em>RIGHT AFTER</em> the go stimulus (= arrow) appears. <br> You will notice that it is easy to stop your response on these trials.<br>
<p>Press <strong>&quot;X&quot;</strong> to continue.</p></center>
<p><br>
 <br>
</p>
<p>&nbsp;</p>
</font>
</body>
</html>
By Dave - 4/28/2021

BryceUWM - 4/29/2021
Hi there!

Some of our participants are experiencing a black background for the HTML instruction file we are using to introduce our experiment. The HTML files look fine when viewing them on my laptop and desktop computer (within a chrome and when using the inquisit app). She stated she has a Mac, but I'm not sure why this would be an issue. I assumed the App works without a browser, but could the browser (e.g., Safari) possibly cause an issue?

I've attached a screenshot of how it looks and here is the HTML code.

I would greatly appreciate any input on this issue!

Thank you so much!
Bryce

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>


<body>

<center><font size="+1" face="verdana">Awesome! Isn't it easy? ๐Ÿ˜Š
<strong><</strong> for the arrow pointing to the <strong>left</strong>, and <strong>></strong> for the arrow pointing to the <strong>right</strong>. </font> <font size="+1" face="verdana">
</font></center> <br>

<center><font size="+1" face="verdana"><strong><font color="red">NOTE: </font></strong></font><font size="+1" face="verdana">Sometimes, the arrow is shown first followed by <strong> a RED <font size="+1" face="verdana" color="red">X</font> </strong> placed on top of the arrow,<br> indicating that you have to <strong>STOP</strong> your response on that trial. <br> Please make sure your screen is bright enough to easily see the <font size="+1" face="verdana" color="red"><strong>X</font></strong>.<br>

</font></center>

<center>
<table width="900" border="0">
<tr>
  <p><td><center><img src="ssrt_leftarrow.jpg" width="100" height="100"></td></center>
  <td><center><img src="ssrt_leftarrowredx.jpg" width="100" height="100"></td></center></p>
</tr>
<tr>
  <p><td><center><font size="+1" face="verdana" color="blue">When there is NO red X placed over the arrow: <br>
  Press "F" </font></center></td>
  <td><center><font size="+1" face="verdana" color="red">When a red <strong>X</strong> is placed over the arrow:<br>
   Do NOT press any key</p>
</font></center></td>
</tr>
</table>
</center>
<font size="+1" face="verdana">

<center>On about half of the trials, the red <font size="+1" face="verdana" color="red"><strong>X</font></strong> will be presented <em>RIGHT AFTER</em> the go stimulus (= arrow) appears. <br> You will notice that it is easy to stop your response on these trials.<br>
<p>Press <strong>&quot;X&quot;</strong> to continue.</p></center>
<p><br>
 <br>
</p>
<p>&nbsp;</p>
</font>
</body>
</html>

It may be that webkit (the engine underlying Safari) defaults to black background when the OS's chosen color scheme is Dark Mode or that it assumes transparent background color if none is explicitly defined (it's not behaving like that on my system, but I may well be missing some setting hidden deeply somewhere). To be on the safe side, try setting the HTML's background color to white and that should give identical results on under all circumstances.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>


<body style="background-color:white;">

<center><font size="+1" face="verdana">Awesome! Isn't it easy? ๐Ÿ˜Š
<strong><</strong> for the arrow pointing to the <strong>left</strong>, and <strong>></strong> for the arrow pointing to the <strong>right</strong>. </font> <font size="+1" face="verdana">
</font></center> <br>

<center><font size="+1" face="verdana"><strong><font color="red">NOTE: </font></strong></font><font size="+1" face="verdana">Sometimes, the arrow is shown first followed by <strong> a RED <font size="+1" face="verdana" color="red">X</font> </strong> placed on top of the arrow,<br> indicating that you have to <strong>STOP</strong> your response on that trial. <br> Please make sure your screen is bright enough to easily see the <font size="+1" face="verdana" color="red"><strong>X</font></strong>.<br>

</font></center>

<center>
<table width="900" border="0">
<tr>
<p><td><center><img src="ssrt_leftarrow.jpg" width="100" height="100"></td></center>
<td><center><img src="ssrt_leftarrowredx.jpg" width="100" height="100"></td></center></p>
</tr>
<tr>
<p><td><center><font size="+1" face="verdana" color="blue">When there is NO red X placed over the arrow: <br>
Press "F" </font></center></td>
<td><center><font size="+1" face="verdana" color="red">When a red <strong>X</strong> is placed over the arrow:<br>
 Do NOT press any key</p>
</font></center></td>
</tr>
</table>
</center>
<font size="+1" face="verdana">

<center>On about half of the trials, the red <font size="+1" face="verdana" color="red"><strong>X</font></strong> will be presented <em>RIGHT AFTER</em> the go stimulus (= arrow) appears. <br> You will notice that it is easy to stop your response on these trials.<br>
<p>Press <strong>&quot;X&quot;</strong> to continue.</p></center>
<p><br>
<br>
</p>
<p>&nbsp;</p>
</font>
</body>
</html>