0 votes
in SoSci Survey (English) by s166545 (130 points)

Dear support team,

I want to show this website as a stimulus for the survey. Following is the HTML code I used to do it.

However, with this code, the participant can not see the "next" button anymore and can not move forward. How should I deal with these?

Thanks!

by s166545 (130 points)
Here is the code

<iframe id="Video"
src="https://fynnye.github.io/stimulus2/site2/Situation-2.html "
style="position:fixed;
top:0; left:0; bottom:0; right:0; width:100%;
height:100%; border:none; margin:0; padding:0;
overflow:hidden; z-index:999999;"></iframe>

1 Answer

0 votes
by SoSci Survey (302k points)

One obvious option would be to leave a bit at the bottom space of the screen and place the "next" button there:

<iframe ... style="...bottom: 30px;..."></iframe>

You will need some similar positioning for the next button to appear at the very bottom.

Another option is to automatically use SoSciTools.submitPage() based on some condition, e.g., after a certain time. You may also place the HTML files in the project directory, which will allow communication between the frames. Usually XSS-prevention of the browsers disallow that.

by s166545 (130 points)
I tried to use "bottem:30 px" or even "500px", but nothing happened on the website. Shouldn't I change anything else? And how could I put the "next" button on the bottom?

In my case, participants should decide the time they view the website, so an automatic display would not be very suitable.  

Thanks!
by SoSci Survey (302k points)
Hard to answer without the proper context. If you posted a preview URL, I should be able to give better answers. Probably "height" should also be removed from the CSS attribute.

> And how could I put the "next" button on the bottom?

You may try this:

html(
  '<div style="position: absolute; bottom: 0; text-align: center;">'.
  buttonCode('next').
  '</div>'
);

Again, it will need some fiddling with the details to achieve the optimal layout.
by s166545 (130 points)
Hello, this is the URL of the site:

https://fynnye.github.io/stimulus2/site2/Situation-2.html

thanks in advance!
by SoSci Survey (302k points)
We will need the questionnaire page with the button and <iframe>, not the content of the <iframe>. See https://www.soscisurvey.de/help/doku.php/en:survey:pretest
by s166545 (130 points)
Hey, this is the link for pretest:

https://www.soscisurvey.de/Adblocker1/?act=iRHw6QvJYVJkcL86OcasZ7cP

I think the origin "next" button is hidden by the site.

Note: at first, I used HTML code to make the site display automatically but I get the feedback from the pretest of participants that they want to decide the time themselves and use the "next button". That's why I am here.

Thanks!
by SoSci Survey (302k points)
The links seems to lead to the first page. Please create a link to the respective page, thank you.
by s166545 (130 points)
This is a page before the page which uses the iframe, jplease click the "next" button to the respective page.

https://www.soscisurvey.de/Adblocker1/index.php?i=NJBHM1I82TEP&rnd=JVIK
by SoSci Survey (302k points)
As far as I could see in the moments before the page changed, there is still bottom:0 in the CSS code. However, please create a "real" pretest URL that leads directly to the respective page (or the one before), so I can open the URL more often.
by s166545 (130 points)
Hello, it seems that because of the auto display, the link has changed to the question page when you opened it. I just delete the code and I think this is now the "real" URL you referred to. Thanks!

https://www.soscisurvey.de/Adblocker1/index.php?i=LU4SJWKQAFTK&rnd=ARNN
by SoSci Survey (302k points)
This is the URL of a single interview (i=...). A pretest URL has an act=... in it. Like the one that you posted above, but please create one that leads to the proper page.
by s166545 (130 points)
Actually, the URL was from the pretest page. However, since you want the respective page, instead of the first page, when I continue to click to that page, the URL changes to another one, which does not have an "act=" in it anymore.

The first page of the pretest is:

https://www.soscisurvey.de/Adblocker1/?act=iRHw6QvJYVJkcL86OcasZ7cP

The respective page (page before stimulus) is:
https://www.soscisurvey.de/Adblocker1/index.php?i=Q2KGBIG79DYH&rnd=ZEOY

Thanks
by SoSci Survey (302k points)
> However, since you want the respective page, instead of the first page, when I continue to click to that page, the URL changes

When you create a pretest URL, you can enter the page where to start in the upper right corner of the form.
by s166545 (130 points)
Thanks for the quick response! I get it, here is the page before the stimulus.

https://www.soscisurvey.de/Adblocker1/?act=0QbzwoeK64YMakHsw8sh9FFr

Thanks!
by SoSci Survey (302k points)
Okay, the iFrame is now where it should be. Good.

The problem now is that the questionnaire dows not yet fill the whole page. Please add the follwing PHP code to the page:

pageCSS('
  div.questionnaire {
    position: absolute;
    height: 100vh;
    top: 0;
    bottom: 0;
  }
  #buttonsAuto {
    position: absolute;
    bottom: 0;
  }
');

That should place the button(s) below the iFrame.
by s166545 (130 points)
I might make some mistakes with the code since it still does not work. Can you check my code again?

I used firstly HTML code as follows:

<iframe id="Video"
src="https://fynnye.github.io/stimulus1/site1/Situation-1.html"
style="position:fixed;
top:0; left:0; bottom:50px; right:0; width:100%;
height:95%; border:none; margin:0; padding:0;
overflow:hidden; z-index:999999;"></iframe>

Then I put the PHP code as you just suggested:

pageCSS('
  div.questionnaire {
    position: absolute;
    height: 100vh;
    top: 0;
    bottom: 0;
  }
  #buttonsAuto {
    position: absolute;
    bottom: 0;
  }
');

Is there anything wrong?
by SoSci Survey (302k points)
Oh, sorry in that layout it must be: div.questionary (in the second line of the PHP code).
by s166545 (130 points)
Thanks! It works!

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...