tlc2016 - kuleuven's new learning portal and css/js tweaks for course design
TRANSCRIPT
![Page 1: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/1.jpg)
Ch-Ch-Ch-Ch-Changes made at KU LeuvenA new portal and custom course design
Bert Coenen, Toledo
![Page 2: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/2.jpg)
It's a portal, Jim. But not as we know it...
![Page 3: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/3.jpg)
3
![Page 4: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/4.jpg)
![Page 5: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/5.jpg)
• Notifications
• Stream• Chronological• By source• By type
• Overload!
• What's important?• Search?• Filter?
![Page 6: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/6.jpg)
• Enrollments• Courses
• Organizations
• Grouped
• Extra info• Role
• Instructors
![Page 7: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/7.jpg)
• Quick Links• "Internal" tools
• External applications
• Profile- / role-based• Custom set of links
• Student / staff
• Campus-based
![Page 8: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/8.jpg)
8
Why?
• Demand• Users• Management• Within team
• Limits• Maintenance• Performance• Flexibility
• edX - pilot for Moocs and Spocs
![Page 9: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/9.jpg)
9
How?
• User input• Usability study• User survey• Interviews• Focus groups
• Alpha-release
• Beta-release
![Page 10: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/10.jpg)
Requirements
• Modern• Technology• Look-and-feel
• Fast
• Flexible
• Upgradeable
• Mobile
![Page 11: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/11.jpg)
11
Features
• Uncluttered workspace
• Clean navigation
• Separate views• Enrollments• Notifications
• Filters
• Customization
![Page 12: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/12.jpg)
https://www.youtube.com/watch?v=eg8-_Q79eTo
![Page 13: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/13.jpg)
13
Demo• Main modules– Courses and organizations– Targeted information– Schedule
• Navigation
• Search and filter
• Anatomy of a tile
• Updates and messages
![Page 14: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/14.jpg)
Look!It's moving.
It's alive. It's alive...
![Page 15: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/15.jpg)
![Page 16: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/16.jpg)
Why?
• Initially: bug-fixing• Fix layout-issues• Using only CSS
• Later: improvements• Modify elements
![Page 17: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/17.jpg)
17
How?
• Brands and themes
• New theme• Based on Bb's default• Extra CSS-files
• New icons
• CSS alone...doesn't get you far
![Page 18: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/18.jpg)
Enter Javascript
• Blackboard themes:• No custom JS
• Modified template• Include JS-file• Dynamically
![Page 19: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/19.jpg)
• 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...
![Page 20: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/20.jpg)
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
![Page 22: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/22.jpg)
https://www.youtube.com/watch?v=zCcz_hpXKdc
![Page 23: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/23.jpg)
23
Demo• Navigation– Student
• Custom icon set• Directory view• Collapse and expand• Maximize / full screen / print• Tours
– Instructor• Tours• Contextual help• Availability
– Course– Content
![Page 24: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/24.jpg)
Demo• Course contents– Content creation
• Single button• Contextual insert
– Content organization• Drag and drop
![Page 25: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/25.jpg)
25
Demo• Learning modules– "State"– Enforced sequential navigation
![Page 26: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/26.jpg)
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
![Page 27: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/27.jpg)
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
![Page 28: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/28.jpg)
28
Mobile accessible design
![Page 29: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/29.jpg)
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
![Page 30: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/30.jpg)
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...
![Page 32: TLC2016 - KULeuven's new learning portal and css/JS tweaks for course design](https://reader035.vdocuments.mx/reader035/viewer/2022081520/58ec272f1a28abfa798b4731/html5/thumbnails/32.jpg)
32
Demo• Portal
• Course View– As student
• Navigation• Course content• Discussion board• Take test
– As instructor• Navigation• Edit mode• Content creation