EDN Admin
Well-known member
The Visual Studio Achievements Widget So you are racking up points in http://channel9.msdn.com/Blogs/C9Team/Coming-Soon-Visual-Studio-Achievements 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 Karstens blog at http://rhizohm.net/irhetoric 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 :
<pre class="brush: html <script src="http://video.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk" id="ch9VSachievements" defer="defer </script>
[/code] http://files.channel9.msdn.com/thumbnail/e0691961-5a21-4a86-b9bb-6ad97d2296f8.png" rel="lightbox <img src="http://files.channel9.msdn.com/thumbnail/e0691961-5a21-4a86-b9bb-6ad97d2296f8.png" alt=" (scroll down for #widgetExamples more examples ) This script will execute onLoad of the containing HTML page, make a http://en.wikipedia.org/wiki/JSONP JSONP call to the http://channel9.msdn.com/Blogs/C9Team/Visual-Studio-Achievements-API 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 its results immediately after the script tag used to insert it into your page. Everything else is optional. <h2 id="widgetHowToCusomize 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 #widgetExamples 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 #widgetQueryStringParameters 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. ( #widgetCSS 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 #widgetHTML sample HTML as a guide. "displayId" If you dont want the script to place its results immediately after the script tag, you can specify the ID of an element where you would like the widget to place its 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 doesnt 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 #widgetExamples available parameters with a rough image of where the parameters are applied, followed by some #widgetExamples more examples of how the widget can be configured, the widgets #widgetCSS default CSS and a generic example of the #widgetHTML HTML it generates . <h2 id="widgetQueryStringParameters Query String Parameters <blockquote> "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 username is displayed as a link to the users Visual Studio Achievements page. The link has the class "ch9AchievementsTitleUser". Username is not displayed if "showMainTitle" is false. "showScore"
Defaults to true. If true, the users 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 users 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 </blockquote> <img src="http://files.channel9.msdn.com/thumbnail/2dc727f0-4d19-4a90-b16a-f2cb4fc4f5e7.png" alt=" <h2 id="widgetExamples More Examples Full :
<pre class="brush: html <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>
[/code] <img src="http://files.channel9.msdn.com/thumbnail/d99c1312-7cd7-4f36-aa16-dae2384fb3c8.png" alt=" Large Icons:
<pre class="brush: html <script src="http://video.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk&maxAchievements=5&iconSize=large" id="ch9VSachievements" defer="defer </script>
[/code] <img src="http://files.channel9.msdn.com/thumbnail/102601e3-d393-4059-b873-d4c89528a954.png" alt=" Small:
<pre class="brush: html <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>
[/code] <img src="http://files.channel9.msdn.com/thumbnail/af4f381e-f7a1-4f1c-9885-61f7dcdc3d6b.png" alt=" Mini :
<pre class="brush: html <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>
[/code] <img src="http://files.channel9.msdn.com/thumbnail/623118b9-f552-4f1c-9e13-8487c4bd1896.png" alt=" <h2 id="widgetCSS Default CSS <pre class="brush: 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;
}
[/code] <h2 id="widgetHTML Generated HTML <pre class="brush: html <div class="ch9Achievements
<h3 class="ch9AchievementsTitle
<a class="ch9AchievementsTitleLink http://channel9.msdn.com/achievements/visualstudio Visual Studio Achievements
for <a class="ch9AchievementsTitleUser http://channel9.msdn.com/niners/Username/achievements/visualstudio Username
</h3>
<p class="ch9AchievementsScore Current Score: XX
<p class="ch9AchievementsMainDescription Description
<div class="ch9UserAchievements ch9AchievementsEarned
<p class="ch9UserAchievementsHeading Completed
<ul class="ch9smallIcon (or ch9largeIcon)
<img src="http://files.ch9.ms/vsachievements/xxx.png
<p class="ch9AchievementTitle http://channel9.msdn.com/niners/Username/achievements/visualstudio/xxx Achievement Title
<p class="ch9AchievementPoints (XX points)
<p class="ch9AchievementDescription Achievement Description
<p class="ch9AchievementDateEarned MMM DD, YYY <span>at H:MM AM UTC-HH:MM
...
<p class="ch9AchievementMore http://channel9.msdn.com/niners/Username/achievements/visualstudio More...
<div class="ch9UserAchievements ch9AchievementsStarted
<p class="ch9UserAchievementsHeading Started
<ul class="ch9smallIcon (or ch9largeIcon)
<img src="http://files.ch9.ms/vsachievements/xxx.png
<p class="ch9AchievementTitle http://channel9.msdn.com/niners/Username/achievements/visualstudio/xxx Achievement Title
<p class="ch9AchievementPoints (XX points)
<p class="ch9AchievementDescription Achievement Description
...
<p class="ch9AchievementMore http://channel9.msdn.com/niners/Username/achievements/visualstudio More...
<div class="ch9UserAchievements ch9AchievementsNotStarted
<p class="ch9UserAchievementsHeading Not Started
<ul class="ch9smallIcon (or ch9largeIcon)
<img src="http://files.ch9.ms/vsachievements/xxx.png
<p class="ch9AchievementTitle http://channel9.msdn.com/niners/Username/achievements/visualstudio/xxx Achievement Title
<p class="ch9AchievementPoints (XX points)
<p class="ch9AchievementDescription Achievement Description
...
<p class="ch9AchievementMore http://channel9.msdn.com/niners/Username/achievements/visualstudio More...
[/code] <img src="http://m.webtrends.com/dcs1wotjh10000w0irc493s0e_6x1g/njs.gif?dcssip=channel9.msdn.com&dcsuri=http://channel9.msdn.com/Feeds/RSS&WT.dl=0&WT.entryid=Entry:RSSView:9a9a2d8208514622839c9fb8017da522
View the full article
<pre class="brush: html <script src="http://video.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk" id="ch9VSachievements" defer="defer </script>
[/code] http://files.channel9.msdn.com/thumbnail/e0691961-5a21-4a86-b9bb-6ad97d2296f8.png" rel="lightbox <img src="http://files.channel9.msdn.com/thumbnail/e0691961-5a21-4a86-b9bb-6ad97d2296f8.png" alt=" (scroll down for #widgetExamples more examples ) This script will execute onLoad of the containing HTML page, make a http://en.wikipedia.org/wiki/JSONP JSONP call to the http://channel9.msdn.com/Blogs/C9Team/Visual-Studio-Achievements-API 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 its results immediately after the script tag used to insert it into your page. Everything else is optional. <h2 id="widgetHowToCusomize 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 #widgetExamples 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 #widgetQueryStringParameters 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. ( #widgetCSS 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 #widgetHTML sample HTML as a guide. "displayId" If you dont want the script to place its results immediately after the script tag, you can specify the ID of an element where you would like the widget to place its 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 doesnt 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 #widgetExamples available parameters with a rough image of where the parameters are applied, followed by some #widgetExamples more examples of how the widget can be configured, the widgets #widgetCSS default CSS and a generic example of the #widgetHTML HTML it generates . <h2 id="widgetQueryStringParameters Query String Parameters <blockquote> "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 username is displayed as a link to the users Visual Studio Achievements page. The link has the class "ch9AchievementsTitleUser". Username is not displayed if "showMainTitle" is false. "showScore"
Defaults to true. If true, the users 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 users 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 </blockquote> <img src="http://files.channel9.msdn.com/thumbnail/2dc727f0-4d19-4a90-b16a-f2cb4fc4f5e7.png" alt=" <h2 id="widgetExamples More Examples Full :
<pre class="brush: html <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>
[/code] <img src="http://files.channel9.msdn.com/thumbnail/d99c1312-7cd7-4f36-aa16-dae2384fb3c8.png" alt=" Large Icons:
<pre class="brush: html <script src="http://video.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk&maxAchievements=5&iconSize=large" id="ch9VSachievements" defer="defer </script>
[/code] <img src="http://files.channel9.msdn.com/thumbnail/102601e3-d393-4059-b873-d4c89528a954.png" alt=" Small:
<pre class="brush: html <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>
[/code] <img src="http://files.channel9.msdn.com/thumbnail/af4f381e-f7a1-4f1c-9885-61f7dcdc3d6b.png" alt=" Mini :
<pre class="brush: html <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>
[/code] <img src="http://files.channel9.msdn.com/thumbnail/623118b9-f552-4f1c-9e13-8487c4bd1896.png" alt=" <h2 id="widgetCSS Default CSS <pre class="brush: 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;
}
[/code] <h2 id="widgetHTML Generated HTML <pre class="brush: html <div class="ch9Achievements
<h3 class="ch9AchievementsTitle
<a class="ch9AchievementsTitleLink http://channel9.msdn.com/achievements/visualstudio Visual Studio Achievements
for <a class="ch9AchievementsTitleUser http://channel9.msdn.com/niners/Username/achievements/visualstudio Username
</h3>
<p class="ch9AchievementsScore Current Score: XX
<p class="ch9AchievementsMainDescription Description
<div class="ch9UserAchievements ch9AchievementsEarned
<p class="ch9UserAchievementsHeading Completed
<ul class="ch9smallIcon (or ch9largeIcon)
<img src="http://files.ch9.ms/vsachievements/xxx.png
<p class="ch9AchievementTitle http://channel9.msdn.com/niners/Username/achievements/visualstudio/xxx Achievement Title
<p class="ch9AchievementPoints (XX points)
<p class="ch9AchievementDescription Achievement Description
<p class="ch9AchievementDateEarned MMM DD, YYY <span>at H:MM AM UTC-HH:MM
...
<p class="ch9AchievementMore http://channel9.msdn.com/niners/Username/achievements/visualstudio More...
<div class="ch9UserAchievements ch9AchievementsStarted
<p class="ch9UserAchievementsHeading Started
<ul class="ch9smallIcon (or ch9largeIcon)
<img src="http://files.ch9.ms/vsachievements/xxx.png
<p class="ch9AchievementTitle http://channel9.msdn.com/niners/Username/achievements/visualstudio/xxx Achievement Title
<p class="ch9AchievementPoints (XX points)
<p class="ch9AchievementDescription Achievement Description
...
<p class="ch9AchievementMore http://channel9.msdn.com/niners/Username/achievements/visualstudio More...
<div class="ch9UserAchievements ch9AchievementsNotStarted
<p class="ch9UserAchievementsHeading Not Started
<ul class="ch9smallIcon (or ch9largeIcon)
<img src="http://files.ch9.ms/vsachievements/xxx.png
<p class="ch9AchievementTitle http://channel9.msdn.com/niners/Username/achievements/visualstudio/xxx Achievement Title
<p class="ch9AchievementPoints (XX points)
<p class="ch9AchievementDescription Achievement Description
...
<p class="ch9AchievementMore http://channel9.msdn.com/niners/Username/achievements/visualstudio More...
[/code] <img src="http://m.webtrends.com/dcs1wotjh10000w0irc493s0e_6x1g/njs.gif?dcssip=channel9.msdn.com&dcsuri=http://channel9.msdn.com/Feeds/RSS&WT.dl=0&WT.entryid=Entry:RSSView:9a9a2d8208514622839c9fb8017da522
View the full article