Flexible course template

[tobe_baeyens]

Hey,

I've been trying to come up with a course template that's easy to use, helps teachers to structure their content, and supports different kinds of learning.

I would really appreciate your feedback.

This is what I came up with:

I've rearranged the navigation menu (on the left).

1. I think outcomes should be at the top, just underneath the link to the home page. The student can find all the course outcomes there with a long description. This will give the student an indication of the content of the course.
2. Assignments, modules and files are next. They contain information. Assignments has groups with assignments and sub assignments. Modules has different modules that are linked from assignments or from the homepage. Files contains course materials like presentations, documents,... There is one hidden folder with all the files and images that are just used on pages. The other files are structured in different folders with lesson material.
3. Discussions, grades and people have to do with communication. Grades is a dashboard that the student can use to check progress. The student can see which course outcomes have been completed, and which course outcomes still need work.

On the home page I've tried to focus on  learning. There are 4 components. The header table, assignments, modules and course content.

Header table

The header table contains information about the course. It's just a table with one column and two rows. The top row contains the course title (header 2). The background color is lavender, but it could be any web color. I just use the name of the color in the advanced cell properties. The bottom row contains links to pages with important information about the course.

Underneath the header table I place assignments, modules and course content (header 3). The order is similar to order of the links in the navigation menu.

Assignments

Assignments only contains the main assignments. It doesn't contain the small sub assignments that are part of another assignment or a module. Assignments can be used for active learning. I did create a template for assignments:

• At the bottom you find a rubric with criteria and the course outcomes that have been aligned with the assignment.
• Then there is an assignment description. This could explain the assignment briefly or just describe the different steps that the student has to complete.
• The activities are there to support the student. These can be web pages, discussions, small modules, video's, lectures, quizzes, sub assignments,... Active learning means that the student will focus on the assignment, and will use the activities to get support.

Once the student submits a first revision of the assignment there will be a chatbox with comments on the right that can be used to support the student. Both the student and the teacher can add comments. The student can also re-submit (feedback loop).

Modules

Modules can be used for passive learning. The student can start a module and will be exposed to new material in a structured and meaningful way.

Course content

The course content can be used for micro-learning. It's like an encyclopedia with information. There can be different topics. I used a table with three columns and two rows. The first row contains the topics (header 4). The second row contains lists with pages that can be accessed with one click. Every page does focus on one thing.

The student can quickly look something up, or pick a topic and do some micro-learning. A page could contain text, images, video,... The pages can be studied when the student is travelling, waiting at the checkout,...

[Shar]

Hi Tobe Baeyens,

I typically do not like to be first to comment on anything, but I'd like to give you some feedback and ask some questions.

I like the FAQ link on the homepage, does this lead to a page with pre-populated tips or does it lead to a discussion where students can ask their questions? In the past, I've done FAQ pages with tips in advance since there were things from the syllabus or the structure of course that would need to be explained in more depth.

I like the idea of putting the Outcomes high on the Course Navigation, I had never considered that before I think mostly because there's been reluctance to use the Outcomes feature with the faculty here. What does the student see when they click on Outcomes? This is whole new territory for me.

I like the idea of micro-learning, but I usually think of modules (lessons) as doing that since they have the built in navigation to go from next screen to next screen. Were you envisioning students navigating to distinct pages and then back out to the homepage, almost like a glossary?

What level of student are you designing for? and how much are faculty expected to be able to make modifications? And finally, have you marked the tables as used for layout so that screen readers do not have problems? Are your tables responsive? You mentioned students consuming content on-the-go, so I am making a leap in thinking the tables resize for the mobile screen.

Thank-you for taking the leap and sharing your course template design ideas with us,
Cheers - Shar

[tobe_baeyens]

Hi Sharmaine,

Thank you for your feedback.

