Write a function that escapes <" and "> for HTML.

1. Write a first version in JavaScript.
2. Write a second version in Hop.

Note: In Hop, you might use the following functions:

• (string-length str) returns the length of a string.
• (string-append str1 str2 ...) appends strings.
• (string-ref str index) returns character at position index.
• (char=? char1 char2) character comparison.
• (substring str start len) returns a substring.

1. Define an equivalent JavaScript function that does not use any var construct:

   function foo( x ) { var tmp = x * x; return tmp + tmp; }

2. Define an equivalent Hop function that does not use any let construct.

   (define (foo x) (let ((tmp (* x x))) (+ tmp tmp)))

3. Define the Hop function map2 that applies a function to all the elements of a list.

Defines in Hop and in JavaScript the following library functions only with functions:

1. cons
2. car
3. set-car! and set-cdr!

Define a Hop service building a web page printing a number, incremented each time called.

Write a Hop service that accepts one argument. It builds a web page displaying that argument. When the mouse is over a letter, that letter is displayed upcased.

1. Note: in an event listener, the pseudo variable this denotes the object owning the listener.
2. Note: the client side function innerHTML-set! replaces the content of an element with a new HTML subtree.

Define a service named game which implements the mysterious number game. The user must discover a random number in at most ten attempts.

1. Write a first version where the user is trusted and then the response sent to the client.
2. Write a second version where the response is never sent to the client. This version must handle several games in parallel.
3. Write a third version where the server exposes a new service called game/submit which accepts as input an integer representing the user submitted value. The service responses four possible answers:
   • when the proposal matches the mysterious number, an integer denoting the number of attempts;
   • the symbol game-over;
   • the symbol lesser;
   • the symbol or greater.
4. Write a fourth version similar to the version 3 that handles several games. Use cookie for that version. To set a cookie on the client use the following function:

   (define (response/with-cookie name val xml) (instantiate::http-response-xml (xml xml) (backend (hop-xml-backend)) (header `((Set-Cookie: . ,(format "~a=~s; Max-Age=60" name val))))))

   To retrieve a cookie from the server:

   (define-service (game/submit num) (let ((cookie (http-cookie-get (current-request) "game"))) ...))

1. Define a simple Web file browser.
   run
2. Sort the files lexicographically and hide the files starting with the character ..
   run
3. Create a new tag called <BROWSER> that builds a file browser. The attribute :path specifies the initial path.
   run
   The form define-tag defines new elements. Example:

   (define-tag <BROWSER> ((path "/") (attrs) body) (<DIV> attrs ...))

4. Re-write the file browser using the SPAGE Hop element.
   run

FlipCounter is a small JavaScript libraries for implementing counter with a nice graphical effect. It is described at : http://cnanney.com/journal/code/apple-style-counter-revisited/

The actual JavaScript code is available at: https://bitbucket.org/cnanney/apple-style-flip-counter/raw/fe213d9fa060c3e2bca10be1c2f81b379712a91c/js/flipcounter.min.js

Invoking a JavaScript function within Hop code can be done using two different techniques:

• using the special module clause can be use to import a binding. Its syntax is as follows:

  (module my-module
    ~(js the-imported-js-binding))

• using a qualified notation such as:

  ~(alert (@ my-js-variable js))

The Hop library function plist->jsobject constructs a JavaScript Object from a Hop plist. Example:

(plist->jsobject '(:value 100 :inc 1))

Questions:

1. Creates a new Hop tag called <FPCOUNTER> that consists in a Flip Counter.
2. Create web page containing a <FPCOUNTER> and two buttons, the first one increments the counter. The second one decrements it.

MusicBrainz is a popular open music encyclopedia that collects music metadata and makes it available to the public. In addition to provide users with an online access to the database, it also provides a public API. It is described at http://musicbrainz.org/doc/Development.

1. Using that API and Hop write a Web page that let the user requests a musician name. In returns, the program shows the MusicBrainz registered artists that match the request.
2. When the user clicks on a match, the program shows extra informations (i.e., a short bio, a list of records, ...) of that artist.

For that exercise it is recommended to use the Json version of the MusicBrainz API because Hop automatically unmarshall JSON responses into Hop lists. You can also use the XML api and use the Hop xml-parse library function to extract the interesting fields.