Reveal another block/component with a click of a button

General Help
1

Hey,

Is it possible to have an interaction that when the user clicks on the button he reveals the next component/ block inside a page? (I know there is an option to move from one page to another, but I want them to reveal the content in the page by clicking on a button)

I didn’t see this option available in the list:
image

Thank you,
Shoval.

2

Yes, you can do this through logic.

Leave the action of the button to “no action”.

Set the relevant component/blocks to “hidden” in the page editor.

Navigate to the logic section of evolve (the lightning bolt) and create a new trigger with the trigger type as “Action button clicked”. Select the relevant action button, then set the “Action” to “reveal hidden components/blocks” (whichever is relevant in this case, you can do both in one trigger if necessary by clicking “add action”) at the end. Then add the hidden components into the field below.

Here’s the link to the full logic guides.
Advanced Features : Intellum

1 Like
3

Hey Thank you for the detailed answer!
Do you know if there is an option to create a page with only one component and then by clicking on a button to change the component but still in the same page? Or do we really need to create a different page for each component?
I have added an example:

image
image1215×976 130 KB

4

Hi, yes this is absolutely possible.

All you would need to do is follow the steps in my previous comment to show the desired component, and add an additional logic action to hide the previous one.

So your logic trigger would look like:

Event: Action button clicked
Condition: the action button (looks like the “next” button in your example)
Action: hide component (insert the first component that needs to be hidden)
then add a new action below that
Action: show hidden component (insert the next component to appear).

It looks like you’ll be using “next” and “back” action buttons - so you’d just need a new “next” action button for each component, since buttons can only have one action assigned to them. So you’d repeat the process above for the action buttons too.

In the page editor, you’d have all your components stacked on top of one another in one article, with all the “next” and “previous” buttons below them

5

@LaurynS @Shoval_Shirom I’ve read your conversation and used similar logic in my course. It works nicely.
My question is - do you know how to add progress bar so it shows all the articles, also the hidden ones?

6

Hi Aleksandra, I’ve used variables and logic to customise the scroll progress bar before so it would show page progress rather than length of the page - so it is possible but quite complex. Here’s how I did it to create a page progress, where the result is each time a new page loads the bar increases. I had this all typed out already :slight_smile:

Make a variable for the scroll progress

  1. Navigate to the Logic section and click on the Variables tab.
  2. Use the + button to add a new Variable. Name it “Scroll progress”.
  3. Set the Variable type to “Number” and leave the Default Value as 0 and the Variable Style as none.

Set up the scroll progress extension

  1. Next, navigate to the Extensions section, scroll down the list and enable the Scroll Progress extension.
  2. In the Scroll Progress settings under the Behaviour tab, enable “Set Scroll Progress based on Variable?”
  3. In the “Select Variable” field, select “Scroll progress”.
  4. Set the “Max Variable Value” to 100.
  5. Next, we’ll calculate the Variable Value of each page by dividing 100 by the number of pages (minus one, so that the last page reaches 100%) For example, if a course has 6 pages, the calculation is 100 ÷ 5 = 20. If your number has a bunch of decimals, just simplify it to a round number.

Setting up the logic

  1. Next, navigate to the Logic section and use the + button to create a new Trigger. Name this “Scroll progress 1”.
  2. Set the Event to “Page Loaded” and under Condition set the Page to the first Page of the course.
  3. Set the action to “Set Variable Number” and set the Variable to “Scroll progress”.
  4. Set the Value to 0. The first page value should always be 0, with the following pages increasing incrementally by the calculated Variable Value (20 in this example).
  5. Repeat the process on the previous slide for each page in the module.
  6. The Value field will increase by your calculated Variable Value. So page 2’s Value is 20, Page 3’s Value is 40. The final page Value should be 100. This means that the scroll progress now indicates completion. It should be empty on the first page, and increase as each page loads.

You could use some of the techniques here and use triggers such as “show article” to increase the variable of the scroll progress bar - but it would mean setting up a LOT of triggers if you have lots of components on the page. Best of luck with it!

1 Like
7

@Shoval_Shirom @Aleksandra_Banas
I have an important update to using the “show hidden” logic when creating a course that needs to meet Accessibility guidelines (WCAG).

Screen readers are assistive technologies that narrate a page contents for people with sight impairments. Evolve has lots of features to support this. Through quality assurance testing we realised that when you “unhide” something with logic, the screen reader doesn’t always go to that item. They are designed to keep your place on a page so you don’t get lost when switching tabs etc.

So if you reveal something that needs to be read aloud immediately, particularly if you’re hiding one article/component to reveal another, you should add the trigger to “navigate to” after “show hidden”. This tells the screen reader where to read next.

This should only be a concern if you’re building to WCAG standards.

4 Likes