Have you ever thought to drop a discount coupon or provide some exclusive learning material when a user completes a video or passes a quiz? If yes?
That is exactly what, Visible On Completion feature let you do.
With this feature, you can hide any HTML element present on the page. It works perfectly with the Gutenberg editor or any other page builder plugin.
The functionality is not limited to showing a coupon code or message. You can create a chain of xAPI Content, where the next content shows up when you complete the first content.
Let’s see how it work?
In Gutenberg Editor
This feature is mainly designed for this editor but other editors or page builders can also use it.
Step 1:
Add xAPI Content on the page.
Step 2:
Now select the item you want to hide.
Step 3:
Go to Advanced and toggle the Visible on Completion option.
Step 4:
Select an xAPI Content or select the All Content option depending upon your requirements.
Step 5:
Click the Update/Publish button to save your settings.
Classic Editor & other Page Builders
This feature uses the CSS classes to hide/show elements on the page. So, if you’re using any page builder like Elementor, DIVI or Classic Editor then you can create classes for your content.
For Example: xAPI Content ID is 123 and base CSS class is gb_voc
- Show element when xAPI Content 123 completes: gb_voc gb_voc_123
- Show element when All xAPI Content completes: gb_voc gb_voc_all
Learn more: How to use page builder with GrassBlade xAPI Companion?