Participants Experiencing Black Screen when Viewing HTML Instruction File


Participants Experiencing Black Screen when Viewing HTML Instruction...
Author
Message
BryceUWM
BryceUWM
New Member (4 reputation)New Member (4 reputation)New Member (4 reputation)New Member (4 reputation)New Member (4 reputation)New Member (4 reputation)New Member (4 reputation)New Member (4 reputation)New Member (4 reputation)
Group: Forum Members
Posts: 1, Visits: 2
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>
Attachments
Dave
Dave
Supreme Being (929K reputation)Supreme Being (929K reputation)Supreme Being (929K reputation)Supreme Being (929K reputation)Supreme Being (929K reputation)Supreme Being (929K reputation)Supreme Being (929K reputation)Supreme Being (929K reputation)Supreme Being (929K reputation)
Group: Administrators
Posts: 11K, Visits: 68K
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>

Edited Last Month by Dave
GO

Merge Selected

Merge into selected topic...



Merge into merge target...



Merge into a specific topic ID...




Reading This Topic

Explore
Messages
Mentions
Search