HTML Question Text

Overview

For those with experience using HTML, it is possible to format question text using HTML tags and CSS styles. To view the HTML code, click on the Code button on the question text editor toolbar.

CSPro supports all tags and attributes in standard HTML5, including images, tables, and CSS styles.

The HTML for each question does not include the <html> or <body> tags. The HTML question text is inserted into to a complete HTML document that already has those tags.

Styles

All styles defined in the Edit Styles dialog are included as CSS classes in the HTML document by CSPro. These styles can therefore be used in the HTML question text by setting the class attribute of a tag to the name of one of the styles. For example:

<p>A question with <span class="instruction">a style applied to this part</span>.</p>

The normal style is applied to the <body> tag by CSPro so that all unstyled text in the question text uses the normal style.

In addition, the document created by CSPro sets the background color to yellow on Windows Desktop and to gray on Android.

Finally the document adds some basic styling to tables such as borders and padding.

External Files

References to external files such as images and stylesheets may be included in the HTML question text. All paths must be relative paths based on the location of the application (.ent or .pen) file. Absolute paths are not supported. When deploying your application, make sure to copy the external files as well or include them as application resources.

Using JavaScript to Interact With CSPro

You can use the Action Invoker, called using JavaScript, to interact with various CSPro features. For example, you can call user-defined functions from question text. This feature allows advanced users to take advantage of the power of JavaScript to allow some interaction between question text and CSPro logic. For example:

<p>
You are entering person ~~curocc()~~.
If all persons have been recorded, <a href="#" onclick="endRoster(); return false;">end the roster (with a household size of ~~curocc() - 1~~)</a>.
</p>
<script src="/action-invoker.js"></script>
<script>
function endRoster() {
let CS = new CSProActionInvoker();

CS.Logic.evalAsync({
logic: "EndPersonRoster();"
});
}
</script>

To use the Action Invoker from question text, you need proper permissions granted using access tokens.