1. The F.A.Q. is a page with questions that have links to answers. Every answer is on a seperate page so they are a self containing unit that can be shared with a link. Teachers can do this when they give feedback.
2. The student will see all the outcomes in a side panel. When they click on an outcome they will see the title, the description (this is like a page which can contain text, links, images, video's,...), and the way the outcome is calculated (rubric and weighting method). (screenshot).
3. The content at the bottom is like a website (encyclopedia). The pages are units. They have links to other pages. Every page has information that the student can study in a timespan from 5 minutes to 30 minutes. Every page is a entrance to the course content and can be used to start discovering. Words that are not clear contain links. It's a bit like an encyclopedia. There is no previous page and no next page. I think I do need a template for these pages. Students should be able to go back to the home page without to much hassle. Teachers can also share links to these pages when they give feedback. Modules are bigger units that take more time to complete and present information in order. Modules can also contain quizzes,... But your right, a module can also be small, and a student can work on it on the go. I think that all the course content should be mobile friendly and easy accessible.
4. I work for a university college so that's what I design for, but I think this could work for any age group.
5. Faculty should be able to create every part of the course. Even if they don't have access to the template and they don't know how to write code. I think most people will only use parts of the template. 
6. The tables have been created with the rich text editor. They have a width of 100% which is standard. They do look fine on most mobile phones, but they are not really responsive because this can't be done without writing code. They are not marked as used for layout. The problem is that the rich content editor is very limited. Tables are the only thing that can be used to place information next to each other. I know it's wrong, but I wanted more than just a vertical layout, and I wanted to limit myself to the rich content editor.

This  is how it looks like on my mobile phone.

landscape:

portrait (my phone has a 17:9 ratio):

[oneill_edward]

I think what you did is excellent and thoughtful but necessarily incomplete.

I love the use of tables to show a different organization of the material. I think that's a very clever way to get more information on the page and to get away from lists and scrolling. Better than tabs, even. 

The main challenge in what you're doing is: there are several ways instructors like to organize their courses conceptually (big ideas first, foundations then details, historically, etc.), and several ways to organize a site: content types vs. activities, for instance (e.g, Files vs. Discussions). 

Thus I tend to think a single template will be less effective than several different templates showing several different organizations.

Even showing the same content as skills vs. principles vs. historically. (This can be done for cooking, with a little research: consider the difference between a course on how to paint vs. the history of painting vs. purely aesthetics vs. socio-political issues in art.)

A second challenge is rhetorical: cooking is a skill, and in higher education, there is a cultural resistance to the idea of teaching skills--as if it's somehow inferior to teaching ideas or concepts. (Of course, you'll never understand anyone's ideas or concepts unless they are built or communicated with some set of skills, but that doesn't occur to many people.)

A third challenge is: how do instructors know what they are looking at? You might consider an annotated version in which, e.g., "Modules" says next to it "[These organize pages, quizzes, discussions, etc. into a clear sequence]" (or the like).

You might be able to create multiple templates in Canvas by creating Groups and giving each Group its own tools, so each Group becomes a mini-exemplar of a different organizational strategy. You may have to log in as several different students using a few emails, or collaborate with some peers. I've never tried using Test Student to create a Group, but that might be an option.

In short, you have created an excellent and terse model for one approach. And your choices are thoughtful and reasonable.

But dictating that one approach may be problematic, and offering choices may be more appealing for your intended audience. 

Put in learning terms: if you want the learners to build a mental model of what Canvas can do for them, seeing multiple uses of the same tools may help your learners (instructors) to build a clearer mental model of what Canvas is--which is hard for newcomers to grasp.

I look forward to seeing your continued work on this!

--Edward

[anthony_sales1]

I have also tried to make a flexible template for staff but have taken a very different approach - graphical menu system rather than tables with links - but like yours it works on desktops, tablets and phones as well  For details follow link below:

Creating graphical menus with editable text overlay in the content editor 

[heatherlbrown77]

I cannot get the flexboxes to work now that the StyleGuide has been deprecated. In fact, I'm having a hard time doing a lot of things now that its gone. I know that it was never meant for designers but does anyone know of a replacement or what to do for things like tabs, accordion, buttons etc. now that a lot of that code no longer will work? I heard they're using React now but I don't know how to access that. I had just mastered a lot of the content in the StyleGuide when they shut it down. Frustrating.

[Shar]

Hi heather brown,

What's happening to your former flexboxes now? My flexbox pages are still functioning properly.

I understood the deprecated styleguide to mean that tools(code) from the styleguide would still work but that no new features would be added. See Arlo's bold words reply.

Cheers - Shar

[heatherlbrown77]

What is happening to me now is that I type the code into the RCE (on the HTML side) and when I click Save, the HTML disappears. I am going to try again today. I'm hoping maybe it was just a browser issue or something. But for the life of me, I could not get flexboxes to load yesterday.

[oneill_edward]

I have also found that Canvas deletes (or simply doesn't save) html code it 'doesn't like.'

--Edward

[Shar]

Check out the Canvas HTML Editor whitelist

https://tr-learncanvas.s3.amazonaws.com/docs/Canvas_HTML_Editor_Allowlist.pdf 

Shar