Separation of concerns

A model-view-controller approach was followed.

• Scoring data that was used in calculating the patient score was abstracted into a separate scoring.js file that utilised a JSON array or array-type structure.
• A main.js file was used for all the various functions that are required to manipulate the DOM and state. A separate state.js file was used to keep track of the application state using a class structure.
• HTML and CSS were used purely for presentational aspects.

JavaScript Structure

A stateful architecture was implemented to support the user's navigation through the application. A main.js file was used to manipulate the state object and simultaneously update the HTML DOM elements.

User Interaction

A welcome screen was created to serve as the default home position with a "Get Started" button as the entry point into the application. Users can then use "Next", "Previous", and "Start Over" buttons to navigate through the screens.

Design choices

JavaScript was used to enrich the user experience by updating the UI when the user interacts with controls. Pink and blue accent colours were picked for the button elements to focus the attention of the user. Iconography, bright vibrant colours, hover effects, and shadows were used to build interest in the user.