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:

Finding objects
.cell([name])
Returns a jQuery object pointing to the named or current 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.
Running queries
.bindQuery([query,] f)
Bind the play button of the query named query to run the function f. If query is omitted, bind to the first query below this cell. The function is called with a single argument that provides a method run(bindings), where bindings is an object where the keys are the names of Prolog variables and the values are the values for these variables.
.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 provides the defaults below:
  • Set application to swish.
  • Set chunk to 5. This should be set to 1 for code that acts on both onprompt and onsuccess.
.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.
Miscelleneous
.hideQuery(q[, on])
Hide the query editor and buttons for the query named q if on is true (default).
.loadCSS(url)
Load a CSS style sheet from url if this was not already loaded.

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.

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).