The Game Mechanics (GM) Challenge Status add-on enables users to view all the badges, both locked and unlocked, of the specified challenge.
Each site may have one or more challenges, and each challenge has defined levels. Each level has a badge associated with it, and a level title. A user may achieve a level in a certain challenge by performing actions and accumulating points for these actions. To learn more about Gigya's Game Mechanics, refer to our Game Mechanics Guide.
The Challenge Status add-on is built of all the badges of the specified challenge with their titles, arranged horizontally. If the user has yet to unlock a level of the challenge, the level badge is displayed as grayed out:
When the users hover with their mouse over a badge, a tooltip popup window opens:
The tooltip popup displays:
- The title of the challenge level, i.e. Master
- The description of the challenge level as defined in the Challenge Settings page at Gigya's site
Logged Out State
For users who are not logged in, the add-on displays all challenge badges as grayed out:
Quick Start Implementation
Adding the Challenge Status add-on is simple, and involves only adding a few lines of code:
- Step 1: Define the section (div) where the Challenge Status add-on should be embedded
- Step 2: Define the Challenge Status add-on's parameters.
- Step 3: Call the gm.showChallengeStatusUI API to activate the Challenge Status add-on.
Add the following code snip to the of your page to activate the Challenge Status add-on:
Step 1: Define the Challenge Status add-on's div
Step 2: Define the Challenge Status add-on parameters
The Challenge Status add-on has one required parameter:
- containerID - the identifier of the DIV element, where the Challenge Status add-on should be embedded.
In addition there are a few optional parameters. Please refer to the method's parameters table for the entire list of optional parameters.
Step 3: Invoke the Challenge Status add-on
Call the gm.showChallengeStatusUI API method:
A Working Example
In the GM add-on demo you will find a complete working example of a web-page that uses all GM add-ons, including the Challenge Status add-on. You may view the code, run it and view the outcome.