I really love the courses and quizzes on Pluralsight. It has really helped me fill in gaps in my programming knowledge, and lets me see where my weaknesses are.
However, I was frustrated that the only “share” options are to Tweet and post to LinkedIn a new skill IQ score. So I decided to write a few lines of code to create my own live Pluralsight IQ badges on my web page.
I started by going to my Pluralsight Profile page, and opening the debugger. By doing this, I discovered that every user has a unique GUID, and this is called with https://app.pluralsight.com/profile/data/skillmeasurements/ plus your GUID. Look in the Network tab to find your unique code.
Now, this code is not directly attainable via javascript, so I found a simple backend PHP script here (thanks to the authors):
$url = “https://app.pluralsight.com/profile/data/skillmeasurements/YOURUNIQUEGUID”;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec ($ch);
curl_close ($ch);
echo $result;
I saved this to my server, then put a blank div in my blog footer:
<div id="plural-sight-div" style="display: flex; flex-direction: row; padding: 5px; flex-wrap: wrap;"></div>
And finally, I wrote a simple javascript script to fill the div! (Note, I know I could move a lot of the styling to css, just was lazy today).
$.getJSON(“proxy.php”, function(json) {
for (var i = 0; i < json.length; i++) {
var badge = json[i];
var badgeDiv = document.createElement(‘a’);
pluralSightDiv.appendChild(badgeDiv);
badgeDiv.style.flex = ‘1 1 auto’;
badgeDiv.style.backgroundColor = ‘#262626’;
badgeDiv.style.color = ‘white’;
badgeDiv.style.margin = ‘5px’;
badgeDiv.style.textAlign = ‘center’;
badgeDiv.style.display = ‘flex’;
badgeDiv.style.flexDirection = ‘column’;
badgeDiv.style.padding = ’10px’;
badgeDiv.href = ‘https://pluralsight.com’ + badge[‘url’];
badgeDiv.style.fontSize = ’13px’;
var img = document.createElement(‘img’);
badgeDiv.appendChild(img);
img.src = badge[‘thumbnailUrl’];
img.style.width = ‘100px’;
img.style.margin = ‘auto’;
var badgeTitle = document.createElement(‘label’);
badgeDiv.appendChild(badgeTitle);
badgeTitle.innerText = badge[‘title’];
badgeTitle.style.color = ‘lightgray’;
badgeTitle.style.marginBottom = ’10px’;
badgeTitle.style.fontSize = ’20px’;
var level = document.createElement(‘label’);
badgeDiv.appendChild(level);
var rank = badge[‘level’];
if (rank === ‘Expert’) {
level.style.color = ‘lightblue’;
} else {
level.style.color = ‘lightgreen’;
}
level.style.fontWeight = ‘bold’;
level.innerText = ‘Q ‘ + rank.toUpperCase() + ‘ ‘ + badge[‘score’];
var percentile = document.createElement(‘label’);
badgeDiv.appendChild(percentile);
var pct = Math.round(badge[‘percentile’]);
var pctWithSuffix = ordinal_suffix_of(pct);
percentile.innerText = pctWithSuffix + ‘ percentile’;
percentile.style.marginBottom = ’10px’;
var verified = document.createElement(‘label’);
badgeDiv.appendChild(verified);
var vDate = new Date(badge[‘dateCompleted’]);
verified.innerText = ‘VERIFIED ‘ + vDate.getMonth() + ‘.’ +
vDate.getDate() + ‘.’ + vDate.getYear();
}
});
}
document.addEventListener(‘DOMContentLoaded’,function() {
var pluralSightDiv = document.getElementById(‘plural-sight-div’);
if (pluralSightDiv !== undefined) {
fetchPluralSightIQ(pluralSightDiv);</p
}
});
function ordinal_suffix_of(i) {
var j = i % 10,
k = i % 100;
if (j == 1 && k != 11) {
return i + “st”;
}
if (j == 2 && k != 12) {
return i + “nd”;
}
if (j == 3 && k != 13) {
return i + “rd”;
}
return i + “th”;
}
Hopefully, Pluralsight will either leave this JSON available and/or create their own badge code. Until then, enjoy!