Move EFP changes to production

app/components/exp-lookit-iframe/component.js

@@ -0,0 +1,56 @@
+import layout from './template';
+import ExpFrameBaseComponent from '../exp-frame-base/component';
+import { addSearchParams } from '../../utils/add-search-params';
+import $ from 'jquery';
+
+
+export default ExpFrameBaseComponent.extend({
+    type: 'exp-lookit-iframe',
+    layout: layout,
+
+    frameSchemaProperties: {
+        iframeSrc:{
+            type:'string'
+        },
+        iframeHeight:{
+            type:'string',
+            default:"700px"
+        },
+        iframeWidth:{
+            type:'string',
+            default:'100%'
+        },
+        optionalText:{
+            type:'string'
+        },
+        optionalExternalLink:{
+            type:'boolean'
+        }
+    },
+
+    meta: {
+        data: {
+            type: 'object',
+            properties: {}
+        }
+    },
+
+    didReceiveAttrs() {
+        const iframeSrc = this.get('frameConfig.iframeSrc');
+        const hashChildId = this.get('session.hash_child_id');
+        const responseId =  this.get('session.id');
+        this.set('frameConfig.iframeSrc', addSearchParams(iframeSrc, responseId, hashChildId));
+        this._super(...arguments);
+    }
+
+});
+
+
+function enableNextbutton(){
+    document.querySelector('#nextbutton').removeAttribute('disabled')
+}
+
+$(function() {
+    setTimeout(enableNextbutton, 3000);
+    document.querySelector('iframe').onload = enableNextbutton
+});

app/components/exp-lookit-iframe/doc.rst

