{"id":2593,"date":"2023-06-20T10:00:00","date_gmt":"2023-06-20T09:00:00","guid":{"rendered":"https:\/\/blogs.ncl.ac.uk\/fmstel\/?p=2593"},"modified":"2023-06-20T16:12:41","modified_gmt":"2023-06-20T15:12:41","slug":"styled-blocks-in-canvas","status":"publish","type":"post","link":"https:\/\/blogs.ncl.ac.uk\/fmstel\/2023\/06\/20\/styled-blocks-in-canvas\/","title":{"rendered":"Styled Blocks in Canvas"},"content":{"rendered":"\n

Ngage was used in tandem with Blackboard, but since the move to Canvas in 2020 the system has slowly been phased out and will be decommissioned in the next academic year. <\/p>\n\n\n\n

A feature used quite extensively in Ngage were the activity elements. These elements were styled blocks which highlighted an actions was required. <\/p>\n\n\n\n

\"\"
Q&A block in Ngage<\/figcaption><\/figure><\/div>\n\n\n\n

We did not want to lose these call to action blocks when we moved to Canvas so we recreated the most popular elements using the HTML editor in Canvas. We built on the original idea by using different colours and styles to represent different tasks or actions. By using the same styled blocks across all courses and modules students can navigate the content with ease, and at a quick glace know what is expected of them. They also help to make the content more visually appealing. <\/p>\n\n\n\n

\"\"
Reading Activity block with pale green background and uppercase title<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Optional reading block with grey background, dotted border and lowercase title<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Q&A block with pale green background, solid grey border and interactive button<\/figcaption><\/figure><\/div>\n\n\n\n

To add even more colour and visual interest we agreed on an emoji for each task and added them to the blocks as well. <\/p>\n\n\n\n

Emoji<\/th>Activity<\/th><\/tr><\/thead>
?<\/td>Discussion Board<\/td><\/tr>
?<\/td>Reading Activity<\/td><\/tr>
?<\/td>Watch a Video<\/td><\/tr>
?<\/td>Listen to a Podcast<\/td><\/tr>
?<\/td>Research Activity<\/td><\/tr>
\u2754<\/td>Q&A or Quiz<\/td><\/tr>
?<\/td>Journal Activity<\/td><\/tr>
?\u200d?\u200d?\u200d?<\/td>Group Activity<\/td><\/tr>
?<\/td>Blog Activity<\/td><\/tr>
?<\/td>Padlet Activity<\/td><\/tr>
?<\/td>Timetabled Event <\/td><\/tr><\/tbody><\/table>
Our chosen Emojis<\/figcaption><\/figure>\n\n\n\n

We decided to use emojis instead of icons as emojis can be placed in page titles as well. Adding emojis to page titles gives students a broad idea of what is to be expected that week. <\/p>\n\n\n\n

\"\"
Example of using Emojis in page titles<\/figcaption><\/figure><\/div>\n\n\n\n

Having the emojis in the titles also allows Instructional Designers and Module Leaders to view the distribution of tasks throughout a course, and quickly know which pages may need updated for the following year. Padlets, for example, need to be remade each year and a quick scroll through the modules area is all that is required to locate all the pages that contain padlets.<\/p>\n\n\n\n

Want to make your own blocks?<\/h2>\n\n\n\n

You may first want to speak with your School or Programme team to come up with a shared theme or design. The blocks work best when used over multiple modules.<\/p>\n\n\n\n