<p>An IFrame allows you to integrate ungraded exercises and tools from any Internet site into the body of your course. The IFrame appears inside an HTML component, and the exercise or tool appears inside the IFrame.</p>
<p>IFrames are well-suited for third-party tools that demonstrate a concept but that won't be graded or store student data. For example, the tool in this template allows students to experiment with the way the shape of a triangle affects a particular line that is derived from the triangle.</p>
<p>To add the exercise or tool in an IFrame, replace the URL in the example tool below with the URL of the page that contains the exercise or tool that you want. Note that the URL must start with https instead of http so that the IFrame will appear in all browsers.</p>
<p>For more information about IFrames and their attributes, <a href="http://www.w3.org/wiki/HTML/Elements/iframe">see the IFrame specification.</a></p>
<p>In the image below, drag any of the red points to a new location. As you drag the point, notice the way the point's position affects the triangle's Euler line.</p>
<h2>IFrame Tool</h2>
<p>Use the IFrame tool to embed an exercise or tool from any web site into your course content. For example, the tool below allows learners to experiment with how the shape of a triangle affects a line that is derived from the triangle.</p>
<p>Exercises in an IFrame are not graded. To embed graded exercises, use a Custom JavaScript Problem.</p>
<p>The following code is the HTML format required to use the IFrame tool. For the IFrame in this template, you must replace the values in <i>italics</i>.</p>
<pre>
<iframe title="<i>The required title of the tool</i>"
src="<i>The URL of the tool, starting with https://</i>">
<i>Message displayed when the browser does not support IFrames.</i>
</iframe>
</pre>
<p>The Iframe below includes the width, height, marginwidth, marginheight, frameborder, and scrolling attributes. These attributes are optional. You can remove these attributes or replace their values.</p>
<p>Modify this template as needed.</p>
<p>To modify the IFrame, you must edit the HTML source code. When editing this template, click <strong>HTML</strong> in the toolbar.</p>
<p>Then modify the example below for your own use.
<ol>
<li>Replace the value of the <strong>src</strong> attribute of the IFrame with the URL of the tool that you want in your course.
<p><strong>Note</strong>: The URL must start with <strong>https</strong> instead of http, to ensure that the tool appears in all browsers that support IFrames.</p></li>
<li>Replace the value of the <strong>title</strong> attribute with the title of the tool. You <strong>must</strong> include the title to provide an accessible label.</li>
<li>Replace other IFrame attributes as needed. See <a href="http://www.w3.org/wiki/HTML/Elements/iframe" target="_blank">the IFrame specification</a> for more information.</li>
<li>Optionally, replace the text between the opening and closing <strong>iframe</strong> tags.
<pre>Your browser does not support IFrames.</pre>
<p>A learner sees this text if the browser does not support IFrames.</p>
</li>
</ol>
<p>The sample IFrame follows. Modify its attributes as described above.</p>
To add the exercise or tool in an IFrame, replace the URL in the example tool below with the URL of the page that contains the exercise or tool that you want. Note that the URL must start with https instead of http so that the IFrame will appear in all browsers. You must also replace the value of the title attribute with text that describes the external content. This text is not visible, but can be accessed by screen reader users.
<p>Use the full screen image tool to allow students to open the image in the full screen, zoom in on the image, and drag the image within the screen.</p>
<p>Use the Full Screen Image tool to allow learners to open and zoom in on a larger version of an image in your course.</p>
<p>With the Full Screen Image tool, learners can see the image's details as well as its context within the unit.</p>
<p>To enable users to view the larger image, you wrap the smaller image in a link to the larger version of the image.</p>
<p>The following HTML code shows the format required to use the Full Screen Image tool. For the example in this template, you must replace the values in <i>italics</i>.</p>
<pre>
<a href="<i>Path to full screen image</i>" class="modal-content">
<img alt="<i>Text for screen readers</i>"
src="<i>Path to image to include in unit page</i>"/>
</a>
</pre>
<p>You can modify the example below for your own use.</p>
<ol>
<li>Replace the value of the link's <strong>href</strong> attribute with the path to the full size image. Do not change the value of the class attribute.</li>
<li>Replace the value of the image's <strong>src</strong> attribute with the path to the image that will appear in the unit before a learner opens it in full screen mode.</li>
<li>Replace the value of the image's <strong>alt</strong> attribute with text that both describes the image and the action or destination of clicking on the image. You <strong>must</strong> include alt text to provide an accessible label.</li>
</ol>
<p><strong>Note</strong>: Test viewing the image in full screen mode in the LMS; you cannot view it in full screen from within Studio.</p>
<a href="http://static.class.stanford.edu/stanford-hills-big.jpg" class="modal-content"><img alt="An image of the Stanford Hills. Select the image to open it in full screen mode." src="http://static.class.stanford.edu/stanford-hills-small.jpg" /></a>
<p>Some edX classes use extremely large, extremely detailed graphics. To make it easier to understand we can offer two versions of those graphics, with the zoomed section showing when you click on the main view.</p>
<p>The example below is from <a href="https://www.edx.org/course/mit/7-00x/introduction-biology-secret-life/1014" target="_blank">7.00x: Introduction to Biology</a> and shows a subset of the biochemical reactions that cells carry out. </p>
<h2>Zooming Image Tool</h2>
<p>Use the Zooming Image Tool to enable learners to see details of large, complex images.</p>
<p>With the Zooming Image Tool, the learner can move the mouse pointer over a part of the image to enlarge it and see more detail.</p>
<p>To use the Zooming Image Tool, you must first add the <a href="http://files.edx.org/jquery.loupeAndLightbox.js" target="_blank">jquery.loupeAndLightbox.js JavaScript file</a> to your course.</p>
<p>You must also add both the regular and magnified image files to your course.</p>
<p>The following HTML code shows the format required to use the Zooming Image tool. For the example in this template, you must replace the values in <i>italics</i>.</p>
<p>You can modify the example below for your own use.</p>
<ol>
<li>Replace the value of the link's <strong>href</strong> attribute with the path to the magnified image. Do not change the value of the class attribute.</li>
<li>Replace the value of the image's <strong>src</strong> attribute with the path to the image that will appear in the unit.</li>
<li>Replace the value of the image's <strong>alt</strong> attribute with text that both describes the image and the action or destination of clicking on the image. You <strong>must</strong> include alt text to provide an accessible label.</li>
<li>Replace the value of the div element's <strong>data-src</strong> attribute with the path to the jquery.loupeAndLightbox.js JavaScript file in your course.</li>
</ol>
<p>The example below shows a subset of the biochemical reactions that cells carry out. </p>
<p>You can view the chemical structures of the molecules by clicking on them. The magnified view also lists the enzymes involved in each step.</p>
<p class="sr">Press spacebar to open the magifier.</p>
<p class="sr">Press spacebar to open the magnifier.</p>
