Use the Source icon
The Source icon of the Visual Editor is used to display the text field in its pure HTML source.
HTML can be used to format the content within the text field that you're working in.
TIP: Check out Use the Visual Editor to learn more about all of the icons on this toolbar.
Using the Source icon requires HTML knowledge.
TIP: You can use the following HTML tags as a starting guide for formatting your content:
| HTML tag | Description |
|---|---|
| <p>Paragraph text.</p> | Sets the enclosed text as a paragraph. |
| <br>Text of new line. | Sets a new line break in the current paragraph. |
| <b>Text</b> | Boldfaces the enclosed text. |
| <i>Text</i> | Italicizes the enclosed text. |
| <sub>TexFot</sub> | Subscripts the enclosed text. |
| <sup>Text</sup> | Superscripts the enclosed text. |
| <font face="..">Text</font> | Sets text font. |
| <font size="..">Text</font> | Sets text size. |
| <font color="..">Text</font> | Sets text color. |
TIP: You can include .gif or .jpg images with HTML labels in a question from the Class File Manager. The HTML labels can be static or use algorithmically generated variable data.
Example —
<div class="labelledImage" style="height: IMAGEHEIGHTpx; width: IMAGEWIDTHpx; float: none;"><img src="IMAGEURL">
<div style="left: LABEL_LEFT_OFFSETpx; top: LABEL_TOP_OFFSETpx" class="centered">LABEL_CONTENT</div>
</div>- The height and width parameters IMAGEHEIGHT and IMAGEWIDTH specify the dimensions of the image in pixels (use a third-party graphics application to determine the height and width of the image Example — Microsoft® Paint).
- The image parameter IMAGE_URL specifies the path and filename of the image file.
- The size parameter value specifies the number of labels (you can specify zero or more labels).
- The class="centered" tag is optional, and centers the label (if omitted, the label will be left aligned to your left offset).
You can create multiple labels for one image by adding multiple <div> labels.
The location and contents of each label are specified using three parameters:
- The left parameter LABEL_LEFT_OFFSET specifies the horizontal offset (in pixels) of the middle of the ith label from the left side of the image.
- The top parameter LABEL_TOP_OFFSET specifies the vertical offset (in pixels) of the baseline of the ith label from the top of the image.
- The LABEL_CONTENT specifies the content of the label (it can include algorithmic variables).
This HTML code can also be added using the Edit Source function in the Question Summary pane of the Content Repository (check out View the Content Summary pane).
TIP: You can add a popup reference for a question that contains a link named Click here for instructions. When the student clicks the link, a new window of size 450x650 pixels opens containing the instructions.html file contents. Create and name (Example — instructions.html) an HTML file containing instructions or reference information and upload this file into your Class File Manager.
Example —
<a href="javascript:window.open('../classes/yourclassURL/instructions.html','instructions', 'width=450,height=650,scrollbars').focus();">
Click here for instructions</a>- http://www.yourschool.com/classes/yourclassURL is your Class File Manager URL.
- Edit the sample code to customize the description of the content in the HTML file, filename (if original file is also changed), and the window size.