Creating Useful Tools using JavaScript for our Coursera Course

Disclaimer: I’d like to state upfront that this article is about the work that we – the teaching staff for the VLSI CAD: Logic to Layout course – have done for our particular course. We are just sharing our experiences; this post does not reflect what Coursera is doing for any of their other courses in terms of tools or services.

As instructors, we usually need to provide simple, yet useful, auxiliary tools for our courses. Auxiliary tools include specialized math calculators, visualizations, etc for a small part of the course material. Such tools enhance the learning process and provide students with new ways to experiment and try things out. In traditional courses, such tools are usually made available in the form of applications that students run. Sometimes these applications require specific versions of operating systems, frameworks or libraries. There is the assumption that the students will have access to computing resources, e.g., their own machines or lab computers that are capable of running those applications. In an online learning environment such as Coursera with tens of thousands of students, we cannot assume that all students have access to the same computing resources. What is the best way to implement and deploy such tools?

There are several solutions. We could choose only to use applications that run on all major operating systems. For instance, we could ask students to use applications written in Java, which runs on Windows, Mac and Linux. While this works, it might be too much to expect students to install the support for running Java. Recall that we are dealing with auxiliary tools. These tools are meant to be simple to use. Forcing a student to install a whole runtime just to be able to run a simple tool is not the best solution. We deem this solution to have too much overhead.

A more attractive solution would be to run the tools inside the web browser. After all, the web browser is the quintessential tool for online courses. Again, there are several approaches that we could use in a web browser. We could consider using an in-browser runtime environment such Java Applets, Adobe Flash or Microsoft Silverlight. All of these are wonderful environments that allow you to build all forms of useful tools. Unfortunately, as proven time and time again, they are also the source of many security vulnerabilities so most students do not install them or have them disabled – as they rightfully should.

Fortunately, even without installing any in-browser runtime environments, web browsers themselves are becoming more capable computing platforms out-of-the-box. A few years back, developing for web browsers used to be a very unpleasant experience. There was no standardized support for different functionalities and it was common for applications to work in one web browser and not another. Modern web browsers have begun to change that experience. Now, we can safely expect most web browsers to support web standards such as HTML, CSS, SVG and JavaScript consistently. More importantly, we can expect that the applications we write will work gracefully on all web browsers. It is feasible to do this without a dedicated team of developers testing on multiple versions of web browsers on multiple versions of operating systems. Several teaching assistants with some programming experience should be able to easily create such auxiliary tools using a combination of HTML, CSS, SVG and JavaScript. There is no need for a dedicated web server and complicated client/server programming.

Indeed, that has been our experience so far. We have implemented three tools for our VLSI CAD: Logic to Layout Coursera Course. The first tool is a simple calculator for solving linear equation systems. The second and third tools are visualizations for two core assignments for the course. We are pleasantly surprised by how well this has worked for us. And we would like to share some of our experiences creating such tools.

By leveraging several popular JavaScript frameworks, we were able to implement each tool in less than 700 lines of code. All of them are released under the University of Illinois / NCSA Open Source License so you are free to use them as you see fit.

Simple Linear System Solver

We have implemented a very simple interface for solving systems of linear equations directly from the web browser. Systems of linear equations are common in many engineering disciplines. For simple systems, it is possible to solve them by hand. However, for realistic problems, the standard way is to use some solver in a dedicated (and costly) application such as Matlab or Mathematica. These applications can easily solve linear systems with thousands of equations.

For the purposes of a class, it is usually sufficient to have a solver than can solve up to 10 equations. This is something that can be reasonably done inside a web browser.

The interface for our solver is simple. Students enter the input matrix A and the input vector B, click on the “Solve” button and the result is presented to them directly. As can be seen in the above figure, the tool itself can also be directly embedded into the Coursera web page, giving it proper branding so that students know that they are still using a tool from the course website.

We use the Numeric.js library by Sebastien Loisel, Lecturer in Mathematics, Heriot-Watt University. The library implements many functions that you would expect from a numerical library, all of which are rewritten in JavaScript. Numeric.js has decent performance; it’s capable of reaching several hundred million of floating point operations per second (MFLOPS).

While we have only used its solver, Numeric.js comes with many different functionalities as exemplified in its documentation. It should be a useful library for many different engineering courses that require the use of a numerical library. If desired, it also comes with a dedicated prompt where you can issue commands directly to the library and see your results printed in real time.

The source code is available from https://gist.github.com/vazexqi/5316339.

