BadgeOS Interactive Progress Map

The Interactive Progress Map Add-on allows you to create a map of the various achievements and ranks, displaying which achievements or ranks have been completed and which remain pending completion. In this article, you’ll learn how to install, set up, and use interactive progress maps on your website.

Table Of Contents

1. Install the Interactive Progress Map Addon

Install and Activate the BadgeOS plugin.
Install and Activate the BadgeOS Interactive Progress Map Addon.
BadgeOS Progress Map menu will show with the BadgeOS menu.

2. Activate the Addon License Key

Interactive Progress Map addon license key can be inserted at the BadgeOS Progress Map menu.

3. Configure Interactive Progress Map Settings

Interactive Progress Map Achievement Types Settings:

Navigate to BadgeOS > Achievement types.
Click at the desired achievement type to enable the interactive progress map feature by checking the option Display in Progress Map at the achievement type edit page.

Interactive Progress Map Ranks Types Settings:

Navigate to BadgeOS > Ranks types.
Click at desired rank type to enable the interactive progress map feature by checking the option Display in Progress Map at the rank type edit page.

4. Add Achievement Progress Map Shortcodes

Navigate to WP Dashboard > Pages, then click on Add New.
Click on the Add BadgeOS Shortcode button, located above the classic editor.
Select Achievements Interactive Progress Map from the first dropdown.
Select the desired Achievement Type(s) for the Achievement Type(s) field.
Select a Limit or a number of achievements to display.
Select the desired Status. There are three types of status filters you can add: all achievements, completed achievement, and uncompleted achievement.

All achievement filters will list all the achievements including completed achievements or not completed achievements. Completed achievement filter will list only those achievement types that have been completed by the user. An uncompleted achievement filter will list only those achievement types that have not been completed all its achievement by the user.

On the Order By field, select the sorting parameter used to order the achievements.
Select the sort order (ascending or descending) from the Order field.
Click the Insert Shortcode button.
Publish the post.

5. Add Rank Progress Map Shortcodes

Navigate to WP Dashboard > Pages, then click on Add New.
Click on the Add BadgeOS Shortcode button, located above the classic editor.
Select the Rank Interactive Progress Map from the first dropdown.
Select the desired RankType(s) for the Rank Type(s) field.
Select a Limit or number of ranks to display.
Select the desired Status. There are three types of status filters you can add: all ranks, completed ranks, and uncompleted ranks.

The all ranks filter will list all the ranks including completed ranks or not completed ranks. The completed ranks filter will list only those ranks types that have been completed by the user. The uncompleted rank filter will list only those ranks types that have not been completed by the user.

On the Order By field, select the sorting parameter (i.e Rank ID, Rank Title) used to order the ranks.
Select the sort order (ascending or descending) from the Order field.
Click the Insert Shortcode button.
Publish the post.

6. Frequently Asked Questions

Why is the addon showing “No achievements to display” even if there are achievements?

Make sure that the Display In Progress Map option is checked on the achievement type. Go to BadgeOS > Achievement types (menu) > Achievement type (Badges, Levels, etc) and check the option Display in Progress Map to show on the interactive map.

Can we limit the achievements to be displayed on the map?

Yes, we can limit the achievements to be displayed on the map. Insert the limit in the shortcode pop up.

How to show all achievement, completed achievement, and not completed achievements on the progress map?

Use the shortcode [badgeos_interactive_progress_map].It will show all the filters i.e All Achievements, Completed Achievements, and Not completed Achievements.

How to show only completed achievements?

Use this shortcode to list all completed achievements[badgeos_interactive_progress_map status=”completed”]