Home

Sentiment Rating Widget Documentation

User Documentation

Welcome to the Human-Sentiment rating widget!

Let's take a look at how you can use this application to record your broad emotionial feeling throughout the day.

The two main functionalities of this app are:

1. The ability to choose an emotion from 5 available options that scale from "Upset" all the way to "Joyful."

   

   To use this feature, select one of the visible faces with your mouse, (you will see the word describing the emotion change from black to the color of the corresponding face). Then click the submit button directly below to save your answer.

   Each individual user submission is used to calculate a "sentiment breakdown" that will be described below.

2. The ability to view a percentage breakdown of your emotional range over multiple submissions.

   

   Each individual submission of an emotion will contribute to this breakdown, such that the percentage displayed above emotion y, for instance, represents the fraction of all submissions that contained emotion y. So on and so forth for all 5 available emotions.

   Finally, the reset data button will set all percentages back to 0 and effectively wipe all user submissions.

   • Critically, refreshing the page does not render the same result, and will maintain the breakdown that existed at the point of refresh.

Developer Documentation

Table of Contents:

• How to Access App / Requirements
• Design
• JS functionality

How to Access App / Requirements:

Any modern web browser (Chromium-based, Safari, Firefox, etc..) can run this web application. It is published through Github Pages at the following link.

Design:

There are two broad sections: Emotional meter and Sentiment breakdown.

Furthermore, the page is broken down into roughly 5 overall "containers" (the box containing the emotional meter and submit button, the form within the meter that collects the user-input, the submit button for the meter, the sentiment-breakdown section as a whole, and the reset data button) that can be styled separately, and then there is a further breakdown within those containers to style indivdiual elements such as each emotional face, its label, etc...

• There is an HTML section with id="meter-section" that holds the entirety of user-interactive portion of the application. This includes the HTML form that presents the user with different emotional options. The input style is of type radio and svgs are used to display emoji-like faces on the page for each option. The advantages of using SVGs over traditional images for the faces is that we were able to fine-tune the different components of the faces themselves and design them exactly to our liking.

• The breakdown section contains div class=pct_group elements that each hold the percentage info for each emotion and are styled individually as well.

Such a breakdown of the HTML allows us to style the page to a significant level of complexity. Consider how the emotional meter section has a background gradient color (from purple to white), and also how each face itself can be styled in CSS to be a unique color itself. The same mechanism applies for the sentiment breakdown section and its individual percentage groups.

The buttons can also be individually styled, and the CSS allows us to define different visual behavior for button: hover and button: active, such that, in this instance, the buttons will change color when moused over, and become larger when actively clicked.

Taken as a whole, the design choices (coloring of each component, layout, etc..) are meant to keep the application well-organized, minimal, but also visually pleasing. It is easy to discern the difference between the two main sections, and the background of the page as a whole is colored with a gradient that aligns with the "Digital Dream Team" colors.

JS Functionality:

The main purpose of the JavaScript portion of the application is to work with two buttons in the app: "submit" and "reset data." The main event listener in the script waits for the emotional meter form to be submitted, and then goes about updating the values for the percentage of each emotion. The script also incorporates localStorage such that the emotional data is stored across user-sessions as well. The script also has additional helper functions for all of the event listeners dealing with loading in the emotions from the local Storage, and deleting all of the storage as well (for when the reset data button is clicked for instance).

Overall, the document, form, and resetButton event listener's use these helper functions to store and manipulate the data shown in the "User-Sentiment Breakdown" section. Practically, this means adjusting the percentage numbers displayed under each emotion, and also calculating the numbers themselves which is all handled by the function updatePercentages. This function is responsible for calculating each emotion's percentage using the total number of submissions that were made.

As such, the JS script is able to update the page information based on which emotion the user submits, and also allows the user to reset all of the current information back to the start state.