Millisecond Forums

Displaying an image in a survey page

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

By ornate - 1/25/2015

Hello, 

I've been trying to build a survey page which displays an image in the background. The image should cover the entire screen, and the questions need to appear on top of it.
So far, I've managed to build a simple page which presents a background image (a picture element, defined in the stimulus frames of the survey page) and a textbox question. That works fine. However, when I tried to build a more more complicated surveypage I ran into difficulties.

When I tried to present the picture using the stimulusframes attribute, The image and the sliders of the questions (whose vertical position was determined using a counter) were displayed, but the text of the questions and the slider labels and anchors were missing. 

When I tried to present the picture as an image item included in the questions of the survey page, all the elements of the page are displayed but the position of the image is off. Any ideas and suggestions on how to solve this problem would be greatly appreciated!
Thanks
By Dave - 1/25/2015

> When I tried to present the picture as an image item included in the questions of the survey page, all the elements of the page
> are displayed but the position of the image is off.

<image> elements -- like all other survey question types -- are left-aligned. You need to take that into account when positioning the image.

<survey mysurvey>
/ pages = [1=mypage]
</survey>

<surveypage mypage>
/ questions = [1=bg; 2=c1; 3=q1; 4=q2]
</surveypage>

<caption c1>
/ caption = "Please answer the following questions:"
</caption>

<image bg>
/ items = ("background.jpg")
/ position = (0%,0%)
/ imagesize = (100%, 100%)
</image>

<slider q1>
/ caption="How do you feel about bananas?"
/ labels=("Cold", "Hot")
/ range = (0, 100)
/ increment = 1
</slider>

<radiobuttons q2>
/ caption="Who was the first president of the United States:"
/ options=("George Washington", "Abraham Lincoln", "Thomas Jefferson")
/ required=true
</radiobuttons>
By ornate - 1/26/2015

Hi dave, 
I defined the position and size of the image the same way (positioned at 0% 0%, size 100%, 100%). When I don't define the window size in the experiment defaults, the image doesn't fill the entire screen and there is a gap on the right (marked in red in the print screen below):




When I define the window size as 800x600 (I need to ensure the display works well in other settings, since I plan on running it using Inquisit Web), the image doesn't stretch to fit the display and there is a gap on the lower part of the screen:

https://www.millisecond.com/forums/uploads/images/c8aed5c3-ebe8-4b29-9f36-15e9.png



By Dave - 1/26/2015

That's correct and it is the expected behavior -- Inquisit will never distort image dimensions (i.e. stretch or shrink), it will always retain the image's inherent aspect ratio.
By Dave - 1/26/2015

Having pondered this for a little while, there are basically two options I can see to deal with this in Inquisit 3:

(1) Use the <defaults> element's /windowsize attribute to display the script in a known aspect ratio (e.g. 4:3 at 800px * 600px).

(2) /branch to different versions of your <surveypage>s based on a machine's display properties (and hence the screen's aspect ratio). The relevant information is exposed via the built-in display.height and display.width properties.

In Inquisit 4, you'd have some additional settings via /canvassize and /canvasaspectratio or could use conditional <include> elements to load an <image> element applicable to the given system's display properties (those mentioned under #2 above).

Hope this helps.