Was this article helpful?

Challenge Status

Last modified 05:33, 13 May 2014

 

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

gm_challengeStatus_loggedin.gif

 

Tooltip Popup

When the users hover with their mouse over a badge, a tooltip popup window opens:

gm_challengeStatus_tooltip.gif

 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:

 gm_challengeStatus_loggedout.gif

 

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.
     

 

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.

Was this article helpful?
Pages that link here
Page statistics
2308 view(s) and 4 edit(s)
Social share
Share this page?

Tags

This page has no custom tags.
This page has no classifications.

Comments

You must to post a comment.

Attachments