VOGO Voice – Knowledge Base

If/Else

Estimated reading time: 6 min

In this in-depth tutorial, you will learn how to implement the If/Else component, a decision-making component that performs the versatile function of replacing the use of multiple Check Variable components within an interaction model. Making use of this card enables Skill Designers to execute multiple conditions by selecting from among the different relational operators set within the If/Else component. 

The overall instructions combined with highlighted screenshots will offer the required direction needed to execute the If/Else component to check multiple conditions but is contingent on the following i.e. if any one of the set conditions is satisfied then the remaining conditions, if any, succeeding it will not be subject to testing. Adopting a comprehensive methodology, this user-centric tutorial is dedicated to presenting a step-by-step walk-through to illustrate the rendering of exam results of students according to their registration number. 

Prerequisites

  • VOGO Voice account: https://www.vogovoice.com/
  • Access rights to the Interactions section.
  • Access rights to the Interaction builder platform.

Create a Custom Intent 

Make a suitable intent to be invoked for executing an interaction flow mapped to it.

Create an intent titled ‘Results’ with suitable sample utterances linked to it. The sample utterances for this intent would be, “Give me the result of student number {num}”, “Tell me the result of student {num}”, “Whats the result of {num}”, and “What’s the result of the student with the {num}”. These sample utterances will serve the purpose of fetching the exam results in accordance with their register number.

To learn how to create custom intents refer to the guide: https://university.vogovoice.com/kb/creating-intents/

