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
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
is collected. This is wrapped into an anonymous function with the argument
notebook argument is an object with the following
- Finding objects
- Returns a jQuery object pointing to the named
or current HTML cell.
- Returns a jQuery object of the entire notebook
- 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.
- Wrapper around
new Pengine() that fetches the sources
using the same algorithm as a query cell and provides the defaults below:
5. This should be set to
1 for code
that acts on both
- .submit(form, options)
- Submit a (Bootstrap) form to a predicate. This provides a
.swish that collects the content of the indicated
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.
- .hideQuery(q[, on])
- Hide the query editor and buttons for the query named q if
- Load a CSS style sheet from
url if this was not
Double click anywhere in this cell to see the source. Then click anywhere
inside the notebook, but outside this cell to see the result.
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.
### 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) :-
split_string(Sentence, " ", " ", Strings),
maplist(atom_string, Words, Strings),
parse(Sentence, Tree) :-
atomics_to_string(Words, " ", Sentence).