Text Block
Margarita Berezyanskaya
Last Update منذ ١٠ أيام
The power and versatility of the Text block is enabled when HTML code is entered into this block after choosing the Source code tool.
Entering HTML code is not as difficult as it seems. There are many web and social media sites that provide readily-available HTML codes which can be copy-pasted into HTML blocks to create widgets that will display, for example, a YouTube video, a dictionary, a photo slide show, a clock, a Padlet board with a custom message, etc. There are multiple possibilities using this feature.
Exemplar
Two examples of HTML blocks are found in the Stage 2/3 Exemplar course. The Courseware Help block was created using the HTML text editor tools. Specifically, it was developed using the Insert/edit image and the Insert/edit link tools. There is also an example of an embedded YouTube video. This was added by copying the video’s Embed code (available after clicking Share on the YouTube video page) and pasting it into the HTML block after clicking the Edit HTML source tool.
Adding a Text Block to a Course
1. At the top of the Course Homepage, click on the Edit mode toggle button in the upper right corner of the screen to activate the editing tools.
Note: The toggle moves to the right, indicating that course editing is now on. Look for editing icons on the course page, this indicates that course editing is now on.
2. On the right side of the screen, click on the Open block drawer icon.
3. Click on the Add a block button that appears.
4. In the Add a block pop-up that appears, choose the Text.... option.
Note: The Add Text block setting screen appears.
5. Type a Text block title.
6. Type some text or add any media into the Content box.
6. Click on the Save changes button.
Configuring a Text Block Using the Atto Editor
1. With course Edit mode on, ensure that the Block drawer is open and visible.
2. Go to the Text block to be configured.
3. Click on the block's Edit icon.
4. Choose the Configure (block name) option.
The Configuring a Text block screen appears.
5. Type or update a title in the Text block title text box.
6. Type text or update the text the Content box.
7. To add an image, clicking on the Reveal of Hide additional toolbar items icon.
8. More icons appear. Click the Image icon.
Note: A pop-up appears.
9. Add an image.
Note: The Image details window appears.
The Image details window is displayed. It includes a preview of the selected image. A brief description box of the image. Set the desired size. if the Auto size checkbox is checked, the image will retain its ratio based.
12. Click the Save image button.
Note: It will appear similar to this.
ADD A HYPERLINK
Use the following steps create a hyperlink from the Text block.
13. Click on an image to select it. When you click on the image, it will turn blue to show it has been selected or select text.
14. Select either the image or text and click on the Link button.
Note: The Create link window appears.
15. Enter the URL (or web address) that the link should display in the Enter a URL text box. Check the Open in new window checkbox. Alternatively, you can leave this box unchecked if you want it to open the link in the same window. The browser's back function or arrow must be used to return to the course page.
Note: Clicking links on the new web page may make returning to the course page challenging. It is recommended that links to external or other sites open in a new window, so learners can navigate back to the courseware more easily. It is also advised to be consistent when setting up hyperlinks.
16. Click on the Create link button.
Note: The same steps are followed when setting hyperlinks for text in an HTML block. Type some text in the Content area of the HTML block. Highlight the text desired to function as a hyperlink. Click the Insert/edit link button in the Text editor toolbar. Insert the URL in the Insert/edit link window.
Configuring an HTML Block Using the HTML Code from an External Website – YouTube
These instructions explain how to embed a YouTube video into an HTML block. Before following these steps, locate a video on YouTube and copy its embed code. Tips on obtaining the embed code for a YouTube video are explained first.
Locating and Copying HTML Code for a YouTube Video
1. Navigate to a video page on YouTube.
2. Click the Share link located below the video.
3. A set of sharing icons appear, click on the Embed icon.
4. The Embed Video code screen appears, click on the COPY link.
This custom embed code is ready to be pasted into an HTML block.
Embedding HTML from YouTube Video in the HTML Block
1. With course Edit mode on, ensure that the Block drawer is open and visible.
2. Go to the Text block to be configured.
3. Click on the Text block's Edit icon.
4. Choose the Configure (block name) option.
5. Optional - update or add a Text block title.
6. Type directions for students in the Content text box.
7. Click the place where the video will appear.
8. Click the View menu item in the Text editor toolbar.
The Source code pop-up appears Once the embed code from YouTube has been copied, paste the code into the Source code editor.
9. Click on the Save changes button.
The video is displayed in the Content text box on the Configuring a (new Text block) block page.
The video is embedded on the course page. Learners can play the video using the video controls, in full screen mode or on the YouTube page itself.
Note: It is advised not to embed numerous videos on the same page, since pages with multiple videos will load slowly.
Video Resources
Resources