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, select Autograder from the navigation menu and click Edit Autograder. If there currently are no autograders on that assignment, the button will say Create Autograder instead.
  3. Find the autograder files on the left-hand menu under Custom Autograders and begin making your changes. If there are no autograders, click Add to create one.
  4. Don't forget to click Save Autograder Config when you're finished!

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