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.

Features

Versatile feedback options:
- based on absolute line order and indentation
- based on code execution and variable values after execution
- based on unit tests
- based on the path drawn by a turtle
Python by nature
Other programming languages can be supported (pseudo comes included)
Blocks of code to order instead of single lines
Code which is not part of the correct solution (aka distractors)
Toggleable parts of the code which value can be changed by the learner

Documentation

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

License

The library is licensed under the MIT license.

Contributing

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.