Hide/Reveal single individual paragraphs OR Toast vs Alert!

I am setting up an FAQ page. I want the answer to appear when you click on the question. I have got this to work by using a Page Variable that changes the True/False state of the Answer. So far so good! Problem is that now every answer on the page is revealed whenever any question is clicked. Is there a way to make just the one answer appear (there are a lot of questions to be answered…)

Here is the setup

OK so I get the logic of why it is doing this- it is a “page” variable after all, and I can’t see a simple way of changing the visibility for a single component. Instead I am experimenting with “Toast” and “Alert”, both of which work, more or less. Is there any deep difference between them?
I notice that the Alert looks crisp and professional on the Android app but really odd in the Preview Portal: anybody else have this? and does it signify issues ahead? Is there any way to ensure that the alert box is the same size as the text it contains? Currently a long message stretches beyond the confines of the box (though only in the preview portal).

Hi James, how many questions are there? You could create your page variable as an object with fields for each question and then control the visibility of each by binding it to pageVars.visible.p1, pageVars.visible.p2 etc.

When it comes to the alert/toast, an alert is a blocking dialog that the user has to dismiss by clicking “OK”. Toasts, on the other hand, are messages that appear on the screen for a set amount of time and don’t block the user from using the rest of the app.

Many thanks for this- I will experiment, although I have some 50 questions to deal with. I rather like the look of the alerts, and having the user click OK to close it is not an issue. My only fear is that the behaviour of alerts on the preview portal is an indicator of potential problems- in the android and ipad app versions it looks good, but on the web portal the text does not fit the box it is in, and there is no scrolling so if the answer stretches beyond the bottom of the screen you can’t reach the OK button.

Hi James, in case you have a list of questions that long you could also create a page variable of type “List of objects” to hold them, with a schema like this:

image

You can add the questions and their answers under “Initial value”. Then you can use a repeat to repeat all the items in the list without having to create a new container for each, and control the visibility of each item with current.visible inside the repeat.

Tutorials to check out:

That all makes sense- thank you, but I still can’t work out how to make the answer visible when the question is tapped.

I give up!!! I’m going to stick with alerts- they seem to work, they look OK and are simple to set up. I tried adding a “show component” logic box from the Flow Function Market, but I can’t make it work. Should I be alarmed by the errors mentioned above on the “Web Preview Portal”?

Hi, I just tried creating an alert with a long message and the scrolling seems to work OK - are you binding the whole text to the alert dialog title or are you also using “Message” (under Advanced)?