Displaying an image in a survey page


Author
Message
ornate
ornate
Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)
Group: Forum Members
Posts: 13, Visits: 30
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

Dave
Dave
Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)
Group: Administrators
Posts: 9.9K, Visits: 49K
> 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>
ornate
ornate
Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)Esteemed Member (1.6K reputation)
Group: Forum Members
Posts: 13, Visits: 30
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




Dave
Dave
Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)
Group: Administrators
Posts: 9.9K, Visits: 49K
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.

Dave
Dave
Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)Supreme Being (776K reputation)
Group: Administrators
Posts: 9.9K, Visits: 49K
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.

Edited 5 Years Ago 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