The CSS defines the core visualization of the rating widget. This style block should be placed within the same file as the widget, not included in an external style sheet.

The HTML of the ratings widget specifies a unique ID for each selectable option.

The JavaScript code defines the event handlers and attaches the event listeners that will handle the mouse events.

The ids array contains the unique IDs defined in the preceding HTML Block section. Later in the code, this array will be referenced when adding event listeners.

The next code snippet sets up the event handlers for the mouseover and mouseout events. The code uses the YUI Event utility to get the DOM node that generated the action. If the DOM node has not already been set to a clicked state, the class of the node is set to hover for the mouseover or to normal for the mouseout.

The next code snippet defines a handler for the click event. First, the code gets the DOM node that was clicked and determines the number that was clicked based on the ID of the node. Next, the getElementsByClassName utility gets all nodes that have a clicked state. The first for loop iterates through those nodes, setting them back to a normal class. The second for loop goes through all clickable nodes, from the first node to the node that was clicked, and sets their class to clicked.

Finally, the code calls the YUI addListener method to add the mouseover, mouseout, and click event listeners. These listeners are added to the nodes of the IDs in the array defined at the top of the JavaScript block.

The CSS defines a few simple styles to build out the EULA scroll container. These styles define visual representation of the widget and are independent of the actual animation effects.

The HTML defines eulaScroll, a div container with two content sections. Below this container are the two buttons that control the scrolling animation between sections.

The JavaScript code defines the scrolling animations and button events.

First, the code instantiates the two variables used in controlling the animation effects:

The next code snippet uses the YUI Event utility to attach click events to both buttons defined in the HTML block. When a button is clicked, the code calls the runScrollAnim function, passing the array location of the scroll arguments for that section.

The following code defines runScrollAnim, the scrolling animation function that runs when either button is clicked. The function uses the YUI Animation Scroll utility and the scroll definition specify the animation configuration. Finally, the function animates the scrolling effect.