Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Visual Studio Achievements Widget

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="http://video.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk" id="ch9VSachievements" defer="defer"></script>
 

(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 http://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

 

More Examples

Full:

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

Large Icons:

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

Small:

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

Mini:

<script src="http://video.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>
 

 

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="http://channel9.msdn.com/achievements/visualstudio">Visual Studio Achievements </a> 
        for&nbsp;<a class="ch9AchievementsTitleUser" href="http://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="http://files.ch9.ms/vsachievements/xxx.png">
                <p class="ch9AchievementTitle"><a href="http://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="http://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="http://files.ch9.ms/vsachievements/xxx.png">
                <p class="ch9AchievementTitle"><a href="http://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="http://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="http://files.ch9.ms/vsachievements/xxx.png">
                <p class="ch9AchievementTitle"><a href="http://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="http://channel9.msdn.com/niners/Username/achievements/visualstudio">More...</a></p>
            </li>
        </ul>
    </div>
</div>

Follow the Discussion

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.