VOGO Voice – Knowledge Base

Delete Settings in Code Block

Estimated reading time: 8 min

In this advanced tutorial, you will learn how to delete saved settings using a Code Block component within a custom interaction model. Skill Designers should use the code syntax $util.deleteSettings(“key”); in order to successfully implement delete settings within the Code Block component. Additionally, users can employ multiple keys in one command using the $util.deleteSettings([“key”, “key1”]); syntax. 

The comprehensive instructions in this tutorial present a simple math game that focuses on addition. The scoring of the game is set to credit points if the user answers correctly. At the end of the game, the overall score is rendered along with the total number of wrong answers. In addition to that, the game gets automatically reset if not played in a span of 14 days, wherein the results of the progress get erased. Demonstrating the aforementioned use case is central to the idea of showcasing the execution of the Code Block component to delete previously saved values.

Prerequisites

  • Knowledge in JavaScript
  • VOGO Voice account: https://www.vogovoice.com/
  • Access rights to the Interactions section.
  • Access rights to the Interaction builder platform.
  • Knowledge in configuring components like Check Variable, Add Variables, Save settings, and Response Component

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. Click on the Open button of the default Launch interaction card to be directed into the interaction builder platform.

4.  In the flow diagram area, you will be able to 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 the Check Variable component onto the flow diagram area and connect it to the Start component.
7. Mouse over the top right corner of the Check Variable component. Click on the pencil icon that appears. This will open up its configuration window. 

8. Configure the Check Variable component as shown below. Populate the left-hand side of the Configuration window as in the screenshot given below. Set the data type based on the input, which in this case is Path. The purpose of this step is to check the existence of the value saved in lastPlayed using the Save Settings component, the configuration of which will be displayed in the latter part of the tutorial.

Left-Hand side: settings.lastPlayed. 

Select the data type as Path and from the dropdown right below choose the relational operator Exists. To know more about data types, click here.

9. Drag and drop an Add Variables component and connect it to the Then part of the Check Variable component. 

10. Configure the Add Variables component by adding the key-value pairs as shown in the screenshot below. Fill in the first variable name as date and add the template {{dateFormat now ‘YYYY-MM-DD’}} as value. Here the dateFormat function is used to change the date in the required format and now is added to provide the present timestamp. ‘YYYY-MM-DD’ is the date format that we want from the timestamp. Then, set the datatype as Template.  

Name the second variable as diff and add the template {{toNumber (dateDiff settings.lastPlayed var.date ‘days’)}} as value and set its corresponding data type as Template. This template is used to find the difference between the last played date and the current date. Here the toNumber function is made use of to convert the difference value to number format because the dateDiff function will render the value as string. The dateDiff function is used to find the difference between two dates. Here we use it to find the difference between the last played date which is saved in the Save Settings as lastPlayed and the current date which is already stored in the variable date. Here, the ‘days’ is used as the unit to represent the difference of the date.

11. Drag and drop another Add Variables component and connect it to the Otherwise path of the Check Variable as shown below.

12. Configure the Add Variables component by adding the key-value pairs as shown in the screenshot below. Here we name the variable as lastPlayed and add the template {{dateFormat now ‘YYYY-MM-DD’}} as value. Then set the datatype as Template

πŸ– Note: Here we use the Add Variables component to format the date. This is done because the template is not supported in the Save Settings component. Therefore Add Variables allows to format the date and later provide the path of the variable in Save Settings.

13. Drag and drop another Check Variable component and connect it to the Add Variables component that is connected to the Then path of the previously configured Check Variable as shown below.

14. Next, configure the Check Variable component. Implementing this card enables to check if the value of var.diff is greater than 14 using the relational operator is greater than

Left-Hand Side: var.diff (Set data type as Path)
Relational operator: is greater than
Right-Hand side: 14 (Set data type as Number)

15. Drag and drop a Code Block component and connect it to the Then path of the Check Variable and connect the output path of the Code Block component to the Add Variables component that is linked to the Otherwise branching of the first Check Variable as shown below. Here the Code Block card will be triggered to execute only when the condition that is configured in the Check Variable is satisfied; i.e. the last played exceeds 14 days. 

