Using HTML cells in SWISH notebooks

This notebook shows how HTML cells in a notebook can be used to create arbitrary web applications inside a notebook. The HTML is placed in a div element and is subject to Bootstrap styling.

The cell can contain script elements. The script elements are executed after the whole notebook is loaded and after editing the HTML cell and clicking outside the cell. First, the text of all script element without a lang attribute or lang="text/javascript" is collected. This is wrapped into an anonymous function with the argument notebook. The notebook argument is an object with the following properties:

.cell(): Returns a jQuery object pointing to the HTML cell
.notebook(): Returns a jQuery object of the entire notebook
.$(selector): Returns a jQuery object holding all DOM elements matching selector in the current HTML cell.
.run(query, parameters): Run the named query cell. Parameters is an object binding Prolog variables in the query to specified values.
.swish(options): Wrapper around new Pengine() that fetches the sources using the same algorithm as a query cell and sets the application to swish.
.submit(form, options): Submit a (Bootstrap) form to a predicate. This provides a wrapper around .swish that collects the content of the indicated form (a jQuery selector), calls options.predicate with a single argument that is a dict that contains the fields of the form. On success, options.onsuccess is called. If an error occurs, this is displayed.

Double click anywhere in this cell to see the source. Then click anywhere inside the notebook, but outside this cell to see the result.

Example

In the example below we provide an English grammer, some example sentences and simple Bootstrap form to interact with the query. The examples are loaded dynamically from the example sentences defined in the Prolog program at the end of the page.

Sentence

parse(Sentence, Tree).

### The programs Below are three program fragments. All three are declared as _background_ programs, so they are available to all queries posted from this notebook. They specify - The grammar itself - Examples that are loaded into the above interface. - Calling the grammar and translating it to a graphical tree You can change the grammar as well as the example sentences and see the immediate effect.

% A simple English DCG grammar % ============================ s(s(NP,VP)) --> np(NP, Num), vp(VP, Num). np(NP, Num) --> pn(NP, Num). np(np(Det,N), Num) --> det(Det, Num), n(N, Num). np(np(Det,N,PP), Num) --> det(Det, Num), n(N, Num), pp(PP). vp(vp(V,NP), Num) --> v(V, Num), np(NP, _). vp(vp(V,NP,PP), Num) --> v(V, Num), np(NP, _), pp(PP). pp(pp(P,NP)) --> p(P), np(NP, _). det(det(a), sg) --> [a]. det(det(the), _) --> [the]. pn(pn(john), sg) --> [john]. n(n(man), sg) --> [man]. n(n(men), pl) --> [men]. n(n(telescope), sg) --> [telescope]. v(v(sees), sg) --> [sees]. v(v(see), pl) --> [see]. v(v(saw), _) --> [saw]. p(p(with)) --> [with].

example("john sees a man"). example("a man sees john"). example("john sees a man with a telescope").

:- use_rendering(svgtree, [list(false)]). parse(Sentence, Tree) :- nonvar(Sentence), !, split_string(Sentence, " ", " ", Strings), maplist(atom_string, Words, Strings), phrase(s(Tree), Words). parse(Sentence, Tree) :- phrase(s(Tree), Words), atomics_to_string(Words, " ", Sentence).