Visualisation
When it comes to visualization it has been highlighted that programming is being seen as being too abstract, and the goal of the visualization feature is to reduce this. The existing application does consist of a detailed visualization tool, but beginners may struggle to grasp the basics of the system at first. To make changes in the visualization tool more noticeable, highlighting has been introduced where the variable being referred to in a specific line of code is highlighted in both the editor and the visualization tool. Simple and comprehensive explanations of python syntax have also been introduced to make learning the basics of python easier for beginners.
Interactivity
For the interactivity section of the project a variable testing feature has been introduced. The feature allows the students to predict how variables will change in each line of code. The feature encourages the user to reflect on the code and determine whether they fully understand each of the steps of the code. The way in which the feature works is that the user enters a block code, and the user is tested on whether they understand how a variable is affected in each line. As the user steps through the code, they are asked to predict which variable will be changed or introduced as well as what the new value of the variable is. There is an arrow which points to the line that the user must use for the prediction.
Findings
The variable testing was seen as being helpful. Students felt it would assist them more in debugging rather than with testing their understanding of code. The highlighting feature was seen as being helpful, however, when comparing the helpfulness of the highlighting feature to the helpfulness of the variable testing feature, the variable testing feature was seen as being more helpful, stressing the importance of 'learning by doing'. The keyword explanations proved to be very helpful to the students. Students highlighted the importance of being reminded of the syntax of python keywords as well as the importance being given simple explanations of the keywords.
Implementation
The project mainly makes use of the frontend programs of Online Python Tutor. For both the variable testing and highlighting features, the bottle_server.py program writes the code in the editor into a JSON file (output.json). From the content in the JSON file, the bottle_server.py program extracts the variables and their respective values at each line and writes them to another JSON file (jsinput.json). The JSON file containing the extracted variables and values is then used in the frontend. For the variable testing feature, the extracted data from the jsinput.js file is used to determine the variables that are changing at each line, and for the highlighting feature the data from the jsinput.json file is used to determine which value in the OPT visualization tool should be highlighted.
Architecture Diagram
Enhancements Made
Conclusions
Overall, the enhancements were seen as being helpful however, participants felt that they would be more helpful for beginners or even high school students. Seeing that the participants had been coding for more than six months they cannot be considered beginners.
The variable testing feature performing better than the highlighting feature stresses the importance of providing students with plenty of opportunities to practice coding rather than mainly depending on completing assignments as the main practice time.
The success of the keyword explanations highlights the importance of providing students with comprehensive explanations of syntax. It also highlights that a reason why students may be struggling with grasping the basics of programming is the level of comprehensiveness of the explanations.