SOTI SNAP Video Training Application Part 2

PART 2 – Summary and analytics

Create a summary page

We need to create a separate “Summary Page” that sits outside of the Form, but it’s still part of the app.  You’ll need the following widget:

• Label – List out the summary elements

Step 1) Open your app > go to the Project Tab. 

Step 2) On the left panel’s top right corner, click on the

PART 2 – Summary and analytics

Create a summary page

We need to create a separate “Summary Page” that sits outside of the Form, but it’s still part of the app.  You’ll need the following widget:

• Label – List out the summary elements

Step 1) Open your app > go to the Project Tab. 

Step 2) On the left panel’s top right corner, click on the + icon >  add a page. Name it “Summary Page” or a name of your choice.

                                                               Figure 7 Adding in Summary Page

Step 3) Drag 2 label widgets onto your canvas as shown in Figure 8. You'll want to rename ID/Name for easier identification purposes (i.e.: Labelscore and labelvid)

                                                                 Figure 8 Summary Page Layout

Create global variables

For this app, we will use the global variables feature to store counters to track if the video was watched or not.

Step 1) Click on the Data Connection Rules tab and create 2 Global Variables.

Pro tip: We only add to the global variable count when all the videos of that playlist is completed.

                                                      Figure 9 Establishing Global Variables

• For this example:
  • Global variable Video1 reflects on number of times the video was played.
  • Global variable Question1 reflects on the results from the post video quiz.

                                                   Figure 10 Two Established Global Variables

Pro tip: You need a new global variable to track each video player widget you use.

Use Blockly to define the logic

SOTI Blockly is a great and flexible way of making your widgets and app more powerful. Here we will use Blockly to count the number of times the user watched the video. You will need the following blocks:

• Global Variables – Set and Get Block
• Logic – IF Block

Step 1) Click on the video player widget > navigate to Events Tab.

                                                 Figure 11 Access Events to Run Blockly Editor

Step 2) Click Events dropdown and select “On Video End” > Click Add action > select Run Blockly > launch the editor.

                                     Figure 12 Setting up Blockly for Video Player Widget

Step 3) Provide a name on the top left of the Blockly Editor > Save > Add.

Step 4) Click Events tab > Select on Video End > Add navigate to next page (Quiz).

                                                Figure 13 Events for Video Player Widget

Note: Ensure the sequence of actions are followed as shown in Figure 13.

Add the logic for the analytics via Blockly (Quiz Questions)

Add the Blockly logic for the quiz questions to track the number of questions answered correctly. You will need the following blocks:

• Logic – IF Block
• Global Variable – Set Block
• Widget Value – Radio buttons, Set To Block

Step 1) Click on the radio buttons from the Quiz Page > click Events tab > run Blockly Editor.

                                        Figure 14 Blockly for Setting Up Quiz Question

Note: This step can be repeated for each unique question.

Pro tip: To map a checkbox widget, replace the radio button block with the checkbox block.

Add the logic for the analytics via Blockly (Summary Page)

The final step is to display the results in the summary page. You will need the following blocks:

• Local Variables – Create variable > Set Block & Individual Local Variables
• Math – 1 + 1 Block
• Global Variables – Get Block
• Widget Value – Labels Set Block
• Text – Text Block and Create Text Block

Step 1) Click on the summary page > access Events > run Blockly Editor.

­­­­­                                                         

                                                       Figure 15 Blockly for Summary Page

Note: Create two local variables with respect to the Global variables

• "ANS" for Question1 (number of questions scored correctly)
• "Num" for Video1 (number of times video was watched)
• The names for the local variables can be changed as desired
• Make sure you save your Blockly code

Pro tip: If there are more than 1 question > Create a new global variable > Follow the same step as Figure 14 > Create the Blockly as shown in Figure 16.  

                                            Figure 16 Blockly for Summary Page (2 Questions)

Linking Part 1 & 2 together

Step 1) Click on Submit button -> Events Tab > add an action to Navigate to the Summary page. 

                                         Figure 17 Adding in Sequence of Events for Submit Button

­­Your Video Training app is officially complete. Feel free to reach out to the SOTI Snap team if you have any questions.

https://youtu.be/_RoJAh_pFuo