Submit a request
Submit a request

Adding supplemental content to text through the pop-up content feature

The pop-up content feature allows authors to add supplemental content to their assessment text in the form of additional text, images, or text with an image.

Note: pop-up content is only available when using the Author Site, or Author API. 

Pop-up content is accessed by learners through a dismissible pop-up widget during the assessment delivery. Authors can also access the pop-up content as part of the widgets preview.

Authors can add pop-up content to text in the stimulus field of all Question types, including custom Question types, and to the content field of passage Feature types such as the shared passage feature.

To define supplemental content for text using the pop-up content feature, select the text and click on the 'Add pop-up content' feature option. Clicking on the option will launch a pop-up with four sections.

  1. Display text, which is the text that would be visually shown as part of the widget's content.
  2. Pop-up Content, which is the supplemental text that you want to display in the pop-up. This is limited to 250 characters. Basic text formatting like bold, italics and underlined can be applied to the Pop-up Content text.
  3. The image section where you can upload an image to be displayed along with the text in the Pop-up Content. It is recommended that you do not upload an image more than 250 by 250 pixels as they would be resized while rendering on the assessment site to a maximum of 250 pixels in height or width while maintaining the aspect ratio. 
  4. Image alternative text, where you can provide the alt-text for the image uploaded.



Figure 1: The pop-up content option.


Authors will get a preview of how the pop-up content feature would look like while filling in the sections. After the sections in the pop-up are filled in and Authors click the OK button, the text with pop-up content defined for them will have a visual indicator (border) around them. Authors can choose for the pop-up content to be text only, or upload an image only or do both.



Figure 2: Visual indicator for text with pop-up content.


The visual indicator will be shown only in the rich text editor in the widget edit mode and will be shown differently when previewing the widget. Authors can hover the mouse cursor over the visual indicator for text which has pop-up content defined, to easily access the pop-up content options to edit and remove. Learners will see a dotted underline for the text which has pop-up content defined for it. Clicking on the dotted underlined text will launch the dismissable pop-up with the content and / or uploaded image. 



Figure 3: Rendering of the pop-up content feature in widget preview.


The pop-up will render either above or below the display text, depending on the location of the display text in the assessment window, and will contain either the image (not exceeding 250 by 250 pixels maintaining aspect ratio), text only not exceeding 250 characters or both image and text. For pop-up content with image and text, the image appears to the left side of the text.

For mobile screens with 522 pixels width or lower, the pop-up content will be rendered in the centre of the screen and scrolling is disabled whilst the popup is active. When the pop-up content comprises both image and text, for mobile screens, the pop-up changes from a landscape to a portrait orientation, with the image position appearing above the text.

The pop-up content can be dismissed by clicking the pop-up’s close button, clicking outside the pop-up content or pressing the Esc key. 

The pop-up feature is accessible. With the screen reader (voice over) on, the reader announces the pop-up’s hidden heading element. The user can navigate the pop-up content with their system’s key sequence, for a Mac this would be `control` + `option` + `<` or `>`, for their reader to announce the image alt text and / or the content of the pop-up text.

Authors can use the pop-up content to provide definitions, supplementary content, or even reference images to key words or text within the assessment content.

Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity by clicking here.