🟨JavaScript

This tutorial will guide you through all the steps to create your first JavaScript assignment in CodeGrade. For this tutorial, we will consider the example below. The zip folder contains a completed solution and a template file. Please make sure to save this file somewhere accessible on your computer:

1KB

Greeting.zip

archive

A quick note about this example In this assignment, students have been asked to create a JavaScript program that prompts the user for their name in the console and prints a greeting. It is a purely console-based application.

Step 1: Create an assignment

First, we need an assignment to work with. Whether CodeGrade is integrated into your LMS or you are using CodeGrade Standalone, you can follow the steps in the guide below to get started:

➕pageCreate assignment

Step 2: Configure submission settings

Submission settings with the File uploader and Editor options enabled and a template file uploaded.

After you have created an assignment, the first step of setting up an assignment is to ensure that students can submit their code correctly. Because this example is straightforward and only requires a single solution file, we will offer the students the option to code in the CodeGrade Editor alongside the default File Uploader option.

1. Navigate to the Assignment management menu by using the ⚙️ icon at the right-hand side of the page header.

2. Find the Submission settings under the General tab

3. Enable the File uploader and Editor submission methods by clicking the respective check boxes.

4. Enabling the Editor will reveal the Template files option. Unzip the Greeting.zip folder and upload Greeting/Template/greeting.js file as the template.

5. Finalize your settings by clicking the "Submit" button.

It is good practice to provide a template file when enabling the Editor so that your students don't have to create their own file. This also avoids the risk of students submitting a file with the wrong name.

For more information about submission methods, see submission settings.

Step 3: Create a rubric

Rubric categories

While you can always grade assignments directly by manually setting the Final grade, It's only possible to award points for your automatic tests with Rubrics. Rubrics also allow you to standardize the grading scheme for graders and clarify the grading requirements for your students.

CodeGrade offers two types of rubric categories:

• Discrete category - Specify points in discrete steps (e.g. 0, 5, or 10 points)

• Continuous category - Specify points as a continuous scale (e.g. 0 - 10)

1. Navigate to the Rubric tab in the Assignment Management menu.

2. Select Create new rubric.

3. Create 2 new Continuous Categories. Set the parameters as follows:

Category name	Description	Min - Max points
IO tests	Check that your program produces the expected output given a specific input.	0 - 80
Code structure tests	Check that your program uses the required code structures.	0 - 20

Step 4: Create automatic tests

Automatic tests are really what allow your students to learn uniquely. The immediate feedback they get from the automatic tests allows them to learn through trial and error by applying the instant feedback and resubmitting their work.

For this tutorial, we will set up two automatic tests: IO tests and Semgrep code structure tests.

Step 4.1: Setup

An Install Python block in the Setup of AutoTest v2

Before creating the tests, we need to ensure we have the correct version of Node installed.

1. Navigate to the Setup tab under the AutoTest settings.

2. Add an Install Node block to your configuration.

3. Select Node version 18 to install.

Step 4.2: Input/Output tests

Input/Output tests (or "IO tests" for short) are a great way of checking a program's functionality by providing various input cases that should result in different outputs. You can create IO test cases in AutoTest v2 using the IO Test wrapper block and its corresponding Full match, Substring match, and Regex match blocks. For more information about these blocks, see Create an IO Test.

1. Navigate to the Tests tab of the AutoTest settings.

2. Add a Connect rubric block to your AutoTest configuration. Select the "IO tests" rubric category from the drop-down menu.

3. Add an IO test block to your AutoTest configuration and nest it inside the Connect Rubric block.

4. In the editor provided, use the command node greeting.js to run the program.

5. Add three Substring match blocks to your AutoTest configuration and nest them inside the IO test block. Make sure each match block is case insensitive and ignores whitespaces.

6. Copy and paste the info from the table below into the Input and Expected output fields in their respective match block:

Input	Expected output
James	Hello, James!
Alicia	Hello, Alicia!
{empty line}	Invalid

Each input must have a trailing newline for it to be recognized (i.e., "James\n").

It's a good idea to give your tests descriptive names so that it's clear to both you and your students what is actually being checked (e.g., "Does your program produce the correct output? - Input: 5").

Step 4.3: Code structure tests

A graded Code structure test in AutoTest v2

Semgrep is a code structure testing framework that is excellent for checking if students have used a specific syntax to reach their solution. AutoTest v2 offers the Code structure test block and its corresponding Positive match and Negative match blocks for running Semgrep tests. For more information about these test blocks, see Create a Code Structure Test.

For this example, we want to check that the students have used an if-else statement in their program. Here is the Semgrep rule we will be using:

rules:
  - id: untitled_rule
    pattern: if (...) {...} else {...}
    message: Semgrep found a match
    languages: [javascript]
    severity: WARNING

1. Add a Connect rubric block to your test configuration and select the "Code structure tests" rubric category.

2. Add a Code structure test block to your test configuration and nest it within the Connect rubric block.

3. In the Student file input field, write "greeting.js".

4. Add a Positive match block to your test configuration and nest it within the Code structure test block.

5. Copy and paste the Semgrep rule in the code block above into the provided editor. Make sure to delete the template provided.

Step 5: Test and publish your AutoTests

It's important to test your AutoTest configuration before running it on students' submissions to ensure your tests are running as expected and to check for edge cases. This is easy to do with Snapshots. When you're ready to check your tests, press the Build snapshot button at the bottom of the test block sidebar. This will make a test run of your AutoTest configuration on your Test submission.

CodeGrade will prompt you to upload a Test submission the first time you build a snapshot. Use the "Click here to upload files" option or drag-and-drop the Greeting/Solution/greeting.js file you downloaded at this tutorial's beginning and click "Submit".

If in the future you need to re-upload your test submission, you can do so by going to Upload Submission option in the General Settings tab. Just upload your file and check the "Test Submission" option before clicking "Submit".

Once you're happy with your tests, you must publish them to your students so they can run on their submissions. Publish your tests by building a snapshot, and at the bottom of the pop-up modal, click the Publish to students button. Once it is published, AutoTest V2 is available for students through the editor and on the submission page.

Conclusion

You have just built your first automatically graded assignment and are ready for your students to begin submitting work!

This guide is designed to get you started with a completed assignment but doesn't go into explicit detail about all of the features CodeGrade offers. For more in-depth information about the product and the various workflows you can achieve, see Learn more or contact our support team at [e-mail].