How to display a list of text? Working with OpenTDB.com

This is my first attempt at bulding with AppGyver, right after I completed the onboarding training in the Composer.

I am working with OpenTDB.com, Open Trivia Database, which returns a JSON with questions and answers for you to build a quiz app.

  • Now, I got the data added in Data Configurator.

  • I can access the questions after binding it to a Data Variable.

  • But how it is formated, an item is set like this.

      [{
    "category": "Entertainment: Film",
    "type": "multiple",
    "difficulty": "easy",
    "question": "Who starred as Bruce Wayne and Batman in Tim Burton's 1989 movie "Batman"?",
    "correct_answer": "Michael Keaton",
    "incorrect_answers": [
      "George Clooney",
      "Val Kilmer",
      "Adam West"
    ]
    },{ ... }]
    

I bind this into a Collection Data Variable, OpenTDB. To display the questions, I make another Page Variable, question_id. Then I have a Next Button that will incease the question_id value, from 0 to 10. The paragraph is set to a format of

data.OpenTDB[ question_id ].question

Now, about displaying the option. I wanted to use Repeat option, but it only accepts List of Objects. And as you can use “incorrect_answers” is a List of Text.

Right now, I create another Page Variable called questions as a List of Text. And when user click the Next Button, I also assign a new value to question, which is

SHUFFLE( WITH_ITEM( data.OpenTDB[ pageVars.question_id].incorrect_answers , data.OpenTDB[pageVars.question_id].correct_answer) )

Basically, what it does is

  1. combine incorrect_answers with correct_answer
  2. shuffle / randomize the order of the list
  3. assign it to Page variable questions

To display the answer options, I create 4 individual paragraphs and assign the values to them with

  • pageVars.questions[0]
  • pageVars.questions[1]
  • pageVars.questions[2]
  • pageVars.questions[3]

Honestly, I hate that I have to do it like this. There has to be a better way.

Any ideas?

Alright… I found a solution, but it requires Custom Javascript. So I created a Custom Javascript Flow, where it takes the input of the OpenTDB JSON, iterate through data, format it as an Object and return a list of object. This list of object will be assigned to a Page Variable. Now I can use it with List Items.

This is my Javascript, more or less.

var answers = inputs.input1[0].incorrect_answers;
answers.push(inputs.input1[0].correct_answer);
console.log(answers);
var aw = [];
for (var x in answers) {
  aw.push({ id: x.toString(), question : answers[x] });
}
return { result: aw };

I got it this far. Let me know if you have questions.

Hi!

I would probably use MAP formula to make your List of Text into a List of Object in the Repeat With field. The formula would look approximately like MAP(pageVars.questions, {id: item}). Then you could bind current.id to display the question in the UI. You might not need to even make the page variable for the questions, but that depends on how you want to structure your app. Let me know if this helps you forward!

1 Like

Alright… I will give it a try.

1 Like

I’ve got something similar… REST returns a JSON object where one item is

“peers”: [
“PFE”,
“MRK”,
“NVS”,
“SNY”,
“SYK”,
“MDT”,
“LLY”,
“ABT”,
“GSK”,
“GILD”
]

which is list of texts. Trying to MAP this to list of objects (in order to display it in the app) but did not succeed to figure out how to do this… any help? Thanks:-)

I assume you have the JSON in Data Variable as “peers”. So you would us MAP like this

MAP(data.peers, {id: item})

2 Likes

Is there documentation for the interpretation of the curly brackets, ”id” and ”item” in this context?

Antti