1. SIN DRILL & Z-DRILL Bhaskar Khaneja Lekha Surasani

2. Learning Objectives ■Get familiar with Intelligent Tutoring System (ITS) ■ Set up VM Ubuntu on local machine and install MATLAB ■Understand MATLAB drills and write them in JavaScript for easy deployment in a web browser ■Acquire front-end web-development language skills such as HTML, CSS and JavaScript ■Use Version Control (GitHub) to work collaboratively

3. Sin Drill (MATLAB)

4. Tools & Libraries Considered

5. JavaFX ■JavaFX is a set of graphics and media packages that enables developers to design, create, test, debug, and deploy client applications. ■Suitable? –WebEngine and WebView classes –JavaFX Scene-Builder Some important browsers (e.g. Internet Explorer 10, iOS Safari, Google Chrome) do not permit the execution of the Java plugin used by JavaFX to run inside a web browser.

6. Processing.js & jQuery Wave Plugin ■Processing.js is a JavaScript library designed to write visualizations, animations, and interactive content. ■jQuery is a lightweight JavaScript library and its Wave plugin lets you draw waves with a given amplitude, frequency and phase angle. However, few disadvantages: –Customization is limited -> easier to use raw JavaScript –jQuery JavaScript file is always required to run jQuery commands

7. JSXGraph ■Cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser ■Implemented completely in JavaScript, does not rely on any other library, and uses SVG, VML, or canvas ■Easy to embed and has a small footprint - less than 100 KByte if embedded in a web page ■No plug-ins required

12. Z-Drill (MATLAB)

13. Building Z-Drill ■JavaScript –Functions used to support operations ■Math.JS –Supported all Complex number operations ■JSXGraph –Provided graph representation –Unit Circle –Arrows ■HTML/CSS –Formatting of web-page –Buttons

14. Math.js ■Open source ■Library for JavaScript and Node.JS that –Parses expressions –Makes function calls ■Can be used in Node.JS or a browser ■Compatible with JavaScript’s built-in math library ■Supports various mathematical operations and expressions –Examples: fractions, complex numbers, strings, arrays, matrices ■Comes with large set of built-in functions and constants –Examples: e, i, pi, determinant, exponent, GCD

15. Building Z-Drill ■Show Rect. Form ■Show Answer ■Different colored arrows ■Unit Circle

19. Conclusion ■Mistakes –Incorrect choice of libraries –Lack of collaboration ■Improvements –Styling –Handling cases ■Positives –Graphics –Webpage instead of GUI

20. Questions?