Building an automatic Trivia app in Tableau (part 2)

To recap part 1 of this documentation process, here is how my Data pane looks at this moment:

Screen Shot 2019-09-11 at 9.49.24 PM

Now things will start to get a bit more complicated so let’s try to break this post in more specific sections.

3 | Parameter Actions to collect responses

To collect the responses I’ve opted to use the Parameter actions features of 2019.2 version. Two parameters where then necessary:

Your Answer Calculation – A float parameter that must be set to 0 when the app opens. To add a function to this parameter you need to create a calculated field that adds 1 value to the existent parameter and drag it to Detail card in the Alternatives sheet. Also this field will be used to color the correct alternative when user gets it right. Thanks Kevin Flerlage for the help on this part! The calculated field looks like this (I am naming it Your Answer +1):

([Your Answer Calculation] +1)/4

Your Answer – A string parameter that can have any value so I left it blank. This field will be used later to submit the answer to a Google Sheet via an URL action and also to color the correct answer. For that coloring effect, the following calculation is needed:

IF [Alternatives] = [Correct] AND [Your Answer Calculation] <> 0 THEN 'True'
ELSE 'False'
END

Translation to humans: Hey Tableau, compare if the clicked Alternative is equal to the Correct one AND if the value of the Your Answer Calculation is different than 0. It all that happens give me a True, otherwise a False.

Drag this calculation to the Color shelf in the Alternatives sheet. Give color White to False and Orange to True. Also on the same Alternatives sheet, make sure to add MIN(1) to rows to create an axis and change the marks card to Square. The worksheet will look like this:

Screen Shot 2019-09-11 at 10.39.21 PM

Now you can build a very simple Dashboard with all sheets and the parameters. I’ve opted to do a mobile layout so people could play the trivia on their phones (414×900 dimensions):

Screen Shot 2019-09-11 at 10.18.09 PM.png

The next step was to build the actions that would (1) change the Your Answer Calculation parameter (changing its value from 0 to 1) and (2) add the value of the selected alternative to the Your Answer parameter. Here is how they look like:

Screen Shot 2019-09-11 at 10.27.38 PM.png

Screen Shot 2019-09-11 at 10.29.19 PM

Now you are ready to click the alternative and see what happens. I will go for the correct one:

Screen Shot 2019-09-11 at 10.44.07 PM.png

Let’s take a look in both parameters now:

Screen Shot 2019-09-11 at 10.45.37 PM

Screen Shot 2019-09-11 at 10.45.59 PM

So the first parameter is telling Tableau to color the chart and the second parameter is holding the answer so we can submit it to Google Sheet.

4 | Submitting the Answer to Google Sheet

For that I used the technique that I described in March on how to create a data collection app in Tableau. But now I added a bit extra flavor to that process as Tableau 2019.2 has some nice new features about URL actions.

I am not going through the details on how to create the Google Form procedure (read the previous post). The only thing I need to details is that the form has only 3 fields:

Trivia – this is to know the alternative the user selected

Twitter – this is to collect the user’s twitter account

Alternative Selected – this is to collect the alternative selected

Timestamp – this is created automatically by Google Form. It hosts the datetime of when the answer was registered.

The new flavor I mentioned is that now you can direct the URL action to a specific URL object in your workbook. With that in mined I floated the URL object to the dashboard canvas and leave it blank (note that I am pushing the float object out of the view):

Screen Shot 2019-09-11 at 10.53.55 PM.png

You can also rename the Web Object (I named it Google Form) which is very helpful. Now here is the URL action setup:

Screen Shot 2019-09-11 at 10.57.39 PM.png

Note: I highlighted the Trivia field in the image above because that field must be in the Alternative view so we can connect the alternative selected with its trivia and the user twitter account.

Now you can reset the parameters back to 0 and empty and try again. Note what will happen in the web object on the right:

Screen Shot 2019-09-11 at 11.04.20 PM.png

This is so cool! I don’t need to open a new browser tab to register the answer. It goes hidden in the web object that is out of the canvas!

But… hum… It will be nice to tell the user that the response was saved somehow, right? Also tell the user if they were correct or wrong with more clarity. Those and many more cool cleanup details, and how I built the Rank table will be in the final post of this trilogy 🙂

VERY IMPORTANT NOTE: Before saving the workbook to server be sure to reset the Google Form web object to blank! Otherwise you will send a new answer to Google every time someone opens the trivia!

One thought on “Building an automatic Trivia app in Tableau (part 2)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s