Angular Survey Tool Retrospective


The survey tool is something I built in my free time on nights and weekends. It allows the user to create a survey, add different types of questions and elements to the survey, adjust styling settings for each piece of the survey, and then the user can export the HTML to utilize that HTML form on their website somehwere.

This project started out as an attempt to clone the functionality of Jotform, but written in Angular, Angular Material, and using a drag-and-drop interface. I learned a ton about Angular and a couple of npm packages related to drag-and-drop interactions.

Code Review

This app really pushed my limits as far as Angular template binding goes. Pretty much everything the user sees in the UI is something s/he can adjust settings for and those changes need to be reflected in the DOM/UI and also in the HTML that gets exported. Particularly, the HTML file for the editor 'canvas' is over 700 lines of HTML with Angular bindings. It's cool what all is possible, but it makes files of that size really hard to parse through. These HTML pages could certainly use some serious refactoring and cleanup.

A big issue with the current implementation is that I am relying upon an npm package called ng2-dnd for the drag-and-drop functionality. For some reason, this package only allows you to set a container as either droppable or sortable, not both. So the biggest limitation right now, is that users can only drop new survey questions and elements into the survey, but then can't rearrange them afterwards. I tried using the Angular version of Dragula, but ran into similar issues.

Future Improvements

This app is very much still in active development and I have a healthy list of issues on the repo for things to fix and address. Some of the big ones are adding new questions types, adding some facility for users to see a preview of their survey without all of the editor noise around it, adding a rich text editor for some elements so users can use convenient and familiar tools like bold, italics, underline, etc., and overall adding more styling options for the user.

I would like to attract some contributors for this project as well. I feel like this tool could have some real world value!

  • Fix the dependency issue with the ng2-dnd package mentioned above
  • Clean up, enhance, and add new question settings options
  • Add more question types like a file upload question
  • Add rich text editor where appropriate for editing survey elements
  • Refactor the entire application