1. C++
Final Presentation

2. Topics Splash Page Sandbox Backend Parser Code Generation
User Interface (Instructor,Account, Student)
Documentation

3. Splash Page Login to web application Create an account
User logs in with and password
A php session is created for that user
Create an account
A user can create a new account by inputting their , password, first name, and last name.
Passwords are hashed using bcrypt

4. Sandbox Drag'n'Drop zone AJAX control panel output box
Line highlighting
Variable box updates

5. Sandbox . Drag ' n ' Drop HTML Element Based Javascript enabled
<script type-"text/javascript">
//setup the listeners on the page to be used for drag'n'drop
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>
//This function handles the file that is dropped in the box
function handleFileSelect(evt) {
evt.stopPropagation(); //to stop browsers' default action
evt.preventDefault(); //to stop browsers' default action
var files = evt.dataTransfer.files; // FileList object.
for (var i = 0, f; f = files[i]; i++) {
var r = new FileReader();
r.onload = function(e){
document.getElementById('userCode').value = e.target.result; }
r.readAsText(f);

6. Sandbox . AJAX control panel
AJAX call to CGI scripts for execution
Run activates after compile
Javascript monitors keypress
Forces compiling upon changes
Simple debugger control

7. Sandbox . Output box Contains messages from backend
Gives simplified version of debugger output
Acts as if it's a modified stdout

8. Sandbox . Line Highlighting
Small jQuery code adds divs with line #'s to textarea
tweaked Javascript to allow for highlighting
Made CSS class to show highlighted line
Changed the HTML class/id of divs to show current line
Client side parsing of gdb output calls function below, passes in the line number

9. Sandbox . Variable Box Box to show program variables and values
Updates based upon Next and Step button
gdb output is parsed on backend
JSON object returned with variables:values
Basic HTML table
innerHTML replaced any time
a button is pressed

10. Backend Components backendServer.py gdbthinclient.cgi gdbwrapper.py
srvThread
gdbthinclient.cgi
gdbwrapper.py
asyncRead.py
genCPP.cgi
runprog.cgi

11. Backend . backendServer.py
Multithreaded socket server
receives requests from gdbthinclient over socket
spawns new thread of srvThread class for each connection
srvThread class communicates with gdb instance through gdbwrapper.py
Web
backendServer.py
srvThread
Request
Request
srvThread

12. Backend . gdbthinclient.cgi
cgi script called when button is pressed on Sandbox.php
Button press corresponds to command sent to backendServer.py and from there to gdb
returns results of gdb command in JSON object via AJAX
Web
backendServer.py
gdbthinclient.cgi

13. Backend . gdbwrapper.py
Wraps gdb to provide communication between front end website and gdb instance
Sends commands to gdb and reads output
Utilizes asynchronous I/O through the asynchRead class to read the output
gdbwrapper.py
asyncRead.py
backendServer.py
gdb

14. Backend . genCPP.cgi Simple script to generate the C++ file
Takes code from HTML textarea, writes to file named /temp/prog_user.cpp
Calls g++ command on file, saves executable name /temp/compiledfrompython_user
Uses pipe and JSON to send return output

15. Backend . runprog.cgi
Similar to genCPP.cgi, calls command to simply execute the file
Runs file based on username
ex [ ./ compiledfrompython_csmith1 ]
Only active after Compile is pressed (or no changes)

16. Parser Pull XML from database Pull information out of XML MySQLdb
save XML in temp directory on server
Pull information out of XML
stores information in list objects
search objects based on 'rbid' attribute

17. Code Generation ElementTree Trace XML
build order of calls
each element has logic for generating code
ex) var, else, functioncall

18. User Interface Student Instructor Account
For the student to answer assignments
Instructor
For the instructor to manage assignments, courses, and questions
Account
For the user to change account settings

19. User Interface .Account
The user can change the password
Must enter existing password
Must enter the new password twice
The user can change their name
First and last name
The user can change login
Must be unique

20. User Interface .Instructor
Courses can be added,edited and deleted
Assignments can be added,edited and deleted
Questions can be added,edited and deleted

21. User Interface .Student
Students can answer assignments that are assigned to them
Students can update them after they are answered also
The assignments display on the sidebar on the assignments page.

22. Questions?