js-parsons - a JavaScript library for Parsons Problems

Parson’s problems are assignments for learning programming where the learner has to select, order, and indent code fragments. The goal is to construct a program which fulfils the task of the assignment. That’s best explained with an example task.

Your First Parsons Problem

Your task: Construct a Python program that prints strings "Hello", "Parsons", and "Problems" on their own lines. You can get feedback on your current solution with the feedback button. You should construct your program by dragging and dropping the lines to the solution area on the right.

If you would like to try out more examples, you can try this or this.



In the documentation, you'll eventually find lots more examples (now it's mainly unfinished). The docs will also introduce you to the configuration options and the different feedback and grading options available.

If you're not 100% convinced yet, here's another example with Pseudocode, toggleable values, and the turtle graphics grader.

Example of js-parsons turtle graphics assignment

Construct a program by drag&dropping and reordering lines from the top to the bottom. The constructed program should draw a triangle like shown below. Click    to select the correct value for that position.

Model Drawing

Your Code Drawing


The library is licensed under the MIT license.


We develop the library on GitHub, so the best way to contribute would be to report bugs and to submit feature requests using the issue tracker. We also highly appreciate well-made pull requests :) If you are planning some major refactoring or new features, go ahead and open an issue for it so we can discuss.