Upgrading my classroom system with interactive workbook

Makzan’s Dispatch 2020 week 8

I have been exploring different e-learning tools since 2010. There are multiple iterations. The current system that I’m using was built since 2016 using Ruby on Rails. It allows me to create private classrooms with a group of students and assign exercises, quizzes, workbooks to them. I can also share class notes grouped by lectures.

The development of this classroom project is active, depending on my needs for teaching. At first, it was because gathering exercise submissions via emails are too troublesome and messy. I also wanted to digitalize the class note delivery. From that foundation, I added markdown slides, quiz system, and workbooks.

Last week I upgraded the core Rails to 6.0.2 and also built a prototype of the workbook 2.0. It is like you own the workbook and you fill in answers from the learning activities. The filled answer may be auto-assessed or checked by mentors. The aim is to provide an online self-learning experience for my readers.

Indeed I created a similar editor many years ago by using PHP Laravel 3. Now it is the same idea but a new implementation approach after consolidating my teaching experiences these years. After I migrate my course material into this new workbook system. I believe this will benefit both my students in face-to-face class and online readers.

Links worth sharing


Lightweight and useful CSS code snippets. By the way, make sure to check out the emoji rains on Monica’s lovely website. Toggle at the top right rainy/umbrella icon.

JavaScript Loading Priorities in Chrome

Devise gem and simple_form gem owner changed

Guide to CSS Units for Relative Spacing

My rule of thumb: I don’t use `rem` unless I know this style must follow the global font-size regardless of which container elements it is. Otherwise, using too much `rem` will be like replying to global variables in programming.

What a website needs

In conclusion, website doesn’t need to be complex until you are fixing a complex scope.

Source code for Hacking with Swift

Pink: a drawing with pure CSS (without SVG)

By using gradients and multiple backgrounds, we can create different color fills. In addition to the transform, radius and border styles, we can indeed “draw” with CSS.

Until next week,
Thomas Mak