This was an app for a teacher of workshops at the Center for Communicating Science, Stony Brook University. Geared towards teaching university level science majors how to communicate effectively with lay people; the site walks students through writing an article in a custom built text editor.
The teacher wanted to be able to give the students the impression that he was ‘watching them over their shoulders’. An editor was developed that parses the students text as they are typing; checking each word and full sentence against regular expressions. When matches are found, depending upon the page, the word may be highlighted or have an alert attached.
Alerts give the user further information the teacher has set up from within WordPress admin for that type of alert. All this is done while the user types, without interfering with the flow of the writing process.
After the user has completed the they can ‘publish’ their articles for other others to give feedback on.
The site includes an admin interface for viewing users articles and meta data related to the article.
The moment of truth:
Context: as the user types the editor dynamically highlights the 'complex' words comparing the last word typed to a large list of words (over 100,000). This list is ordered alphabetically and containing a scoring value based on the location of the word within another list words which is sorted by complexity.
At first I was sending the words back to the server to process whether or not the word should be highlighted, but there was too much lag and dropped ajax calls. So, I converted the PHP code doing the complex word comparison to JS. It was a huge undertaking for me as at the time I was not as experienced in JS as in PHP, but I learned much and in the end it worked a charm!
Built with (what I used most):
- WordPress (https://wordpress.org)
- Advanced Custom Fields (https://www.advancedcustomfields.com)
- Rangy (https://github.com/timdown/rangy)
- Amplify for local storage (https://github.com/mikehostetler/amplify)
- Regular Expressions - lot's of them!
- PHP, JS, jQuery, HTML, CSS
