next button when I use iframe code?

Question

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!

Comments

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>

Answer 1

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.

Comments

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!

---

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.

---

Hello, this is the URL of the site:

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

thanks in advance!

---

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

---

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!

---

The links seems to lead to the first page. Please create a link to the respective page, thank you.

---

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

---

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.

---

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

---

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.

---

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

---

> 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.

---

Thanks for the quick response! I get it, here is the page before the stimulus.

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

Thanks!

---

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.

---

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?

---

Oh, sorry in that layout it must be: div.questionary (in the second line of the PHP code).

---

Thanks! It works!