Online Python Tutor https://github.com/pgbovine/OnlinePythonTutor/ Copyright (C) 2010-2012 Philip J. Guo ([email protected]) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ====== Introduction: The Online Python Tutor is a web application where you can type Python scripts directly into your web browser, execute those scripts, and single-step FORWARDS AND BACKWARDS through execution in order to view the run-time state of all data structures. Using this tool, teachers and students can write small Python code snippets together and see what happens to the data structures when the code gets executed. Try it out live at: http://www.onlinepythontutor.com/ ====== System architecture overview: The Online Python Tutor is implemented as a web application, with a JavaScript front-end making AJAX calls to a pure-Python back-end. The back-end has been tested on an Apache server running Python 2.6 through CGI. Note that it will probably fail in subtle ways on other Python 2.X (and will DEFINITELY fail on Python 3.X). Peter Wentworth has create a port to Python 3.X, and hopefully we can eventually integrate his code into my repository. The front-end is HTML/JavaScript (using the jQuery library). It's responsible for the input text box, submitting the Python code (as plaintext) to the back-end, receiving an execution trace from the back-end, and then rendering that trace as data structure visualizations. The front-end code resides in these files in the current directory: tutor.html question.html edu-python.js edu-python-tutor.js edu-python-questions.js edu-python.css jquery.textarea.js .htaccess - to increase the size of allowed Apache HTTP responses (there are also other 3rd-party JavaScript library files) Note on .htaccess: If your server limits the size of responses received from HTTP requests, then you might need to use the following .htaccess file included in your top-level (front-end) directory, to allow the Online Python Tutor to receive traces from the back-end: # Set a ~2MB limit for response headers (bigger than default 512K limit) SecResponseBodyLimit 2000000 The back-end is a server-side CGI application that takes Python script source code as input, executes the entire script (up to 200 executed lines, to prevent infinite loops), and collects a full trace of all variable values (i.e., data structures) after each line has been executed. It then sends that full trace to the front-end in a specially-encoded JSON format. The front-end then parses and visualizes that trace and allows the user to single-step forwards AND backwards through execution. The back-end resides in the cgi-bin/ sub-directory in this repository: cgi-bin/web_exec.py - the CGI entrance point to the back-end cgi-bin/web_run_test.py - the CGI entrance point to the question grading back-end cgi-bin/pg_logger.py - the 'meat' of the back-end cgi-bin/pg_encoder.py - encodes Python data into JSON cgi-bin/create_db.py - for optional sqlite query logging cgi-bin/db_common.py - for optional sqlite query logging cgi-bin/.htaccess - for Apache CGI execute permissions Due to the AJAX same-origin policy, the front-end and back-end must be deployed on the same server (unless you do some fancy proxy magic). ====== Original founding vision (from January 2010): I want to create a web-based interactive learning platform for students to explore programming. I envision an HTML UI where a student can enter in code and then single-step through it and see how the data structures change during execution. Key insight: I realized that for the small programs that teachers and students write for educational purposes, it's possible to simply LOG everything that happens to data structures during execution. Then we can simply play back that log in the front-end, which allows single-stepping forwards and also BACKWARDS. After all, we don't need students to be able to interactive probe and make changes in the middle of execution, which is the only value-added of a REAL debugger. What kinds of things do we want to log? On the execution of each line, log: - the line number just executed - all data created by the program Also log calls and returns of a student's function (but NOT library functions) We can use the Python JSON module to encode data structures in JSON and send it to the client's web browser The PDB debugger (Lib/pdb.py) is written in pure Python: http://docs.python.org/library/pdb.html - the bdb debugger framework is the C module that pdb calls http://docs.python.org/library/bdb.html