Parsons problems are useful to check if students undestand various aspects of code, from pseudo code and process flow to indenting in Python. Most deployed Parsons problems seem to be based on The JS parsons code available on GitHub. Direct implementation in a Jupyter notebook seems very hard, due to the number of libaries that are required to make the javascript load correctly in a markdown cell. Therefore, the best solution is to host the code on Codepen (or a suitable alternative) amd then embed in a Notebook via an IFrame.
(Thanks to the Edinburgh Python in Chemistry team for pointing these problems out at the first UK Python in Chemistry conference!)
Creating your Parsons problem¶
Use the example problem on CodePen as a template and in the bottom right click Fork (you may need to create a free account). This should create a new copy of the problem for you to edit.
In the HTML box you can edit the instructions
In the JS box edit the const initial to be your target code including any indentation
you can add a distracting entry by adding the dummy line at the end with #distractor after the command
Save your Codepen
From the bottom right click Embed - a new dialogue opens
On the top pane make sure only result is selected
Click iframe in the lower right tab and copy the src from the displayed code to use in your notebook
Once your Parsons problem is constructed you just need to embed it as in the examples below. Executing the code renders the problem; students can click Get feedback for it to mark the answer.
from IPython.display import IFrame
IFrame(
src="https://codepen.io/StuartLW/embed/gbbYZvo?default-tab=result",
width=900,
height=650,
)from IPython.display import IFrame
IFrame(
src="https://codepen.io/StuartLW/embed/yyyBZjJ?default-tab=result",
width=900,
height=600,
)Advanced information¶
In addition to the HTML, CSS and JS, which are shown on the CodePen page, there are a number of additional imports from the github site which are used to making this work. These are listed in the settings of the example; 2 external CSS style sheets and 7 JS scripts are loaded. The order in which the js scripts are loaded matters. so stick with what is shown in the examples.