Steps to create an interaction flow

  1. Log into your VOGO Voice account to be directed to VOGO Voice Management Console (https://account.vogovoice.com)
  2. Navigate to Interactions on the vertical bar displayed on the left-hand side of the Dashboard.
        Dashboard > Interactions

3. Now, click on the Interactions button at the bottom right-hand corner of the screen. Select the ‘Results’ intent to be directed onto the Interaction builder platform.

4. You will be directed onto the flow diagram area, where you will see the Start and Response components. 
5. Unlink the Start component from the Response card by clicking the delete icon placed in the middle of the chain.

6. Now, drag and drop an Add Variables component onto the flow diagram area.
7. Next, mouse over the top right corner of the Add Variables component. Click on the pencil icon that appears. This will open up its configuration window. 

8. Configure the Add Variables component by adding the key-value pairs as shown in the screenshot below. Fill in the variable name (key) as students and add the array as value, the format, and content of which is provided below in detail. Then, set the datatype as Array.

students:

[
{
"id": 1,
"name": "Sam",
"Score": 50
},
{
"id": 2,
"name": "Nick",
"Score": 20
},
{
"id": 3,
"name": "Jerry",
"Score": 70
},
{
"id": 4,
"name": "Bella",
"Score": 55
},
{
"id": 5,
"name": "Rose",
"Score": 90
}
]

9. Now add another variable in the Add Variables component. To fulfill this step, a filter function is required to be added.

10. To add the filter function in the value field, navigate to the Data tab adjacent to the Components on the top left-hand side of the interaction builder platform.

11. Click on the Data part and in the search bar type ‘filter’. From the drop-down that appears, click on the plus button beside the collection, and this will bring up the filter function.

12. Drag and drop the filter function in the value field subsequent to the array in the Add Variables component. This will automatically generate the filter function in the respective field. Here we name the new variable as findStudent. Its data type will be automatically generated as Function. Now configure it as shown below.

13. Click the plus button that appears under the heading Arguments and add the first argument as var.students which is the array of student details. Then select Path as its data type. For the second argument input the object { “id” : {{toNumber inputs.num.value}} } and select its corresponding type as Object. 

👍 Note: Here, the template  {{toNumber inputs.num.value}} is used to convert the user input value to a number because when inputs.num.value will be fetched the value inside this path will be rendered as a string. 

💡 Tip: The filter function is used to find an object from an array using a key-value pair. If the key-value pair matches with values in any of the objects, then that object will be returned. 

14. Next drag and drop an If/Else component and connect it to thealready configured Add Variables component as shown below.

15. Now configure the If/Else component. To configure this card, mouse over the top right corner of the If/Else card. Click on the pencil icon that appears. This will open up its configuration window. 

Configure the If/Else component with four test conditions using the relational operator ‘is less than’ for the first three and ‘is greater than’ for the fourth one, all of which are clearly represented in the screenshots below. The purpose of configuring is for the first condition to check if the score is less than 30, the second condition to check if the score is less than 50, the third condition to check if the score is less than 70 and for the fourth condition to check if the score is greater than 70. Populate the left and right-hand sides of the Configuration window as in the screenshot below. Set the data type based on the input. 

👍 Note: To add a new condition click on the plus button. Also, one can create any number of conditions using a single If/Else component.

First Condition
Left-Hand Side: var.findStudent.0.Score (choose data type as Path)
Right-Hand Side: 30 (choose data type as Number)

Second Condition
Left-Hand Side: var.findStudent.0.Score (choose data type as Path)
Right-Hand Side: 50 (choose data type as Number)

Third  Condition
Left-Hand Side: var.findStudent.0.Score (choose data type as Path)
Right-Hand Side: 70 (choose data type as Number)

Fourth Condition
Left-Hand Side: var.findStudent.0.Score (choose data type as Path)
Right-Hand Side: 70 (choose data type as Number)

16. Next, drag and drop four Response components and connect them to the four conditions of the If/Else component as shown below.

👍 Note: Here the first Response component will relay the response for a score less than 30, the second component will provide the response for a score less than 50, the third will give the response for a score less than 70 and the fourth one will impart the response for a score greater than 70. 

17. Now, configure the Response components as shown right below. To configure each, follow the given instructions. Firstly, click on the Voice icon on the top right-hand side of the Response component. Clicking on the voice icon opens a Speak pop-up window with a field titled Say wherein you need to type the condition-specific voice responses curated for each of the Response cards.

For the Response component linked from Condition 1

Say: {{var.findStudent.0.name}} has failed in this exam.

👍 Note: Ensure to click the Save button to save the interaction flow as and when edits are made.

For the Response component linked from Condition 2


Say: {{var.findStudent.0.name}} has passed in this exam. There is still room for improvement.


For the Response component linked from Condition 3

Say: { {{var.findStudent.0.name}} has passed in this exam with good score. Keep going.

For the Response component linked from Condition 4

Say: {{var.findStudent.0.name}} has shown an impressive performance in this exam. Brilliant Student.

To add a display message in a display voice-assisted device

  1. Click on the Computer icon, and type in the field titled Display Message of the Show pop-up window.
  2. Populate the required fields and click the Save button.

Title: Results
Subtitle: {{var.findStudent.0.name}}
Display Message: Score: {{var.findStudent.0.Score}}

🖍 Note: Follow the same steps of configuration for all four Response components.

To learn about different template engines to be followed to run functions visit https://university.vogovoice.com/kb/template-engine/

Testing and Validation 

  1. Click on the Test button next to the Flow Editor button on the interaction builder platform.

2. In the Tests pop-up window that appears, click the + button on its top right-hand corner. 

3. Fill in the Name field of the Test Response window that shows up. In the Conversation section of the Test Response, the Results intent through which this interaction flow has been initiated will be auto-generated in the User invokes field as shown below. 

4. Fill the With slots field titled num under Conversation with the registration number that is 1. Click Save to perform the test.

5. After performing this test, change the slot value (student specific register number) to get the result of other students.

6. To validate the Test Response, click on the lightning symbol on the left-hand side on the top of the test case as shown below. To test for the remaining results namely Test – 2, 3, & 4 click on their respective lightning symbols.

Output for Test 1

Output for Test 2

Congratulations! You have successfully learned how to implement the If/Else component to check multiple conditions in order to retrieve and generate results specific to the end-user’s spoken requests.

👍 Note: To test the functioning of the interactions on your device you have to deploy the custom skill to facilitate the skill with the new edits. To accomplish this, click on the Deploy button seen at the bottom of the Skill Settings pop-up window.

To know how to deploy a custom skill visit https://university.vogovoice.com/kb/deploying-a-skill/

To Learn about If/Else, click here.

Tags:
Was this article helpful?
Dislike 0
Previous: Socrata Show Chart Example
Next: Data Branching