# Create your first JavaScript assignment

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:

{% file src="<https://2172486256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MKAQsDlg_P20iQy3JDs%2Fuploads%2FcXYMpmqXjusyf3hDU5l8%2FGreeting.zip?alt=media&token=ee2a3608-ea18-4df0-9c73-4bdc7b1bb1d5>" %}

**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:

{% content-ref url="../../setup-assignment/build-assignment/creating-an-assignment" %}
[creating-an-assignment](https://help.codegrade.com/setup-assignment/build-assignment/creating-an-assignment)
{% endcontent-ref %}

## Step 2: Configure submission settings

The first step in 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 Settings** by using the " :gear: Assignment settings" link at the right-hand side of the page menu on the submissions page.

<figure><img src="https://2172486256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MKAQsDlg_P20iQy3JDs%2Fuploads%2Fx6hAmJYI5Udh7wsYtSfV%2FScreenshot%202025-08-04%20at%2011.58.07.png?alt=media&#x26;token=ae94cbe1-87d7-421b-8759-86783eaa7283" alt=""><figcaption></figcaption></figure>

2. Find the **Submission settings** in the corresponding container under the General tab.

<figure><img src="https://2172486256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MKAQsDlg_P20iQy3JDs%2Fuploads%2FUHlnHda36bq3p1Xct1Yq%2F01.%20Submission%20Methods.png?alt=media&#x26;token=0a38eca4-fe40-4abf-b8dd-80b054b75530" alt=""><figcaption><p>Submission settings with the File uploader and Editor options enabled and a template file uploaded. </p></figcaption></figure>

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.

{% hint style="success" %}
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.
{% endhint %}

For more information about submission methods, see [submission settings](https://help.codegrade.com/setup-assignment/build-assignment/general-settings#step-2-set-submission-settings).

## Step 3: Create a rubric

<figure><img src="https://2172486256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MKAQsDlg_P20iQy3JDs%2Fuploads%2FuEYDSyvgLviIYVUq4Ly2%2F02.%20Rubrics.png?alt=media&#x26;token=48ef7f9b-7eee-4a18-8bcf-1de596c5906b" alt=""><figcaption><p>Rubric categories</p></figcaption></figure>

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 on the Assignment Management page.
2. Select **Create new rubric**.
3. Create 2 new **Continuous Categories**. Set the parameters as follows:

<table><thead><tr><th>Category name</th><th width="332">Description</th><th>Min - Max points</th></tr></thead><tbody><tr><td>IO tests</td><td>Check that your program produces the expected output given a specific input.</td><td>0 - 80</td></tr><tr><td>Code structure tests</td><td>Check that your program uses the required code structures.</td><td>0 - 20</td></tr></tbody></table>

## 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

<figure><img src="https://2172486256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MKAQsDlg_P20iQy3JDs%2Fuploads%2FTFGIYNULPCxrqvX1TAdl%2FScreenshot%202026-03-26%20at%2013.24.27.png?alt=media&#x26;token=ac9ac9b7-339f-406b-b92a-ea54f8882c08" alt=""><figcaption><p>An Install Node block in the Setup of AutoTest v2</p></figcaption></figure>

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

<figure><img src="https://2172486256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MKAQsDlg_P20iQy3JDs%2Fuploads%2F5mWwiV8HQD9ptrybOKyW%2FJavaScript%20IO%20tests.png?alt=media&#x26;token=2a5a0f61-7289-4706-9192-f06cba7dd251" alt=""><figcaption></figcaption></figure>

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.

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 |
| ----------------------- | --------------- |
| <p>James<br></p>        | Hello, James!   |
| <p>Alicia<br></p>       | Hello, Alicia!  |
| <p>{empty line}<br></p> | Invalid         |

{% hint style="danger" %}
Each input must have a trailing newline for it to be recognized (i.e., "James\n").
{% endhint %}

{% hint style="success" %}
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").
{% endhint %}

### Step 4.3: Code structure tests

<figure><img src="https://2172486256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MKAQsDlg_P20iQy3JDs%2Fuploads%2FBBkIisI84OUEORsIFVmy%2F05.%20Code%20Structure%20Tests.png?alt=media&#x26;token=cf1a6665-b1f4-4bf1-a4bb-2f0cbc682035" alt=""><figcaption><p>A graded Code structure test in AutoTest v2</p></figcaption></figure>

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 details on setting up Code Structure Tests, read [our dedicated guide](https://help.codegrade.com/automatic-grading-guides/code-structure-tests-with-semgrep).

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:

{% code lineNumbers="true" %}

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

{% endcode %}

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](https://help.codegrade.com/faq) or contact our support team at <support@codegrade.com>.