New Updated Studio Documentation
New documentation from rewrite, audit, and integration of some documentation from edx101. Intent to release by training on 12/5.
This commit is contained in:
Mark Hoeber
@@ -1,249 +1,236 @@
|
||||
.. _Working with HTML Components:
|
||||
|
||||
************************
|
||||
|
||||
#############################
|
||||
Working with HTML Components
|
||||
#############################
|
||||
|
||||
*******************
|
||||
Overview
|
||||
*******************
|
||||
|
||||
You use an HTML component to add and format text for your course.
|
||||
You can add text, lists, links and images in an HTML component.
|
||||
|
||||
* :ref:`Create an HTML Component`
|
||||
* :ref:`Work with the Visual and HTML Editors`
|
||||
* :ref:`Use the Announcement Template`
|
||||
* :ref:`Import Content from LaTex`
|
||||
* :ref:`Add a Link in an HTML Component`
|
||||
* :ref:`Add an Image to an HTML Component`
|
||||
|
||||
.. note:: Ensure you understand the chapter :ref:`Organizing Your Course Content` before working with HTML components.
|
||||
|
||||
|
||||
.. _Create an HTML Component:
|
||||
|
||||
*****************************
|
||||
Create an HTML Component
|
||||
************************
|
||||
|
||||
.. image:: Images/image067.png
|
||||
|
||||
The HTML component is the most basic component type. These components are the
|
||||
building blocks of text-based courses. They are used to add information such as
|
||||
text, lists, links, and images to units. For example, you can use these
|
||||
components between Problem components to add explanatory text. You can also use
|
||||
HTML components to import LaTeX code into your course.
|
||||
|
||||
The HTML component editor has two views: **Visual view** and **HTML view.**
|
||||
Visual view offers you a “what you see is what you get” (WYSIWYG) editor for
|
||||
editing a pre-formatted version of the text. HTML view gives you a text editor
|
||||
in which you can edit HTML code directly.
|
||||
|
||||
.. note::
|
||||
|
||||
Studio processes the HTML code entered when saving it and before rendering
|
||||
it. Make sure that the component you created looks the way you expect live if
|
||||
you go back and forth between Visual and HTML view.
|
||||
|
||||
.. raw:: latex
|
||||
|
||||
\newpage %
|
||||
|
||||
Create a Basic HTML Component
|
||||
*****************************
|
||||
|
||||
**To create a basic, blank HTML component:**
|
||||
To create a new HTML component in an existing Unit, ensure the Unit is Private.
|
||||
For more information on Public and Private Units, see :ref:`Public and Private Units`.
|
||||
|
||||
1. Under Add New Component, click **html**, and then click **Empty.** The
|
||||
following blank component appears.
|
||||
#. Under **Add New Component**, click the **html** icon.
|
||||
|
||||
.. image:: Images/image069.png
|
||||
.. image:: Images/NewComponent_HTML.png
|
||||
|
||||
2. In the blank component, click **Edit.** The HTML editor opens.
|
||||
2. In the list that appears, click **Text**.
|
||||
|
||||
.. image:: Images/image071.png
|
||||
|
||||
3. Enter the information that you want, and then click **Save.**
|
||||
|
||||
.. note::
|
||||
|
||||
If you want to enter links to other pages or to images or to edit the
|
||||
HTML directly, switch to the HTML tab.
|
||||
|
||||
.. raw:: latex
|
||||
An empty component appears at the bottom of the Unit.
|
||||
|
||||
.. image:: Images/HTMLComponent_Edit.png
|
||||
|
||||
3. In the empty component, click **Edit**.
|
||||
|
||||
The HTML Component Editor opens.
|
||||
|
||||
\newpage %
|
||||
.. image:: Images/HTMLEditor.png
|
||||
|
||||
**To create a basic HTML component that includes a template you can use:**
|
||||
4. Click **Settings** to enter the **Display Name** for the HTML component.
|
||||
|
||||
1. Under **Add New Component,** click **html** and then click **Announcement.**
|
||||
A student sees the Display when hovering your mouse over the icon for the Unit in the Subsection accordian.
|
||||
|
||||
Click **Save** to return to the Component Editor.
|
||||
|
||||
5. Enter text as needed.
|
||||
|
||||
6. Click **Save** to save the HTML component.
|
||||
|
||||
For more information, see:
|
||||
|
||||
* :ref:`Work with the Visual and HTML Editors`
|
||||
* :ref:`Use the Announcement Template`
|
||||
* :ref:`Import Content from LaTex`
|
||||
* :ref:`Add a Link in an HTML Component`
|
||||
* :ref:`Add an Image to an HTML Component`
|
||||
|
||||
ADD LINKS
|
||||
|
||||
.. _Work with the Visual and HTML Editors:
|
||||
|
||||
*****************************************
|
||||
Work with the Visual and HTML Editors
|
||||
*****************************************
|
||||
|
||||
The HTML Component editor has two views: the **Visual view** and the **HTML view.**
|
||||
|
||||
You select the view by clicking the tab in the upper-right of the component Editor.
|
||||
|
||||
.. image:: Images/HTMLEditorTabs.png
|
||||
|
||||
==============
|
||||
Visual Editor
|
||||
==============
|
||||
|
||||
The Visual view provides a “what you see is what you get” (WYSIWYG) editor for
|
||||
editing a pre-formatted version of the text.
|
||||
|
||||
.. image:: Images/HTMLEditor_Visual.png
|
||||
|
||||
Use the buttons at the top of the Visual editor to change the formatting as needed.
|
||||
For example, you can enclose the title in heading tags, create bulleted or numbered lists,
|
||||
or apply bold, italic, or underline formatting.
|
||||
|
||||
==============
|
||||
HTML Editor
|
||||
==============
|
||||
The HTML allows you to edit HTML code directly.
|
||||
|
||||
.. image:: Images/HTMLEditor_HTML.png
|
||||
|
||||
.. note:: Studio processes the HTML code entered when saving it and before rendering
|
||||
it. Make sure that the text you create looks the way you expect if
|
||||
you go back and forth between the Visual and HTML views.
|
||||
|
||||
.. _Use the Announcement Template:
|
||||
|
||||
************************************
|
||||
Use the Announcement Template
|
||||
************************************
|
||||
|
||||
When you create a new HTML component, you can select to use a built-in Announcement template.
|
||||
|
||||
When creating the new HTML component, select **Announcement**.
|
||||
|
||||
.. image:: Images/HTML_Component_Type.png
|
||||
:width: 800
|
||||
|
||||
The following screen opens.
|
||||
|
||||
.. image:: Images/image073.png
|
||||
|
||||
2. Click **Edit.**
|
||||
Edit the content of the announcement just as you would any HTML component.
|
||||
|
||||
The text editor opens in Visual view. Replace the template text with your
|
||||
announcement text.
|
||||
.. _Import Content from LaTeX:
|
||||
|
||||
.. note::
|
||||
*************************
|
||||
Import Content from LaTeX
|
||||
*************************
|
||||
|
||||
If you want to enter links to other pages or to images or to edit the
|
||||
HTML directly, switch to the HTML tab.
|
||||
If LaTeX is enabled for your course, you can create an HTML component from imported LaTeX code.
|
||||
|
||||
.. image:: Images/image075.png
|
||||
Studio uses a third-party LaTeX processor to convert LaTeX code to XML. The LaTeX processor must be up and running.
|
||||
|
||||
3. Click **Save.**
|
||||
1. When creating the new HTML component, select **E-text Written in LaTeX**.
|
||||
|
||||
.. raw:: latex
|
||||
|
||||
\newpage %
|
||||
The new HTML component opens, with an **upload** link:
|
||||
|
||||
.. image:: Images/latex_upload.png
|
||||
:width: 800
|
||||
|
||||
Create Links
|
||||
************
|
||||
2. To upload a LaTeX file from your computer, click **upload**.
|
||||
|
||||
Link to a Handout or Image
|
||||
==========================
|
||||
You are prompted to select a file. The file loads in the LaTeX editor.
|
||||
|
||||
3. In the LaTeX editor, click **Save & Compile to edX XML**.
|
||||
|
||||
To link to a document, image, or other file that you uploaded to the Files &
|
||||
Uploads page:
|
||||
The LaTeX content is added to the HTML component. For example:
|
||||
|
||||
.. image:: Images/Latex_component.png
|
||||
:width: 800
|
||||
|
||||
1. Create a blank HTML component, and switch to HTML view.
|
||||
|
||||
2. In the HTML box, create links to your files.
|
||||
4. Verify that your newly created component looks the way you want it to.
|
||||
|
||||
To create a link to a document, enter the following syntax, where URL OF FILE is
|
||||
the URL that you noted in step 5 of Upload a File to the Files & Uploads Page
|
||||
and LINK TEXT is the text that the user will click. ::
|
||||
You can edit the HTML component with LaTeX as you can any other component.
|
||||
In the editor, you can launch the LaTeX source compiler.
|
||||
|
||||
<p><a href="[URL OF FILE]">[LINK TEXT]</a></p>
|
||||
|
||||
For example, to create a link to the HTML template for the “About” page document
|
||||
whose URL is /c4x/edX/edX101/asset/AboutPage_Template.txt, use the following
|
||||
code. ::
|
||||
.. _Add a Link in an HTML Component:
|
||||
|
||||
<p><a href="/c4x/edX/edX101/asset/AboutPage_Template.txt">HTML Template for
|
||||
<the "About" page</a></p>
|
||||
***********************************
|
||||
Add a Link in an HTML Component
|
||||
***********************************
|
||||
|
||||
To create a link to an image that you’ve uploaded, enter the following syntax,
|
||||
where URL OF FILE is the URL that you noted in step 5 of Upload a File to the
|
||||
Files & Uploads Page. ::
|
||||
You can add a link in an HTML component to any file you uploaded for the course.
|
||||
|
||||
<p><img src="[URL OF FILE]"/></p>
|
||||
Find any copy the URL of the file in the Files & Uploads page.
|
||||
|
||||
For example, to create a link to the CourseImage.jpg file whose URL is
|
||||
/c4x/edX/edX101/asset/CourseImage.jpg, use the following code. ::
|
||||
See :ref:`Add Files to a Course` for more information.
|
||||
|
||||
<p><img src="/c4x/edX/edX101/asset/CourseImage.jpg"></p>
|
||||
While editing the HTML component:
|
||||
|
||||
When you use this code, the following image appears.
|
||||
#. Switch to the HTML view.
|
||||
|
||||
.. image:: Images/image078.png
|
||||
:width: 800
|
||||
#. To create a link to a document, enter the following syntax, where URL OF FILE is the URL that you copied from the Files & Uploads Page and LINK TEXT is the text that the user will click.
|
||||
|
||||
``<p><a href="[URL OF FILE]">[LINK TEXT]</a></p>``
|
||||
|
||||
3. Click **Save.** Your files or images appear in the component.
|
||||
|
||||
|
||||
.. raw:: latex
|
||||
|
||||
\newpage %
|
||||
|
||||
|
||||
Link to Course Units
|
||||
====================
|
||||
.. _Add a Link to a Course Unit:
|
||||
|
||||
To direct the student to a specific place in your own course, you must add an
|
||||
HTML link to that unit. To do this:
|
||||
============================
|
||||
Add a Link to a Course Unit
|
||||
============================
|
||||
|
||||
1. Determine the relative directory of your course.
|
||||
You can add a link to a course unit in an HTML component.
|
||||
|
||||
a. On the Course Settings tab, click the blue your course URL link under Basic
|
||||
Information.
|
||||
#. Determine the unit identifier of the unit you're linking to. To do this, open the
|
||||
unit page in Studio, and locate the **Unit Identifier** field under **Unit Location** in the right pane.
|
||||
|
||||
.. image:: Images/image079.png
|
||||
:width: 800
|
||||
#. Copy the unit identifier.
|
||||
|
||||
The registration page for your course opens.
|
||||
#. Open the HTML component where you want to add the link.
|
||||
|
||||
b. In the address bar at the top of the page, locate the URL.
|
||||
#. Select the text that you want to make into the link.
|
||||
|
||||
c. Copy the part of the URL after “.org” and before “about”, including the
|
||||
forward slashes. The syntax is the following. ::
|
||||
#. Click the link icon in the toolbar.
|
||||
|
||||
/courses/[organization]/[course_number]/[course_name]/
|
||||
#. In the Insert/Edit Link dialog box, enter the following in the Link URL field.
|
||||
|
||||
Make sure to replace <unit identifier>(including the brackets) with the unit
|
||||
identifier that you copied in step 2, and make sure to include both forward slashes (/).
|
||||
|
||||
``/jump_to_id/<unit identifier>``
|
||||
|
||||
For example, for edX101: How to Create an edX Course from edX, the complete URL
|
||||
is the following. ::
|
||||
#. If you want the link to open in a new window, click the drop-down arrow next to
|
||||
the Target field, and then select Open Link in a New Window. If not, you can leave the default value.
|
||||
|
||||
#. Click **Insert**.
|
||||
|
||||
https://edge.edx.org/courses/edX/edX101/How_to_create_an_edX_course/about
|
||||
#. Save the HTML component and test the link.
|
||||
|
||||
The relative directory is the following. ::
|
||||
|
||||
/courses/edX/edX101/How_to_create_an_edX_course/
|
||||
.. _Add an Image to an HTML Component:
|
||||
|
||||
2. Determine the location ID of the target unit. Studio generates the location
|
||||
ID for each unit when you create the unit. The location ID uses the following
|
||||
syntax. ::
|
||||
***********************************
|
||||
Add an Image to an HTML Component
|
||||
***********************************
|
||||
|
||||
i4x://<organization>/<course_number>/vertical/<url_name_of_unit>
|
||||
You can add an any image that you have uploaded for the course to an HTML component.
|
||||
|
||||
.. note::
|
||||
Find any copy the URL of the image in the Files & Uploads page.
|
||||
|
||||
To find the location ID, open the page of the unit you are trying to link
|
||||
to in Studio and look at the URL in the browser’s address bar. The location ID
|
||||
is the text in the URL after edit, as in the following example.
|
||||
See :ref:`Add Files to a Course` for more information.
|
||||
|
||||
.. image:: Images/image081.png
|
||||
While editing the HTML component:
|
||||
|
||||
#. Switch to the HTML view.
|
||||
|
||||
3. Open the unit that you want to link from.
|
||||
|
||||
4. Under Add New Component, click html, and then click Empty. A new, blank
|
||||
component appears.
|
||||
|
||||
.. image:: Images/image083.png
|
||||
:width: 800
|
||||
|
||||
5. Click **edit**.
|
||||
|
||||
6. In the HTML editor that opens, click the HTML tab.
|
||||
|
||||
7. Next to the number 1, type the following. Replace relative course directory,
|
||||
location id of unit, and link text with your information. ::
|
||||
|
||||
<a href = "[[relative course directory]]/jump_to/[[location id of
|
||||
<unit]]">[link text]</a>
|
||||
|
||||
For example, a link to the “Creating an HTML Component” unit in edx101
|
||||
resembles the following ::
|
||||
|
||||
<a href = "courses/edX/edX101/How_to_Create_an_edX_Course/jump_to/i4x://edX/ed
|
||||
<X101/vertical/8713e94afd074e40991dcb675d1030b5">Creating an HTML
|
||||
<Component</a>
|
||||
|
||||
|
||||
.. raw:: latex
|
||||
|
||||
\newpage %
|
||||
|
||||
Import from LaTeX
|
||||
*****************
|
||||
|
||||
You can create an HTML component from imported LaTeX code.
|
||||
|
||||
.. note::
|
||||
|
||||
This feature is currently under development.
|
||||
|
||||
1. Under **Add New Component**, click **html**, and then click **E-text Written
|
||||
in LaTeX.**
|
||||
|
||||
.. image:: Images/image067.png
|
||||
:width: 800
|
||||
|
||||
2. In the component that appears, click Edit.
|
||||
|
||||
.. image:: Images/image083.png
|
||||
:width: 800
|
||||
|
||||
3. The component editor opens. In the top left corner of the editor, click the
|
||||
yellow **Edit High Level Source** text.
|
||||
|
||||
.. image:: Images/image085.png
|
||||
:width: 800
|
||||
|
||||
4. In the **High Level Source Editing** screen that opens, replace the sample
|
||||
code with your LaTeX code.
|
||||
|
||||
.. image:: Images/image087.png
|
||||
:width: 800
|
||||
|
||||
5. Click **Save and compile to edX XML** to convert the LaTeX code into edX XML
|
||||
code.
|
||||
|
||||
.. note::
|
||||
|
||||
Studio uses a third-party LaTeX processor to convert LaTeX code to XML.
|
||||
The LaTeX processor must be up and running.
|
||||
|
||||
6. Click **Save**. Verify that your newly created component looks the way you
|
||||
want it to.
|
||||
|
||||
#. To add the image to a document, enter the following syntax, where URL OF FILE is the URL that you copied from the Files & Uploads Page.
|
||||
|
||||
``<p><img src="[URL OF FILE]"/></p>``
|
||||
|
||||
|
||||
Reference in New Issue
Block a user