Browser-based LaTeX-editor for TUMexam Intermediate talk for the - PowerPoint PPT Presentation

Chair of Network Architectures and Services Department of Informatics Technical University of Munich Browser-based LaTeX-editor for TUMexam Intermediate talk for the Bachelor’s Thesis by Adrian Pesch advised by Dr.-Ing. Stephan Günther, Maurice Leclaire, Benedikt Jaeger, Johannes Naab Monday 25 th November, 2019 supervised by Prof. Dr.-Ing. Georg Carle Chair of Network Architectures and Services Department of Informatics Technical University of Munich

Introduction Create an exam without a LaTeX web editor: 1. (Install texlive-full) 2. (Install Git [2] and familiarize with it) 3. Download the exam template 4. Edit the template locally 5. Upload the modified template A. Pesch — LaTeX-editor for TUMexam 2

Introduction Create an exam without a LaTeX web editor: 1. (Install texlive-full) 2. (Install Git [2] and familiarize with it) 3. Download the exam template 4. Edit the template locally 5. Upload the modified template Motivation & Objectives: • Improve workflow • Decrease time spent on exchanging the exam • Start quickly using pre-defined controls and easy to use features • Availability of version control for non-Git-users A. Pesch — LaTeX-editor for TUMexam 2

Introduction Create an exam without a LaTeX web editor: 1. (Install texlive-full) 2. (Install Git [2] and familiarize with it) 3. Download the exam template 4. Edit the template locally 5. Upload the modified template Motivation & Objectives: • Improve workflow • Decrease time spent on exchanging the exam • Start quickly using pre-defined controls and easy to use features • Availability of version control for non-Git-users Create an exam with a LaTeX web editor: 1. Open the web editor 2. Edit the exam online A. Pesch — LaTeX-editor for TUMexam 2

Demo Figure 1: TUMexam [1] modified to include a LaTeX-editor A. Pesch — LaTeX-editor for TUMexam 3

Conclusion Remarks: • PDFs can be rendered server- and client-sided • Easy to use: • Drag & drop to insert, move or upload files and move folders • SyncTeX [6] to jump from PDF to code and vice versa • Quick switch between build targets • Jump to warnings’ or errors’ sources from the build log • Git in use in the background (commits are triggered on specific user interaction) A. Pesch — LaTeX-editor for TUMexam 4

Conclusion Remarks: • PDFs can be rendered server- and client-sided • Easy to use: • Drag & drop to insert, move or upload files and move folders • SyncTeX [6] to jump from PDF to code and vice versa • Quick switch between build targets • Jump to warnings’ or errors’ sources from the build log • Git in use in the background (commits are triggered on specific user interaction) Next steps: • Enhance user experience, e.g. • Icons instead of text controls • Feedback in case something goes wrong • Improve overall design • Configuration dialog • Multiple Choice task creation assistant • Version history (view Git commits) A. Pesch — LaTeX-editor for TUMexam 4

Appendix Further enhancements • Real-time collaboration • Fully guided exam creation • LaTeX compilation in browser (offline mode) • W hat Y ou S ee I s W hat Y ou G et web editor A. Pesch — LaTeX-editor for TUMexam 5

Appendix Controls Files Code PDF A. Pesch — LaTeX-editor for TUMexam 6

Appendix Controls • Status of build and current file • Enter fullscreen • Switch build target • Add a new problem or a sub-problem • Zoom-in/out the PDF A. Pesch — LaTeX-editor for TUMexam 7

Appendix Files • Upload files by dragging • Move files around via drag & drog • Context menu on right click to • Upload files • Add & delete files and folders • Rename & move files and folder • Show hidden files and folders • Drag TeX or image files into Code view A. Pesch — LaTeX-editor for TUMexam 8

Appendix Code • Using Ace [3] code editor • File saved automatically • Modification triggers build and rendering of PDF • No real-time collaboration but prevents multi user editing A. Pesch — LaTeX-editor for TUMexam 9

Appendix PDF • PDF view via PDF .js [4] (client-sided-rendering) • PDF view via images (server-sided-rendering) using pdftoppm [5] • Jump from PDF to Code and vice versa by double-clicking A. Pesch — LaTeX-editor for TUMexam 10

Bibliography TUMexam App on Gitlab https://gitlab.lrz.de/tumexam/app Last cloned on 12/11/2019 Git - Reference https://git-scm.com/docs Last accessed on 22/11/2019 Ace - The High Performance Code Editor for the Web https://ace.c9.io Last accessed on 22/11/2019 PDF .js - Mozilla’s PDF Reader https://github.com/mozilla/pdf.js/ Last accessed on 22/11/2019 Command-line tool pdftoppm https://linux.die.net/man/1/pdftoppm Last accessed on 22/11/2019 SyncTeX Official Website http://itexmac.sourceforge.net/SyncTeX.html Last accessed on 24/11/2019 A. Pesch — LaTeX-editor for TUMexam 11