Picture in html element not displaying in web experiment


Author
Message
AKrishna
AKrishna
Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)
Group: Forum Members
Posts: 102, Visits: 337
Hi all,

I have a bit of niche problem - I've set up an online experiment after extensive offline testing (internal name PSPA). I tried it online one last time before starting data collection and noticed that the picture embedded in one of my html elements isn't showing up. I imagine this has to do with how the filename is parsed. For reference, my html file looks like this:

[code language="html"]<p align="center"><img src="<%picture.BobFace.item(1)%>" style="width:15%"></p><br><br>

<p style="font-family:verdana;font-size:120%;"><%if (values.PositivityStrength == "Highly Positive") item.InfoText.item(1) else item.InfoText.item(11)%></p>
<p style="font-family:verdana;font-size:120%;"><%if (values.PositivityStrength == "Highly Positive") item.InfoText.item(2) else item.InfoText.item(12)%></p>
<p style="font-family:verdana;font-size:120%;"><%if (values.PositivityStrength == "Highly Positive") item.InfoText.item(3) else item.InfoText.item(13)%></p>
<p style="font-family:verdana;font-size:120%;"><%if (values.PositivityStrength == "Highly Positive") item.InfoText.item(4) else item.InfoText.item(14)%></p>
<p style="font-family:verdana;font-size:120%;"><%if (values.PositivityStrength == "Highly Positive") item.InfoText.item(5) else item.InfoText.item(15)%></p>
<p style="font-family:verdana;font-size:120%;"><%if (values.PositivityStrength == "Highly Positive") item.InfoText.item(6) else item.InfoText.item(16)%></p>
<p style="font-family:verdana;font-size:120%;"><%if (values.PositivityStrength == "Highly Positive") item.InfoText.item(7) else item.InfoText.item(17)%></p>
<p style="font-family:verdana;font-size:120%;"><%if (values.PositivityStrength == "Highly Positive") item.InfoText.item(8) else item.InfoText.item(18)%></p>
<p style="font-family:verdana;font-size:120%;"><%if (values.PositivityStrength == "Highly Positive") item.InfoText.item(9) else item.InfoText.item(19)%></p>
<p style="font-family:verdana;font-size:120%;"><%if (values.PositivityStrength == "Highly Positive") item.InfoText.item(10) else item.InfoText.item(20)%></p>[/code]

The text is displayed as expected, so the Inquisit code is being parsed correctly. I'm not sure why the src attribute of the img element isn't working, though. I'd appreciate any input.

If anyone ends up testing the file, note that you can skip the first block of the main experiment to get to the problematic html display faster.

AKrishna
AKrishna
Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)Distinguished Member (3.2K reputation)
Group: Forum Members
Posts: 102, Visits: 337
And wouldn't you know, a minute after posting, I figured it out.

The filenames for the picture files in Inquisit (i.e. the contents of the items attribute for the picture elements) contained captial letters. I replaced those with case letters and now the picture displays

Dave
Dave
Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)
Group: Administrators
Posts: 12K, Visits: 100K
AKrishna - 5/29/2024
And wouldn't you know, a minute after posting, I figured it out.

The filenames for the picture files in Inquisit (i.e. the contents of the items attribute for the picture elements) contained captial letters. I replaced those with case letters and now the picture displays

Names of any files are converted to all lower case letters during upload, this is done for cross-platform compatibility purposes (*nix file systems are case-sensitive, Windows file systems are not). For stimulus elements (e.g. <picture>) Inquisit itself fully controls, it doesn't normally matter whether you've given file names in the script in all lowercase, uppercase or mixed case, it will convert the file name to all lowercase internally and automatically. HTML content is a little different, since Inquisit doesn't fully control that and URLs themselves are case-sensitive. I.e. example.com/img/a.jpg and example.com/img/A.jpg are not equivalent. Here, then, it becomes important to have file names in the script given in all lowercase, or -- if you want to get fancy -- apply tolower() in the HTML source.

<img src="<%tolower(picture.BobFace.item(1))%>" style="width:15%">


(As an aside: I've developed the habit of always using strictly lowercase file names from the get-go as a "defensive programming" measure, so I don't ever have to think about or worry about things like this in scripts I write. For fixing up or revising scripts from other sources and long item lists in upper or mixed case, converters like https://convertcase.net/ are a handy tool.)

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