I am a student in the M.S. in Human Language Technology program at the University of Arizona. I am a student employee at Tech Launch Arizona, working as a Market Research Associate. This page serves as the report of my final course project for LING 508 (Computational Techniques for Linguistics).
For my course project, I created a Study Helper tool with different tabs to demonstrate the skills I learned in class. My study buddy / to-do list helper tool is written in HTML and Javascript. The goal of the tool was to provide a dynamically updating webpage to assist users in organizing their tasks, searching for online resources, and staying motivated.
The first part of the tool, which also serves as the homepage, is the to-do list. My goal was to create an interactive list where users could easily input, manage, and delete tasks. This to-do list is structured in such a way that users can type their tasks into a text input form and then click an "add" button to add the item to their list. Once added, each task is displayed with two features: a checkbox on the left, indicating whether the task is completed, and a red "X" on the right to remove the task. I wanted the user to clearly see when a task was complete, so I added a feature that automatically crosses out the text of a task once it is marked complete. This mimics a physical to-do list, giving the user a sense of accomplishment as they visually track their progress.
In class we discussed integrating JavaScript to HTML to create interactive web applications, and we were introduced to a gauge tool that can visually display the "weight" of a number on a given scale. I wanted to add this functionality to my to-do list, that could display to the user the percentage of tasks that are complete. I included the JustGage script to do this. However, I ran into a problem related to dynamic updating of the gauge. Initially, if the user were to add tasks after already checking certain tasks off, the gauge would not recognize the change in completion percentage and would still display the old percentage. To fix this, I added some event listeners that would keep track of any changes in the tasks - addition, deletion, and completion status. I wrote a function to update the completion percentage and if a task was created, deleted, or modified, the completion percentage and thus the gauge would be dynamically updated.
The checkbox was implemented by appending the taskCheckbox item to the <li> element taskItem, which represents an individual task. The EventListener is what keeps track of any changes to the status of the task item, which is triggered when the checkbox is checked or unchecked. When the checkbox is checked, the associated task text (taskLabel) is crossed out using CSS. After a checkbox state change, the functions updateCompletionStatistics() and updateGauge() are called, which update the completed and total task counts and percentage, and refresh the gauge to reflect the new completion percentage.
The gauge is dynamically refreshed using these event listeners. For all events that involve a change in the number of total tasks and completed tasks, I made sure to update the respective variables and use my updateCompletionStatistics() function which calculates the completion percentage based on these variables. The checkbox event listener does not update the totalTasks variable because whether a task is checked or not does not affect the total number of tasks; rather, it only affects the completedTasks variable. When a task is checked, the completedTasks variable is decremented, and when a task is unchecked, the variable is incremented. The only actions that can change the totalTasks variable are adding a task (clicking the Add Task button) and removing a task (clicking the red X button). The updateGauge() function uses JustGage's refresh() function to redisplay the gauge with the new completion percentage.
The next feature of the Study Helper tool is the Links tab, which helps users quickly search for online resources related to a query. The goal of this tab was to provide a way for the user to type anything they want to learn about, and the page would be a consolidated hub of useful URLs related to the input. I used a text input form and a button where the user can type their query and search. I wrote a function generateWebLink() that takes this string query and encodes it into a search query URL for websites such as Google, Reddit, and Wolfram-Alpha (These platforms were chosen because of their relevance to different "flavors" of searches — Google for general information, Reddit for community-driven insights, and WolframAlpha for more technical or mathematical queries). The results with the URLs are shown on the page, and in the case of a new query it will refresh.
This tool simulates the first steps of natural language processing, where user input is captured and converted into something meaningful that external tools can understand. Although basic, this skill set transfers directly to more complex NLP tasks, such as query parsing or keyword extraction, which I have gone on to apply in other projects.
The third part of the tool is a Motivation tab. This will display a random motivational quote and image. To implement this, I created two arrays — one containing a selection of motivational quotes and the other a list of image URLs. I wrote a function called getPic() which, by using the Math library, gets a random integer in the range of the length of the array of phrases and image links, which were then used to index into the respective arrays and retrieve an image and a quote.
This project was a useful way to strengthen my HTML and JavaScript skills, which are essential in building web applications. I learned more about how to dynamically update content on a webpage using event listeners. The experience gained through this project has also improved my ability to develop front-end interfaces and manage user interactions. The integration of external libraries like JustGage further enhanced the complexity of the project and demonstrated adaptability in working with third-party tools, which is frequently done in NLP tasks with libraries such as spaCy or scikit-learn. Working on the Links tab gave me a foundation for reading in user text input, parsing it, and potentially modifying it to work with external tools. This was directly useful in my HLT internship, where I had to use NLP tools to extract keywords from a document and return useful market research hyperlinks based on them. Overall, this was a fun experience to apply my course learning to something that could be useful for enhancing studying and productivity.
My GitHub repository with my code can be found here: GitHub Repository
The webpage can be viewed here: Study Helper Tool