JupyterLab is a widely used platform for programming and data science using computational notebooks, but it has not been widely used in the educational data mining community as a source of student data. We have developed three JupyterLab extensions to enable educational data mining research in CSEd and data science. Our Blockly extension supports blocks-based programming in JupyterLab and logs both event-level blocks actions as well as kernel actions and errors. Our self-explanation extension appends self-explanation prompts to codes cells and logs the input text for further analysis. Finally, our HTML injection extension allows injection of arbitrary HTML and Javascript into JupyterLab notebooks to enable pedagogies and data collection currently unsupported by JupyterLab. All extensions are open-source and distributed through NPM.
JupyterLab is the current iteration of the open-source Project Jupyter and is widely used, with over a million computational notebooks on GitHub [17]. The name Jupyter is a portmanteau of the programming languages Julia, Python, and R, which were the original target languages of Jupyter, but now dozens of languages are supported and can operate simultaneously within a single notebook [14]. The success of Copyright '2021 for this paper by its authors. Use permitted under Creative Commons License Attribution 4.0 International (CC BY 4.0) Despite its wide professional use and use in classrooms, JupyterLab hasn't been used as a source of student educational data in research published in educational data mining (EDM) conferences and journals. In this paper we present three JupyterLab extensions to advance EDM research. Our Blockly extension supports blocks-based programming in JupyterLab and logs both event-level blocks actions as well as kernel actions and errors. Our self-explanation extension appends self-explanation prompts to codes cells and logs the input text for further analysis. Finally, our HTML injection extension allows injection of arbitrary HTML and Javascript into JupyterLab notebooks to enable pedagogies and data collection currently unsupported by JupyterLab. All extensions are open-source and can be installed at the command line with the standard jupyter labextension install command. They may be used independently, simultaneously, or merely as models for future extensions supporting research in EDM.
In the last decade, blocks languages have seen wide
adoption for teaching introductory programming [
Blockly is an open-source JavaScript library for creating
blocks-based editors for programming languages within a
web browser [
Blockly's user interface minimally consists of a workspace for arranging blocks and a toolbox, or palette, for introducing blocks to the workspace. Within the blocks workspace, blocks can be dragged, copied, pasted, deleted, or snapped together. The blocks themselves contain elements like freetext entry elds and dropdowns, and dropdowns can be set to dynamically populate, e.g. with a list of current variables, rather than solely being static. Variable and function categories of the toolbox are also dynamic, such that as a variable is created, blocks for getting, setting, and similar operations are dynamically created. Likewise the function category of the toolbox yields blocks for functions which, once de ned, are dynamically added to the toolbox so they can be called. To make the creation of new blocks and blocks languages easier, Blockly also provides a web-based graphical authoring tool for blocks that allows authors to create, modify, and save blocks con gurations, including code generation.
We have integrated Blockly with JupyterLab by building a JupyterLab extension. When the user selects the extension, it by default opens side-by-side with the active notebook as shown in Figure 1. When a user arranges blocks in the Blockly workspace and then presses the Blocks to Code button, the corresponding Python code is generated in the active cell in the notebook, along with a serialized XML string in a code comment. The XML string allows the user to reconstruct the blocks workspace used to generate the code by clicking the Code to Blocks button.
Because the workspace can rapidly ll up with blocks, we have introduced a feature called notebook sync. When notebook sync is activated, clicking on a cell with an XML comment clears the current workspace and replaces it with the workspace that generated the code in that cell. This sync action is equivalent to the user manually deleting all the blocks in the workspace, selecting the target cell, and pressing the Code to Blocks button. This feature allows users to focus on the blocks being used in their current work ow without having to be distracted by blocks they have already Source JupyterLab JupyterLab JupyterLab JupyterLab JupyterLab JupyterLab Blockly Blockly Blockly Blockly Blockly Blockly Blockly Blockly Blockly Blockly Blockly Blockly Blockly Blockly used. Notebook sync brings the experience of working in Blockly closer to the experience of working in JupyterLab, where each cell can be manipulated independently of other cells.
We have also introduced a feature called intelliblocks [13]. Intelliblocks are blocks that are dynamically con gured by querying the kernel for string completions and variable information (i.e. intellisense queries). Intelliblocks rst query the variable named by the block for type information, e.g. pd in Figure 1, and then query all the children of that variable for both completions, e.g. pd., and type information. Intelliblocks appear to solve the block authoring problem of Blockly and allow it to be scaled up to arbitrary libraries. Without a solution like intelliblocks, a human author would be required to make thousands of blocks for a library of su cient size, and a the user would then need to navigate through all these blocks to nd the ones needed. Through our extension, intelliblocks allow research on blocks-based programming without any additional authoring e ort. The extension logs both Jupyter and Blockly process data. The logging is controlled by three query string parameters that may be appended to JupyterHub links distributed to participants: log=xxx, which enables logging to the speci ed url endpoint via POST requests; id=xxx, which logs with the speci ed participant identi er; bl=1, which sets the Blockly extension to auto-open in split-pane view. Each datum is logged in JSON format with a payload that is either a string or a JSON object. In the case of JupyterLab data, the format is fairly simple, as shown in Table 1. However, in the case of Blockly, the data is rather dense and complex. For example, a move event includes the block id, the previous x/y position, and the current x/y position, in addition to ids for the larger group of attached blocks and current blocks workspace. Because of this complexity, the Blockly events are logged exactly as they appear in execution, again in JSON format.
The self-explanation e ect is a well-known and studied
effect where asking a student to produce self-explanations
enhances learning [
We have create a self-explanation extension that automatically adds self-explanation prompts to each code cell as shown in Figure 2. Below each prompt is a text entry box for the student's explanation and a button to save their explanation. While the student types, the font of the text is red, until they press the save button, at which point it is logged and the text changes to black. Similar to the Blockly extension, the self-explanation extension can be con gured using query string parameters for id, log, and se=1 (to enable the extension). The data is POSTed to the endpoint specied by log and consists of the contents of the code cell and the self-explanation. Pairing the code and self-explanation ensures that they are properly analyzed together as a snapshot in time, as the student is always free to rewrite the code, self-explanation, or both.
The last extension we present, the HTML injection extension, is quite di erent from the others in that it does not intrinsically collect data. Rather, this extension is a template for creating extensions that can be used for various purposes, including collecting data. We developed this extension in response to a particular problem, displaying hosted videos embedded in JupyterLab. Typically this is done by executing Python and using associated widgets, but for experimental purposes we wanted to present embedded videos without associated code. Surprisingly this is not possible under the JupyterLab security model, which forbids JavaScript running in Markdown cells.
To circumvent this limitation, we use the metadata associated with the Markdown cell to specify arbitrary HTML and JavaScript, which we then inject into the Markdown cell outside the standard JupyterLab rendering of the notebook. The extension allows for easy embedding of video in the JupyterLab notebook, as shown in Figure 3. Any other rich media disallowed by JupyterLab's security model can be embedded in the same way, as can JavaScript that executes data collection functions. However, we note two caveats with this approach. First, the elements speci ed in the metadata will not render on servers that do not have this extension installed, making the notebooks that depend on it non-portable to some extent. Second, the extension allows for non-obvious code to be run when a notebook loads, so it is not recommended for use outside the research context.
We have presented three JupyterLab extensions to enable educational data mining research in CSEd and data science. Two of these, the Blockly extension and the self-explanation extension, support direct logging of data to a standard endpoint for POST requests. The Blockly extension provides clickstream-level data for blocks manipulation that can be used for future research on learning programming. The selfexplanation extension provides rich natural language data re ecting student reasoning during problem solving. The third extension, the HTML injection extension, can be used exibly for presentation of rich media or for data collection. All extensions are open-source and distributed through NPM at https://www.npmjs.com/ aolney. We hope these extensions will enable future work using JupyterLab as a source of student data for educational data mining.
This material is based upon work supported by the National Science Foundation under Grants 1918751 and 1934745 by the Institute of Education Sciences under Grant R305A190448. Any opinions, ndings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily re ect the views of the National Science Foundation or the Institute of Education Sciences. [12] K. J. O'Hara, D. Blank, and J. Marshall.
Computational notebooks for AI education. In I. Russell and W. Eberle, editors, Proceedings of the Twenty-Eighth International Florida Arti cial Intelligence Research Society Conference, pages 263{268. AAAI Press, 2015. [13] A. M. Olney, S. D. Fleming, and J. C. Johnson.
Learning data science with Blockly in JupyterLab. In Proceedings of the 52nd ACM Technical Symposium on Computer Science Education, SIGCSE '21, page 1373, New York, NY, USA, 2021. Association for
Computing Machinery. [14] B. Peng, G. Wang, J. Ma, M. C. Leong, C. Wake eld, J. Melott, Y. Chiu, D. Du, and J. N. Weinstein. SoS notebook: an interactive multi-language data analysis environment. Bioinformatics, 34(21):3768{3770, 2018. [15] T. W. Price and T. Barnes. Comparing textual and block interfaces in a novice programming environment. In Proceedings of the Eleventh Annual International Conference on International Computing Education Research, ICER '15, pages 91{99, New York, NY, USA, 2015. ACM. [16] M. Resnick, J. Maloney, A. Monroy-Hernandez, N. Rusk, E. Eastmond, K. Brennan, A. Millner, E. Rosenbaum, J. Silver, B. Silverman, and Y. Kafai. Scratch: Programming for all. Communications of the ACM, 52(11):60{67, Nov. 2009. [17] A. Rule. We analyzed 1 million Jupyter notebooks { now you can too. [18] H. Shen. Interactive notebooks: Sharing the code.
Nature News, 515(7525):151, Nov. 2014. [19] E. Tulving. How many memory systems are there?
American Psychologist, 40(4):385{398, 1985. [20] G. Wilson, F. Perez, and P. Norvig. Teaching computing with the IPython Notebook (abstract only). In Proceedings of the 45th ACM Technical Symposium on Computer Science Education, SIGCSE '14, pages 740{740, New York, NY, USA, 2014. ACM.
Additional gures that support the main text are shown below.