Automatically grading JavaScript programming tasks for CSEd classrooms and coding bootcamps
Articles
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

Co-founder, Product Expert
Devin is co-founder and Product Expert at CodeGrade. During his studies Computer Science and work as a TA at the University of Amsterdam, he developed CodeGrade together with his co-founders to make their life easier. Devin supports instructors with their programming courses, focusing on both their pedagogical needs and innovative technical possibilities. He also hosts CodeGrade's monthly webinar.

Continue reading

Teaching Intro to Python with CodeGrade

The CodeGrade Introduction to Python course is an 8-week basic Python course. Students are not required to have any prior knowledge on programming or Python. This course will cover the basic concepts of programming up to Python specific modules and OOP design. It is available for all instructors now.

New release CodeGrade QuietStorm.1!

Find out about all the features and updates coming with our latest release, QuietStorm.1!

New release CodeGrade QuietStorm.1!

Automatically grading Haskell code assignments

Learn about autograding Haskell coding assignments for Computer Science education courses. CodeGrade can help you use tools like input and output checking, Quickcheck, Tasty and HUnit unit test autograding, HLint code quality checking and code structure autograding using semgrep.

Top tips for teaching programming

The most efficient ways to teach students how to code, by defining your target audience, designing your assignments in a meaningful way and eliminating distractions in the classroom.

Top tips for teaching programming

Learn more about CodeGrade!

Grow your coding classroom
without compromise.