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:

1 Like

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)?

I am using “Dialog Message”.
The scrolling seems to work fine on the 'phones- it only breaks down on the “Preview Portal” but I am not sure how significant that might be.

Hi, if you are planning to release your app as a mobile app then it shouldn’t have any significance. However if you’re planning to release a web app, it’s probably something to take into consideration! What do you mean by it breaking down?

On the Web Preview Portal: If you have more than 11 lines in the alert the text extends beyond the bottom of the background box. The “OK” button is visible but sort of hangs in midair after the text. If the alert is really long the “OK” button is pushed off the screen and there is no way to scroll down to it. In addition pressing “Enter” on the keyboard has no effect. While you are looking into Preview Portal weirdness could you please also have a look at the Client Side storage issue mentioned in AppGyver Preview App vs App Preview Portal Many Thanks!!

Strange, for me the alert dialog seems to work normally even with a really long text (Chrome on Mac). What browser and operating system are you using? Can you post a screenshot of what is happening?

This is Firefox (86.0 64-bit) on a Mac (Big Sur 11.2.2). Here’s how it looks. On a very long alert dialog the text would continue off the screen with no means of scrolling.