Visual Support: Instructions

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 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. So 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 be true 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 bot i.e. what you want to go on your alert or card. This atom needs to be able to add a variable later(the bot’s name) read the 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, thus the predicate should return the variable Template.

4. Now we need to get the bot'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. Save the name of the bot as a variable.

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

6. Lastly, you should take the variable returned from applyTemplate 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 returned by the page function as you can see in the head of the rule.

The First Recipe Selection Page (visuals for the a50recipeSelect pattern)

Most of the rules that you need to complete in the html.pl file for this page has already been provided to you. All you still need to do is specify the conditions to show this page. This page should be shown when there is still a long list of recipes that match with the requests made thus far by a user. For now, as a start, show this page when the number of filtered recipes is still above 15 and the user is still trying to reduce the list (which is implemented by the a50recipeSelect pattern).

1. Add a condition that says we should be at the a50recipeSelect step in order to show this page.

2. Now we need to fetch a list of IDs of the filtered recipes and save that variable as Recipes. There is already a predicate defined that can do this for you somewhere in the bot’s code. 

3. Measure the length of the list of Recipes. The length should be saved as N (so it matches with the variable naming later in the rule) 

4. Add a condition that makes sure N is above 15

The Second Recipe Selection Page (visuals for a50recipeSelect pattern)

Most of the rule that you need to complete for this page has already been provided to you. All you need to do is to specify the conditions for when to show this page. This page should be shown if the number of filtered recipes is below or equal to 15 or 0 and if the user is still trying to select a recipe.

1. Add a condition that says we should be at the a50recipeSelect step in order to show this page.

2. Fetch the list of the IDs of the filtered recipes and name that variable Recipes

3. Measure the length of the recipe list, and save that variable as N

4. The final condition should be as follows: ( your count constraint or memoryKeyValue('show', 'true') )

Recipe Confirmation Page (visuals for the a50 pattern)

On this page, we are confirming the user’s choice of recipe. In order to do that, we need to extract certain information about the recipe from the recipe database that is available in recipe_database.pl.

1. Make sure this page is shown at the right time.

2. Retrieve the following information by putting the appropriate predicates in the places indicated in the rule by comments and by using the variable names indicated below.

   1. We need to retrieve the chosen recipe from memory. Find the necessary predicate and name that variable Recipe.

   2. The previous step retrieves the Recipe ID, but we also need the recipe name. Use a variable called Name for this.

   3. Retrieve the time needed to complete the recipe in a variable named Minutes.

   4. Retrieve the number of servings in a variable called Persons.

3. To retrieve a list of the recipe steps and a list of ingredients, two additional predicates need to be implemented. The predicates that we need to implement can be found in the recipe_selection.pl file and are labeled with the comment %For Visual Support to-do

   1. Find a built-in Prolog predicate (part of the Prolog language) that you can use for returning a set of a specific goal. Use this predicate to specify the ingredient rule.

   2. For ingredients use the function from above and to simplify your goal you can use the caret(^) by defining your goal with the following syntax:

RecipeID^(predicate with information(RecipeID, Information))

1. Find another built-in Prolog predicate to retrieve a list of the recipe steps without changing their order. There is no repetition, so this predicate does not need to remove duplicates (as in the previous step).

2. Your rule for retrieving the steps needs to use the accompanying rule getStepString in your goal of the built-in Prolog predicate, so your goal should look as follows: ​​RecipeID^getStepString(RecipeID, Step).

3. Go back to html.pl and to a50recipeConfirm

   1. Save the recipe steps as Steps

   2. Save the list of ingredients as Ingredients

4. Figure out a way to add the recipe picture to this page wherever you would like.  You will have to look around or at some bootstrap documentation to complete this step.

Closing Page (visuals for the c40 pattern)

Close the session nicely.

To test, go to dialog_init on line 24, put c40 into the agenda, and run your agent. The line should look like this:  insert(agenda([c40])). Note that unless the corresponding c40 pattern and response are done in pattern.pl and reponses.pl your code will not yet work. Check with your team members to make sure they are done with their part.

Visual Support Extensions

If you fill in all the blanks described on this instruction page, the visuals will function, but they are not yet very supportive nor very pretty. If you have done this right, however, it will already give you a pass for the project (assuming other parts work well too!). If you would like to go for a higher grade, you will need to get more creative. Consider how you can redesign and extend the pages that you created above. Think about what will support your users and what will improve user experience. Try and make it visually appealing (though of course, that is subjective!). You can use the material in the visual support guide or any other documentation that you can find. Remember though that the visuals should support the conversation, not the other way around! Good luck!