@@ -0,0 +1,107 @@
+.. _exp-lookit-iframe:
+
+exp-lookit-iframe
+==============================================
+
+Overview
+------------------
+
+A frame to display external websites within a Lookit study, such as surveys or tasks hosted on other platforms. A 'Next' button is 
+displayed beneath the iframe box that allows the participant to continue to the next Lookit frame.
+
+This frame is useful for embedding an externally-hosted webpage in the middle of a Lookit study. Importantly, the Lookit study has no 
+way of 'knowing' what sorts of interactions the participant has, or has not had, on the external website. For example, there is no way 
+to ensure that the participant has made a response on the external site before they click the 'Next' button to continue on with the 
+Lookit study. For this reason, if your study methods allow it, we suggest moving any externally-hosted surveys/tasks to the end of the 
+Lookit study. You can automatically direct participants to another website at the end of the Lookit study using the study's 
+'`Exit URL <https://lookit.readthedocs.io/en/develop/researchers-set-study-fields.html#exit-url>`_'.
+
+If you do need to embed an external website in the middle of a Lookit study, this frame includes the optionalText parameter, which 
+allows you to add text underneath the iframe box. You can use this text to help ensure the participant completes everything in the 
+iframe box before clicking the frame's 'Next' button, e.g. "Please make sure that you see the message 'Your response has been 
+submitted' in the box above before clicking the next button below."
+
+Another reason to use this frame is if you want to capture webcam video of participants while they are completing a task on 
+a site that doesn't provide webcam monitoring. While the participant is interacting with the externally-hosted webpage, you 
+can record webcam video for this frame by including the session recording frame 
+`exp-lookit-start-recording <https://lookit.readthedocs.io/projects/frameplayer/en/latest/components/exp-lookit-start-recording/doc.html#exp-lookit-start-recording>`_. 
+Note that any timing information collected by the external site (e.g. externally recorded response time after the external 
+page loads) will not necessarily correspond precisely to the Lookit frame timing information or exact onset of the resulting 
+video file (link to documentation: https://lookit.readthedocs.io/en/develop/researchers-lag-issues.html).
+
+More generally, remember that the Lookit study has no way of 'knowing' what sorts of interactions the participant has, or has 
+not had, on the external website. For example, there is no way to ensure that the participant has made a response on the 
+external site before they click the 'Next' button to continue on with the Lookit study.
+
+This frame includes the optionalText parameter, which allows you to add text underneath the iframe box. You can use this text 
+to help ensure the participant completes everything in the iframe box before clicking the frame's 'Next' button, e.g. "Please 
+make sure that you see the message 'Your response has been submitted' in the box above before clicking the next button below."
+
+What it looks like
+~~~~~~~~~~~~~~~~~~
+
+.. image:: /../images/Exp-lookit-iframe.png
+    :alt: Example screenshot from exp-lookit-iframe frame
+
+More general functionality
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Below is information specific to this particular frame. There may also be available parameters, events recorded,
+and data collected that come from the following more general sources:
+
+- the :ref:`base frame<base frame>` (things all frames do)
+
+Examples
+----------------
+
+.. code:: javascript
+
+    "study-survey": {
+        "kind": "exp-lookit-iframe",
+        "iframeSrc": "https://example.com",
+        "iframeHeight": "700px",
+        "iframeWidth": "100%",
+        "optionalText": "Message to the participant."
+    }
+
+Parameters
+----------------
+
+iframeSrc [String]
+    The external URL that should be shown in the iframe. The link will be automatically updated to include two pieces of information 
+    as URL query parameters: the hashed child ID ('child') and the response ID ('response'). This will allow you to link the study 
+    responses and child's Lookit account without having to ask the family to enter additional information. See 
+    `this page <https://lookit.readthedocs.io/en/develop/researchers-set-study-fields.html#study-url-external-studies>`_
+    for information on how to use these query strings.
+
+iframeHeight [String | ``700px``]
+    Set the height of the iframe. You can use CSS units ("700px", "4in"), but not percents ("100%"). Make sure to preview your study 
+    to see how the external page looks. Avoid a nested scrolling view by either making your iframeHeight value taller, or including 
+    navigation between shorter sections in your external page.
+
+iframeWidth [String | ``100%``]
+    Set the width of the iframe. You can use CSS units, including percents ("700px", "4in", "100%").
+
+optionalText [String]
+    Add a message underneath the iframe to contextualize what's being displayed. For instance, you can tell the participant how they 
+    will know when to click the Next button.
+
+optionalExternalLink [Boolean | ``false``]
+    Allow participants to click on a link to open the external URL in a new tab if the iframe doesn't load correctly. This 
+    message displays under any optionalText string and reads "If you don't see anything in the space above, there might have 
+    been a problem loading this part of the study. Click [here] to open this part of the study in a new tab. Make sure to keep 
+    this tab open so you can continue to the rest of the study."
+
+Data collected
+----------------
+
+The fields added specifically for this frame type are:
+
+<None>
+
+Events recorded
+----------------
+
+The events recorded specifically by this frame are:
+
+<None>

app/components/exp-lookit-iframe/template.hbs

@@ -0,0 +1,20 @@
+<iframe 
+    height="{{ iframeHeight }}" 
+    width="{{ iframeWidth }}" 
+    src="{{ iframeSrc }}" 
+    sandbox="allow-scripts allow-same-origin" 
+    referrerpolicy="no-referrer"
+/>
+{{#if optionalText }}<p>{{ optionalText }}</p>{{/if}}
+{{#if optionalExternalLink }}
+<p>
+    If you don't see anything in the space above, there might have been a problem loading this part of the study. Click 
+    <a href="{{ iframeSrc }}" target="_blank" rel="noopener noreferrer">here</a>
+    to open this part of the study in a new tab. Make sure to keep this tab open so you can continue to the rest of the study.
+</p>
+{{/if}}
+<div class="row exp-controls">
+    <div class="col-md-12">
+        <button type="button" id="nextbutton" disabled="" class="btn btn-success pull-right" {{ action "next" }} > {{ t "Next" }} </button>
+    </div>
+</div>

app/index.rst

@@ -51,6 +51,7 @@ The documentation will tell you how each frame works, what data it collects, and
    components/exp-lookit-calibration/doc.rst
    components/exp-lookit-change-detection/doc.rst
    components/exp-lookit-exit-survey/doc.rst
+   components/exp-lookit-iframe/doc.rst
    components/exp-lookit-images-audio/doc.rst
    components/exp-lookit-images-audio-infant-control/doc.rst
    components/exp-lookit-instruction-video/doc.rst

app/utils/add-search-params.js

@@ -2,22 +2,17 @@ const addSearchParams = function(exitUrl, responseId, hashChildId){
     try {
         // Parse URL and search params
         const url = new URL(exitUrl);
-        const params = new URLSearchParams(url.search);
 
         // Set child and response values
-        // params.set('child', this.get('session.hash_child_id'));
-        // params.set('response', this.get('session.id'))
-        params.set('child', hashChildId);
-        params.set('response', responseId);
-
-        // Set these changes to the URL 
-        url.search = params;
+        url.searchParams.set('child', hashChildId);
+        url.searchParams.set('response', responseId);
 
         // Return updated URL
         return url.toString();
 
     } catch (TypeError) {
         // If the provided URL can't be parsed, return root.
+        console.error(TypeError.message)
         return '/'
     }
 };