Grafstate Document Development Toolkit

Creating syntactic Grafstate code can be tedious; the GDDT significantly reduces the time and hassle of producing theoretical computational automata such as DFAS, NFAS, Turing Machines, etc.

Comment

I was inspired to create this project while taking my Theory of Computing class with Dr. Hollingsworth. In the class, we often paired learning theoretical concepts with producing them in as literal a sense as possible through a wonderful language-recognizing text editor and document-builder called Grafstate. However, as I utilized Grafstate to build machines throughout the semester, I realized that many students including myself struggled with the syntax of Grafstate and often struggled to create things, even if our understanding of the concepts were sound. It was then that the seed for the Grafstate Document Development Toolkit was born.

The GDDT provides an intuitive and interactive interface on which users can build syntactic Grafstate documents much more easily, even utilizing fillable templates for each of the various computational automata discussed in Grafstate like deterministic finite automatons, context-free grammars, and more. Students should never need to struggle with syntax while also trying to grasp these important theoretical concepts.

This website was built using VS-Code, a programming notation software that allowed me to efficiently manage the challenges I faced with HTML, JavaScript, and CSS. Eventually, the way the project was built was by producing an on-paper design to visualize necessary elements prior to implementing these ideas on the actual webpage.

Some unfortunate challenges arose when attempting to parse HTML data into a .graf document for exportation, but going forward, these problems can be mitigated with ease. Another challenge that arose was maintaining newline characters upon appending the Editor section to the Constructed Document section.

I'm proud to say that GDDT is well on its way to being a highly interactive and intuitive engine for creating syntactic Grafstate code. I've learned a lot about managing a webpage with the predefined goal of reducing friction and maintaining intuitiveness.

Going forward, I will finalize GDDT and remove its very evident mistakes to finish achieving the goal that this project originally aimed to achieve. To do this, I may include syntax highlighting in the Editor section along with error recognition so that users may have a syntactic .graf file before even uploading to Grafstate.

Built With

Share this project:

Updates