Split screen and iframe #1674

sebgok · 2021-03-26T02:33:17Z

sebgok
Mar 26, 2021

Hello,

I was looking for a way to do the following thing in jsPsych. I'm wondering if that's possible:

When using a multiple choice or instructions plugin, i want to divide the screen vertically into two halves, embed a link on the left part of the screen and use the regular multiple choice/instructions plugin on the right. I tried it with instructions plugin by putting some html code in "pages" but when I did it, the "next" button was not clickable anymore.

Answered by jodeleeuw

Mar 30, 2021

Hi @sebgok,

I was able to find a solution by using jsPsych's ability to display in a specific HTML element on the page.

I set up a page with a <div> for the jsPsych experiment and an <iframe> of content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="jspsych-6.3.0/jspsych.js"></script>
    <script src="jspsych-6.3.0/plugins/jspsych-html-button-response.js"></script>
    <script src="jspsych-6.3.0/plugins/jspsych-call-function.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="jspsych-6.…

View full answer

jodeleeuw · 2021-03-30T21:15:25Z

jodeleeuw
Mar 30, 2021
Maintainer

Hi @sebgok,

I was able to find a solution by using jsPsych's ability to display in a specific HTML element on the page.

I set up a page with a <div> for the jsPsych experiment and an <iframe> of content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="jspsych-6.3.0/jspsych.js"></script>
    <script src="jspsych-6.3.0/plugins/jspsych-html-button-response.js"></script>
    <script src="jspsych-6.3.0/plugins/jspsych-call-function.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="jspsych-6.3.0/css/jspsych.css"
    />
    <style>
      #iframe-target {
        width: 48vw;
        height: 100vh;
        float: left;
        display: none;
      }
      #jspsych-target { 
        height: 100vh;
        width: 100vw;
        margin: 0;
        padding: 0;
        float:right
      }
    </style>
  </head>
  <body>
    <iframe id="iframe-target" src="https://www.jspsych.org">
    </iframe>
    <div id="jspsych-target"></div>
  </body>
  <script src="task.js"></script>
</html>

The iframe starts as not displayed (display: none;) and the experiment div is set to take up the whole screen. During the experiment, I used the call-function plugin to change the CSS and give the iframe half the width and the experiment the other half. You can run whatever jsPsych code you want while this happens, and then I used the call-function plugin again to reset the CSS.

var trial = {
  type: 'html-button-response',
  stimulus: 'This is before the iframe shows up',
  choices: ['Hi there']
}

var start_iframe = {
  type: 'call-function',
  func: function(){
    document.querySelector('#iframe-target').style.display = 'block';
    document.querySelector('#jspsych-target').style.width = '48vw';
  }
}

var quiz = {
  type: 'html-button-response',
  stimulus: '<p>Take a look at the webpage on the left. Is it helpful?</p>',
  choices: ['No', 'Yes']
}

var quiz2 = {
  type: 'html-button-response',
  stimulus: '<p>Second question. Is it complicated?</p>',
  choices: ['No', 'Yes']
}


var stop_iframe = {
  type: 'call-function',
  func: function(){
    document.querySelector('#iframe-target').style.display = 'none';
    document.querySelector('#jspsych-target').style.width = '100vw';
  }
}

var last = {
  type: 'html-button-response',
  stimulus: 'Bye!',
  choices: ['Done']
}

jsPsych.init({
  timeline: [trial, start_iframe, quiz, quiz2, stop_iframe, last],
  display_element: 'jspsych-target'
})

Here's the demo of the task. You can see my code on Glitch.

0 replies

sebgok · 2021-04-26T16:52:21Z

sebgok
Apr 26, 2021
Author

Thank you, Josh! This code works great.
However, I had an additional issue when I add consent form to it. The style changes. Here is how part of my html code looks like:

<link 
           rel='stylesheet'
           type='text/css'
           href="jspsych/css/jspsych.css"
       />
       <style>
           #iframe-target {
               width: 48vw;
               height: 100vh;
               float: right;
               display: none;
           }
           #jspsych-target {
               height: 70%;
               width: 100vw;
               margin: 0;
               padding: 0;
               float: left
           }     
       </style>
   </head>
   <body>

       <iframe id="iframe-target" src="https://pcl.sitehost.iu.edu/XXXXXXXXX.html">
       </iframe>
       <div id='jspsych-target'></div> <div id="consent">
   		<p class="lead_right">IRB Study #XXXX</p>
         <h1>IXXXXXXXX</h1>
                            XXXXXXXX
   				<p><input type="checkbox" id="consent_checkbox" />I agree to take part in this study.</p>
   		<button type="button" onclick="this.blur();start_experiment();">Start Experiment</button>
   	</div>
 
   </body>
   <script>

Here is how the style changes from without the consent div to with the consent div:

2 replies

jodeleeuw Apr 26, 2021
Maintainer

Try moving <div id="consent"> inside the <div id="jspsych-target">. When the jsPsych experiment starts it will overwrite the consent HTML and everything should line up nicely again.

sebgok Apr 26, 2021
Author

Thank you for response, Josh! I did the following change, and now what happens is after the consent page appears 0.5 seconds, the page turns to blank:

   <iframe id="iframe-target" src="https://pcl.sitehost.iu.edu/XXXXXXXXX.html">
   </iframe>
   <div id='jspsych-target'><div id="consent"> 
	<p class="lead_right">IRB Study #XXXX</p>
     <h1>IXXXXXXXX</h1>
                        XXXXXXXX
			<p><input type="checkbox" id="consent_checkbox" />I agree to take part in this study.</p>
	<button type="button" onclick="this.blur();start_experiment();">Start Experiment</button>
</div></div>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Split screen and iframe #1674

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Split screen and iframe #1674

Uh oh!

Uh oh!

sebgok Mar 26, 2021

Replies: 2 comments · 2 replies

Uh oh!

jodeleeuw Mar 30, 2021 Maintainer

Uh oh!

sebgok Apr 26, 2021 Author

Uh oh!

jodeleeuw Apr 26, 2021 Maintainer

Uh oh!

sebgok Apr 26, 2021 Author

sebgok
Mar 26, 2021

Replies: 2 comments 2 replies

jodeleeuw
Mar 30, 2021
Maintainer

sebgok
Apr 26, 2021
Author

jodeleeuw Apr 26, 2021
Maintainer

sebgok Apr 26, 2021
Author