Visual Studio Achievements Widget

Description

The Visual Studio Achievements Widget

So you are racking up points in Visual Studio Achievements. You should tell the world about it! Enter the Visual Studio Achievement Widget!

This widget is a small(<6k), simple and customizable javascript file that you can drop on your own page to give up-to-date status on your current state with Visual Studio Achievements.

Adding this widget to a blog is trivial. Most blog platforms (WordPress, BlogEngine.NET) have a free form HTML widget. Simply use that and add one of the script examples below to it. You can see an example of the widget live on Karsten's blog at http://rhizohm.net/irhetoric.

Here is an example of the default state of this widget and the code to get this on your page.

Default:

<script src="https://sec.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk" id="ch9VSachievements" defer="defer"></script>
 

Generic Episode Image

(scroll down for more examples)

This script will execute onLoad of the containing HTML page, make a JSONP call to the Visual Studio Achievements API to retrieve the current status of the user, and then generate and insert HTML into the parent document.

The only requirement is to give the widget a valid Channel 9 username that is registered with Visual Studio Achievements in the query string argument "user". The widget will by default draw it's results immediately after the script tag used to insert it into your page. Everything else is optional.

How to Customize

All of the customization for this script is done through the query string in the script embed tag or through CSS that you include on your page. Take a look at the examples to see this in action.

There are a number of options to control the information that is displayed by the widget. A complete list of these parameters is below. Most are pretty self-explanatory and can be figured out just by playing with them.  But here are a few key ones to pay attention to.

"defaultCSS"

The widget has a few CSS styles that will include by default. (Listed below). If you want, set this parameter to false and you can have complete control over the CSS. Note that all of the styles included by default are sand-boxed under the .ch9Achievements class. This is the class of the parent container that holds all of the generated HTML. This is to keep the default widget styles from wreaking havoc on the rest of your page. You can also use this class to add your own styles if you find you need a bit more tweaking to get the widget to look right on your page. Use the sample HTML as a guide.

"displayId"

If you don't want the script to place it's results immediately after the script tag, you can specify the ID of an element where you would like the widget to place it's results. This is handy if you like to have all of your script tags in the HEAD of your page.

"mainTitleHeadline"

The main headline is wrapped in an H3 tag. If this doesn't work for your page, you can change the tag to H1-H7, DIV or SPAN. Use whatever fits best with your page.

"showTimezoneOffest"

It can get a bit confusing talking about times on the internet. The time displayed is the time in the timezone of the user who earned the achievement, not the timezone of the person viewing the page. If this type of detail is important to you, you can toggle this on to prevent any confusion. 

"showCompleted", "showStarted", "showNotStarted"

Use these to toggle which group of achievements to show. By default, only completed achievements are displayed. You can control how many in each group with "maxAchievements"

Here is a complete reference of all available parameters with a rough image of where the parameters are applied, followed by some more examples of how the widget can be configured, the widget's default CSS and a generic example of the HTML it generates.

