How to create a form builder with Watson Conversation Dialog

Question

I'm working on a Watson Conversation project. I imported the following Watson project and I'm configuring it with my conversation: https://github.com/watson-developer-cloud/car-dashboard

I would like the chatbot to show the user a checkbox with 7 options that the user has to choose. Each click in one option is linked to a part of the dialog. At the moment, I have inserted this text into a dialog node

"Select:<br>
<select id='select' on select: 'select()'>
<option value='01' selected> Product 1 </option>
<option value='02'>Product 2</option>
</select>"	

And I have the following situation

image

Trying to follow this article (How use Select Option in Watson Conversation) has written to copy the code inside the index.js file, which in my project is not there.

The questions are two: 1) how can you have a checkbox rather than a drop down menu? 2) In what file of the hierarchy you can see on the github page of the project, enter the suggested code?

Answer 1

As @Arlemi points out, you can use just the checkbox code mentioned on the link.

However! The issue with what you are trying to do is that if you try to render for other systems, it will become a nightmare to maintain.

Also there is a 10MB limit on conversation code, so adding extraneous code will lower that limit.

It would be better to separate the code out, and let the application layer do the creation of code.

For example, using the W3 schools link code:

<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
<input type="checkbox" name="vehicle3" value="Boat" checked> I have a boat<br>

You would have a dialog node like as follows.

{  "context": { 
  "vehicle_options": {
    "type": "checkbox",
      "options": [
        { "name": "vehicle1", "value": "Bike", "text": "I have a bike" },
        { "name": "vehicle2", "value": "Car", "text": "I have a car" },
        { "name": "vehicle3", "value": "Boat", "text": "I have a boat", "checked": true },
      ] 
  }
    },
  "output": {
      "text": {
        "values": [ "Select your Vehicles: <! vehicle_options !>" ]
        }
    }
}

Your application layer then looks for <! !> and uses the value inside this block to determine what context object to read. It will use the type value to determine how to render, and the options to use as part of that render.

This means your application layer can create the HTML or any other language (eg. Swift). It also means you can control the styling elsewhere, and not have to change the conversation responses. It also reduces noise, making it easier to maintain/read.

Answer 2

1) Use the input type checkbox and you'll have checkboxes.

2) You should enter that code in the dialog node, not in the page. The page is going to render the response from the service as HTML in the browser.