diff --git a/docs/en_us/course_authors/source/Format Cheat Sheet.rstnouse b/docs/en_us/course_authors/source/Format Cheat Sheet.rstnouse index f0874c9895..791ba0e8a7 100644 --- a/docs/en_us/course_authors/source/Format Cheat Sheet.rstnouse +++ b/docs/en_us/course_authors/source/Format Cheat Sheet.rstnouse @@ -52,7 +52,7 @@ Table Formatting With a header row .. list-table:: - :widths: 10 80 + :widths: 15 15 70 :header-rows: 1 * - First Name @@ -70,7 +70,7 @@ With a header row With a bolded first column .. list-table:: - :widths: 10 80 + :widths: 15 15 70 :stub-columns: 1 * - First Name @@ -101,6 +101,12 @@ To make the cross reference in text: see :ref:`Set Grade Brackets` +To cross-reference a topic, but use your own text instead of the topic title, use the :ref: directive, but enter your own text followed by the topic anchor in angle brackets: + + If you want to add a graded tool or exercise, add the tool as a :ref:`custom JavaScript problem` or an :ref:`LTI component`. + + (In this sentence, the text appears as "custom JavaScript problem" and "LTI component", and the linked-to topic titles are "Custom JavaScript Problem" and "LTI Component".) + External page reference see `Create a Problem `_ diff --git a/docs/en_us/course_authors/source/Images/IFrame_1.png b/docs/en_us/course_authors/source/Images/IFrame_1.png new file mode 100644 index 0000000000..514f9bacef Binary files /dev/null and b/docs/en_us/course_authors/source/Images/IFrame_1.png differ diff --git a/docs/en_us/course_authors/source/Images/IFrame_2.png b/docs/en_us/course_authors/source/Images/IFrame_2.png new file mode 100644 index 0000000000..f7c0a4c0d5 Binary files /dev/null and b/docs/en_us/course_authors/source/Images/IFrame_2.png differ diff --git a/docs/en_us/course_authors/source/Images/IFrame_3.png b/docs/en_us/course_authors/source/Images/IFrame_3.png new file mode 100644 index 0000000000..9f7f4e6b2b Binary files /dev/null and b/docs/en_us/course_authors/source/Images/IFrame_3.png differ diff --git a/docs/en_us/course_authors/source/Images/IFrame_4.png b/docs/en_us/course_authors/source/Images/IFrame_4.png new file mode 100644 index 0000000000..f6f709807c Binary files /dev/null and b/docs/en_us/course_authors/source/Images/IFrame_4.png differ diff --git a/docs/en_us/course_authors/source/change_log.rst b/docs/en_us/course_authors/source/change_log.rst index 88e6040a25..885756b1bd 100644 --- a/docs/en_us/course_authors/source/change_log.rst +++ b/docs/en_us/course_authors/source/change_log.rst @@ -12,6 +12,8 @@ April, 2014 * - Date - Change + * - 05/02/14 + - Update :ref:`IFrame` documentation * - 04/28/14 - Updated :ref:`Show or Hide the Course Wiki Page` to include note about Wiki content being available after you hide the Wiki page. * - 04/26/14 diff --git a/docs/en_us/course_authors/source/exercises_tools/create_exercises_and_tools.rst b/docs/en_us/course_authors/source/exercises_tools/create_exercises_and_tools.rst index 0378c715b5..89ae9641c9 100644 --- a/docs/en_us/course_authors/source/exercises_tools/create_exercises_and_tools.rst +++ b/docs/en_us/course_authors/source/exercises_tools/create_exercises_and_tools.rst @@ -46,6 +46,11 @@ General Exercises and Tools :alt: Google Hangout - :ref:`Google Instant Hangout` - You can add the ability for students to participate in instant hangouts directly from your course. With instant hangouts, students can interact through live video and voice, share screens and watch videos together, and collaborate on documents. + * - .. image:: /Images/IFrame_1.png + :width: 100 + :alt: Example IFrame tool + - :ref:`IFrame` + - IFrames allow you to integrate ungraded exercises and tools from any Internet site into an HTML component in your course. * - .. image:: /Images/LTIExample.png :width: 100 :alt: Example LTI component diff --git a/docs/en_us/course_authors/source/exercises_tools/iframe.rst b/docs/en_us/course_authors/source/exercises_tools/iframe.rst new file mode 100644 index 0000000000..40f054153e --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/iframe.rst @@ -0,0 +1,95 @@ +.. _IFrame: + +################## +IFrame Tool +################## + +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. IFrames can include your own tools or third-party tools. + +.. image:: /Images/IFrame_1.png + :alt: IFrame tool showing a Euler line exercise + :width: 500 + +IFrames are well-suited for tools that demonstrate a concept but that won't be graded or store student data. If you want to add a graded tool or exercise, add the tool as a :ref:`custom JavaScript problem` or an :ref:`LTI component`. + +For more information about IFrames, see the `IFrame specification `_. + +**************************** +Create an IFrame Tool +**************************** + +To add an exercise or tool in an IFrame, you'll create an IFrame HTML 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. + +.. note:: The URL of the page that contains the exercise or tool must start with ``https`` instead of ``http``. If the URL starts with ``http``, you have to work with the owner of that page to find out if an ``https`` version is available. Some websites do not allow their content to be embedded in IFrames. + +#. Under **Add New Component**, click **html**, and then click **IFrame**. + +#. In the new component that appears, click **Edit**. + +#. In the toolbar in the component editor, click **HTML**. + +#. In the HTML source code editor, locate the following HTML (line 7). This HTML includes the ``

+ +5. 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 you don't 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 :ref:`IFrame Settings`. You can also change the text between the opening and closing ``

+ +.. image:: /Images/IFrame_3.png + :alt: IFrame with only top half showing and vertical scroll bar on the side + :width: 500 + +.. code-block:: html + +

+ +.. image:: /Images/IFrame_4.png + :alt: + :width: 500 + +For more information about IFrame attributes, see the `IFrame specification `_. diff --git a/docs/en_us/course_authors/source/exercises_tools/index.rst b/docs/en_us/course_authors/source/exercises_tools/index.rst index 9f9b1a835f..40fca14fea 100644 --- a/docs/en_us/course_authors/source/exercises_tools/index.rst +++ b/docs/en_us/course_authors/source/exercises_tools/index.rst @@ -20,6 +20,7 @@ Creating Exercises and Tools full_screen_image gene_explorer google_hangouts + iframe image_mapped_input lti_component math_expression_input