Query String Parameters

  • "user"
    This is the only *required* parameter. Must be a valid Channel 9 username that is registered in Visual Studio Achievements.

  • "defaultCSS"
    Defaults to true. If true, the default styles are added to the page.

  • "displayId"
    Defaults to null. Give the ID of a DOM element where the widget is to be displayed. If null, the widget is displayed immediately after the widget script in the DOM.

  • "showMainTitle"
    Defaults to true. If true, "Visual Studio Achievements" is displayed as a link to https://channel9.msdn.com/achievements/visualstudio. The link has the class "ch9AchievementsTitleLink". Username is not be displayed if "showMainTitle" is false. The text is wrapped in the tag specified by "mainTitleHeadline".

  • "mainTitleHeadline"
    Defaults to "h3". This is the type of tag that contains the main title, "Visual Studio Achievements". This can be "h1"-"h7", "span" or "div". The tag has the class "ch9AchievementsTitle".

  • "showUserName"
    Defaults to true. If true, the Channel 9 "Display Name" is displayed as a link to the user's Visual Studio Achievements page. If the "Display Name" does not exist, the username is used. The link has the class "ch9AchievementsTitleUser". Username is not displayed if "showMainTitle" is false.

  • "showScore"
    Defaults to true. If true, the user's score is displayed with the class "ch9AchievementsScore".

  • "showMainDescription"
    Defaults to false. If true, a description of the Visual Studio Achievements is displayed with the class "ch9AchievementsMainDescription".

  • "maxAchievements"
    Defaults to "all". This is the number of achievements to display in each completion group. This can be any integer, or "all",

  • "showMore"
    Defaults to true. If true, a 'More' link to the user's Visual Studio Achievements page is displayed inside a container with the class "ch9AchievementMore" if not all achievements in a completion group have been displayed.

  • "showDescription"
    Defaults to true. If true, the achievement description is displayed with the class "ch9AchievementDescription".

  • "showPoints"
    Default to true. If true, the achievement point value is displayed with the class "ch9AchievementPoints".

  • "showIcon"
    Defaults to true. If true, the achievement icon is displayed. Icon size (large/small) is specified by "iconSize".

  • "iconSize"
    Defaults to "small". If "large", a large icon (100x100) is displayed, otherwise a small icon (40x40) is displayed. This can be "small" or "large". "iconSize" has no effect unless "showIcon" is true.

  • "showDateEarned"
    Defaults to true. If true, the date an achievement is earned is displayed with the class "ch9AchievementDateEarned" in the format Dec 15, 2011 There is a date earned only for completed achievements.

  • "showTimeEarned"
    Defaults to true. If true, the time an achievement is earned is displayed in a span tag inside the "ch9AchievementDateEarned" p tag. Time earned is not displayed if "showDateEarned" is false.

  • "showTimezoneOffest"
    Defaults to false. If true, the timezone an achievement is earned is displayed in the time earned span tag inside the "ch9AchievementDateEarned" p tag. Timezone earned is not displayed if "showDateEarned" or "showTimeEarned" are false.

  • "showCompleted"
    Defaults to true. If true, achievements that have been earned will be displayed. The container will have the classes "ch9UserAchievements" and "ch9AchievementsEarned"

  • "showStarted"
    Defaults to false. If true, achievements that have been started will be displayed. The container will have the classes "ch9UserAchievements" and "ch9AchievementsStarted"

  • "showNotStarted"
    Defaults to false. If true, achievements that have been not been started will be displayed. The container will have the classes "ch9UserAchievements" and "ch9AchievementsNotStarted

Generic Episode Image

 

More Examples

Full:

<script src="https://sec.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk&showMainDescription=true&maxAchievements=2&showStarted=true&showNotStarted=true&showTimezoneOffest=true" id="ch9VSachievements" defer="defer"></script>
 

Generic Episode Image

Large Icons:

<script src="https://sec.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk&maxAchievements=5&iconSize=large" id="ch9VSachievements" defer="defer"></script>
 

Generic Episode Image

Small:

<script src="https://sec.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk&showPoints=false&showDescription=false&showTimeEarned=false&showMore=false" id="ch9VSachievements" defer="defer"></script>
 

Generic Episode Image

Mini:

<script src="https://sec.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk&showPoints=false&showDescription=false&showTimeEarned=false&showUserName=false&showScore=false&showIcon=false&showDateEarned=false&showMore=false" id="ch9VSachievements" defer="defer"></script>
 

Generic Episode Image

 

Default CSS

.ch9Achievements p {
    margin: 0px;
}

.ch9Achievements ul,
.ch9Achievements .ch9AchievementNone {
    list-style: none outside none;
    margin: 0px 5px;
    padding: 0px;
}

.ch9Achievements li {
    clear: both;
    margin-bottom: 15px;
    overflow: hidden;
    zoom: 1;
}

.ch9Achievements .ch9smallIcon img {
    float: left;
    max-width: 40px;
}

.ch9Achievements .ch9smallIcon p {
    padding-left: 45px;
}

.ch9Achievements .ch9largeIcon img {
    float: left;
    max-width: 100px;
}

.ch9Achievements .ch9largeIcon p {
    padding-left: 105px;
}

.ch9Achievements .ch9UserAchievementsHeading {
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 15px;
}

.ch9Achievements .ch9AchievementTitle {
    font-weight: bold;
}

.ch9Achievements .ch9AchievementDateEarned span {
    white-space: nowrap;
}

 

Generated HTML

<div class="ch9Achievements">
    <h3 class="ch9AchievementsTitle">
        <a class="ch9AchievementsTitleLink" href="https://channel9.msdn.com/achievements/visualstudio">Visual Studio Achievements </a> 
        for&nbsp;<a class="ch9AchievementsTitleUser" href="https://channel9.msdn.com/niners/Username/achievements/visualstudio">Username</a>
    </h3>
    <p class="ch9AchievementsScore">Current Score: XX</p>
    <p class="ch9AchievementsMainDescription">Description</p>
    <div class="ch9UserAchievements ch9AchievementsEarned">
        <p class="ch9UserAchievementsHeading">Completed</p>
        <ul class="ch9smallIcon (or ch9largeIcon)">
            <li>
                <img src="https://files.ch9.ms/vsachievements/xxx.png">
                <p class="ch9AchievementTitle"><a href="https://channel9.msdn.com/niners/Username/achievements/visualstudio/xxx">Achievement Title</a></p>
                <p class="ch9AchievementPoints">(XX points)</p>
                <p class="ch9AchievementDescription">Achievement Description</p>
                <p class="ch9AchievementDateEarned">MMM&nbsp;DD,&nbsp;YYY <span>at H:MM&nbsp;AM UTC-HH:MM</span></p>
            </li>
            ...
            <li>
                <p class="ch9AchievementMore"><a href="https://channel9.msdn.com/niners/Username/achievements/visualstudio">More...</a></p>
            </li>
        </ul>
    </div>
    <div class="ch9UserAchievements ch9AchievementsStarted">
        <p class="ch9UserAchievementsHeading">Started</p>
        <ul class="ch9smallIcon (or ch9largeIcon)">
            <li>
                <img src="https://files.ch9.ms/vsachievements/xxx.png">
                <p class="ch9AchievementTitle"><a href="https://channel9.msdn.com/niners/Username/achievements/visualstudio/xxx">Achievement Title</a></p>
                <p class="ch9AchievementPoints">(XX points)</p>
                <p class="ch9AchievementDescription">Achievement Description</p>
            </li>
            ...
            <li>
                <p class="ch9AchievementMore"><a href="https://channel9.msdn.com/niners/Username/achievements/visualstudio">More...</a></p>
            </li>
        </ul>
    </div>
    <div class="ch9UserAchievements ch9AchievementsNotStarted">
        <p class="ch9UserAchievementsHeading">Not Started</p>
        <ul class="ch9smallIcon (or ch9largeIcon)">
            <li>
                <img src="https://files.ch9.ms/vsachievements/xxx.png">
                <p class="ch9AchievementTitle"><a href="https://channel9.msdn.com/niners/Username/achievements/visualstudio/xxx">Achievement Title</a></p>
                <p class="ch9AchievementPoints">(XX points)</p>
                <p class="ch9AchievementDescription">Achievement Description</p>
            </li>
            ...
            <li>
                <p class="ch9AchievementMore"><a href="https://channel9.msdn.com/niners/Username/achievements/visualstudio">More...</a></p>
            </li>
        </ul>
    </div>
</div>

The Discussion

  • User profile image
    Fabulous_​Fadz

    OK, now I'm probably doing something very silly or getting an obvious thing wrong. My blog is on community server, and when I adding this script I get nothing. Anyone here use community server who got this to work? 

    Only other problem I've had on community server was the follow button for my twitter account. It didn't show up as desired, I just left it there since it works but it's text based and not the button that I wanted.

  • User profile image
    Geoffreyk

    Do you have a url that I can look at?

  • User profile image
    Fabulous_​Fadz

    Will put it back, had removed the script.

    Edited to put the link

    http://bloggingabout.net/blogs/fadzai

    Under the header VS Achievements

  • User profile image
    Geoffreyk

    sorry, looks like your community server is just not rendering anything.

    How do you go about adding external scripts? I am sure this is the same problem that you encountered with the tweet button script.

    You might want to try their forums for help. They seem to be responsive.

    http://telligent.com/support/communityserver/

  • User profile image
    Fabulous_​Fadz

    They provide a section you can add widgets of all sorts, some specific to community server, and others are generic or external.

    The best place for this was the generic widget but I noticed it swallows the Javascript. I've tried all combinations, including putting it inside an iframe, div, paragraph etc. with the same results, anything I place in that can be rendered is rendered, but the javascript disappears.

    Will try the forums for assistance. Thanks for your time. Smiley

  • User profile image
    karstenj

    If you are using this widget, please let us know! We'd love to highlight implementations out on the web...

  • User profile image
    Mike

    Also have a look at RedCritter Tracker it adds badges, leaderboards and a company rewards store to project management - specifically Agile projects. It doesn't require Visual Studio.
    http://www.redcrittertracker.com

  • User profile image
    askhan

    My username is not being displayed. Even setting parameter showUserName to true doesn't do anything.

    My link:

    https://sec.ch9.ms/widgets/VSachievements.min.js?user=askhan&showStarted=true&showUserName=true&defaultCSS=false

    and my blog is http://www.dotnetbase.co.uk/.

    Thanks,
    Samad Khan (askhan)

  • User profile image
    askhan

    Ok, to display your username (using showUserName parameter) you need to edit your c9 profile and enter your 'Display Name'.

    Hope that helps.

    Enjoy,
    Samad Khan

  • User profile image
    Geoffreyk

    , askhan wrote

    Ok, to display your username (using showUserName parameter) you need to edit your c9 profile and enter your 'Display Name'.

    Hope that helps.

    Enjoy,
    Samad Khan

     

    Fail == me.

    I didn't take into account users with no "Display Name" set in their profile. I have updated the widget and it will work it's way out through the caches.

    You don't have to do anything differently. Everything works the same way. I just added a bit of logic to display your username if you don't have Display Name set.

    I am going to edit the text above to indicate this as well.

     

    Thanks for catching this

    -Geoff

  • User profile image
    warnov

    Have you noticed that the widget stopped working. Not even in the sample blog (http://rhizohm.net/irhetoric) they are appearing. Are you going to solve this?

  • User profile image
    Geoffreyk

    Yep, we were having some domain problems for the last day or so.

    It should be working now, and we are looking at ways to make sure this doesn't happen again.

  • User profile image
    chendeshen

    cool enough!!!

  • User profile image
    askhan

    Hi,

    I have unlocked achievements 'BRAVE NEW WORLD' and 'Keep Heading Into The Cloud' but it is not updating on-line.

    I have vsachievements installed on five dev pcs (work and home - all mine!).

    • Windows 7 – vs2010
    • Windows Server 2003 R2 – vs2010
    • Windows Server 2008 R2 – vs2010 (X2)
    • Windows 8 – vs2012 (Hyper-V vm)

    Thanks,
    Samad

  • User profile image
    Geoffreyk

    @askhan:

    I am seeing these in your achievements profile. Are they not updating in a widget somewhere? If so, what is the url?

     

  • User profile image
    askhan

    Hi @Geoffreyk,

    I had Windows 8 and VS2012 RC was in a hyper-v vm. This got me thinking, so I rebuilt a laptop with Windows 8 and VS2012 RC just to test see if it would unlock this achievement. It worked!

    Enjoy,
    Samad

    Ps

    I can see why you awarded this 10 points!

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.