HTML Components in OLX#

Tags: educator reference

Create the HTML Component#

To add an HTML component to a course, split it up into 2 files: The HTML configuration into an .xml file in the html directory and an additional .html file in the same directory.

Caution

HTML that is not valid HTML must be broken out into a separate file.

Example of XML & HTML Files#

Create an XML file in the html directory for the content that is broken out into separate HTML files.

The name of the XML file must match the value of the @url_name attribute of the html element in the vertical XML file.

For example, the vertical/unit_1_what_is_olx.xml file contains the following url_name.

<vertical display_name="Unit 1: What is OLX?">
  <html url_name="what_is_olx"/>
  . . .
</vertical>

This references the file html/what_is_olx.xml to define the HTML component.

Example HTML Component XML File#

The following example shows the html/what_is_olx.xml file for an HTML component.

<html filename="what_is_olx" display_name="What is OLX?"/>

html Element Attributes#

Attribute

Meaning

display_name

Required. The value that is displayed to learners as the name of the HTML component. If a display_name value is not supplied, “html” is supplied.

filename

The name of the HTML file that contains the content for the HTML component, without the .HTML extension.

HTML Component XML File Elements#

The root element of the XML file for the HTML component is file is html.

In this case, the html element contains no children.

Example HTML Component Content#

In the component’s HTML file, add valid HTML to represent the content that will be displayed to learners. For example, the following is from an HTML file from the olx_example_course:

<p><span style="font-size: 1em;">OLX (open learning XML) is the XML-based standard used to build courses for the Open edX Platform.</span></p>
<p><span style="font-size: 1em;">With OLX, you can:</span></p>
<ul>
<li>Move content between Open edX instances.</li>
<li>Create course content outside of Open edX Studio, including by conversion from other content formats.</li>
<li>Ensure content remains free of proprietary encoding and allow portability.</li>
</ul>

Maintenance chart

Review Date

Working Group Reviewer

Release

Test situation

2025-11-06

sarina

Ulmo

Pass