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

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!