Automatically grading JavaScript programming tasks for CSEd classrooms and coding bootcamps
March 10, 2022

Automatically grading JavaScript code assignments

In 30 seconds...

  • JavaScript is a popular programming language in education, especially for Web Development courses. 
  • With the right tools, it is very easy and beneficial to autograde JavaScript.
  • Learn about JavaScript I/O Testing, Jest or Mocha Unit Testing for education, Code Quality Grading with ESLint and JavaScript Code Structure grading.

The need for JavaScript autograding

Coding is slowly but surely becoming part of every professional field, making a fundamental knowledge of programming extremely useful. And with computer science classes being introduced in K-12/primary education, we’re sure to see an even bigger increase in Computer Science students. 

With that being said, teachers can also expect a higher workload. Unzipping, downloading, running, adding feedback and re-uploading submissions per student and per assignment is a great burden! Unfortunately, this can take time away from teaching and giving students personal attention. This is where autograding can really help! 

Not only does automatic grading help teachers, it also directly benefits students. Firstly, with an instant feedback mechanism, students can submit their code and see immediately where to improve. They can correct their code and resubmit, and the cycle continues. This quick turnaround helps students learn at a consistent pace - no longer do they need to wait a few days for their answers, only to forget how they did it in the first place. Moreover, with CodeGrade for instance, students can also directly code in our integrated editor (directly from within the LMS) or hand in directly through their GitHub or GitLab repository! 

Secondly, after handing in, students can see if their solution works, making sure you will never have to fix their compiler errors again. Finally, you have more time to focus on the interesting and important facets of teaching. For example, cutting down hours of grading time allows educators to give more attention to student questions and wider learning objectives.

Ideally, an autograder balances two elements; ease of use - students and teachers should be able to get to grips with the autograder quickly and easily; and flexibility - as learners move from basic programming assignments to more advanced ones, an autograder should function with a wider range of accepted outputs, among other nuances. 

Setting up a basic autograded JavaScript assignment is pretty simple. We’ve outlined the steps below. 

Start using CodeGrade, the most flexible and powerful autograder, in your classroom now!

Input/Output autograding

Many programming courses, particularly introductory courses, teach students how to create programs and interact with them through the command line interface (CLI). For instance, a simple program might prompt a user to provide a number and, in return, print a statement telling the user that their number is odd or even. Input/Output (I/O) tests are a great way of checking that these simple programs work as expected. However, this would traditionally require teachers to download each of their students’ submissions and run them independently on their local environment, putting inputs to the program one at a time and making themselves vulnerable to human error.

Fortunately, CodeGrade’s I/O test step allows you to run a program as you would on your own CLI, enter an input (either standard input, stdin, or as input argument) to the program, and test that the predicted output matches the actual output. With CodeGrade, this doesn’t have to be an exact match, but can be made more flexible by the teacher by modifying case sensitivity, substring matching, whitespace sensitivity or by using a regex.

Unit Test autograding

Once courses begin to venture into more complex programming assignments, particularly those with functions and other encapsulated code, unit testing is a natural tool for autograding. Unit testing frameworks often enable multiple ways of testing that aren’t just limited to matching a predicted outcome with an actual outcome. For JavaScript, CodeGrade has support for Jest and Mocha out of the box. But frameworks like Cypress or Jasmine can be installed too.

CodeGrade’s dedicated Unit Test Step parses the XML output of your unit tests and displays each test individually and whether or not they passed. The Unit test step makes customizing your unit tests really easy, enabling you to write custom descriptions for each test, weighting them differently, and even providing hints when the tests fail!

Code Quality autograding

While coding classrooms mostly cover the syntax of programming languages and the functionality of functions, procedures and modules, one thing that is sometimes overlooked is the readability and quality of code. Instantly autograding Code Quality or Style directly shows students where they can improve their code inside their learning environment. This can help students use better variable and function names, use their whitespace more consistently and prevent other common coding bad practices. 

The Code Quality test step in CodeGrade’s AutoTest makes a host of industry standard linters and static code quality assessment tools available for teachers to automatically grade code quality and formatting! For JavaScript, CodeGrade offers for instance ESLint. While some configurations are available by default, CodeGrade offers you the ability to upload your own custom style guides and rules to give you full control. Custom style guides allow you to select which rules to check and alter the severity level of each infraction. The Code Quality step doesn’t just provide a grade, it also automatically highlights your students code directly on the lines of code where the mistakes were identified, making it simple and intuitive for students to understand what went wrong and how to fix it.

Code Structure autograding

A type of autograding that is exclusively offered by CodeGrade’s AutoTest is easy code structure checking. For this, we have implemented our own version of the powerful Semgrep tool. 

With this, you can now not only check if your students’ code works and whether the style is correct, but you can also check if they actually solved your coding challenge in the way that you want. You can automatically check if they use prohibited libraries, if they actually use a for-loop and not a while-loop and if they did not hardcode their answer but rather solved the problem. What’s more, you can also make sure that students define the correct variables, and functions, to make sure they get a helpful warning if they did not.

JavaScript/Web Dev UI and UX autograding

Many JavaScript courses also put a lot of emphasis on User Interface and User Experience design, especially when combined with web development and the many useful JavaScript frameworks that CodeGrade supports. Automatically grading UX and UI is notoriously hard, but fortunately CodeGrade can save the day! With our Jest and Selenium integration, you can even fully automatically grade user interfaces! Read more about CodeGrade’s powerful Jest and Selenium integration here! Next to autograding them, you can also click through them manually all within the CodeGrade interface in your LMS. 

Devin Hillenius

Devin Hillenius


Continue reading

The Case for Change: Accessibility, Inclusion, and Equity in Computer Science Education

Learn how to drive institutional change, create safe spaces, teach accessible, and develop inclusive coding assignments with Dr. Brianna Blaser, Dr. Yasmine Elglaly, and Dr. Richard Ladner.

How to Check for Plagiarism in C, C++, and C# source code

Simplify plagiarism checks on C-family source code by integrating CodeGrade into your courses.

How to Stop Caring about Grades

Learn to save time with grading with alternative methods for teaching. Make your course accessible and inclusive with methods backed by research.

How to Stop Caring about Grades

Embracing a New Era: Harnessing Generative AI for Computer Science Education

Discover the transformative impact of Generative AI (Gen AI) on computer science education. Explore innovative tools and methodologies reshaping learning experiences and preparing learners for an AI-centric future. Uncover benefits, challenges, and evolving practices at the intersection of technology and pedagogy.

Sign up to our newsletter

See how CodeGrade can transform your courses today!