2024 Visual Support: Instructions Setup and Start

We provide a basic outline in html.pl and some completed pages. If you fill in the holes we provide you with, it will give you very basic visuals. Completing this will already get you a sufficient grade. Thus, this will be a very creative task, and we ask that you implement what you think would visually support your agent or just look pretty. Let's get started!

Start by going to html.pl in your agent project. 

The file is organized as follows:

1. Page layouts (the order of pages listed below matters!).

2. Code for HTML generation.

3. Some Helper predicates.

There are 6 specific pages that you have to have as a minimum to successfully complete the project:

• Start page

• Greeting/Opening Page associated with pattern c10 (see also Pattern and Responses: Instructions).

• First Page for Recipe Selection (associated with pattern a50recipeSelect).

• Second Page for Recipe Selection (associated with pattern a50recipeSelect).

• Recipe Confirmation Page associated with pattern a50recipeConfirm.

• Closing Page associated with pattern c40.

Start Page

page(start, _, Html) 

This rule serves as an example of how you can create a page using Prolog, HTML, and Bootstrap. You can find more information on how to code such rules in the 2024 Visual Support: A Guide. 

This page should contain instructions for how to talk with your agent and a start button. We have left some spots for you to fill in your instructions. You can use these slots, but you can also design your own start page. The start page, however, does need to meet some requirements which are mentioned in the User Study section. As a start, put something useful here for your team members. What exactly to put on this page will get clearer towards the end of the project, once you have a working agent, and should be completed at that time. Hence, make sure to revise this page again later during the project!  

Opening Page (visuals for the c10 pattern)

When a user has visited the Start Page and clicked on the start button, your agent should start talking. The head page(c10, _, Html) for the rule you need to complete has been provided. This page should show your agent’s greeting, and introduce your agent by saying its name!

1.  Consider the condition that needs to succeed when you generate this page (Hint: look at the start page rule body and how the first parameter of the page/3 predicate is used in that rule).

2. Think about what you want to be on this page. It needs somewhere to show text to introduce your agent. For this, you can use a card or an alert, for example. This will be the first atom in your HTML code that we use in Step 3. The second atom should be HTML code with text(formatted) to introduce your agent, i.e. what you want to go on your alert or card. In Step 5 we need to format the HTML code by formating the Prolog string with ‘applyTemplate’. This means that in this second atom there should be a placeholder for the variable with the name of the agent. Read the 2024 Visual Support: A Guide for hints on how to do that.

3. Use a predicate to combine the first atom and second atom you created in the previous step (check out the Visuals Guide for how to do this). What we created in HTML above is our template, and the predicate should return the variable Template.

4. Now we need to get the agent's name in order to add it to our text. This knowledge should be somewhere in the agent's memory. Hint: Look at line 40 in dialog_init for the applicable predicate. Retrieve the name of the agent in a variable.

5. Next, you should use the applyTemplate/3 predicate to add the agent’s name to our HTML code atom (which is also explained in the Visual Support Guide).

6. Lastly, you should use the last variable that you used in the applyTemplate/3 predicate and use the html/2 predicate to convert your code snippet into a completed HTML page. This can be done by using html(YourCompleteHTMLCodeVariableHere, Html). Html is the variable that returns the page as you can see in the head of the rule.