Three Sample Programs

Dealing with Text: Highlighting words/text, changing the color of hovered links
We will try to provide some parsing for elements in BAH webpages. When a user presses an alphanumeric character, it will trigger an event handler that highlights all words containing that character. Also the DOM will detect whenever the mouse cursor goes over the link, and will change the color of the link's font.

For text highlighting:
q("Words"):bind("click", lambda(self) {self.fill = "yellow"})
q(".all"):empty():contains("a"):trigger("default")

For changing colors on links:
q(".Links"):bind("hover", lambda(self) { self.fill = "red" })

Matching Game
For this example, we try to emulate the memory game in which users have to match pairs of identical pictures on a board. Originally the square-filled board will be covered, with the pictures that each square hides concealed. Clicking a covered square will reveal the hidden picture. After two pictures have been matched, clicking on those squares corresponding to these pictures will not hide the pictures once more. The goal is to find all pairs of identical pictures as quickly as possible.

All squares will have a click event-handler that changes the background to a certain image. One click will change the plain square color to an image color and another click will revert this.

q("Squares"):bind("click", switchImages)
q("MatchedSquares"):unbind()

Following a cursor on a grid
In this instance, the DOM will consist of a grid of squares. The squares in the grid will change color depending on the location of the mouse cursor. All the squares in the same row and column as the (x,y) coordinates of the mouse will change to a different color. So in a sense, the squares in the graph will "follow" the location of the cursor. These lit-up squares will reveal the row and column that the mouse is on.

This example will necessitate efficient selecting of nodes in the DOM. We can then filter the nodes based on x and y coordinate, and of these selected nodes, we trigger the deafult event handler that we initially put into the DOM.

q(".HBox"):filter("lambda(self,x,y):
if (self.x_c == x) {
if (self.y_c == y) {
return 1
}
}
return 0
"):trigger("default")