In addition to text, images, and different types of problems, Studio allows you
to add customized learning tools such as word clouds to your course.
- :ref:`LTI Component`: LTI components allow you to add an external learning application
or textbook to Studio.
- :ref:`Word Cloud`: Word clouds arrange text that students enter - for example, in
response to a question - into a colorful graphic that students can see.
- :ref:`Zooming image`: Zooming images allow you to enlarge sections of an image so
that students can see the section in detail.
- :ref:`Full Screen Image`: The Full Screen Image tool allows a student to enlarge an image in the whole browser window. This is useful when the image contains a large amount of detail and text that is easier to view in context when enlarged.
- :ref:`LTI Component`: LTI components allow you to add an external learning application or textbook to Studio.
- :ref:`Word Cloud`: Word clouds arrange text that students enter - for example, in response to a question - into a colorful graphic that students can see.
- :ref:`Zooming image`: Zooming images allow you to enlarge sections of an image so that students can see the section in detail.
.. _Full Screen Image:
******************
Full Screen Image
******************
Some large images are difficult for students to view in the courseware. The full screen image tool allows students to enlarge the image, so they can see all the detail in context.
The Student View of an Full Screen Image
-----------------------------------------
The student sees the full screen image in a unit page. When the student hovers the mouse pointer over the image, the **FULL SCREEN** button is shown:
.. image:: Images/image-modal.png
:alt: Image the the full screen image tool with the Full Screen button.
When the student clicks **FULL SCREEN**, the image opens and expands in the full browser window. The buttons **Close**, **Zoom In**, and **Zoom Out** are shown:
.. image:: Images/image-modal-window.png
:alt: Image the the Image Modal tool with the Full Screen button.
The student can then zoom in on the image, and drag the image to view the desired part of it:
.. image:: Images/image-modeal-zoomed.png
:alt: Image the the Image Modal tool with the Full Screen button.
Create a Full Screen Image
---------------------------
#. Upload your image file to the **Files & Uploads** page. For more information about how to do this, see :ref:`Add Files to a Course`.
#. Under **Add New Component**, click **html**, and then click **Full Screen Image**.
#. In the new component that appears, click **Edit**.
#. In the component editor, replace the default title, remove the instructional paragraph, and add text as needed.
#. Switch to the **HTML** tab.
#. Replace the following placeholders with your own content.
* Replace the value of the <a> element's href attribute with the path to your image. Do not change the value of the class attribute. For example:
* Ensure that the value of the href and src attributes are the same, and that you do not change the class attribute. You sample code should look like the following:
.. note:: You can use this same HTML code in any HTML component, not just those components you created as full screen images.
#. Click **Save** to save the HTML component.
.. _LTI Component:
...
...
@@ -284,7 +342,7 @@ To create a zooming image tool, you need the following files.
* The image that you want students to see when they access the unit.
* The image that appears in the magnified area when a student clicks the regular image. This image may be larger than the regular image.
* The **jquery.loupeAndLightbox.js** file. Every zooming image tool uses this JavaScript file. You can download this file on the `GitHub loupeAndLightbox <https://github.com/mdbiscan/loupeAndLightbox>`_ page. You won't make any changes to this file.
* The **jquery.loupeAndLightbox.js** JavaScript file. Every zooming image tool uses this JavaScript file, and you won't make any changes to it. `To download this file, right-click here <http://files.edx.org/jquery.loupeAndLightbox.js>`_, and then click *Save Link As* to save the file on your computer.
For example, your file name and path may be **/static/Image2.jpg**.
For example, your file name and path may be **/static/Image2.png**.
* Replace the following name and file path with the name and path of the JavaScript file for your course.
...
...
@@ -328,64 +386,4 @@ Create a Zooming Image Tool
#. Click **Save** to save the HTML component.
.. _Full Screen Image:
******************
Full Screen Image
******************
Some large images are difficult for students to view in the courseware. The full screen image tool allows students to enlarge the image, so they can see all the detail in context.
The Student View of an Full Screen Image
-----------------------------------------
The student sees the full screen image in a unit page. When the student hovers the mouse pointer over the image, the **FULL SCREEN** button is shown:
.. image:: Images/image-modal.png
:alt: Image the the full screen image tool with the Full Screen button.
When the student clicks **FULL SCREEN**, the image opens and expands in the full browser window. The buttons **Close**, **Zoom In**, and **Zoom Out** are shown:
.. image:: Images/image-modal-window.png
:alt: Image the the Image Modal tool with the Full Screen button.
The student can then zoom in on the image, and drag the image to view the desired part of it:
.. image:: Images/image-modeal-zoomed.png
:alt: Image the the Image Modal tool with the Full Screen button.
Create a Full Screen Image
---------------------------
#. Upload your image file to the **Files & Uploads** page. For more information about how to do this, see :ref:`Add Files to a Course`.
#. Under **Add New Component**, click **html**, and then click **Full Screen Image**.
#. In the new component that appears, click **Edit**.
#. In the component editor, replace the default title, remove the instructional paragraph, and add text as needed.
#. Switch to the **HTML** tab.
#. Replace the following placeholders with your own content.
* Replace the value of the <a> element's href attribute with the path to your image. Do not change the value of the class attribute. For example:
* Ensure that the value of the href and src attributes are the same, and that you do not change the class attribute. You sample code should look like the following:
