Image output shown in browser

Image output shown in browser

by Malcolm Ryan -
Number of replies: 1
Question: Can CodeRunner display images (or formatted HTML) generated by user code?

Context: I'm new to CodeRunner and looking into the possibility of using it in my Computer Graphics unit at MQ. We teach OpenGL programming using the LWJGL library for Java. I'd like to be able to write questions like:

Write a method that outputs a 2D transformation matrix that would transform Image 1 into Image 2.

... where Image 1 and Image 2 are automatically generated by some suitable random test generation. The students code would just need to output a matrix (using the JOML library). For the output, I would like to be able to show the image that results from applying the student's matrix alongside the expected solution. It would also be good run an image diff library to highlight the differences between the two.

I can write the behind-the-scenes Java code to generate the images and do the diff, but I need to make sure CodeRunner can actually display the results. To avoid requiring a server to host the images, I was considering just outputting them as raw base64 encoded data within an HTML <img> tag. So even just the ability to display formatted HTML would probably do the trick.

Is this possible?



In reply to Malcolm Ryan

Re: Image output shown in browser

by Richard Lobb -

Yes, you can display images, though it's not easy.

An old blog post explains the general idea, using a combinator template grader, which gives you complete control of the output. It assumes you can embed the image in the returned HTML as a data URI. 

If you're writing your questions using Java, I recommend using a Java question scripted in Python, as discussed in this forum thread. That gives you much more flexibility in how you run Java.

We include matplotlib images in the result table, showing both the expected and got images. But we don't attempt to grade the image itself - it's only there for reference. Rather we grade the attributes of the image, giving output like:

One line of the result table of a bar-chart-from-file question.

But developing question types for such questions is a lot of work.

A potential gotcha: our IT department recently installed security policies that barfed at finding dataURIs embedded in the response to the browser. So recent versions of CodeRunner have been extended to allow the inclusion of files in the JSON response. It's briefly documented here (attribute 9). It adds additional complexity but avoids security policy issues and also can give a huge saving in space on the Moodle server if you have large classes. We have a course of  nearly 1000 students answering many questions of the above sort, with lots of images in the result table on each attempt. With embedded data URIs, the same 'expected' images are recorded in the responses table many thousands of times. But using the new files attribute, only a single copy of each unique image is stored (since Moodle stores files by their hash).

However, I recommend building up to step by step from the version in the blog and using the new files functionality only if necessary. 

You might also be interested in this paper: Automatic assessment of OpenGL computer graphics assignments, which describes the use of CodeRunner in a computer graphics course.

Post back if you need further help.