Exercises and Tools
      Back to home
      1. Edly Knowledge Base
      2. Studio
      3. Exercises and Tools

      How to Use iFrame Tool?

      Overview

      The iframe tool allows you to integrate ungraded exercises and tools from any Internet site into the body of your course. It places an iframe inside an HTML component, and then the exercise or tool appears inside the iframe. The iframe can include your own tools or third-party tools.

      Tip: Make sure you have logged in to the Open edX Studio before proceeding with the article.

      Before you make content or a tool from an external site available through your course, be sure to review the content or tool to ensure that it is accessible to people with disabilities. For example, in addition to testing the iframe components that you add to your course, you can ask third party providers to confirm that a tool is accessible, and, if available, contact your on campus accessibility support services for additional guidance.

      Iframes are well-suited for tools that demonstrate a concept, but that are not graded or used to store student data.

      Create an IFrame Tool

      To add an exercise or tool in an iframe, you create an iframe Text component and add the URL of the page that contains the exercise or tool to the component. You can also add text and images both before and after the iframe.

      • Under Add New Component, select Text, and then select IFrame Tool.
      • In the new component, select Edit.
      • In the visual editor toolbar, select HTML.
      • In the HTML source code editor, locate the following HTML (line 7). This HTML includes the <iframe> element.
      <p><iframe src="https://studio.edx.org/c4x/edX/DemoX/asset/eulerLineDemo.html" width="402" height="402" marginwidth="0" marginheight="0" frameborder="0" scrolling="no">You need an iFrame capable browser to view this.</iframe></p>
      • Replace the default URL in the src attribute (https://studio.edx.org/c4x/edX/DemoX/asset/eulerLineDemo.html) with the URL of the page that contains the exercise or tool. This URL must start with https. Make sure that you do not delete the quotation marks that surround the URL.
      • Change the attributes in the iframe element to specify any other settings that you want. For more information about these settings, see Iframe Settings. You can also change the text between the opening and closing <iframe> tags. Learners see this text only when they use a browser that does not support iframes.
      • Select OK to close the HTML source code editor and return to the visual editor.
      • In the visual editor, replace the default text with your own text.
      • Select Save.

      Iframe Settings

      To specify settings for your iframe, you add, remove, or change the attributes inside the opening <iframe> tag. The <iframe> tag must contain a src attribute and a title attribute. Other attributes are optional.

      You can add these attributes in any order you want.