Course-v1:Arbisoft+CS100+2022 T2/en/block-v1:Arbisoft+CS100+2022 T2+type@html+block@26478d01840b4c89967724a9317bb0eb: Difference between revisions

From MLEB Master
Jump to navigation Jump to search
Edly-user (talk | contribs)
update_content
Edly-user (talk | contribs)
update_content
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
{"@metadata": {"sourceLanguage": "en", "priorityLanguages": ["aa"], "allowOnlyPriorityLanguages": true}, "display_name": "Zooming Image Tool", "content": "<h3 class=\"hd hd-2\">Zooming Image Tool</h3>\n<p>Use the Zooming Image Tool to enable learners to see details of large, complex images.</p>\n<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>\n<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>\n<p>You must also add both the regular and magnified image files to your course.</p>\n<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>\n  <pre>\n  &lt;div class=\"zooming-image-place\" style=\"position: relative;\"&gt;\n    &lt;a class=\"loupe\" href=\"<i>path to the magnified version of the image</i>\"&gt;\n      &lt;img alt=\"<i>Text for screen readers</i>\"\n        src=\"<i>path to the image you want to display in the unit</i>\" /&gt;\n    &lt;/a>\n    &lt;div class=\"script_placeholder\"\n      data-src=\"<i>path to the jquery.loupeAndLightbox.js JavaScript file in your course</i>\"/&gt;\n  &lt;/div&gt;\n  &lt;script type=\"text/javascript\"&gt;// &gt;![CDATA[\n  JavascriptLoader.executeModuleScripts($('.zooming-image-place').eq(0), function() {\n    $('.loupe').loupeAndLightbox({\n      width: 350,\n      height: 350,\n      lightbox: false\n    });\n  });\n  // ]]&gt;&lt;/script&gt;\n  &lt;div id=\"ap_listener_added\"&gt;&lt;/div&gt;\n  </pre>\n\n<p>You can modify the example below for your own use.</p>\n<ol>\n  <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>\n  <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>\n  <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>\n  <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>\n</ol>\n<p>The example below shows a subset of the biochemical reactions that cells carry out. </p>\n<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>\n<p class=\"sr\">Press spacebar to open the magnifier.</p>\n<div class=\"zooming-image-place\" style=\"position: relative;\">\n  <a class=\"loupe\" href=\"https://studio.edx.org/c4x/edX/DemoX/asset/pathways_detail_01.png\">\n      <img alt=\"magnify\" src=\"https://studio.edx.org/c4x/edX/DemoX/asset/pathways_overview_01.png\" />\n    </a>\n  <div class=\"script_placeholder\" data-src=\"https://studio.edx.org/c4x/edX/DemoX/asset/jquery.loupeAndLightbox.js\" />\n</div>\n<script type=\"text/javascript\">// <![CDATA[\nJavascriptLoader.executeModuleScripts($('.zooming-image-place').eq(0), function() {\n  $('.loupe').loupeAndLightbox({\n    width: 350,\n    height: 350,\n    lightbox: false\n  });\n});\n// ]]></script>\n<div id=\"ap_listener_added\"></div>\n"}
{"@metadata": {"sourceLanguage": "en", "priorityLanguages": [], "allowOnlyPriorityLanguages": true}, "display_name": "Zooming Image Tool", "content": "<h3 class=\"hd hd-2\">Zooming Image Tool</h3>\n<p>Use the Zooming Image Tool to enable learners to see details of large, complex images.</p>\n<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>\n<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>\n<p>You must also add both the regular and magnified image files to your course.</p>\n<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>\n  <pre>\n  &lt;div class=\"zooming-image-place\" style=\"position: relative;\"&gt;\n    &lt;a class=\"loupe\" href=\"<i>path to the magnified version of the image</i>\"&gt;\n      &lt;img alt=\"<i>Text for screen readers</i>\"\n        src=\"<i>path to the image you want to display in the unit</i>\" /&gt;\n    &lt;/a>\n    &lt;div class=\"script_placeholder\"\n      data-src=\"<i>path to the jquery.loupeAndLightbox.js JavaScript file in your course</i>\"/&gt;\n  &lt;/div&gt;\n  &lt;script type=\"text/javascript\"&gt;// &gt;![CDATA[\n  JavascriptLoader.executeModuleScripts($('.zooming-image-place').eq(0), function() {\n    $('.loupe').loupeAndLightbox({\n      width: 350,\n      height: 350,\n      lightbox: false\n    });\n  });\n  // ]]&gt;&lt;/script&gt;\n  &lt;div id=\"ap_listener_added\"&gt;&lt;/div&gt;\n  </pre>\n\n<p>You can modify the example below for your own use.</p>\n<ol>\n  <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>\n  <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>\n  <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>\n  <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>\n</ol>\n<p>The example below shows a subset of the biochemical reactions that cells carry out. </p>\n<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>\n<p class=\"sr\">Press spacebar to open the magnifier.</p>\n<div class=\"zooming-image-place\" style=\"position: relative;\">\n  <a class=\"loupe\" href=\"https://studio.edx.org/c4x/edX/DemoX/asset/pathways_detail_01.png\">\n      <img alt=\"magnify\" src=\"https://studio.edx.org/c4x/edX/DemoX/asset/pathways_overview_01.png\" />\n    </a>\n  <div class=\"script_placeholder\" data-src=\"https://studio.edx.org/c4x/edX/DemoX/asset/jquery.loupeAndLightbox.js\" />\n</div>\n<script type=\"text/javascript\">// <![CDATA[\nJavascriptLoader.executeModuleScripts($('.zooming-image-place').eq(0), function() {\n  $('.loupe').loupeAndLightbox({\n    width: 350,\n    height: 350,\n    lightbox: false\n  });\n});\n// ]]></script>\n<div id=\"ap_listener_added\"></div>\n"}

Latest revision as of 13:46, 21 July 2022

@metadata
sourceLanguage"en"
priorityLanguages
Empty array
allowOnlyPriorityLanguagestrue
display_name"Zooming Image Tool"
content"<h3 class="hd hd-2">Zooming Image Tool</h3> <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> <pre> &lt;div class="zooming-image-place" style="position: relative;"&gt; &lt;a class="loupe" href="<i>path to the magnified version of the image</i>"&gt; &lt;img alt="<i>Text for screen readers</i>" src="<i>path to the image you want to display in the unit</i>" /&gt; &lt;/a> &lt;div class="script_placeholder" data-src="<i>path to the jquery.loupeAndLightbox.js JavaScript file in your course</i>"/&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt;// &gt;![CDATA[ JavascriptLoader.executeModuleScripts($('.zooming-image-place').eq(0), function() { $('.loupe').loupeAndLightbox({ width: 350, height: 350, lightbox: false }); }); // ]]&gt;&lt;/script&gt; &lt;div id="ap_listener_added"&gt;&lt;/div&gt; </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 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 magnifier.</p> <div class="zooming-image-place" style="position: relative;"> <a class="loupe" href="https://studio.edx.org/c4x/edX/DemoX/asset/pathways_detail_01.png"> <img alt="magnify" src="https://studio.edx.org/c4x/edX/DemoX/asset/pathways_overview_01.png" /> </a> <div class="script_placeholder" data-src="https://studio.edx.org/c4x/edX/DemoX/asset/jquery.loupeAndLightbox.js" /> </div> <script type="text/javascript">// <![CDATA[ JavascriptLoader.executeModuleScripts($('.zooming-image-place').eq(0), function() { $('.loupe').loupeAndLightbox({ width: 350, height: 350, lightbox: false }); }); // ]]></script> <div id="ap_listener_added"></div> "