Dual Rating Scale: How It Works

Welcome to the Dual Rating Scale resource. Below are links to working HTML pages (dualratingscale.html) and (dailyschedule.html), which demonstrate how to record Emotion and Arousal data throughout the day, and then a way to visualize it in a chart or save the results as a text file.

Link to the Demo Dual Rating Scale:
Open the Dual Rating Scale Form

Link to the Demo HTML File to copy:
Here is the Dual Rating html

Link to the Demo Daily Schedule:
Open the Daily Schedule Form

Link to the Demo Daily Schedule HTML File to copy:
Here is the simplier Daily Schedule html

1. Purpose of the Code

The dualratingscale.html file provides an interactive form that allows users to rate how they feel (emotion) and how energized or calm they are (arousal) at key time slots throughout the day. It is designed with the following goals:

Track emotions (using a 1–5 scale with emojis).
Track arousal levels (using a 1–5 scale with emojis).
Provide visual feedback via a line chart (Chart.js).
Save the data locally as a text file (JSON format).
Offer feedback messages for extremes in emotion or arousal.

2. Code Walkthrough

HTML Structure & CSS Styles
The code begins with the usual <!DOCTYPE html>, <html>, <head>, and <body> tags. In the <head>, we see a <style> block that includes rules to style the page: fonts, spacing, borders, etc.
Legend Section
There's a <div class="legend"> that describes the Emotion Rating Scale (1–5) and the Arousal Rating Scale (1–5), each with emoji examples. This helps users interpret how to select ratings.
Form Sections
The main part of the document is a series of <div class="form-section"> blocks, each containing:
- A <label> for the date and a <input type="date"> element, so the user can select the day being tracked.
- Several <div class="time-slot"> blocks (like "⏰ 6:30 AM - Wake Up"), each with radio buttons for Emotion and Arousal, plus a <textarea> for notes.
You can freely add or remove time-slot divs to match your own schedule.
JavaScript for Data Collection & Saving
In the <script> at the end, the code:
- Defines coping strategies in an object for quick feedback if ratings are too low or high.
- Collects the form data (in collectData()), scanning the radio buttons to see which emoji rating was selected for each time slot.
- Saves data to a text file (in saveData()) by converting the results to JSON and prompting the user to download it.
- Generates a chart with Chart.js (in generateChart()). The chart displays two lines: one for Emotion and one for Arousal.
- Provides basic feedback if the user’s overall day has too low or too high an arousal rating. This is a placeholder for real-world interventions (like “take a short walk if you’re sleepy” or “try breathing exercises if you’re too anxious”).

3. Customizing the Schedule or Ratings

If you’d like to collect data at different times or label them differently (e.g., “8:00 AM - Start of Class”), simply locate the corresponding <div class="time-slot"> in the HTML and rename it. Make sure you also update the code in the JavaScript section that defines the schedule order (i.e., the scheduleOrder array in collectData()). This array links each time slot’s HTML name attribute (like wake_up_emotion) to its label (“6:30 AM”).

4. How It Saves Data

When you click the Save Data as Text button, the code calls collectData(), which reads all the radio inputs and textareas (notes), storing them in an object.
That object is converted to a JSON string, which is downloaded via the browser as a .txt file.
You can keep these text files for weekly or monthly analysis. Later, you might import them into a spreadsheet or another data tool.

5. Graphing Trends

The Generate / Update Chart button triggers the generateChart() function. It pulls the same collected data and renders a Chart.js line chart with two datasets: emotionValues (blue line) and arousalValues (red line).
The code sets up the y-axis to go from 0 to 6 (just above the maximum rating of 5), so you can see the data points clearly. You can adjust the chart’s look and feel by modifying the Chart.js config options if desired.

6. Exporting to PDF or Printing

The current example saves data only as a text file. However, if you wish to create a PDF or automatically print the chart, you can:

Use a “Print” button and open the browser’s print dialog. The chart will appear on the page, and you can print to PDF from most browsers.
Use a library like jspdf or html2pdf.js to convert the form and chart into a PDF directly in the browser.
Save the data on a server and generate PDFs server-side if you want a more robust, automated solution.

7. Extending Its Use

This dual rating form is primarily focused on emotion and arousal, but you could tweak the code for any rating scales:

Stress vs. Calm
Energy vs. Fatigue
Positive vs. Negative mood
Physical states like pain rating or hunger level

Additionally, you can tie these ratings into other frameworks: for instance, integrating them with an educational plan, daily living skills tracker, or an occupational therapy assignment.

Note: If you want to store data in a database or handle large volumes of records, you can adapt the saveData() logic to POST the JSON to a server-side script (PHP, Node.js, etc.), which then saves to a DB or cloud storage.

8. Where to Find the Code

You can see and edit the full code in dualratingscale.html. It is best to open that file in a modern browser (Chrome, Firefox, Edge) that can run JavaScript, handle Blob downloads, and display Chart.js charts.

Conclusion

The Dual Rating Scale tool can be a helpful framework for collecting, visualizing, and reflecting on daily emotional and arousal data. It’s simple to modify, so you can tailor the schedule, rating descriptions, or chart outputs to fit your specific needs. We hope this explanation helps you integrate the tool into your own routines or professional practice.