Challenge Status

Skip to end of metadata
Go to start of metadata

Note: Game Mechanics is a premium platform that requires separate activation. If Game Mechanics is not part of your site package please contact your Gigya account manager or contact us by filling in a support form on our site. You can also access the support page by clicking "Support" on the upper menu of Gigya's site.

 

Introduction

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:

 

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 add-on displays all challenge badges as grayed out:

 

 

Quick Start Implementation

Implementation Overview

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.
     

 

Code Example

Add the following code snip to the of your page to activate the Challenge Status add-on:

<div id="divChallengeStatus"></div>



<script>

    var challengeStatusParams = {

        containerID: 'divChallengeStatus'

    }

    gigya.gm.showChallengeStatusUI(challengeStatusParams); 

</script>

 

Code Explanation

Step 1: Define the Challenge Status add-on's div

<div id="divChallengeStatus"></div>

 

Step 2: Define the Challenge Status add-on parameters

var challengeStatusParams = {

        containerID: 'divChallengeStatus',

}

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:

 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 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.