| Table of Contents | ||||
|---|---|---|---|---|
|
...
| Note |
|---|
Although visual support is key because of the reasons listed above, it is also only meant to be just that: support that facilitates conducting a conversation with your conversational agent. In this project, you should design conversational interaction to be the primary modality of interaction! Requirement: You should develop a webpage which facilitates conversational interaction; in other words, your webpage design should recognize that speech-based interaction is the primary modality of interaction. As such, you should avoid using input-based interactive webpage elements such as forms, dropdown menus, or other elements focused very much on user input via a webpage. |
Using Prolog to build HTML elements in our agent
It is important to be able to synchronize the conversational interaction and the visuals displayed on the webpage shown while talking. The MARBEL agent manages the dialog, and for that reason also is the logical place to locate the control over the visual elements. This agent uses a renderPage(Html) action in the dialog_generation.mod2g module to render a webpage; when performing this action, the Prolog variable Html therefore should be instantiated with HTML webpage code. All we need to know before we can use this action, is how to create this HTML page in Prolog.
The basic idea is that we will create essentially a single string that consists of the HTML webpage code. We will utilize a combination of Prolog, HTML and Bootstrap to generate the code for dynamic webpages. Prolog rules are used to generate our HTML code. In other words, the HTML code represented as a Prolog atom, essentially a string, is manipulated with Prolog. So what does that look like? We will first take a look at how to construct some very basic HTML code, then explain how we can add more complicated HTML code that is also using Bootstrap components, and, finally, how we can piece together these components into a complete webpage.
| Info |
|---|
All Prolog definitions introduced and discussed below can be found in the |
Generating basic HTML elements with short tags
...
Most HTML tag pairs can be simply generated by using a start and end tag and by adding some text to create the corresponding HTML. For example, <button>Start</Button> can be used to generate a simple button saying Start. However, to unleash the full power of the HTML language, it is often useful to modify the type or style of an HTML element by adding additional attributes in the form of name="value" to the start tag. For example, the following HTML code creates a large, colored button using the class attribute and several button classes class values made available by Bootstrap:
<button class="btn btn-secondary btn-lg">Start</button>
Here, Start between the start and end tag is the content of the HTML element, button is used for the start and end tags to create a button element, and the class attribute uses the values btn-secondary to style the button and btn-lg to create a larger button.
Of course, we can still create this HTML code in Prolog by simply quoting it. And for a simple button this may still most often be quite OK. This is because the content we typically want to fit inside of a button element is often just some simple text. But it will be useful to allow for a more generic approach for more advanced HTML elements in which we want to embed other more complex HTML code as content. To illustrate our approach to generating HTML elements with attributes in Prolog we therefore begin with introducing a predicate button/3 for generating HTML code for a button.
| Info |
|---|
As a convention, we always will proceed as follows:
|
In the button example above, we illustrated the overall approach and structure we will use for generating HTML code for elements with attributes but did not include the attribute part yet. We will now also add that to complete the button example. For the button example we will only include one attribute class. We thus end up with a button/3 predicate with three arguments button(Content, Class, Html). Predicates for other HTML tags, such as the div tag, for example, where we would also want to add a style attribute, would have 4 arguments. To conclude our button example, to generate the <button class="btn btn-secondary btn-lg">Start</button> code, we can use the Prolog code
button('Start', 'btn btn-secondary btn-lg', Html)
When evaluating this clause, we would end up with Html having the button HTML code as its value.
Besides the class, style, and data-value attributes there are other global attributes in HTML. Because we think most of these have limited used we have not included these in the code provided to you. You are free, of course, to extend the Prolog code to be also able to use these other attributes.
'<span style="font-family:Roboto;">',
Generating an HTML webpage
By means of these and generate with the rule. The HTML code is represented in Bootstrap format, which is also clearly illustrated by examples below or on Bootstrap's documentation website (Bootstrap Documentation).
| Note |
|---|
Prolog Advice: To manipulate strings and atoms in Prolog it is useful to look at documentation of the following built-in functions: atomic_list_concat, atom_concat, string_concat, append, and maplist here: https://www.swi-prolog.org/. The predicate applyTemplate is a defined predicate that will be explained below. |
...