The WYSIWYG (What You See Is What You Get) editor allows you to format your content and add media to your Activity questions, answers, and feedback. 

Adding Media 

To add media to your content, click New Block New Block icon.  and then select a media type.

ProTip: If you don't see this icon, try starting a new line in your question, answer, or feedback by hitting Enter on your keyboard. 

You can add the following media types: 

Sound icon. AudioUpload an audio file (MP3). 
Image icon. ImagesUpload an image or GIF.

To reduce potential loading times, we recommend resizing all images to be 600px wide (or less). If you are using the "stretch" alignment, images should be at least 500px wide.

Ideally, images should also have a height:width ratio of 16:9 or less, otherwise they may appear cut off on some devices.
Embed icon.  Object (embedded)Embed an object.
Table icon. TablesCreate a table.
YouTube icon. Video 
(embedded)
Embed a video from YouTube. 
Video icon. Video
(uploaded)
Upload a video file (MP4).


You can add emojis to your content by entering the Unicode or pasting them in from a site such as https://emojipedia.org/.  

Note: The editor may display different options depending on your plan type.

Formatting Your Content

The WYSIWYG editor is adaptive and will display different formatting options depending on the media or text you have selected. 

To format media, click within the media item's block. 

To format text, highlight (select) the specific word(s) or paragraph(s) you want to format.

Formatting Audio

Supported file format: MP3

Loop icon. LoopAutomatically repeat the audio (continuous loop).


Formatting Images 

AltText Toggle icon. Alt TextEnter alternative text to be read by screen readers.

We recommend always adding alternative text to ensure your content is accessible.
Add a New Line icon. Add a New LineAdd a new line directly above the image. 
Align Left icon.  Align LeftAlign the image on the left side.
Align Center icon.  Align CenterCenter the image. 
Align Right icon.  Align RightAlign the image on the right side. 
Stretch icon.StretchStretch the image to be the full width of the display area.

If you are using the "stretch" alignment, we recommend resizing your images to be 500px wide.


Formatting Objects (Embedded) 

Embed Code 
In the text field, enter an object's embed code. This works best when the code is contained within an <iframe> element.

You can embed different types of objects, including Vimeo videos, Prezi presentations, and Zingtree decision trees.

For example, one of our Zingtree decision trees has the following embed code: 

<iframe width="100%" frameborder="0" seamless src="https://zingtree.com/deploy/tree.php?gallery_id=92">
</iframe>
<script type="text/javascript" src="https://zingtree.com/js/iframeResizerSmart.js"></script>
<script type="text/javascript">iFrameResize();</script>

Size
After entering the embed code, decide how you want your object to display.

We provide several height/width ratios that work well on mobile devices, including: 

  • 1:1 (default) 
  • 21:1 (Extra Wide)
  • 16:9 (Wide)
  • 4:3
  • 3:4
  • 9:16 (Tall)
  • 9:21 (Extra Tall) 

Formatting Tables

Insert Column to the Right icon.Add ColumnAdd a column to the right.
Insert Row Below icon. Add RowAdd a row below. 
Remove Current Column icon. Remove ColumnRemove the current column.
Remove Current Row icon. Remove RowRemove the current row. 


See the Formatting Text section, below, for information about formatting text within tables. 

Formatting Text

Small Text icon.Small TextDisplay the text in a small font.
Regular Text icon.Regular TextDisplay the text in a regular font (recommended).
Bulleted List icon. Bulleted ListAdd a bullet before each item.

You can highlight one or more lines to create a list.
Numbered List icon. Numbered ListAdd a number before each item in a sequence.

You can highlight one or more lines to create a list.
Align Left icon.Align LeftAlign the text on the left side. 
Align Center icon.Align CenterCenter the text. 
Align Right icon.Align RightAlign the text on the right side. 
Link icon.LinkTurn the selected text into a link.
Bold icon.BoldBold the selected text.
Italic icon. ItalicsItalicize the selected text.
Underline icon. UnderlineUnderline the selected text.


Formatting Videos (Embedded) 

Fullscreen icon. Full ScreenAllow learners to play the video in full screen mode. 
Loop icon.LoopAutomatically repeat the video (continuous loop).
Add a New Line icon. Add a New LineAdd a new line directly above the video.


Formatting Videos (Uploaded) 

Supported file format: MP4
Loop icon.LoopAutomatically repeat the video (continuous loop).
Add a New Line icon. Add a New LineAdd a new line directly above the video. 
Align Left icon.Align LeftAlign the video on the left side.
Align Center icon. Align CenterCenter the video. 
Align Right icon. Align RightAlign the video on the right side. 
Stretch icon. StretchStretch the video to be the full width of the display area.