The GapFiller UI

Introduction

This short quiz demonstrates the capabilities of the GapFiller UI, which is a CodeRunner user-interface plugin available since Version 3.7.2 (November 2019). With this UI, the question author provides students with a piece of text that has gaps for them to fill. The gaps are displayed as HTML <input> elements or <textarea> elements. When a student submits their answer, the STUDENT_ANSWER variable presented to the question's template is just a list of the values in the various fields.

In the CodeRunner context, the most common use-case is a piece of code with bits missing. The student fills in the gaps and submits their answer via the Check button. The template inserts the supplied answers back into the code and runs the code to see if it satisfies the tests.

It is recommended that you look ahead to questions 3 and 4 in the quiz to see where it's heading. If you're interested, you can then come back and work through the quiz more slowly.

The above example isn't at all compelling because, usually at least, you could ask the question much more easily with a Cloze type question or some much simpler third-party gap filler question.

It becomes much more useful when the text with the gaps in it is a program, which is to be tested by running it.

The following question illustrates a very simple example, and an explanation of how it is written then follows.

Explanation

As in the first example, the globalextra field is set to the template to be displayed in the answer box. In this case it is:

sentence2 = {[ 35 ]}
print(sentence2)

where the {[ 35 ]} denotes a 35-character HTML entry field.

When the student enters a valid answer, for example

'''"I'm tired!", she exclaimed.'''

the serialisation sent to the template as the value of the Twig STUDENT_ANSWER variable is a JSON list of strings. In this example it would be

["'''\"I'm tired!\", she exclaimed.'''"]

In order to run the program with the student answer inserted into it, the template must decode the JSON and insert the strings from the list (only one in this case) into the place holders in the code. Although in principle straightforward there are quite a few complications. For details see the prototype for the question type used for this example, python3_html_gapfiller, together with the example itself.

So what's the point?

You might wonder: why bother with the complexity of such a question type rather than using a normal Ace-editor style CodeRunner question or perhaps a conventional Moodle short-answer question?

Firstly, once the question type has been developed, writing such questions isn't at all difficult, as you can see if you import the question itself from the previous information panel. You simply supply a bit of code in the globalextra field and replace selected bits with gap markers. It is roughly the same amount of effort as writing a standard CodeRunner question.

The advantage of gap-filler questions over standard CodeRunner questions is that they constrain the type of answer the student can use to a specific form required by the question author. In this case, the student must define a string literal containing exactly the required value rather than, say, using a single print statement that outputs a sequence of space-separated substrings. The next example (function find_first below), is a more compelling example of this aspect.

The advantage over short-answer questions is two-fold. Firstly, the author does not have to think up all the different correct alternatives a student might come up with. In the above example, there is a huge range of valid alternatives using escaped single quoted strings, escaped double-quoted strings, triple-quoted strings with single-quote characters and triple-quoted strings with double-quote characters, etc. Even more importantly, the answer that the student comes up with gets executed as code, and the correct output (with green ticks) is displayed. That's much more rewarding. Alternatively, the incorrect output with, perhaps, syntax error messages, is displayed so the student can work out what was wrong with their answer.

More examples

The following two examples illustrate the use of multiple gaps in a piece of code and multiline ("textarea") gap fillers. Multiline gaps are denoted by a marker like {[ 3, 40 ]} indicating a 3-line 40-column text-area. Both examples are of the python3_html_gapfiller type, the prototype for which was provided earlier.

Since Python is layout sensitive, both simple entry fields and text-areas are indented by the question type.

Parting comment

It is recommended that gap filler questions be used only for simple drill-type questions where the teacher wishes students to demonstrate understanding of a particular language construct. They are not recommended for longer answer questions, where students might see problems in a different but totally valid way. Don't get sucked into believing your answer to an algorithmic problem is the "right" one - you'll frustrate the student and crush their creativity!