{"type":"doc","content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"minLevel":{"value":"1"},"maxLevel":{"value":"7"}},"macroMetadata":{"macroId":{"value":"a9829adcb51af383d419d88c6e98ccc3"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"070e9dfc-8863-42bc-856e-6a035525117f"}},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"As indicated on the ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://socialrobotics.atlassian.net/wiki/spaces/PM2/pages/2215706657"}},{"text":" page, the main purpose of providing visual support is twofold: to provide (1) support to a user to reduce their ","type":"text"},{"text":"cognitive load","type":"text","marks":[{"type":"link","attrs":{"href":"https://en.wikipedia.org/wiki/Cognitive_load"}}]},{"text":" (the amount of information working memory needs to process at any given time) and (2) an indication of the progress on the task that has been made thus far. Visual support will be provided by means of a webpage. This page aims at explaining how you can develop code for your MARBEL agent to create such a webpage. ","type":"text"}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"To get a ","type":"text"},{"text":"Quick Start","type":"text","marks":[{"type":"strong"}]},{"text":" into how to create a webpage in your MARBEL agent, you can also start by completing the ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://socialrobotics.atlassian.net/wiki/spaces/PM2/pages/2707914875"}},{"text":" task first, and then get back to this page to better understand how you can develop a webpage in this project.","type":"text"}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"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!","type":"text"}]},{"type":"paragraph","content":[{"text":"Requirement","type":"text","marks":[{"type":"strong"}]},{"text":": You should develop a webpage which ","type":"text"},{"text":"facilitates ","type":"text","marks":[{"type":"em"}]},{"text":"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.","type":"text"}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Using Prolog to build HTML elements in our agent","type":"text"}]},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"renderPage(Html)","type":"text","marks":[{"type":"code"}]},{"text":" action in the ","type":"text"},{"text":"dialog_generation.mod2g","type":"text","marks":[{"type":"code"}]},{"text":" module to render a webpage; when performing this action, the Prolog variable ","type":"text"},{"text":"Html","type":"text","marks":[{"type":"code"}]},{"text":" 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.","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"All Prolog definitions introduced and discussed below can be found in the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file within the MARBEL agent project provided to you at the start of the project.","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Generating basic HTML elements with short tags","type":"text"}]},{"type":"paragraph","content":[{"text":"An ","type":"text"},{"text":"HTML ","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/html/html_intro.asp"}}]},{"text":"page consists of HTML elements. HTML elements consists of HTML tags that are used to organize content on that page. Tags often come in pairs of a start and end tag. Basic HTML tags, for example, are the tags ","type":"text"},{"text":"

YOUR PARAGRAPH TEXT HERE

","type":"text","marks":[{"type":"code"}]},{"text":" that defines an HTML paragraph, the ","type":"text"},{"text":"

...

","type":"text","marks":[{"type":"code"}]},{"text":" defining a large heading, ","type":"text"},{"text":"...","type":"text","marks":[{"type":"code"}]},{"text":" defining bold text, etc. There are many of these basic tags which, moreover, are also short which facilitates their frequent and easy use. The idea to generate basic HTML code for these elements in Prolog is very simple: Simply use ","type":"text"},{"text":"single quotes","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"'...'","type":"text","marks":[{"type":"code"}]},{"text":" to generate such an element. The table next lists a few examples:","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":760.0,"localId":"a15c0de4-5aac-42f0-96e7-30bcbf7a681d"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[170.0]},"content":[{"type":"paragraph","content":[{"text":"HTML Element","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[275.0]},"content":[{"type":"paragraph","content":[{"text":"HTML code","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":[315.0]},"content":[{"type":"paragraph","content":[{"text":"Prolog code (single quoted atom)","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[170.0]},"content":[{"type":"paragraph","content":[{"text":"Large heading","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[275.0]},"content":[{"type":"paragraph","content":[{"text":"

This is a heading

","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[315.0]},"content":[{"type":"paragraph","content":[{"text":"'

This is a heading

Some text here.

","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[315.0]},"content":[{"type":"paragraph","content":[{"text":"'

Some text here.

'","type":"text","marks":[{"type":"code"}]}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[170.0]},"content":[{"type":"paragraph","content":[{"text":"Bold text","type":"text"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[275.0]},"content":[{"type":"paragraph","content":[{"text":"text that is bold here","type":"text","marks":[{"type":"code"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[315.0]},"content":[{"type":"paragraph","content":[{"text":"'text that is bold here'","type":"text","marks":[{"type":"code"}]}]}]}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"It is very important to use the right quote symbol in your code. For example, ","type":"text"},{"text":"‘quote’","type":"text","marks":[{"type":"code"}]},{"text":" is not the same as the ","type":"text"},{"text":"'code'","type":"text","marks":[{"type":"code"}]},{"text":" quote. You need to make sure you use the ","type":"text"},{"text":"straight apostrophe quote","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"'","type":"text","marks":[{"type":"code"}]},{"text":" in code.","type":"text"}]}]},{"type":"paragraph","content":[{"text":"There are many simple, short tags where it is easiest to simply put them between single quotes to create a Prolog atom for generating the corresponding HTML code. Another class of short tags are the single tags such as ","type":"text"},{"text":"'
'","type":"text","marks":[{"type":"code"}]},{"text":" for breaking a line and ","type":"text"},{"text":"'

'","type":"text","marks":[{"type":"code"}]},{"text":" for adding a horizontal line. These are also most easily generated by simply quoting them.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Generating more complex HTML elements with attributes","type":"text"}]},{"type":"paragraph","content":[{"text":"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, ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" can be used to generate a simple button saying ","type":"text"},{"text":"Start","type":"text","marks":[{"type":"em"}]},{"text":". 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 ","type":"text"},{"text":"attributes","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/html/html_attributes.asp"}}]},{"text":" in the form of ","type":"text"},{"text":"name=\"value\"","type":"text","marks":[{"type":"code"}]},{"text":" to the start tag. ","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Making a button","type":"text"}]},{"type":"paragraph","content":[{"text":"For example, the following HTML code creates a large, colored button using the ","type":"text"},{"text":"class","type":"text","marks":[{"type":"code"}]},{"text":" attribute and several ","type":"text"},{"text":"button class values made available by Bootstrap","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp"}}]},{"text":":","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Here, ","type":"text"},{"text":"Start","type":"text","marks":[{"type":"code"}]},{"text":" between the start and end tag is the content of the HTML element, ","type":"text"},{"text":"button","type":"text","marks":[{"type":"code"}]},{"text":" is used for the start and end tags to create a button element, and the class attribute uses the values ","type":"text"},{"text":"btn-secondary","type":"text","marks":[{"type":"code"}]},{"text":" to style the button and ","type":"text"},{"text":"btn-lg","type":"text","marks":[{"type":"code"}]},{"text":" to create a larger button.","type":"text"}]},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"button/3","type":"text","marks":[{"type":"code"}]},{"text":" for generating HTML code for a button.","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"As a ","type":"text"},{"text":"convention","type":"text","marks":[{"type":"strong"}]},{"text":", we ","type":"text"},{"text":"always ","type":"text","marks":[{"type":"em"}]},{"text":"will proceed as follows:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"the ","type":"text"},{"text":"name ","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":"of the tag is the ","type":"text","marks":[{"type":"strong"}]},{"text":"name ","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":"of the Prolog predicate","type":"text","marks":[{"type":"strong"}]},{"text":"; e.g., we use ","type":"text"},{"text":"button","type":"text","marks":[{"type":"code"}]},{"text":" for the Prolog predicate that we use to generate corrresponding HTML button code.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"the ","type":"text"},{"text":"first ","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":"argument of the Prolog predicate is the content","type":"text","marks":[{"type":"strong"}]},{"text":" of the element; thus we will always put the content into the first argument, e.g., ","type":"text"},{"text":"button('Start', ...)","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"the ","type":"text"},{"text":"last ","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":"argument of the Prolog predicate is the ","type":"text","marks":[{"type":"strong"}]},{"text":"output argument","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://www.swi-prolog.org/pldoc/man?section=argmode"}}]},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"to which we bind the generated HTML code, i.e. its value will be the generated HTML code we are looking for; as an example, after evaluating the predicate ","type":"text"},{"text":"button('Start', ..., Html)","type":"text","marks":[{"type":"code"}]},{"text":" the ","type":"text"},{"text":"Html","type":"text","marks":[{"type":"code"}]},{"text":" variable would have ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" as value.","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"one ","type":"text","marks":[{"type":"em"}]},{"text":"attribute class. We thus end up with a ","type":"text"},{"text":"button/3","type":"text","marks":[{"type":"code"}]},{"text":" predicate with three arguments ","type":"text"},{"text":"button(Content, Class, Html)","type":"text","marks":[{"type":"code"}]},{"text":". Predicates for other HTML tags, such as the ","type":"text"},{"text":"div","type":"text","marks":[{"type":"code"}]},{"text":" 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 ","type":"text"},{"text":"","type":"text","marks":[{"type":"code"}]},{"text":" code, we can use the Prolog code","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"button('Start', 'btn btn-secondary btn-lg', Html)","type":"text","marks":[{"type":"code"}]}]}]},{"type":"paragraph","content":[{"text":"When evaluating this clause, we would end up with ","type":"text"},{"text":"Html","type":"text","marks":[{"type":"code"}]},{"text":" having the button HTML code as its value.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Changing and receiving button events in a MARBEL agent","type":"text"}]},{"type":"paragraph","content":[{"text":"If you would inspect the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file and search for the ","type":"text"},{"text":"button","type":"text","marks":[{"type":"code"}]},{"text":" predicate, you will find a ","type":"text"},{"text":"button/2","type":"text","marks":[{"type":"code"}]},{"text":" predicate too. You will also see that both the ","type":"text"},{"text":"button/2","type":"text","marks":[{"type":"code"}]},{"text":" and the ","type":"text"},{"text":"button/3","type":"text","marks":[{"type":"code"}]},{"text":" predicates actually are defined in terms of a ","type":"text"},{"text":"button/4","type":"text","marks":[{"type":"code"}]},{"text":" predicate ","type":"text"},{"text":"button(Content, Class, DataValue, Html)","type":"text","marks":[{"type":"code"}]},{"text":". This predicate allows to set the value send as a percept to the agent when the button is clicked. The ","type":"text"},{"text":"button/3","type":"text","marks":[{"type":"code"}]},{"text":" definition by default sets this value equal to the ","type":"text"},{"text":"Content","type":"text","marks":[{"type":"code"}]},{"text":" value displayed on the button. That, however, is not that useful if the content itself consists of HTML tags again. For example, ","type":"text"},{"text":"button('Start', 'btn btn-secondary btn-lg', Html)","type":"text","marks":[{"type":"code"}]},{"text":" would display a bold text ","type":"text"},{"text":"Start","type":"text","marks":[{"type":"em"}]},{"text":" but would also send the tags as a percept of the form ","type":"text"},{"text":"answer('Start')","type":"text","marks":[{"type":"code"}]},{"text":" when the button is clicked. To avoid that, we can use ","type":"text"},{"text":"button('Start', 'btn btn-secondary btn-lg', 'start', Html)","type":"text","marks":[{"type":"code"}]},{"text":" which would send the more plain and easy to process ","type":"text"},{"text":"answer('start')","type":"text","marks":[{"type":"code"}]},{"text":" to the MARBEL agent.","type":"text"}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"Besides the ","type":"text"},{"text":"class","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"style","type":"text","marks":[{"type":"code"}]},{"text":", and ","type":"text"},{"text":"data-value","type":"text","marks":[{"type":"code"}]},{"text":" attributes there are other ","type":"text"},{"text":"global attributes","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/tags/ref_standardattributes.asp"}}]},{"text":" 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.","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Other tag examples: ul, img, div, span","type":"text"}]},{"type":"paragraph","content":[{"text":"We introduce a few other tags and discuss how HTML code for these tags can be generated using some of the predefined predicates in the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file. These examples should provide you with a general understanding of how you can generate HTML code for a variety of HTML elements.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"ul tag","type":"text"}]},{"type":"paragraph","content":[{"text":"Displaying lists is a practical feature when you want to show a recipe and its associated ingredient list. The most basic way to do this is to use the unordered list ","type":"text"},{"text":"ul","type":"text","marks":[{"type":"code"}]},{"text":" and list item ","type":"text"},{"text":"li","type":"text","marks":[{"type":"code"}]},{"text":" tags. Here’s a simple example of what the HTML code would look like:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"

1st item
2nd item
3rd item

","type":"text"}]},{"type":"paragraph","content":[{"text":"We have kept the class attribute simple but ","type":"text"},{"text":"Bootstrap list groups","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_list_groups.asp"}}]},{"text":" provides several other values for the class attribute that can be used to change the basic behavior of the ","type":"text"},{"text":"ul","type":"text","marks":[{"type":"code"}]},{"text":" tag. For example, use ","type":"text"},{"text":"list-group-flush","type":"text","marks":[{"type":"code"}]},{"text":" for removing the borders and ","type":"text"},{"text":"list-group-horizontal","type":"text","marks":[{"type":"code"}]},{"text":" for organizing the list items horizontally instead of vertically.","type":"text"}]},{"type":"paragraph","content":[{"text":"Even though ","type":"text"},{"text":"ul","type":"text","marks":[{"type":"code"}]},{"text":" is a short tag we still have introduced a corresponding ","type":"text"},{"text":"ul/3","type":"text","marks":[{"type":"code"}]},{"text":" predicate ","type":"text"},{"text":"ul(Content, Class, Html)","type":"text","marks":[{"type":"code"}]},{"text":" because of the embedded content of list items that needs to be supplied and fit in between the start and end tags in this case. Using this predicate we can simply use ","type":"text"},{"text":"ul(Content, 'list-group', Html)","type":"text","marks":[{"type":"code"}]},{"text":" for generating the unordered list example above. Clearly, a simple quotation approach will not work here as the list of items may easily get very long and unyieldy and upfront we may not even know how many items we need to add to the list (how many ingredients, for example, does a recipe have?). To facilitate the creation of the HTML list item elements, we have provided the predicate ","type":"text"},{"text":"itemList(List, Html)","type":"text","marks":[{"type":"code"}]},{"text":" that generates the list item elements when provided with a list of the content for each item. For our example, ","type":"text"},{"text":"itemList(['1st item', '2nd item', '3rd item'], Html)","type":"text","marks":[{"type":"code"}]},{"text":" will generate what we need as content for the ","type":"text"},{"text":"ul","type":"text","marks":[{"type":"code"}]},{"text":" element. ","type":"text"}]},{"type":"paragraph","content":[{"text":"The final step that remains is to piece the two things together to generate the complete HTML code for our example. For generating HTML code, we will use the fact that Prolog evaluates subqueries in a query in the order they appear. As a general rule of thumb, in this content, we should make sure to generate the HTML elements we need later first. That is, because we need the list item elements as content to complete the unordered list code, we need to create this code first. In other words, we will use the output argument of ","type":"text"},{"text":"itemList/2","type":"text","marks":[{"type":"code"}]},{"text":" as the input argument for the content of ","type":"text"},{"text":"ul/3","type":"text","marks":[{"type":"code"}]},{"text":". By piecing the separate queries we defined for the list itself and for the list items together and renaming the appropriate argument variables, we get what we need:","type":"text"}]},{"type":"codeBlock","content":[{"text":"itemList(['1st item', '2nd item', '3rd item'], ListItems), ul(ListItems, 'list-group', Html)","type":"text"}]},{"type":"paragraph","content":[{"text":"This combined query will generate our example HTML code and return it as value in the ","type":"text"},{"text":"Html","type":"text","marks":[{"type":"code"}]},{"text":" variable.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"img tag","type":"text"}]},{"type":"paragraph","content":[{"text":"Although this project is not about webpage development and is definitely not about promoting fancy interaction (remember to prioritize conversational interaction throughout the project!), by simply adding some images you can bring a webpage to life, making it more appealing to look at while also adding useful functionality. To start with the latter, users would like to see what the result would look like for the recipe they finally choose. To this end, links to the pictures of all of the recipes included in the recipe database have been included for you to make good use of (check out the ","type":"text"},{"text":"recipe_database.pl","type":"text","marks":[{"type":"code"}]},{"text":" file). But there are many other opportunities, of course, to add pictures if you like to your webpage design. To facilitate this, we have defined the ","type":"text"},{"text":"img/4","type":"text","marks":[{"type":"code"}]},{"text":" predicate ","type":"text"},{"text":"img(Source, Class, Style, Html)","type":"text","marks":[{"type":"code"}]},{"text":" which allows you to create an ","type":"text"},{"text":"img HTML element","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_images.asp"}}]},{"text":" that looks like:","type":"text"}]},{"type":"codeBlock","content":[{"text":" $\"Can$ ","type":"text"}]},{"type":"paragraph","content":[{"text":"Check out some of the class options ","type":"text"},{"text":"here","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_images.asp"}}]},{"text":". The style attribute can be used, for example, to display an image inline (e.g., as part of a sentence in a paragraph) with ","type":"text"},{"text":"style=\"display: inline;\"","type":"text","marks":[{"type":"code"}]},{"text":". ","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"If you don’t want to use an attribute for an HTML element while the predefined predicate requires the corresponding input argument, just replace the argument with the empty atom (string) ‘","type":"text"},{"text":"'","type":"text","marks":[{"type":"code"}]},{"text":". For example, ","type":"text"},{"text":"img(Source, '', '', Html)","type":"text","marks":[{"type":"code"}]},{"text":" would generate HTML code where the class and style attributes are not used (or, empty strings, to be precise). Of course, for an image you would always need to provide a source.","type":"text"}]}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"Source","type":"text","marks":[{"type":"code"}]},{"text":" argument for the predicate is a required input argument. You can use links to pictures that are online available here. For your convenience, for all of the recipes included in the database, the ","type":"text"},{"text":"picture/2","type":"text","marks":[{"type":"code"}]},{"text":" predicate ","type":"text"},{"text":"picture(RecipeNr, UrlLink)","type":"text","marks":[{"type":"code"}]},{"text":" provides images for each recipe. As an example, to illustrate the use of the both ","type":"text"},{"text":"picture/2","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"img/4","type":"text","marks":[{"type":"code"}]},{"text":" predicates in a combined query, ","type":"text"},{"text":"picture('1', Source), img(Source, 'img-thumbnail', 'height: 3rem', Html)","type":"text","marks":[{"type":"code"}]},{"text":" would generate the following HTML element:","type":"text"}]},{"type":"codeBlock","content":[{"text":" $\"Can$ ","type":"text"}]},{"type":"paragraph","content":[{"text":"which would show a small thumbnail version of the first recipe picture ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":152,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1300,"id":"b59e94a6-6e44-4b2a-acd4-b263124abca8","collection":"contentId-2707915601","type":"file","height":827}}]},{"type":"paragraph","content":[{"text":"for sweet and spicy gochujang fried chicken.","type":"text"}]},{"type":"paragraph","content":[{"text":"Alternatively, instead of providing an url to an online image as the source input argument, you can also add image Base64 codes to the Prolog ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file and use those. Examples for variants of a microphone icon have already been included in this file. E.g., the ","type":"text"},{"text":"mic_image_closed_src(Source)","type":"text","marks":[{"type":"code"}]},{"text":" query will instantiate the ","type":"text"},{"text":"Source","type":"text","marks":[{"type":"code"}]},{"text":" variable with the Base64 code for the closed microphone icon","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":24,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":225,"id":"526c2978-5264-4860-b802-866cffe01d3c","collection":"contentId-2707915601","type":"file","height":225}}]},{"type":"paragraph","content":[{"text":"You can add your own images to the html.pl file by encoding them to Base64 format too. You can do so by following these steps:","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Go to the ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://www.base64encode.org/"}},{"text":" site (don’t change any options on that page)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Go to the ","type":"text"},{"text":"Encode files to Base64 format","type":"text","marks":[{"type":"em"}]},{"text":" section","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Upload an image (note that file size cannot exceed 192MB!)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Press the encode button, and ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Download the code as a text file.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Copy the text in the file.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add a fact with a predicate name for your image of your choosing (to illustrate we used ","type":"text"},{"text":"myImageName","type":"text","marks":[{"type":"code"}]},{"text":") by adding the following template to the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file: ","type":"text"},{"text":"myImageName('data:image/png;base64,...')","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Paste and replace the ","type":"text"},{"text":"...","type":"text","marks":[{"type":"code"}]},{"text":" in the Prolog fact with the text you copied from the file (a very long encoded string representing your picture)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Now you can use ","type":"text"},{"text":"myImageName(Source)","type":"text","marks":[{"type":"code"}]},{"text":" instead of the ","type":"text"},{"text":"picture(RecipeNr, Source)","type":"text","marks":[{"type":"code"}]},{"text":" query to include your picture on your webpage","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"div tag","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"div","type":"text","marks":[{"type":"code"}]},{"text":" tag is a versatile block element that can be used to organize and style HTML content in various ways. In the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file provided to you we have defined a ","type":"text"},{"text":"div/4","type":"text","marks":[{"type":"code"}]},{"text":" predicate ","type":"text"},{"text":"div(Content, Class, Style, Html)","type":"text","marks":[{"type":"code"}]},{"text":" that facilitates the generation of ","type":"text"},{"text":"div","type":"text","marks":[{"type":"code"}]},{"text":" elements with ","type":"text"},{"text":"class","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"style","type":"text","marks":[{"type":"code"}]},{"text":" attributes that you can set. The code that will be generated looks simply like a basic div element without any content yet:","type":"text"}]},{"type":"codeBlock","content":[{"text":"

CONTENT

","type":"text"}]},{"type":"paragraph","content":[{"text":"In this code template, ","type":"text"},{"text":"CLASS","type":"text","marks":[{"type":"code"}]},{"text":" refers to the value of the ","type":"text"},{"text":"Class","type":"text","marks":[{"type":"code"}]},{"text":" variable, ","type":"text"},{"text":"STYLE","type":"text","marks":[{"type":"code"}]},{"text":" to the value of the ","type":"text"},{"text":"Style","type":"text","marks":[{"type":"code"}]},{"text":" variable, and ","type":"text"},{"text":"CONTENT","type":"text","marks":[{"type":"code"}]},{"text":" to the value of the ","type":"text"},{"text":"Content","type":"text","marks":[{"type":"code"}]},{"text":" variable in the ","type":"text"},{"text":"div(Content, Class, Style, Html)","type":"text","marks":[{"type":"code"}]},{"text":" query. All of these variables need to be fully instantiated to generate HTML code that is returned in the output argument ","type":"text"},{"text":"Html","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"Many ","type":"text"},{"text":"Bootstrap components","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/default.asp"}}]},{"text":" are classes that can be used by means of the ","type":"text"},{"text":"div","type":"text","marks":[{"type":"code"}]},{"text":" tag. These include, for example, the ","type":"text"},{"text":"container","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_containers.asp"}}]},{"text":", ","type":"text"},{"text":"jumbotron","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_jumbotron.asp"}}]},{"text":", ","type":"text"},{"text":"alert","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp"}}]},{"text":", ","type":"text"},{"text":"progress bar","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_progressbars.asp"}}]},{"text":", ","type":"text"},{"text":"spinner","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_spinners.asp"}}]},{"text":", ","type":"text"},{"text":"card","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_cards.asp"}}]},{"text":", ","type":"text"},{"text":"flexbox","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_flex.asp"}}]},{"text":", ","type":"text"},{"text":"media","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_media_objects.asp"}}]},{"text":", and ","type":"text"},{"text":"grid system row and column","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp"}}]},{"text":" classes. Check out all of these components in the ","type":"text"},{"text":"W3 School tutorial","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/default.asp"}}]},{"text":" or ","type":"text"},{"text":"Bootstrap’s own overview","type":"text","marks":[{"type":"link","attrs":{"href":"https://getbootstrap.com/docs/4.6/getting-started/introduction/"}}]},{"text":". We provide one example to illustrate the use of the div predicate. The following code would generate a Jumbotron element:","type":"text"}]},{"type":"codeBlock","content":[{"text":"div(Content, 'jumbotron jumbotron-fluid px-3', 'text-align:center', Html)","type":"text"}]},{"type":"paragraph","content":[{"text":"Of course, this only works if you add another query (or queries) to generate the ","type":"text"},{"text":"Content","type":"text","marks":[{"type":"code"}]},{"text":" for this Jumbotron. To add couple of lines of formatted text (a large title head and a paragraph), we could use the following code for creating a complete Jumbotron element with some text as a simple example:","type":"text"}]},{"type":"codeBlock","content":[{"text":"atomic_list_concat([\n '

Introduction

',\n '

You are about to interact with our conversational agent YourAgentName.'],\nContent),\ndiv(Content, 'jumbotron jumbotron-fluid px-3', 'text-align:center', Html)","type":"text"}]},{"type":"paragraph","content":[{"text":"The first query, using the built-in predicate ","type":"text"},{"text":"atomic_list_concat/2","type":"text","marks":[{"type":"code"}]},{"text":" generates HTML code that consists of the two HTML elements of a ","type":"text"},{"text":"h3","type":"text","marks":[{"type":"code"}]},{"text":" heading following by a paragraph. These elements are just simply quoted each (remember to always use single quotes!) and put in that order in a Prolog list ","type":"text"},{"text":"[...]","type":"text","marks":[{"type":"code"}]},{"text":". The ","type":"text"},{"text":"atomic_list_concat/2","type":"text","marks":[{"type":"code"}]},{"text":" predicate then returns a new atom that is the concatentiation of these two elements in the output argument ","type":"text"},{"text":"Content","type":"text","marks":[{"type":"code"}]},{"text":". This (quoted) HTML code then is passed on to the ","type":"text"},{"text":"div/4","type":"text","marks":[{"type":"code"}]},{"text":" query in its first input argument (using the same variable name) to embed it in the Jumbotron element. ","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"We will often need to piece together parts of HTML code or elements. As a convention, we will use the ","type":"text"},{"text":"atomic_list_concat/2","type":"text","marks":[{"type":"code"}]},{"text":" for that purpose. The benefit of using this ","type":"text"},{"text":"built-in predicate","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.swi-prolog.org/pldoc/man?predicate=atomic_list_concat/2"}}]},{"text":" is that it allows us to put an arbitrary number of elements inside the list this predicate expects for its input argument and when ","type":"text"},{"text":"atomic_list_concat(+List, -Atom)","type":"text","marks":[{"type":"code"}]},{"text":" succeeds its output argument ","type":"text"},{"text":"Atom","type":"text","marks":[{"type":"code"}]},{"text":" unifies with the concatenated HTML code (as a single quoted atom data type).","type":"text"}]}]},{"type":"paragraph","content":[{"text":"The resulting HTML code looks like:","type":"text"}]},{"type":"codeBlock","content":[{"text":"

Introduction

You are about to interact with our conversational agent YourAgentName.

","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"Padding and margins ","type":"text","marks":[{"type":"strong"}]},{"text":"The HTML code above uses ","type":"text"},{"text":"px-3","type":"text","marks":[{"type":"code"}]},{"text":" to set the left and right padding (space between an element’s content and border) to ","type":"text"},{"text":"1rem","type":"text","marks":[{"type":"code"}]},{"text":" (a relative spacing unit relative to the root element’s font-size). The margin utility class ","type":"text"},{"text":"m","type":"text","marks":[{"type":"code"}]},{"text":" can be used to set an element’s margins (space around the element). For more, check out the Spacing section on ","type":"text"},{"text":"this page","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp"}}]},{"text":" on Bootstrap’s utility classes.","type":"text"}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"span tag","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"span","type":"text","marks":[{"type":"code"}]},{"text":" tag is an inline element that is commonly used to style HTML content. We have added a ","type":"text"},{"text":"span/3","type":"text","marks":[{"type":"code"}]},{"text":" predicate ","type":"text"},{"text":"span(Content, Style, Html)","type":"text","marks":[{"type":"code"}]},{"text":" that just does that and nothing else. An example of a span tag that can be useful is to style the content and change the font family that is used within some HTML content:","type":"text"}]},{"type":"codeBlock","content":[{"text":"YOUR HTML CONTENT HERE","type":"text"}]},{"type":"paragraph","content":[{"text":"A list of system or web-safe fonts that you can choose from (supported on most devices) can be found ","type":"text"},{"text":"here","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/cssref/css_websafe_fonts.php"}}]},{"text":". ","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"In our project, the head of the webpage (containing metadata) is fixed and cannot be changed. It therefore is not possible, for example, to link to other online fonts.","type":"text"}]}]},{"type":"paragraph","content":[{"text":"The span tag has other uses too. It can be used for adding Bootstrap ","type":"text"},{"text":"badges","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_badges.asp"}}]},{"text":" and ","type":"text"},{"text":"borders","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp"}}]},{"text":" to elements, for example. We have also used it for setting the value of a button in the template we used for defining the ","type":"text"},{"text":"button/4","type":"text","marks":[{"type":"code"}]},{"text":" predicate.","type":"text"}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"Check out the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file for more predefined Prolog predicates for HTML tags that you can use.","type":"text"}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Generating an HTML webpage","type":"text"}]},{"type":"paragraph","content":[{"text":"Above we have illustrated how to generate individual HTML elements but not yet shown how to generate a complete webpage using one or more of those elements. We will show in this section how you can generate such a webpage and make the agent render it.","type":"text"}]},{"type":"paragraph","content":[{"text":"Another key question that we have not addressed so far is ","type":"text"},{"text":"when to display a webpage","type":"text","marks":[{"type":"em"}]},{"text":". To answer the latter question first, we will use a generic approach where we show a specific webpage when a specific subdialog is ongoing. For example, when the conversation with the user is still in its opening stages and a greeting is ongoing, we can show a welcoming page to a user. As greeting and other subdialogs correspond with names of conversational pattetrns, the idea is to show a webpage when the top level ongoing dialog part corresponds with a name of one of the patterns defined in our conversational agent. The agent will retrieve the body of the HTML webpage that we want to display for such a pattern using the query ","type":"text"},{"text":"page(+PatternID, +Txt, -Html)","type":"text","marks":[{"type":"code"}]},{"text":" where ","type":"text"},{"text":"PatternID","type":"text","marks":[{"type":"code"}]},{"text":" is the name of the conversational pattern, ","type":"text"},{"text":"Txt","type":"text","marks":[{"type":"code"}]},{"text":" is the text the agent will say if its their turn, and ","type":"text"},{"text":"Html","type":"text","marks":[{"type":"code"}]},{"text":" is the output argument with the HTML code for the body of our webpage.","type":"text"}]},{"type":"paragraph","content":[{"text":"As before, but now for complete webpages, we will use a structural template to create a page. The typical structure of these templates looks like this:","type":"text"}]},{"type":"codeBlock","content":[{"text":"page(PatternID, Txt, Html) :-\n %%% 1. Condition for when the webpage that will be generated is shown\n currentTopLevel(PatternID),\n [OPTIONAL: OTHER CONDITIONS FOR SHOWING THIS PAGE,] \n %%% 2. HTML code generation part\n % First row: Prolog code (queries) that generates HTML code for the first 'row' of the page\n % with FirstRow the output argument that is unified with that HTML code\n ... , FirstRow),\n ...\n % Nth row: Prolog code (queries) that generates HTML code for the Nth 'row' of the page\n % with NthRow the output argument that is unified with that HTML code\n ... , NthRow),\n %%% 3. Putting everything together\n atomic_list_concat([FirstRow, ..., NthRow], Body),\n %%% 4. Generate the HTML webpage code\n % Create the HTML page with:\n html(Body, Html)\n % or, alternatively, without a header and footer:\n [OPTIONAL: html_without_header_footer(Body, Html). % replaces previous html(Body, Html)!\n .","type":"text"}]},{"type":"paragraph","content":[{"text":"The template consists of ","type":"text"},{"text":"four consecutive parts","type":"text","marks":[{"type":"em"}]},{"text":". The ","type":"text"},{"text":"first part","type":"text","marks":[{"type":"em"}]},{"text":" uses the ","type":"text"},{"text":"currentTopLevel(PatternID)","type":"text","marks":[{"type":"code"}]},{"text":" query to check whether the currently ongoing top level conversation pattern is ","type":"text"},{"text":"PatternID","type":"text","marks":[{"type":"code"}]},{"text":". The variable PatternID should be instantiated with a specific name of a conversation pattern, and a page rule for each pattern that can be a top level conversation pattern should be created to be able to show a webpage during each ongoing part of the conversation. If you want to differentiate which page is shown also based on other conditions, (optionally) multiple page rules should be defined and (optionally) additional Prolog queries can be added to define more complex conditions for showing a webpage. For example, you could (and will be asked to) add a condition that checks how many recipes still match the requests (preferences, constraints) of a user and show a different page if that drops below a certain number. The ","type":"text"},{"text":"second part ","type":"text","marks":[{"type":"em"}]},{"text":"consists of Prolog code for generating the HTML code for some of the components and elements introduced above. See below for a simple example, and at the end of this page a more complex example for a card deck. Typically, to define a complete webpage, multiple elements will be used that would usually be organized in one or more rows of HTML code (think of these literally as rows on the page, in line with the ","type":"text"},{"text":"basic structure of a Bootstrap grid","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp"}}]},{"text":"). The ","type":"text"},{"text":"third part","type":"text","marks":[{"type":"em"}]},{"text":" simply concatenates the HTML code for each of the individual rows using the ","type":"text"},{"text":"atomic_list_concat/2","type":"text","marks":[{"type":"code"}]},{"text":" predicate that we explained in detail above. And, finally, the ","type":"text"},{"text":"fourth part ","type":"text","marks":[{"type":"em"}]},{"text":"generates the HTML code for the complete body of the webpage using the predefined ","type":"text"},{"text":"html/2","type":"text","marks":[{"type":"code"}]},{"text":" predicate in ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" (or, alternatively, the predicates ","type":"text"},{"text":"html_without_header","type":"text","marks":[{"type":"code"}]},{"text":" or ","type":"text"},{"text":"html_without_header_footer","type":"text","marks":[{"type":"code"}]},{"text":").","type":"text"}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"In this project, we generate the HTML code for the ","type":"text"},{"text":"body of an HTML webpage","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/tags/tag_body.asp"}}]},{"text":" (that is what the template for a ","type":"text"},{"text":"page/3","type":"text","marks":[{"type":"code"}]},{"text":" rule above is supposed to do). The ","type":"text"},{"text":"head","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/tags/tag_head.asp"}}]},{"text":" of the webpage (a container for metadata, not to be confused with the ","type":"text"},{"text":"header","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/tags/tag_header.asp"}}]},{"text":" of or ","type":"text"},{"text":"headings","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.w3schools.com/tags/tag_hn.asp"}}]},{"text":" on a webpage!) is predefined and cannot be modified by our MARBEL agent.","type":"text"}]},{"type":"paragraph","content":[{"text":"Check out the code for the ","type":"text"},{"text":"header/2","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"footer/2","type":"text","marks":[{"type":"code"}]},{"text":" predicates in the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" to see what HTML code is generated for the header and footer. You are free to change these too if you like, but you should ","type":"text"},{"text":"make sure that the microphone icon always is displayed on the relevant pages","type":"text","marks":[{"type":"em"}]},{"text":" so a user can engage in talking to your conversational agent (by making it open their microphone and start listening to the user).","type":"text"}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Example Prolog Rule for a Page","type":"text"}]},{"type":"paragraph","content":[{"text":"As indicated above, the idea is to add a rule defining a ","type":"text"},{"text":"page(+PatternId, +Txt, -Html)","type":"text","marks":[{"type":"code"}]},{"text":" for each conversation pattern that might be ongoing at the top level during the conversation. You will be asked to add a range of different patterns in the ","type":"text"},{"text":"patterns.pl","type":"text","marks":[{"type":"code"}]},{"text":" file during the project. One of those hinted at above is a greeting pattern with a pattern ID code ","type":"text"},{"text":"c10","type":"text","marks":[{"type":"code"}]},{"text":". We will now provide a simple example of rule that generates a page that will be shown when the pattern ","type":"text"},{"text":"c10","type":"text","marks":[{"type":"code"}]},{"text":" is active (or ongoing):","type":"text"}]},{"type":"codeBlock","content":[{"text":"% A very basic and simple welcoming page to show when a greeting is still ongoing\npage(c10, _, Html) :-\n\t% Part 1: Show this page only when a greeting pattern c10 is ongoing\n\tcurrentTopLevel(c10),\n\t% Part 2: Constructing HTML for the body of the page\n\t% If the agent has a name (agentName/1 will succeed), \n\t% we want the agent to introduce itself with its name\n\t(agentName(Name) -> N = Name ; N = 'your recipe recommendation assistant'),\n\t% replace the placeholder ~a with the value of variable N\n\tapplyTemplate('

I am ~a

', N, IntroHeading)\n % piece a quoted text and our intro self-introduction text elements together\n\tatomic_list_concat(['

Hello!

', IntroHeading], AlertContent),\n\t% put the introductory text HTML as content into an alert component\n\tdiv(AlertContent, 'alert alert-light', '', Body),\n\t% Part 3: page is so simple that there is no second row so nothing to do here\n\t% Part 4: Create the HTML page using the HTML code unified with the Body variable\n\thtml(Body, Html).","type":"text"}]},{"type":"paragraph","content":[{"text":"Now suppose that the query ","type":"text"},{"text":"currentTopLevel(c10)","type":"text","marks":[{"type":"code"}]},{"text":" succeeds. In that case the ","type":"text"},{"text":"page(c10, _, Html)","type":"text","marks":[{"type":"code"}]},{"text":" query will also succeed (why?). Suppose, moreover, that our conversational agent is called ","type":"text"},{"text":"Cookpanion","type":"text","marks":[{"type":"em"}]},{"text":" (you think of a good name for your own agent!) and the query ","type":"text"},{"text":"agentName(Name)","type":"text","marks":[{"type":"code"}]},{"text":" succeeds with ","type":"text"},{"text":"Name='Cookpanion'","type":"text","marks":[{"type":"code"}]},{"text":". What HTML code will then be generated (and bound to the ","type":"text"},{"text":"Html","type":"text","marks":[{"type":"code"}]},{"text":" output argument variable)? To answer this question, you need to understand how the ","type":"text"},{"text":"applyTemplate","type":"text","marks":[{"type":"code"}]},{"text":" query works (more on that you can find at the end of this page: ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://socialrobotics.atlassian.net/wiki/spaces/PM2/pages/2707915601/OLD+Visual+Support+Guide#Defining-new-predicates-for-generating-HTML-elements"}},{"text":"). But for now the comment just above the query will be sufficient to piece things together. We get the HTML code ","type":"text"},{"text":"

I am Cookpanion

","type":"text","marks":[{"type":"code"}]},{"text":" that binds to ","type":"text"},{"text":"IntroHeading","type":"text","marks":[{"type":"code"}]},{"text":". The ","type":"text"},{"text":"atomic_list_concat","type":"text","marks":[{"type":"code"}]},{"text":" query add this to the end of the ","type":"text"},{"text":"

Hello!

","type":"text","marks":[{"type":"code"}]},{"text":" HTML code, which then is used as the content for the alert class using the div predicate. By inspecting the ","type":"text"},{"text":"html/2","type":"text","marks":[{"type":"code"}]},{"text":" predicate (check out the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file) we can then figure out that the resulting HTML code will look like this:","type":"text"}]},{"type":"codeBlock","content":[{"text":"% Next line makes sure (a user is asked to) enable audio interaction via the browser\n

\n% A row that we use as header\n

\n \n

\n% Main part of the page\n

\n% Next three lines represent the code generated by the page(c10,_,Html) predicate\n

Hello!

I am Cookpanion

\n% Footer\n","type":"text"}]},{"type":"paragraph","content":[{"text":"Perhaps the code that is generated is a bit surprising and it is hard to locate the (just!) three lines that the ","type":"text"},{"text":"page(c10,_,Html)","type":"text","marks":[{"type":"code"}]},{"text":" query generates (somewhere in the middle, as main part of the page). The code illustrates that the ","type":"text"},{"text":"html/2","type":"text","marks":[{"type":"code"}]},{"text":" predicate also does quite a bit of the work for generating the complete body of our webpage, including the generation of a header and footer, and a line at the top to make sure the browser will allow for audio interaction.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Adding a chatbox to your page layout for testing purposes","type":"text"}]},{"type":"paragraph","content":[{"text":"You will soon enough learn that using speech as the main interface for interaction can be challenging, adding delays and misunderstandings, depending on factors such as the context where it is used (a noisy environment makes ASR much more challenging and may lead to failures), perhaps the accent of the speaker, and other related factors. For testing purposes, it therefore may be useful to also be able to test without these factors potentially complicating the interaction. To this end, we have made a chatbox element available too which makes text-based interaction available as an alternative to (just) speech-based interaction. To add this element to your webpage, we suggest you add the following HTML code to the footer of pages:","type":"text"}]},{"type":"codeBlock","content":[{"text":"

","type":"text"}]},{"type":"paragraph","content":[{"text":"We have already added the code for doing this in the ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" file, but it is still commented out.","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"Although we provide the chatbox option ","type":"text"},{"text":"for testing purposes","type":"text","marks":[{"type":"em"}]},{"text":", it is up to you and your team to make sure the agent works also without the chatbox option. ","type":"text"},{"text":"The chatbox should not be enabled in the conversational agent code that you submit as final deliverable","type":"text","marks":[{"type":"strong"}]},{"text":"!","type":"text"}]}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"Using and Understanding the code in ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"We illustrate how the predicates introduced above can be used to create more complex HTML code with a card deck example. We also briefly discuss how the Prolog clauses for these predicates have been defined.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"A Quick guide to using Bootstrap components not defined in ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"We briefly discuss an example to illustrate how to use the code in ","type":"text"},{"text":"html.pl","type":"text","marks":[{"type":"code"}]},{"text":" yourself with Bootstrap components that you might want to use that have not yet been introduced. To that end, suppose that you would like to create a lay-out with three images side-by-side. The first step you could take is to check which components Bootstrap offers to create such a lay-out. It turns out that a ","type":"text"},{"text":"card deck","type":"text","marks":[{"type":"link","attrs":{"href":"https://getbootstrap.com/docs/4.1/components/card/#card-decks"}}]},{"text":" might just be what you were looking for. It is advertised as something you would use when you ","type":"text"},{"text":"“Need a set of equal width and height cards that aren’t attached to one another? Use card decks.”","type":"text","marks":[{"type":"em"}]},{"text":" Bootstrap also provides the HTML template code as an example of how to use it. This is what that looks like:","type":"text"}]},{"type":"codeBlock","content":[{"text":"

Card title

This is a card.

Card title

This is a card.

Card title

This is a card.

","type":"text"}]},{"type":"paragraph","content":[{"text":"How do we break this code down into pieces that we can (already) manage? We first scan the code for the HTML tags that are used in it. We find that the ","type":"text"},{"text":"div","type":"text","marks":[{"type":"code"}]},{"text":" tag is often used (with the classes ","type":"text"},{"text":"\"card-deck\"","type":"text","marks":[{"type":"code"}]},{"text":", ","type":"text"},{"text":"\"card\"","type":"text","marks":[{"type":"code"}]},{"text":", and ","type":"text"},{"text":"\"card-body\"","type":"text","marks":[{"type":"code"}]},{"text":"). We also find that the ","type":"text"},{"text":"img","type":"text","marks":[{"type":"code"}]},{"text":" tag is used as well as some variants of the ","type":"text"},{"text":"

","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"
","type":"text","marks":[{"type":"code"}]},{"text":" tags with specific card-related classes added. We note that for each of these tags we already have the tools to generate them in Prolog. We can use the ","type":"text"},{"text":"div/4","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"img/4","type":"text","marks":[{"type":"code"}]},{"text":" predicates for the former tags and can use our strategy to quote basic HTML elements for the ","type":"text"},{"text":"h5","type":"text","marks":[{"type":"code"}]},{"text":" and ","type":"text"},{"text":"p","type":"text","marks":[{"type":"code"}]},{"text":" elements (you can also introduce new predicates for these tags in combination with a class attribute if you like but we will keep things simple here).","type":"text"}]},{"type":"paragraph","content":[{"text":"Now we have established that all the basic ingredients are available, the next step in our recipe is to create the separate parts of the HTML code by - in a sense - ","type":"text"},{"text":"looking from the inside out","type":"text","marks":[{"type":"em"}]},{"text":". We first will generate the elements that are most embedded and then use those to build the elements in which they are directly embedded. The most deeply embedded elements are the heading and paragraph elements. As suggested above, we simply quote these. In order to create a single atom we also concatenate these elements using the atomic_list_concat/2 predicate as follows:","type":"text"}]},{"type":"codeBlock","content":[{"text":"atomic_list_concat([\n '

Card title

',\n '

This is a card.

'], CardBodyContent)","type":"text"}]},{"type":"paragraph","content":[{"text":"We introduced the ","type":"text"},{"text":"CardBodyContent","type":"text","marks":[{"type":"code"}]},{"text":" variable here to indicate that the HTML code generated by the ","type":"text"},{"text":"atomic_list_concat","type":"text","marks":[{"type":"code"}]},{"text":" query will be used as content for the ","type":"text"},{"text":"card-body","type":"text","marks":[{"type":"code"}]},{"text":" class element.","type":"text"}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"The template example uses three times exactly the same card body content. For practical use, you most likely will want to change the content for each of these three card bodies and generate separate HTML code for each. We did not go to that length but kept things simple to avoid duplicating code.","type":"text"}]}]},{"type":"paragraph","content":[{"text":"For the card-body class we can use the ","type":"text"},{"text":"div/4","type":"text","marks":[{"type":"code"}]},{"text":" predicate, where we use the ","type":"text"},{"text":"CardBodyContent","type":"text","marks":[{"type":"code"}]},{"text":" variable to replace the default input argument ","type":"text"},{"text":"Content","type":"text","marks":[{"type":"code"}]},{"text":" variable for this predicate and fill in the class and style arguments. We name the output argument ","type":"text"},{"text":"CardBodyElement","type":"text","marks":[{"type":"code"}]},{"text":" and then we get as our next piece of code: ","type":"text"}]},{"type":"codeBlock","content":[{"text":"div(CardBodyContent, 'card-body', '', CardBodyElement)","type":"text"}]},{"type":"paragraph","content":[{"text":"For creating the card, we also need an image (again we do not bother to fill in the ","type":"text"},{"text":"...","type":"text","marks":[{"type":"code"}]},{"text":" in the example, which we leave up to you; check out the ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://socialrobotics.atlassian.net/wiki/spaces/PM2/pages/2707915601/OLD+Visual+Support+Guide#img-tag"}},{"text":" section above on how to do that). We use the ","type":"text"},{"text":"img(+Source, +Class, +Style, -Html)","type":"text","marks":[{"type":"code"}]},{"text":" predefined predicate and use ","type":"text"},{"text":"CardImage","type":"text","marks":[{"type":"code"}]},{"text":" as output variable:","type":"text"}]},{"type":"codeBlock","content":[{"text":"img('...', 'card-img-top', '', CardImage)","type":"text"}]},{"type":"paragraph","content":[{"text":"Now we have code to generate the two elements that we need to create a ","type":"text"},{"text":"card","type":"text","marks":[{"type":"code"}]},{"text":" class element, we can ","type":"text"},{"text":"piece these ","type":"text","marks":[{"type":"em"}]},{"text":"two elements ","type":"text"},{"text":"together","type":"text","marks":[{"type":"em"}]},{"text":" using the ","type":"text"},{"text":"div/4","type":"text","marks":[{"type":"code"}]},{"text":" predicate to generate code for that element. Phrases like ","type":"text"},{"text":"piece these together","type":"text","marks":[{"type":"em"}]},{"text":" by now should have alerted you to the fact that ","type":"text"},{"text":"atomic_list_concat","type":"text","marks":[{"type":"code"}]},{"text":" might be useful! We write the following Prolog code to generate the ","type":"text"},{"text":"card","type":"text","marks":[{"type":"code"}]},{"text":" element:","type":"text"}]},{"type":"codeBlock","content":[{"text":"atomic_list_concat([CardImage, CardBodyElement], CardContent),\n% We need three cards!\natomic_list_concat([CardContent, CardContent, CardContent], CardContent3Times),\ndiv(CardContent3Times, 'card', '', CardDeckContent)","type":"text"}]},{"type":"paragraph","content":[{"text":"Finally, as a last step, we now can create our card-deck using ","type":"text"},{"text":"div/4","type":"text","marks":[{"type":"code"}]},{"text":" again as follows:","type":"text"}]},{"type":"codeBlock","content":[{"text":"div(CardDeckContent, 'card-deck', '', Html)","type":"text"}]},{"type":"paragraph","content":[{"text":"We now have all the different Prolog queries that we need, in the right order, to create one big query that will generate the complete HTML code for the card deck. We simply need to ","type":"text"},{"text":"add commas ","type":"text","marks":[{"type":"em"}]},{"text":"in between these queries (used as conjuncts) to obtain our complete Prolog query:","type":"text"}]},{"type":"codeBlock","content":[{"text":"% Prolog query that generates HTML code for a three-card card deck\n% First, we generate the content for the card body\natomic_list_concat([\n '

Card title

',\n '

This is a card.

'], CardBodyContent),\n% then we generate the card body element\ndiv(CardBodyContent, 'card-body', '', CardBodyElement),\n% then we generate the card image element\nimg('...', 'card-img-top', '', CardImage),\n% and then we generate the content for the card deck\natomic_list_concat([CardImage, CardBodyElement], CardContent),\n% We need three cards!\natomic_list_concat([CardContent, CardContent, CardContent], CardContent3Times),\ndiv(CardContent3Times, 'card', '', CardDeckContent),\n% so we can finally create the card deck html element\ndiv(CardDeckContent, 'card-deck', '', Html).\n\n% The Html output variable will return the complete card deck HTML code we showed above.","type":"text"}]},{"type":"paragraph","content":[{"text":"The HTML code and query above, of course, will not work yet as we used three dots ","type":"text"},{"text":"...","type":"text","marks":[{"type":"code"}]},{"text":" for the ","type":"text"},{"text":"src","type":"text","marks":[{"type":"code"}]},{"text":" attribute. You will still need to make sure that the right image URLs (or Base64 codes) are used to replace these dots and modify the accompanying text in the card bodies to match with these images.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Defining new predicates for generating HTML elements","type":"text"}]},{"type":"paragraph","content":[{"text":"When you inspect the code in the html.pl file, you will see that a returning pattern has been used to define Prolog predicates for corresponding HTML tags. The general pattern for a tag named ","type":"text"},{"text":"tagname","type":"text","marks":[{"type":"code"}]},{"text":" looks like this:","type":"text"}]},{"type":"codeBlock","content":[{"text":"% tagname/1 is used to introduce an HTML template with ~a to indicate placeholders for a \n% tag tagname; in this example, there are just two placeholders and we assume that the tag\n% has a start and end tag \ntagname('~a')","type":"text"}]},{"type":"paragraph","content":[{"text":"One of the placeholders always should represent the content of the ","type":"text"},{"text":"tagname","type":"text","marks":[{"type":"code"}]},{"text":" element (which typically will appear last in the HTML template code, right between the start and end tag). Other placeholders could be used for ","type":"text"},{"text":"class","type":"text","marks":[{"type":"code"}]},{"text":" or other attributes. The second clause that defines the ","type":"text"},{"text":"tagname","type":"text","marks":[{"type":"code"}]},{"text":" predicate that generates the HTML code for the element should have ","type":"text"},{"text":"N","type":"text","marks":[{"type":"em"}]},{"text":"+1 arguments where ","type":"text"},{"text":"N ","type":"text","marks":[{"type":"em"}]},{"text":"is the number of placeholders in the template. To generate the HTML code, we use the predefined ","type":"text"},{"text":"applyTemplate(+Template, +ArgumentList, -Html)","type":"text","marks":[{"type":"code"}]},{"text":" query for instantiating the placeholders in the HTML template. The typical pattern looks like this:","type":"text"}]},{"type":"codeBlock","content":[{"text":"% tagname/3 predicate for generating HTML code for the tag element;\n% we suppose, as an example, that the other placeholder in the template is a class attribute\ntagname(Content, Class, Html) :- \n tagname(Template), applyTemplate(Template, [Class, Content], Html).","type":"text"}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"applyTemplate(+Template, +ArgumentList, -Html)","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"The predicate ","type":"text"},{"text":"applyTemplate/3","type":"text","marks":[{"type":"code"}]},{"text":" replaces placeholders ","type":"text"},{"text":"~a","type":"text","marks":[{"type":"code"}]},{"text":" in the HTML template ","type":"text"},{"text":"Template","type":"text","marks":[{"type":"code"}]},{"text":" input argument with values provided by the arguments listed in the input variable ","type":"text"},{"text":"ArgumentList","type":"text","marks":[{"type":"code"}]},{"text":" to generate the instatiated HTML code from the template. The ArgumentList should be a Prolog list ","type":"text"},{"text":"[Arg1, ..., ArgN]","type":"text","marks":[{"type":"code"}]},{"text":" where the number of arguments ","type":"text"},{"text":"N","type":"text","marks":[{"type":"em"}]},{"text":" matches the number of placeholders ","type":"text"},{"text":"~a","type":"text","marks":[{"type":"code"}]},{"text":" in the template, and the order of these arguments matches the order in which these arguments are expected in the template.","type":"text"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Above, we suggested that we could also introduce a predicate for a paragraph with a class attribute, e.g. for HTML code that looks like ","type":"text"},{"text":"

SOME TEXT CONTENT

","type":"text","marks":[{"type":"code"}]},{"text":". Perhaps this is not that often needed in practice, but for illustrative purposes we will now show as an example how such a predicate can be defined.","type":"text"}]},{"type":"paragraph","content":[{"text":"The first thing we always need to do is to add a template for the HTML element. We will simply use the ","type":"text"},{"text":"p/1","type":"text","marks":[{"type":"code"}]},{"text":" predicate in line with our convention to name the predicate the same as the HTML tag, which is convenient We want to be able to fill in the class attribute and the paragraph content, so we insert two placeholders ","type":"text"},{"text":"~a","type":"text","marks":[{"type":"code"}]},{"text":" (one for each of these):","type":"text"}]},{"type":"codeBlock","content":[{"text":"% Paragraph template with class and content placeholders\np('

').","type":"text"}]},{"type":"paragraph","content":[{"text":"To define a ","type":"text"},{"text":"p/3","type":"text","marks":[{"type":"code"}]},{"text":" predicate ","type":"text"},{"text":"p(Content, Class, Html)","type":"text","marks":[{"type":"code"}]},{"text":" that allows for filling in a class attribute as well as content for the paragraph element, we use the template and the ","type":"text"},{"text":"applyTemplate/3","type":"text","marks":[{"type":"code"}]},{"text":" predicate:","type":"text"}]},{"type":"codeBlock","content":[{"text":"% Rule for paragraph predicate p/3 for a paragraph element with a class attribute\np(Content, Class, Html) :- p(Template), applyTemplate(Template, [Class, Content], Html).","type":"text"}]},{"type":"paragraph","content":[{"text":"Note that by convention we put the ","type":"text"},{"text":"Content","type":"text","marks":[{"type":"code"}]},{"text":" argument first. This is just a convention but by sticking with it we keep our code consistent and avoid confusion about what the first argument of our predicates should be instantiated with. The elements in the list ","type":"text"},{"text":"[Class, Content]","type":"text","marks":[{"type":"code"}]},{"text":" fed to the ","type":"text"},{"text":"applyTemplate","type":"text","marks":[{"type":"code"}]},{"text":" predicate, however, should match the order of the placeholders ","type":"text"},{"text":"~a","type":"text","marks":[{"type":"code"}]},{"text":" in the paragraph template we introduced above to make sure that they are substituted in the right order into this template.","type":"text"}]},{"type":"paragraph","content":[{"text":"As an example, we can now use our ","type":"text"},{"text":"p/3","type":"text","marks":[{"type":"code"}]},{"text":" predicate to replace our quoted paragraph element ","type":"text"},{"text":"'

This is the third card.

'","type":"text","marks":[{"type":"code"}]},{"text":" in our card deck example above as follows:","type":"text"}]},{"type":"codeBlock","content":[{"text":"p('This is a card.','card-text', ParagraphElement)","type":"text"}]},{"type":"paragraph","content":[{"text":"Note that we need to introduce an output argument variable name to retrieve the HTML code for the paragraph in.","type":"text"}]}],"version":1}

Browser not supported