• 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);

    }

    });

    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!