16. Configure the Code Block component as shown below. Input the first line of code as $util.deleteSettings(“lastPlayed”);  and this is added to delete the value saved in the Save Settings named lastPlayed, the configuration of which is illustrated in Step 20. The second line of code $util.deleteSettings([“score”, “wrong”]); is used to delete multiple Save Settings named score which stores the total score of the user and wrong which stores the total number of wrong answers. The third line represents the response output of the Code Block component, all of which are shown below.

17.  Drag and drop a Save Settings component and connect it to the Otherwise path of the second Check Variable as shown below. 

18. Configure the Save Settings as shown below. To fulfill this step, name the Save Settings as lastPlayed and store the variable var.date, and set its data type as Path.

19. Drag and drop another Save Settings component and connect it to the Add Variables component linked to the Code Block card as shown below.

20. Configure the Save Settings as demonstrated below. Name the first Save Settings as lastPlayed and input the value corresponding to it in the variable as var.lastPlayed and set its data type as Path. The second and third Save Settings are used to reset the already saved Save Settings named score and wrong. This is done to reset their values to 0 so as to allow the skill to accommodate a new user or one who has skipped playing for more than 14 days. Ensure to set its data type as Number

πŸ– Note: If it’s a new user, the current date is stored as last played and value of score and wrong answers picks up from 0. For a user who has skipped playing for more than 14 days, the same function takes place but the progress in the game is erased with score reset to 0.

21. Drag and drop a Response component and connect it to the configured Save Settings component to introduce the user to the welcome part of the skill. 

22.  Configure the Response component as shown right below. To configure 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 following response.
Say: Welcome to Simple Math Game. Here, you need to answer simple addition questions. Each correct answer will help you score a point. Remember, never miss the game for more than 14 days. If so, your game progress will be reset and you have to play from the beginning.
Prompt: Say next to start the game.
The same message will be replicated in the Reprompt field.
Reprompt: Say next to start the game.

23. Populate the field under Expectations by checking the Allow Global Interactions and then select Next from the drop-down list. 

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: Simple Math Game
Display Message: Welcome!
                                A game to answer simple addition questions.
                                (bullet icon) Correct answer = 1 point
                               (bullet icon) Skipping the game for more than 14 days will erase your
progress.

24. Drag and drop another Response component and connect it to the Save Settings component as shown below.

25. Configure the Response component as shown below. Click on the voice icon which opens a Speak pop-up window with a field titled Say wherein you need to type the following response.

Say: Welcome back to simple math game
Prompt : Say next to continue the game.
The same message will be replicated in the Reprompt field.
Reprompt: Say next to continue the game.

26. Populate the field under Expectations by checking the Allow Global Interactions and then select Next from the drop-down list. 

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: Simple Math Game
Display Message: Welcome back
                               Say Next to continue   

Testing and Validation 

Test 1: Welcome part for new user

  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 Launch intent through which this interaction flow has been initiated will be auto-generated in the User invokes field as shown below. Click Save to perform the test.

4. To validate the Test Response, click on the lightning symbol on the left-hand side of the test case as shown below.

5. The resultant Test Response window displays the output. 

       Test 2: Welcome part for old user

πŸ– Note: This test is run to show the skill’s output when responding to returning users revisiting the skill after a time period of 14 days.

  1. Navigate once more to the Tests pop-up window and click the + button on its top right-hand corner. 


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

3. Navigate to the User Settings section of the test window. Click on its add button as highlighted below. 

4. Name the Key as lastPlayed and give a date value that is at least 15 days prior which in this particular use case is provided as 2021-12-13, and set its data type as String. Add another settings and name the Key as score and give a number value. Here the given number value is 10. Then set its data type as Number. Add a third setting and name it as wrong. Give a number value and set the type as Number, which herein is provided as 3, all of which are illustrated right below. Click Save to perform the test.

5. To validate the Test Response, click on the lightning symbol on the left-hand side of the test case as shown below.

6. The resultant Test Response window displays the output.  

πŸ– Note: Since the date difference is 23 days, the game has been automatically reset and has erased the progress of the returning user in the skill, thus rendering the score and wrong answers as 0. Additionally, the last played date too has been replaced with the present date.

Congratulations! You have successfully learned how to implement delete settings using the Code Block component with the aid of delete settings syntax to accommodate the specific requirements of the skill so as to deliver tailored responses to the end-user accordingly.

πŸ‘ 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 Code Block, click here.

Tags:
Was this article helpful?
Dislike 0
Previous: find Function
Next: Replace Multiple Components using Code Block