Share Pluralsight IQ Badges on your Blog

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

/* proxy.php */
$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).

function fetchPluralSightIQ(pluralSightDiv) {

$.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!

Leave a Reply

Your email address will not be published. Required fields are marked *