The College Affordability Model project delivers a web system designed to visualize statistical data combined from a collection of databases based on user input parameters. The system allows users to explore how much the students and their families can use from the most common sources of funds to pay for college, and the potential debt they would assume. The current web system presents a large number of input parameters and can be overwhelming for novice users. It is desirable to configure the frontend web page in the form of hiding or showing appropriate number of input parameters based on the user’s comfort-level with the system.
This WYSIWYG editor project aims at providing flexibility for users to create customized web pages according to their specific needs. The users can choose parameters that are important to them and should appear on the frontend of the web page. In this way, the values of the chosen parameters can be interactively manipulated for the computation of the desired results. The editor gives end users the power of configuring the user interface (UI) such that in addition to interacting with data end users also have control of how to interact with the visualization of data. With the WYSIWYG editor, creating a customized website no longer requires coding from developers and optimizes the required time from days to minutes.
This editor was first implemented based on an Angular platform and then migrated to a React platform to coordinate with the technology transition of the entire College Affordability Model project. The two fully functional editors based on the two underlying technologies demonstrated the complementary of the implementation. More importantly, the successful and straightforward migration process signifies that this WYSIWYG editor is based on an architecture that facilitates portability and reusability. The editor system design is technology agnostic and can be efficiently implemented on different technologies.