Ch-Ch-Ch-Ch-Changes made at KU LeuvenA new portal and custom course design

Bert Coenen, Toledo

It's a portal, Jim. But not as we know it...

3

• Notifications

• Stream• Chronological• By source• By type

• Overload!

• What's important?• Search?• Filter?

• Enrollments• Courses

• Organizations

• Grouped

• Extra info• Role

• Instructors

• Quick Links• "Internal" tools

• External applications

• Profile- / role-based• Custom set of links

• Student / staff

• Campus-based

8

Why?

• Demand• Users• Management• Within team

• Limits• Maintenance• Performance• Flexibility

• edX - pilot for Moocs and Spocs

9

How?

• User input• Usability study• User survey• Interviews• Focus groups

• Alpha-release

• Beta-release

Requirements

• Modern• Technology• Look-and-feel

• Fast

• Flexible

• Upgradeable

• Mobile

11

Features

• Uncluttered workspace

• Clean navigation

• Separate views• Enrollments• Notifications

• Filters

• Customization

https://www.youtube.com/watch?v=eg8-_Q79eTo

13

Demo• Main modules– Courses and organizations– Targeted information– Schedule

• Navigation

• Search and filter

• Anatomy of a tile

• Updates and messages

Look!It's moving.

It's alive. It's alive...

Why?

• Initially: bug-fixing• Fix layout-issues• Using only CSS

• Later: improvements• Modify elements

17

How?

• Brands and themes

• New theme• Based on Bb's default• Extra CSS-files

• New icons

• CSS alone...doesn't get you far

Enter Javascript

• Blackboard themes:• No custom JS

• Modified template• Include JS-file• Dynamically

• Modify features, fix bugs

• Small changes• Modified behaviour

• Medium changes• New features

• Large changes• Custom applications• Mobile accessible layout (

MLFTP)• Exam setup (x-Toledo)

Anything is possible...

Requirements• Never a formal set of requirements• Two categories

– Fixes for actual and perceived bugs (poor workflows)– Addition of functional / ergonomical improvements

• Very much an ad hoc process– Bug encountered?– Missing feature identified?

• When to stop?• Maintenance?

– Impact on upgrades

https://www.youtube.com/watch?v=zCcz_hpXKdc

https://www.youtube.com/watch?v=zCcz_hpXKdc

23

Demo• Navigation– Student

• Custom icon set• Directory view• Collapse and expand• Maximize / full screen / print• Tours

– Instructor• Tours• Contextual help• Availability

– Course– Content

Demo• Course contents– Content creation

• Single button• Contextual insert

– Content organization• Drag and drop

25

Demo• Learning modules– "State"– Enforced sequential navigation

Demo• Forms– Move form elements

• Date fields in announcement form• Uncheck mail option in edited announcement

– Remove form elements• No "prohibit backtracking" in tests in the dedicated exam

environment• Remove "Save as draft" in assignment form

– Change default values– Lookup in lists

• Mail select users/groups

Demo• Tests

– "Print test"-feature for instructors– "Quiz" behaviour

• Extra option in test's properties page• Immediate feedback

– Skip "unnecessary" steps in test• Confirmation before start• Confirmation on submit (page shown before feedback)

• Completion container– Fix positioning issues

• Un-answer a question

28

Mobile accessible design

29

Mobile accessible design

• Not: separate mobile access• https://m.toledo.kuleuven.be• Has been in use for + 3 years• Alternative for / complement to

Bb Mobile Learn• Stripped down feature set

• Truly responsive design• Same page, same URL• Same theme• Different layout• ~ Fully featured

30

It's Blackboard, Jim. But not as we know it...

Mobile accessible design

• CSS- and JS-based• Custom navigation structure• Customized content view• Customized tables• Major changes to tests• Discussion boards• Journals, blogs, wikis...

https://www.youtube.com/watch?v=K3Zc2YuwFyw

32

Demo• Portal

• Course View– As student

• Navigation• Course content• Discussion board• Take test

– As instructor• Navigation• Edit mode• Content creation