<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>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>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>
<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>
<pre>
<iframe title="<i>The required title of the tool</i>"
<iframe title="<i>The required title of the tool</i>"
src="<i>The URL of the tool, starting with https://</i>">
src="<i>The URL of the tool, starting with https://</i>">
<i>Message displayed when the browser does not support IFrames.</i>
<i>Message displayed when the browser does not support IFrames.</i>
</iframe>
</iframe>
...
@@ -21,7 +21,7 @@ data: |
...
@@ -21,7 +21,7 @@ data: |
<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>
<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 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>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.
<li>Optionally, replace the text between the opening and closing <strong>iframe</strong> tags.
<pre>Your browser does not support IFrames.</pre>
<pre>Your browser does not support IFrames.</pre>
<p>A learner sees this text if the browser does not support IFrames.</p>
<p>A learner sees this text if the browser does not support IFrames.</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>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>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>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>
<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>
<pre>
<a href="<i>Path to full screen image</i>" class="modal-content">
<a href="<i>Path to full screen image</i>" class="modal-content">
<img alt="<i>Text for screen readers</i>"
<img alt="<i>Text for screen readers</i>"
src="<i>Path to image to include in unit page</i>"/>
src="<i>Path to image to include in unit page</i>"/>
</a>
</a>
</pre>
</pre>
...
@@ -21,4 +21,4 @@ data: |
...
@@ -21,4 +21,4 @@ data: |
</ol>
</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>
<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>
<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>Use the Zooming Image Tool to enable learners to see details of large, complex images.</p>
<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>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>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>
<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>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 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>
<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>
</ol>
<p>The example below shows a subset of the biochemical reactions that cells carry out. </p>
<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>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 magnifier.</p>
<p class="sr">Press spacebar to open the magnifier.</p>
