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.

See the Image Recommendations section below for some best practices for uploading images in OttoLearn.
Embed icon.  Object (embedded)Embed an object.
Table icon. TablesCreate a table.
YouTube icon. Video 
Embed a video from YouTube. 
Video icon. Video
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  

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. 
Link icon.LinkTurn the image into a link.

If no alt text is entered, the following placeholder text will be used: "Image as link".
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.

Image Recommendations

When uploading images in your Knowledge Cards and Activities, we recommend the following: 

  • Images should be at least 800px wide if you are using the "stretch" alignment.
  • Avoid uploading images with transparent backgrounds, as content may display on different colored backgrounds in the system.

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="">
<script type="text/javascript" src=""></script>
<script type="text/javascript">iFrameResize();</script>

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.
Numbered List icon. Numbered ListAdd a number before each item in a sequence.
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.