GraphUI examples

Introducing the GraphUI

If you wish to run these questions, please log in with:
Username: trial
Password: trial

Usually CodeRunner questions ask students to submit program code. For such questions the student answer box is "wrapped" by the Ace code editor, which provides basic facilities like auto-indent and syntax colouring. However, CodeRunner now supports pluggable JavaScript UI components which can wrap the student answer box in other ways to produce different user interfaces such as tables and graphs. This page demonstrates the GraphUI, which allows question authors to ask students questions for which the answer is a graph, in the computer science sense.

The GraphUI was originally developed by Emily Price for use in a theory of computer science course in which students were asked to provide textual representations of finite state machines and Turing machines. The GraphUI provides a much more friendly interface for such questions, e.g.

The student's answer is presented to the question template in a Python-compatible serialised form that includes the geometric information as well as the graph connectivity and labelling. For example, the serialised version of the above graph (with some formatting tweaks) is:

{
  "edgeGeometry":[
        {"deltaX":-65,"deltaY":0},
        {"lineAngleAdjust":3.141592653589793,"parallelPart":0.525974025974026,"perpendicularPart":-20},
        {"lineAngleAdjust":3.141592653589793,"parallelPart":0.4064516129032258,"perpendicularPart":-20},
        {"lineAngleAdjust":0,"parallelPart":0.5,"perpendicularPart":0},
        {"anchorAngle":0},
        {"lineAngleAdjust":0,"parallelPart":0.5,"perpendicularPart":0},
        {"lineAngleAdjust":3.141592653589793,"parallelPart":0.4794520547945205,"perpendicularPart":-21},
        {"lineAngleAdjust":3.141592653589793,"parallelPart":0.5342465753424658,"perpendicularPart":-24}]
  "nodeGeometry":[[100,100],[255,100],[100,246],[255,246]],
  "nodes":[["S",true],["T",false],["V",false],["U",false]],
  "edges":[[-1,0,""],[0,1,"0"],[1,0,"1"],[1,3,"0"],[3,3,"0|1"],[2,3,"1"],[2,0,"0"],[0,2,"1"]]
}

At any time when using the GraphUI the question author (or a student) can view this serialisation by typing Ctrl+Alt+M

The template must then grade the answer, usually ignoring the geometric information.

The set of built-in question types includes simplified question types Directed graph and Undirected graph which present the question author with just an adjacency list representation of the graph as a Python dictionary.

The following question lets you play with a Directed Graph question type. Here is the Moodle XML export of that question.