Adding State Saving and LTI to Interactive Exercises

There is an abundance of interactive JavaScript activities that you might want to assign to your students. But how do you collect their work in a learning management system? You can try to ask the author of the activity to add LTI support. But how likely is it for that to materialize? CodeCheck Assignments use a much more lightweight feature for adding state saving and LTI support. Read on for the details.

The Simple Computer

When I had to teach the elements of computer organization to non-CS majors, I knew that my students' eyes would glaze over if I talked about instruction fetching and decoding, or indirect addressing. Fortunately, I ran into Curt Hill's Simple Computer Simulator: 100 words of memory, 13 opcodes, 2 registers. I was dubious about student acceptance, but they really liked it. It was charming in its simplicity and transparency.


However, there is a teensy problem. It's a Java applet. In 2021, it would take a superhuman effort to get your students to launch it.

I rewrote it in 164 lines of JavaScript and a few lines of HTML and CSS, which took me four hours. You can see the result here, with the same spiffy background. Adding more error checking and UI glitz would add a few hours and lines. In Java, it took 988 lines of code.

How Do I Assign Homework?

Ok, so now I want to assign some exercises. Swap two memory locations. Compute 2n. Reverse an array. Sure, I can tell students to do that and submit screen shots.

And how do I grade those screen shots?

Some professors are blessed with an inexhaustible army of student assistants who will tirelessly plod through this task. Sadly, I was never among them.

Grading problems of this kind is pretty easy to automate. Give a few inputs and desired outputs (which are just values in the 100-cell memory). Run the student program and see whether it transforms the inputs into the outputs. That was another 82 lines of JavaScript (look for the check function) and another two hours or work.

Here are these problems. View the source to see how the test cases are specified.

Much better. Students can check their work and get instant feedback. Eventually, most of them will be rewarded with a “Pass” for every test case.

But students have limited time, and they will spend their effort on what the instructor demands of them. So, the student success should flow to the gradebook. These days, in a learning management system, students can see the gradebook and they expect to see that their work was properly credited. And professors can identify the students who are struggling or just not participating.

But how are scores going to flow from a Java applet or JavaScript activity on a web page to a learning management system? This can be done, using the LTI standard that is so fiendishly complex and esoteric that even the Wikipedia article is completely useless.

Now suppose that, thanks to the goodness of LTI, those scores arrive in the learning management system. There may be situations where the scores are less than 100%, and students want to discuss their work with their professors. Or professors may want to see what students did with an assignment that turned out to be more challenging than they thought.

That means saving the state of the student work. Unfortunately, LTI does not deal with that at all.

The cost of doing business for the author of an interactive activity has now been substantially raised. They need to implement LTI and state saving, unless some other system takes on that responsibility.

How Do I Save Scores and State?

I write textbooks for introductory computer science. When they were first produced digitally, my publisher's vendor, VitalSource, was eager to do a better job than just sell PDF or HTML versions of the books. They realized that interactive exercises in an electronic book are a key feature. They worked with the consortium that issues the EPUB standard to add features for interactivity. A draft “EPUB for Education” spec proposed an API for reporting and retrieving scores and state:

EPUB.Education.getScores([locations], callback);

The first call sends an array of objects

  score: number, location: string, metadata: {…}

In the second call, the callback is invoked with an array of objects.

VitalSource implemented (a slightly different version of) this API, and I used it to great effect in a series of textbooks. These textbooks contain interactive elements for code tracing, diagramming objects, predicting steps in algorithms, and completing short programs.

I learned that a really simple mechanism for scores and state can go a long way. The technology provider figures out how to transmit scores and save state, and the activity authors can do what they do best, and design compelling learning activities.

Sadly, that specification and implementation didn't move anywhere, and I ended up having to replicate the effort, as a part of the CodeCheck Assignments feature. It makes use of the EPUB for Education protocol—the simplest thing that works to save state and to adapt to LTI.

How hard is it to add support for an existing activity? This is the question that a reviewer asked when I submitted a paper to a workshop at an educational conference: “I would like to see how easy to add any new JavaScript-based content as mentioned in the paper.”

A very good question. Which prompted me to work on the Simple Computer activity.

Adding state saving and LTI score reporting took fifteen minutes and ten lines of code. (Search for EPUB.Education.)

Check out this assignment. Do some work and come back to it later. Check that your effort is restored. If you want to add the assignment to a learning management system, follow these instructions. By the way, problem 4 of the assignment uses an interactive code tracer that is an entirely different JavaScript element. Its state is also saved.

If you read through all this because you have an engaging interactive activity that you'd like to be more widely used in assignments, study the sample code. Add calls to EPUB.Education.reportScores/getScores and include the shim script. Contact me with any questions.

Comments powered by Talkyard.