DesignPLUS uses JavaScript to transform some elements from their basic HTML structure to more complex and interactive structures that are not possible with the RCE alone.
DesignPLUS has many interactive elements that cannot be saved in the Canvas RCE. These elements are built with our JavaScript on the saved view of the content. That's why the HTML you see in the editor doesn't always match what you see on the saved view.
Here is a table with a few examples of some of the transformations accounting for the differences in HTML from editor to saved content.
| Element | HTML in the editor | Transformed HTML |
| Quick Check | a simple <div> element with a <p> question and a <dl> element that has <dt> for answers and <dd> for feedback |
the <div> has a <fieldset> and the answers text become <input type="radio"> and the submit button has an event to reveal the feedback of the checked input. <input> elements cannot be saved in the Canvas RCE so they must be rendered via JavaScript |
| Side Navigation | a placeholder <div> with an <i> icon and text. |
a fixed position <div> containing a trigger <button> that reveals a <ul> list of <a> links to course items This is built dynamically in part so that it always has up-to-date links for course content. |
| Dialog Box | an <a> and <div> with corresponding id and class attributes | the <a> is given modal trigger events and the <div> is hidden until triggered, then appears over the whole page with a transparent black background |
It's also important to note that if the DesignPLUS JavaScript is not available to perform these transformations (e.g. an institution stops licensing DesignPLUS) then the content should deprecate in a meaningful way. We use a semantic HTML structure in the editor in case the DesignPLUS JavaScript is not loaded to transform. A good example of this is how we use HTML headings for tab structures so that if the tabs (which are a list of buttons when transformed, not headings) were ever to deprecate, the proper heading structure would be maintained. You can learn more about that in an article specifically about tab structures.
To see how your DesignPLUS content would render without DesignPLUS, see How will my Canvas page look in a Canvas instance without DesignPLUS?
Similarly, Module Lists, Quick Checks, and other dynamic elements may look different in the RCE than when the page is saved. To test how content will appear after it is saved, some tools have a Preview panel, an App Preview panel, or content can be previewed in the Preview Content tool.
DesignPLUS is built with accessibility in mind. If you find something is not accessible or have questions about this transformation of specific tools, please submit a support ticket by filling out the Cidi Labs Support Form.
Also, see these articles for more information: