Creating Stand-alone FCG Web Demonstrations

Author: Katrien Beuls

FCG grammars are typically accompanied by a web demonstration that explains the constructions that were operationalized and includes examples of comprehension and production for a number of illustrative sentences. A web demo conserves most of the functionality of the FCG web interface, so viewers can click on the constructions to open them, and inspect transient structures. Examples of existing web demonstrations can be found online on www.fcg-net.org/demos. The current recipe explains how to create your own html page for your FCG demo, which can be viewed without a Lisp running in the background.

Creating a static html page

The function that creates the index.html and stores the clickable objects such as constructions and transient structures is called create-static-html-page. It takes a string as its first argument, which is the name of the web page, a number of add-element function calls that send output to the web interface.

The following snippet shows an example of the creation of a static html page, with a body consisting of three parts: a function call to create a header, and two other functions that are responsible for demonstrating the use of a simple NP construction and an intransitive construction.

(create-static-html-page "My beautiful grammar"
  (header)
  (simple-np-example)
  (intransitive-example))

The header function typically activates monitors and adds some general information such as the title (as a h1 header), and a reference to the publication the demo is supporting. Typically, a small menu is included, consisting of titles with hyperlinks to the corresponding sections of the demo (e.g. a :href "#simple-np").

(defun header ()
  (clear-page)
  (deactivate-all-monitors) 
  (activate-monitor trace-fcg)
  (add-element
   '((h1) "The Basics of Fluid Construction Grammar"))
  (add-element '((p) "This is a web demo that supplements the paper:"))
  (add-element
   '((p) ((i)"Steels, Luc. (2017). "
          ((a :href
              "https://www.fcg-net.org/wp-content/uploads/papers/basics-of-fcg.pdf")
           "Basics of Fluid Construction Grammar.")
          "Constructions and Frames. 9(2).")))
  (add-element '((p)"Please check our " ((a :href "https:www.fcg-net.org/projects/web-demonstration-guide/") "web demonstration guide ") "to find out more on what you can see in the demo and what you can do with it."))
  (add-element '((p) "This demonstration has the following parts:"))
  (add-element '((h3)  ((a :href "#simple-np") "I. Simple noun phrase construction")))
  (add-element '((h3)  ((a :href "#intransitive") "II. Intransitive clause construction")))

Optionally, you can add a disclaimer to the header as well, such as:

(add-element '((p :style "color:darkred") "DISCLAIMER: It is
recommended to use` `Firefox or Safari to optimally explore the contents
of this page."))

You can test subparts of the web demo (such as the header) by calling the header function and opening a web browser at http://localhost:8000. Calling create-static-html-page will automatically open index.html in the browser.

Displaying a construction

The simple-np-example first creates the grammar that is used in the web demo, here: cxn-inventory and then adds a number of elements to the static html page. First, a name for the menu hyperlink (e.g. a :name "simple-np") is included. Then, headers are created to make some structure in the web page. The body consists of a number of html paragraphs with explanations on the constructions before they are displayed. The construction name can be used to retrieve the construction from the inventory.

(defun simple-np-example (cxn-inventory)
  (let ((cxn-inventory (make-basic-grammar-cxns)))
    (add-element '((a :name  "simple-np")))
    (add-element '((h2) "I. A simple noun phrase construction."))
    (add-element '((h3) "(I.a.) The following construction schemas are loaded in memory:"))
    (add-element '((p) "(click on encircled + to zoom in and on encircled dot to zoom out):"))
    (add-element '((p) "1. <i> A construction schema for the article `the'.</i> There is only one unit involved, ...")
    (add-element (make-html (find-cxn 'the-cxn cxn-inventory)))
    (add-element '((p) "2. <i> A construction schema for the noun `girl'.</i> The production lock ..."))
    (add-element (make-html (find-cxn 'girl-cxn cxn-inventory)))
    (add-element '((p) "3. <i> A construction schema for a simple noun-phrase. </i> The production ..."))
    (add-element (make-html (find-cxn 'simple-np-cxn cxn-inventory)))))

Including the comprehension/production of an example sentence

Because we have activated the trace-fcg monitor, we can simply include a call to FCG comprehend, in between the html code. For example:

(defun comprehend-example-he-bakes (inventory)
  (add-element '((h3) "(II.a) Parsing an intransive clause: 'He bakes'."))
  (add-element '((p) "Of particular interest here is the way that ...)"))
  (add-element '((p) "After the application of the intransitive-cxn, we see that ..."))
  (comprehend '("he" "bakes" ) :cxn-inventory inventory))

This function was called by intransitive-example, as defined below:

(defun intransitive-example () 
  (let ((inventory (make-basic-grammar-2-cxns)))
   (display-constructions-intransitive inventory)
   (comprehend-example-he-bakes inventory) 
   (produce-example-he-bakes inventory)))

Publishing your web demo online

When you call the create-static-html-page function, a huge number of files will be created in the .tmp folder inside Babel. The folder will carry a time stamp, e.g. 2018-01-11-21-13-01-html. Inside that folder you find an index.html file, together with (sometimes) hundreds of xml files, one for every clickable object in the demo.

To publish the demo, you simple rename the folder and upload it to a web server to which you have access. If you want to publish it on the FCG site, please send us an e-mail at info@fcg-net.org with the demo (compressed) attached.