Using the HTML Editor

Illume’s HTML editor enables the User to create HTML pages, or parts of pages, without any knowledge of HTML.

What You See is What You Get

Except for parameters and built-in survey variables, any content created in the HTML editor will appear in a participant’s browser exactly as it appears in the editor.

In the HTML editor, survey parameters and built-in variables appear as variable names enclosed in curly braces, such as the built-ins {PercentComplete} and {ProgressBar}. When a survey is running, Illume automatically calculates and displays the values of these parameters, so that survey participants see an actual progress bar and their current completion status. While{PercentComplete} and {ProgressBar} are built in to all Illume surveys, other parameters can be defined as desired.

The HTML editor works like a word processor. For example, to set the font of a section of text, first highlight the text by clicking and dragging the mouse across it. Then choose the font, color, size, justification, or other formatting attributes to apply. Click once anywhere in the editable area to deselect the text to see that the formatting has been applied.

NOTE: When working on a multilingual survey, with the translation tools enabled, a list of languages will be available at the bottom of the Text/HTML editor. Choose a language to edit the Text/HTML for that specific translation. Any changes made to that Text/HTML, or to the Description (on the Data Dictionary tab) will apply only to the selected translation. Any changes made to the unique name of the Text/HTML item, or the show-if conditions, will apply to ALL translations.

Adding Images

To add an image to a Text/HTML item, follow these steps:

  1. Move the cursor to the position to insert the image.
  2. Click the Insert image DS_TextItemInsertGraphic.gif button.
  3. If the image to insert has already been added to the survey, it will appear in the Select Resource list. Simply click on the name of the image and skip to step 9 below.
  4. If the image already exists on a web server that will be available to participants, simply enter the URL of the image. The image will appear in the participant’s survey just like any other image.
  5. If the image to insert does not appear in the Select Resource list, click New Resource… to add the image.
  6. In the resource editor, click Upload to upload the image into the survey. This brings up a file selection dialog from which to choose the file to upload. Select the appropriate file and click Open. Illume will upload it into the survey resources.

resource

  1. The name of the image will appear in the Unique Name field. This can be edited if desired.

NOTE: Once an image is uploaded, it will appear in the “Select Resource” list under its unique name, and will be available for reuse anywhere in the survey.

  1. It is possible to add an optional description for the image. A good description can help survey editors determine whether the image is appropriate for use elsewhere in the survey.
  2. Click OK.
  3. The image now appears in the list of available resources. It is selected, and the width and height are automatically filled in.

htmlimage

  1. Set the image attributes as desired. These are described below.
  2. Click OK. The image will be added to the document and can be moved to another place in the document by simply dragging and dropping.

Defining Image Attributes

It is possible to define the following image attributes:

  • Width – The width of the image, in pixels. Illume sets this automatically to the actual width of the image, but can be reset as desired. See “Constrain width/height” below.
  • Height – The height of the image, in pixels. Illume sets this automatically to the actual width of the image, but can be reset as desired. See “Constrain width/height” below.
  • Constrain width/height – If this box is checked before changing an image’s width or height attributes, Illume will automatically ensure that the image maintains its original proportions when resized. That is, if the image’s width is reduced by 20%, Illume will automatically reduce the height by 20% as well. This ensures that the image displays correctly after being resized.
  • HSpace – This is the horizontal space, measured in pixels, on the left and right sides of the image. If text runs up against the edge of the image, increase the image’s hspace attribute to provide more space. Setting this to 10, for example, will create an empty margin 10 pixels wide on the left and right sides of the image.
  • VSpace – This is the vertical space, measured in pixels, that appears above and below the image. Setting this to 10, for example, will create an empty margin 10 pixels high immediately above and below the image.
  • Border – This is the thickness of the border, measured in pixels, that surrounds the image. A value of zero means the image will have no border. Most browsers will apply a gray border to images. The only way to override this is to define a different color in a CSS stylesheet.
  • Alignment – This determines how the image will be aligned on the page.

Baseline aligns the bottom of the image with the bottom of the line of text that precedes or follows the image.

Left aligns the image on the left side of the page, or on the left side of the table cell, if the image is in a table.

Right aligns the image on the right side of the page, or on the right side of the table cell, if the image is in a table.

Center aligns the image in the center of the page, or in the center of the table cell, if the image is in a table.

  • Alternate Text – The alternate text property provides a description of the image. Normally, participants see this description when they mouse over the image, or when their browser is waiting to load the image. If a participant’s browser cannot display images, it will display the image’s alternate text instead.

NOTE: The alternate text attribute is important for visually impaired participants, whose computers may read the survey pages aloud to them.

Because the computer cannot “read” an image aloud, it reads the description of the image contained in the alternate text attribute.

If creating a survey aimed at government employees, or funded by the Federal government, the US Government’s Section 508 Usability guidelines require surveys to provide an alternate text description with all images. Find out more about the Section 508 guidelines at http://usability.gov/

Deleting an Image

To delete an image in the HTML editor, simply click on the image and press the delete key.

Adding Links

To add a link to the Text/ HTML item, follow these steps:

  1. Select the text or image to which to attach the link. (If nothing is selected, the HTML editor will automatically insert the link’s URL as the text of the link.).  In the screenshot below, the text CLICK HERE was highlighted
  2. Click the Insert Link DS_InsertLinkIcon.gif button.
  3. Type in the link’s URL. For example, to link to DatStat, type in “http://www.datstat.com” as the URL.
  4. Click OK.

NOTE: When adding a link to an external location, Illume will automatically insert “target=blank” to the URL.  This will force this link to open in a separate browser window so the survey session is not lost.

Editing Links

To edit a link:

  1. Select the text or image to which the link is attached.
  2. Click on the Insert Link button.
  3. Change the URL as needed.
  4. Click OK.

Deleting Links

To delete a link:

  1. Select the text or image to which the link is attached.
  2. Click on the Insert Link button.
  3. Delete the entire URL.
  4. Click OK.

Copying and Pasting from Microsoft Word

It is possible to copy and paste text directly from Microsoft Word into the HTML editor, and the formatting will be preserved. It is also possible to highlight a section of a Word document and drag this highlighted text into the HTML editor. This has the same effect as copying and pasting, bringing both the text and formatting from Word.

  1. Click on the Text/HTML icon DS_TextItemIcon.gif in the Survey Designer toolbar.
  2. Highlight the text in the Word document to copy.
  3. Press Control-C to copy the text from Word.
  4. Click in the HTML editor and press Control-V to paste the copied text.
  5. Click OK to save the HTML.

NOTE: When pasting text from a Word document into the HTML tab of the HTML editor, the text pasted will retain the formatting from the Word document. When pasting the text into the Source tab of the HTML editor, the text will lose all of its Word formatting. This second option is preferable for the text to conform to the survey styles set up or to remove the extra Word formatting that may cause unexpected behaviors in the rendered survey.

Editing the HTML Directly

To edit HTML directly, click on the Source tab, on the bottom left of the field. Switch back by clicking the HTML tab again.

HTML Tab

text

 

Source Tab

source