Accessing the Custom Autograder Edit Window

  1. Go to a created assignment within the Create tool or the Assignments tool and choose Edit.
  2. In the following window, scroll to the bottom and select Custom Autograder Edit.

Building Your Autograder

Understanding the Parameters

The HTML autograder evaluates student submissions using JavaScript functions to inspect their HTML structure and attributes. It works by analyzing the student’s index.html file and checking for specific elements, attributes, and content.

Tests are written using jQuery-style methods to find, count, and validate elements in the student’s code.

Creating Test Cases

Each test follows this general format:

var hasElement = autograder.$codeTree['index.html']
    .find('tag')  // Change 'tag' to the element you want to check
    .length > 0;  // Adjust based on how many elements should be present

this.tests.push({
    testName: "Test Name",
    result: {
        success: hasElement,
        message: hasElement ? "Pass Message" : "Fail Message"
    }
});

For example, if we want to check whether the student’s code includes a <body> tag, we can write:

var hasBodyTag = autograder.$codeTree['index.html']
    .find('body')
    .length > 0;

this.tests.push({
    testName: 'Your code must have a &lt;body&gt; tag.',
    result: {
        success: hasBodyTag,
        message: hasBodyTag ? 'Great job!' : 'You need to include a &lt;body&gt; tag.'
    }
});

<aside>

Note: You’ll see in these tests that in the test names and messages, instead of <body>, the message says <body> - this is to help the formatting of the message output that students will see. This is covered in more detail in this section of this guide.

</aside>

Available Test Methods

Below are the different test methods you can use, along with full examples.

Element Presence Tests