MD-WIDGETS: Add event response support to the widget

[tonypioneer]

Description

Add event response support to the following widgets.

[tonypioneer]

As discussed in the meeting, we could design the event handling like JavaScript in HTML. We can try to implement the event handling of submit buttons or text input fields first.

The following are some ideas about the events of all the widgets.

1. Radio Button

   • Click Event: Triggers an event when an option is selected, deselecting the previously chosen option and updating the current selection's state.
   • State Update: Updates the view or stores the user's choice when the selection changes.
   • Validation Logic: If a specific validation is required for an option, it can be processed when that option is selected.

2. Checkbox

   • Click Event: Changes the selected state (checked or unchecked) when clicked and updates the associated model or data.
   • Multiple Selection Logic: Supports the combination of multiple options and can trigger additional logic, such as showing or hiding other controls.
   • Enable/Disable Event: Dynamically enables or disables the checkbox based on user input or survey logic.

3. Dropdown Menu

   • Selection Event: Triggers an event when an item is selected, updating the view or data and executing logic related to the selection.
   • Data Load Event: If the dropdown data is fetched from a server, an event may be needed to load the data.
   • Option Filtering: Options can be dynamically filtered or adjusted based on user input.

4. Slider

   • Drag Event: Updates the value in real-time as the user drags the slider and can display the current value during the drag.
   • Value Change Event: Triggers an event when the user releases the slider, updating the model or executing specific logic.
   • Range Validation: Checks if the slider value is within the expected range and, if necessary, displays a warning or adjusts logic.

5. Text Input Field

   • Input Event: Captures user input in real time for immediate validation or data update.
   • Blur Event: Triggers validation logic or saves data when the user finishes input and leaves the field.
   • Character Limit: If there is a character limit, an event should be set to enforce the limit and inform the user.

6. Submit Button

   • Click Event: Validates whether the values of all input controls are valid and triggers the logic to submit the survey.
   • Loading State: Displays a loading animation upon submission to prevent multiple clicks.
   • Success or Failure Response: Executes subsequent actions based on the submission result, such as showing a success message or prompting the user to retry.

7. Timer

   • Countdown Event: The timer counts down and triggers an event when it ends (e.g., auto-submitting the survey or reminding the user).
   • Pause and Reset: Can support functionality for pausing or resetting the timer.

8. Image, Video, and Audio Widgets

   • Load Event: Triggers when media has loaded, ensuring it displays or plays correctly.
   • Play/Pause Event: Allows the user to control the playback of audio or video and updates the corresponding state.
   • Playback Complete Event: Triggers specific logic, such as automatically moving to the next question, when audio or video finishes playing.

[gjwgit]

Not currently a priority. The surveys as they are seem just fine for collecting data. Propose to put this into backlog for now.