Using Rich Text Editor with PlayPosit Interactions
In this article
What is Rich Text Editor and what interactions support it?
When building interactions in PlayPosit, instructors will see the rich text editor bar appear when they type in the text. Besides the basic functions like formatting text, instructors can also utilize the rich text editor to insert images, files, audio clips, or hyperlinks to the interactions that make the learning experience more engaging. Instructors can also format the content with headers and alternative text to ensure the accessibility of the bulb. Please see this article for more information about accessibility in PlayPosit.
Learners can also benefit from the rich text editor. When answering an interaction that requires the learner’s input, They can also use the rich text editor to insert images or files as their supplemental resources or answer the question by recording their responses. This flexibility can encourage learners to participate in the learning process with their preferred format and allow instructors to use creative ways to assess learners’ learning outcomes.
The instructors will have access to the rich text editor when building interactions, including the answer options and feedback sections. And the learners can use the rich text editor when they interact with the free response interaction and the discussion interaction.
Rich text editor functionalities
Jump
The Jump function will create a hyperlink/button that jumps learners to the selected timestamp in the bulb.
- Allow learners to skip interactions
- Apply this option to all existing interactions
- Allow viewers to fast forward
Please see more detailed information about creating branched learning in PlayPosit in this article.
Please follow the steps below to create a jump:
-
Click the Jump icon on the rich text editor.
-
Enter the text that would like to display on the hyperlink or the button, enter the timestamp that the learners should jump to, and select the display type.
-
Click Insert to add the jump.
Video
- Only some licenses that include HLS upload features will see this function.
- The video uploaded to the interaction will also count as the HLS usage in the license.
The video function lets users upload the video, record a screencast, or record the video through the webcam and insert the video into the interaction or their responses. Please follow the steps below to insert the video.
-
Click the Video icon on the rich text editor.
-
There are three options to upload a video:
- Upload the files from the device.
- Record a screencast.
- Record a video through the webcam.
-
Wait for the video to be fully uploaded and transcoded, and the video will be added to the interaction afterward.
File
- For audio and image files, please see the next section and use the dedicated upload icon.
- The max file size is 25 MB.
The uploaded files will be listed under the Attachment section in the interaction, and learners can download them by clicking on them. Please follow the steps below to upload files to interactions.
-
Click the File icon on the rich text editor.
-
Select the file from the device.
-
If the instructor wants to remove the file, please click on the X behind the file.
Audio
Users can create a 90 seconds audio recording directly from the rich text editor and insert it into the interaction or their responses. Please follow the steps below to record the audio.
-
Click the Audio icon on the rich text editor.
-
Click the record button to start recording. The timer will start counting down from 90 on the right.
-
Click on the stop icon to start recording.
-
(Optional) Preview the recording by clicking the play button.
-
Click the green check mark to save and upload the recording or click the red delete button to record again.
-
To remove the recording, please place the text cursor behind the recording and use the Backspace button on the keyboard to delete it.
Image
Users can insert the image into the interaction either by pasting the image URL address or uploading the image from the device. Please follow the steps to insert images into interactions.
-
Click the Image icon on the rich text editor.
-
There are two options to insert the image.
- By the image URL address: Paste the URL to the Source section, and enter the alternative text to the Image description section. Then click on Ok to insert the image.
- Upload the image from the device: Select the Upload tab on the top, click on browse for an image to select the image from the drive, or drag and drop the image to the below section. After uploading the image, click Ok to insert it into the interaction.
-
After the image is inserted into the interaction, users can drag the corner of the image to resize it.
-
To remove the image, please place the text cursor behind it and use the Backspace button on the keyboard to delete it.
Reactions
Select an emoji to add to the interaction.
Equation
Use the equation editor to create an equation with LaTex code and provide the alternative text to ensure the accessibility of the equation.
To insert an equation:
-
Click the Equation icon on the rich text editor.
-
Enter the equation in the LaTex format in the input section.
-
There are some pre-formatted symbols and options to select. Please hover over to see more options.
-
Enter the alternative text in the Label section, and the screen reader will read out the content entered in this section.
-
Click Ok to insert the equation.
Bold & Italic
Highlight the text and add bold and/or italic formatting to it. There are more formatting options in the format menu, and please see the section below.
List
There are two options for creating a list in the interaction: ordered and unordered. Besides the default settings, users can also click the downward arrow next to the list icon to select different styles for the list.
Special character
Expand the menu by clicking on the special character icon and selecting the character from it.
Edit
Users can edit the text in the interaction with this menu, including undo, redo, copy, cut, paste, select all, and find and replace.
Insert
For the image, special character, and equation, please see the introduction above.
-
Insert link: Create a hyperlink to the website selected by the users. Please follow the steps below to insert the link.
- Select Link from the insert menu.
- Enter the URL of the desired website.
- Enter the text that will be displayed for the hyperlink. The title will be the information that pops up when the cursor hovers over the link.
- Use the target section to set the link to open in a new window or the same window.
- Click Ok to insert the link.
-
Insert source code: PlayPosit supports the HTML editor that allows users to format and edit content with the HTML code. Please see more instructions on using source code with PlayPosit in this article.
Format
Apply formatting options to the selected text. Please highlight the desired text, and select the formatting options from the drop-down menu.
- Headers:
- Highlight the text, select Format, Formats, and select Headers.
- Pick a header size from the list.
- To remove the header properties, please repeat steps 1 and 2 above.
- Inline:
- Highlight the text, select Format, Formats, and select Inline.
- Select the inline effect from the list.
- Alignment:
- Highlight the text, select Format, Formats, and select Alignment.
- Select the alignment from the list.
Table
Create a table to organize the information in the interaction or responses. Please follow the steps below to generate a table.
-
Select Table from the drop-down menu.
-
Draw out the table.
Once the table is created, please type in the information for each cell by moving the cursor to it. Users can also use the quick toolbar below the table to insert or delete rows and columns from the table or edit the table properties.
Inside the table properties, users can adjust the table’s formatting and size. To change the color of the border and background, please click on the Advanced tab on the top, and enter the HEX code of the desired color into the corresponding section.
To adjust the cell’s properties, please move the cursor to the selected cell and select Table, Cell, and Cell properties.
Learner experience with the rich text editor
When interacting with the free response interaction and the discussion interaction, learners will also have access to the rich text editor.
Learners will be able to use the following features in the rich text editor in free response, discussion, and the learner note:
- Reactions
- Audio
- Image
- Equation
- Bold & Italic
- List
- Special character
- Insert link
- Source code editor
- Format
- Table
If the instructors allow the video upload and file upload feature under the advanced settings, learners will also be able to upload videos or attachments to their responses.
- The rich text editor is not available for fill in the blank inputs for learners.
- Only some licenses that include HLS upload features will see the insert video function.
- The video uploaded by learners will also count as the HLS usage in the license.
- Learners can not upload file attachments to the discussion forum.