Placer Result Visualization

For another assignment, we had students implement a placer. A placer places the gates on a chip. A good placer will distribute and place chips as evenly as possible, while following some constraints. The result of a placer is usually a text file that describes where each gate ends up on the chip, in the form of a x and y coordinate.

Because there can be thousands of such gates for an assignment (and millions for an actual industrial chip), it is not easy to make sense of the text file. Thus, it is important to be able to visualize the result of the placer. The visualization should help students determine how well their implementation has distributed the gates on the chip.

Visualizing the result is simple: use a scatter plot. However, how could we get the data to the visualization tool? Unlike the simple linear equation solver tool, there are thousands of such gates and we cannot expect the student to type all of them in. Instead, we leverage the File API that is part of the HTML5 standard. Using this interface, the student only has to drag-and-drop her file into the web browser. The web browser then reads the file and displays the results. Everything is done locally inside the web browser.

You can see the tool in action in the video below:

We used the d3.js library by Mike Bostock. Mike obtained his PhD under Jeffrey Heer at the Stanford Vis Group. Their group has studied and produced many useful ideas and software for visualization of information. d3.js is a very rich library that is capable of many different visualizations. There is a learning curve to using the tool. However, once we understood the architecture it was easy to customize and add new visualizations.

Before using d3.js, we implemented a version using Google Scatter Chart. While it was easier to use initially, it was difficult to change the graph to look the way we needed it to. For instance, we had a very specific requirement on how the axes needed to be drawn in the graph. Google’s Scatter Chart API did not provide a way to do this. And because it was close source, we could not modify the source code to do what we wanted. Thus, we switched to d3.js because it provided more control overall.

In our experience, the tool was seamless to use for the students and it provided a useful visualization for them to verify their results.

The source code is available from https://gist.github.com/vazexqi/5316324.

Router Result Visualization

For our last programming assignment, we had students implement a router. A router routes wires from a source pin to a destination pin. A good router will route as many wires as possible, while avoiding obstacles and minimizing the amount of “bends” that it needs to make to reach its destination. The result of a router is usually a text file that describes the path from a source pin to a destination pin.

Again, because there can be hundreds of such routes (and millions for an actual industrial chip), it is not easy to make sense of the text file. Thus, it is important to be able to visualize the paths. Visualization helps students eyeball problems with their routing implementation, e.g., if two routes intersect or if the routes go through an obstacle.

For this tool, we used the same drag-and-drop interface provided through the File API in HTML5. And we used the d3.js visualization library.

We were able to successfully visualize a 1000 by 1000 grid with 1000 routes. To give you a scale of how big this is, if we were to print it out, it will require a 144 in x 144 in paper. It took less than 10 seconds and consumed 256 MB of memory on Google Chrome on a 2010 MacBook Pro with a 2.53 GHz Core i5 processor and 8 GB of RAM. In summary, we thought that its performance was decent for what we needed to do. And it did not demand too much from the student’s computer.

One student found the tool useful enough to leave the following feedback:

BTW, congrats for the visualizer. I remember when I studied CS more than 10 years ago and I was taught the A* algorithm on paper [a routing algorithm] and with a single small example on the blackboard. Learning is a lot better implementing it and trying it, and your visualizer certainly helps a lot. This way of learning is fun, the other method was boooring [sic]. Good job guys!

You can see the tool in action in the video below:

The source code is available from https://gist.github.com/vazexqi/5385456.

Summary

Our experiences with creating these auxiliary tools have convinced us of the possibilities of doing as much as possible from the web browser. Before we implemented the tools, we were concerned about the performance of JavaScript-based tools inside web browsers. We were worried that it would be too slow or take up too much resources on the student’s machine.

It is safe to say that our fears were alleviated. Our VLSI CAD: Logic to Layout course has about 17,000 students registered. Of this, about 1,000 are actively doing the assignments and using the tools.

As future work, it is worth exploring how far we can take this approach of doing everything inside JavaScript. My colleague who is a teaching assistant for the University of Illinois’s Creative, Serious and Playful Science of Android Apps course on Coursera is looking into using Doppio to enable students to program with Java inside their web browser.

Other projects such as Emscripten will also be worth exploring. For our course, we had the luxury of being able to re-implement everything from scratch. Sometimes, however, instructors have old versions of C/C++ programs that they would like to run in the web browser. In those cases, Emscripten might prove to be a useful first approach toward migrating legacy code to the web browser.