Table of contents
Introduction
The Game Mechanics (GM) Challenge Status plugin 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 plugin 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:
Tooltip Popup
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 plugin displays all challenge badges as grayed out:
Quick Start Implementation
Implementation Overview
Adding the Challenge Status plugin is simple, and involves only adding a few lines of code:
- Step 1: Define the section (div) where the Challenge Status plugin should be embedded
- Step 2: Define the Challenge Status plugin's parameters.
- Step 3: Call the gm.showChallengeStatusUI API to activate the Challenge Status plugin.
Code Example
Add the following code snip to the <body> of your page to activate the Challenge Status plugin:
<div id="divChallengeStatus"></div>
<script>
var challengeStatusParams = {
containerID: 'divChallengeStatus'
}
gigya.gm.showChallengeStatusUI(challengeStatusParams);
</script>
Code Explanation
Step 1: Define the Challenge Status plugin's div
<div id="divChallengeStatus"></div>
Step 2: Define the Challenge Status plugin parameters
var challengeStatusParams = {
containerID: 'divChallengeStatus',
}
The Challenge Status plugin has one required parameter:
- containerID - the identifier of the DIV element, where the Challenge Status plugin 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 plugin
Call the gm.showChallengeStatusUI API method:
gigya.gm.showChallengeStatusUI(achievementsParams);
Like every Gigya API method, the gm.showChallengeStatusUI API method receives one parameter - parameters object, which is the object we have defined in Step 2 (learn more about Gigya's basics here).
A Working Example
In the GM Plugins demo you will find a complete working example of a web-page that uses all GM plugins, including the Challenge Status plugin. You may view the code, run it and view the outcome.
Comments