[ARCHIVED] Badges

[stephanie_long]

I am wanting to add Badges for anyone that completes a course successfully. I would like the badges to stay in the student profile till they graduate. Has anyone worked with something like this?

[KristinL]

It would also be nice if badges for specific tasks could stick with students within an organization. That way, as students move through a series of courses, teachers can see a "mini resume" of sorts...and have baseline information about students' skill sets.

[judyk]

We have recently been exploring the usage of badges for our faculty. I am curious, if we implement the #canvasbadges LTI and start using it to provide faculty with badges, will the students see these badges when they click on their profiles? I hope the answer is yes, as this would provide a great deal of incentive from our faculty to complete various aspects of our online training.

[kona]

 @judyk ​, yes, you can totally do this, but it requires a some custom javascript.  @John_Lowe ​ provided the information and code further up in this discussion.

[judyk]

 @kona ​ This is great news. Thank you for answering! I'll talk to our LMS admin and see what we can do.

[kona]

I know that using Canvabadges you can configure it so badges stay in student's profiles and "stick" within the organization, but the best person to speak on this topic would probably be  @jward ​ who teaches the free online Badges for Learning course.

[John_Lowe]

We have installed the Canvabadges system in our environment.  The badges are persistent and stay with the user in several ways.  The badge is actually stored in the Canvabadges system since they are the badge provider.  Then we also display all the badges on each user's profile.  Finally, badges can be also be stored in the Mozilla Backpack.

[mcarruth]

How do you get badges to export to Mozilla backpack.  Our users are getting the error message "We have encountered the following problem: Could not get all linked resources" when they try to export to the Mozilla backpack

[jward]

mcarruth​ Where did you build your badge image? If you use an external tool to build the badge, you need to import it into the badge designer in Canvabadges as the background image (no need to do any of the other deign tools.) Since a badge in Mozilla backpack needs all of the metadata on the badge, image, issuer, requirements, etc. the custom designs don't always work. But if you use the badge designer, they work great. And, again, you just have to do that one step and you are done.

I hope that helps.

Jared.

[mcarruth]

The issue is most likely the location of my server. Https://academic.ecpi.net is nor accessible from the Internet. That us probably the reason th e badge works on campus in Canvas, but will not export the image. I will get back to you when I move v the image to a server that is accessible from the Internet

Martin Carruth

Sent via the Samsung Galaxy Note® 3, an AT&T 4G LTE smartphone

[mcarruth]

Outstanding, thus was the info that I need. Thanks.

Martin Carruth

Sent via the Samsung Galaxy Note® 3, an AT&T 4G LTE smartphone

[mcarruth]

Resolution, the HTTPS server that hosted the badge image files was not accessible from the Internet.  Solution --> Moved image files to an HTTPS server that was accessible from the Internet

[lbofill]

Hi Stephanie,

We set up Canvabadges, as well. We've used them in compliance courses mostly (HIPAA, FERPA), but faculty have recently expressed an interest in using them for their courses.

The badges do stay on students profiles (see image).

It's a pretty cool tool. It lets you create your own badges, add text and images, and set requirements for accessing them via the modules.

HTH

[John_Lowe]

Your badges are so much more academic than my badges.  I think I have a Charlie Sheen "Winning" and an "Excellent" evil raccoon badge. 

[lbofill]

hmmm...I may have to steal your Charlie Sheen badge idea!

[jared_flaherty]

HI Leslie!    The badges section is great... did you create that with CSS?    Is this the view from any user that clicks on your profile, or just your own view?

Thanks!

Jared

[stephanie_long]

I wonder if any of you would be available to help me figure out what step we are missing. We have typed in our key and secret code, so Canvabadges is listed as an app. But, when we go to add a badge in a module we do not have that option. 

[lbofill]

Stephanie,

There's a step that requires some JS code and adding a global javascript URL via the account settings page. Have you done that?

[John_Lowe]

When you try to add an External Tool to a module, do you see Canvabadges listed in that window at all?  If not, then it sounds like the app configuration may not be correct. I'd recommend deleting the app and recreating the app making sure that the XML is copy/pasted exactly as required.

[stephanie_long]

Wow! All of the sudden I am able to create a badge. Now, I need to figure out to keep it with the students profile. I will look at our discussions. Thank you all!

[lbofill]

Here is the code in case you don't have it:

----------------------------------------------------------------------------

$(function() {

  // NOTE: if pasting this code into another script, you'll need to manually change the

  // next line. Instead of assigning the value null, you need to assign the value of

  // the Canvabadges domain, i.e. "https://canvabadges.herokuapp.com". If you have a custom

  // domain configured then it'll be something like "https://canvabadges.herokuapp.com/_my_site"

  // instead.

  var protocol_and_host = "https://www.canvabadges.org";

  var $scripts = $("script");

  $("script").each(function() {

  var src = $(this).attr('src');

  if(src && src.match(/canvas_profile_badges/)) {

  var splits = src.split(/\//);

  protocol_and_host = splits[0] + "//" + splits[2];

  }

  var prefix = src && src.match(/\?path_prefix=\/(\w+)/);

  if(prefix && prefix[1]) {

  protocol_and_host = protocol_and_host + "/" + prefix[1];

  }

  });

  if(!protocol_and_host) {

  console.log("Couldn't find a valid protocol and host. Canvabadges will not appear on profile pages until this is fixed.");

  }

  var match = location.href.match(/\/(users|about)\/(\d+)$/);

  if(match && protocol_and_host) {

  var user_id = match[2];

  var domain = location.host;

  var url = protocol_and_host + "/api/v1/badges/public/" + user_id + "/" + encodeURIComponent(domain) + ".json";

  $.ajax({

  type: 'GET',

  dataType: 'jsonp',

  url: url,

  success: function(data) {

  if(data.objects && data.objects.length > 0) {

  var $box = $("<div/>");

  $box.append("<h2 class='border border-b'>Badges</h2>");

  for(idx in data.objects) {

  var badge = data.objects[idx];

  var $badge = $("<div/>", {style: 'float: left;'});

  var link = protocol_and_host + "/badges/criteria/" + badge.config_id + "/" + badge.config_nonce + "?user=" + badge.nonce;

  var $a = $("<a/>", {href: link});

  $a.append($("<img/>", {src: badge.image_url, style: 'width: 72px; height: 72px; padding-right: 10px;'}));

  $badge.append($a);

  $box.append($badge);

  }

  $box.append($("<div/>", {style: 'clear: left'}));

  $("#edit_profile_form,fieldset#courses,.more_user_information + div").after($box);

  }

  },

  error: function() {

  console.log("badges failed to load");

  },

  timeout: 5000

  });

  }

});

[stephanie_long]

I am able to create a badge, assign it to user, go to the profile and click on "show on profile". When I go to that users profile, there is no section that shows badges. Any ideas?

[John_Lowe]

 @stephanie_long ​, to add it to your profile, you need to include the Canvabadges Javascript.  If you don't already have a custom JS file in use in your Canvas environment, then just paste this URL (https://www.canvabadges.org/canvas_profile_badges.js) into the Custom JavaScript box in your settings.  If you do have a custom JS already being used, then just add the following to that existing JavaScript file:

$(function() {
  console.log("CANVABADGES: Loaded!");
  // NOTE: if pasting this code into another script, you'll need to manually change the
  // next line. Instead of assigning the value null, you need to assign the value of
  // the Canvabadges domain, i.e. "https://www.canvabadges.org". If you have a custom
  // domain configured then it'll be something like "https://www.canvabadges.org/_my_site"
  // instead.
  var protocol_and_host = "https://www.canvabadges.org";
  if(!protocol_and_host) {
    var $scripts = $("script");
    $("script").each(function() {
      var src = $(this).attr('src');
      if(src && src.match(/canvas_profile_badges/)) {
        var splits = src.split(/\//);
        protocol_and_host = splits[0] + "//" + splits[2];
      }
      var prefix = src && src.match(/\?path_prefix=\/(\w+)/);
      if(prefix && prefix[1]) {
        protocol_and_host = protocol_and_host + "/" + prefix[1];
      }
    });
  }
  if(!protocol_and_host) {
    console.log("CANVABADGES: Couldn't find a valid protocol and host. Canvabadges will not appear on profile pages until this is fixed.");
  }
  var match = location.href.match(/\/(users|about)\/(\d+)$/);
  if(match && protocol_and_host) {
    console.log("CANVABADGES: This page shows badges! Loading...");
    var user_id = match[2];
    var domain = location.host;
    var url = protocol_and_host + "/api/v1/badges/public/" + user_id + "/" + encodeURIComponent(domain) + ".json";
    $.ajax({
      type: 'GET',
      dataType: 'jsonp',
      url: url,
      success: function(data) {
        console.log("CANVABADGES: Data retrieved!");
        if(data.objects && data.objects.length > 0) {
          console.log("CANVABADGES: Badges found! Adding to the page...");
          var $box = $("<div/>", {style: 'margin-bottom: 20px;'});
          $box.append("<h2 class='border border-b'>Badges</h2>");
          for(idx in data.objects) {
            var badge = data.objects[idx];
            var $badge = $("<div/>", {style: 'float: left;'});
            var link = protocol_and_host + "/badges/criteria/" + badge.config_id + "/" + badge.config_nonce + "?user=" + badge.nonce;
            var $a = $("<a/>", {href: link});
            $a.append($("<img/>", {src: badge.image_url, style: 'width: 72px; height: 72px; padding-right: 10px;'}));
            $badge.append($a);
            $box.append($badge);
          }
          $box.append($("<div/>", {style: 'clear: left'}));
          $("#edit_profile_form,fieldset#courses,.more_user_information + div").after($box);
        } else {
          console.log("CANVABADGES: No badges found for the user: " + user_id + " at " + domain);
        }
      },
      error: function(err) {
        console.log("CANVABADGES: Badges failed to load, API error response");
        console.log(err);
      },
      timeout: 5000
    });
  } else {
    console.log("CANVABADGES: This page doesn't show badges");
  }
});

[Chris_Hofer]

I think I'm confused.  What is the JavaScript code actually doing?  In our "Test" environment of Canvas, I added the CanvaBadges app (obtaining a Shared Secret and Consumer Key via Twitter).  I added a badge to a module in my sandbox course, and then I issued the badge to one of the dummy "student" accounts I have in that sandbox course.  From the dummy "student" role, I went to that badge item in the module and was able to select "show this badge on my Canvas profile" as shown in this screen shot.  Our global JavaScript file doesn't have any of the above code, and I can go to this dummy "student's" profile and click on "My Badges" to see the issued badge.  Is there other functionality this JavaScript code is bringing in?

[John_Lowe]

What the global JS does is display the badges on the user's profile page itself.  For example, if anyone clicks on my profile page, they will see my badges listed there without having to go anywhere else to see them.

[Chris_Hofer]

ok...so by NOT adding the JS, then users can only see their own badges in their own profile?

[John_Lowe]

By not adding the JS, badges don't show on their profiles at all.  Instead, users visit their profiles and click on the LTI link for My Badges that takes them out to Canvabadges directly and you view them there.

John

[Chris_Hofer]

I see...that makes sense.  Thanks for the clarification,  @John_Lowe ​!

[jared_flaherty]

Heylo Everbody...

Yeah, so... we've added the custom JS and we can't these stinkin' badges to display for other users to see...    do we have to add any CSS?

[John_Lowe]

No CSS changes needed.  Just to confirm, you do have user profile pages visible on your account?  Ours was off by default until we asked our CSM to enable user profiles. 

[jared_flaherty]

yep... we have the user profiles enabled.     this has been a (very) long, ongoing issue with us.    we launch this fall and have had 5-600 faculty earn canvas training badges and we really don't want them to keep their trophies hidden.

[jward]

Lots of great questions and answers here. What if badges were a native integration in Canvas product? If you love that idea as much as I do, make sure you vote for this idea in the next round of feature voting here in this awesome new community:

[mpoole]

 @jward ​ I took your Badges course the other night and it was GREAT.  So helpful.  I was hesitant to use them with my 11th grade; I thought they would think 11th grade is too old and cool for badges .  So this morning I mention to my class that I had learned about badges and immediately they were all clamoring for badges.  So THANKS for the incredibly helpful resource.

[873179959]

The one thing I am concerned about with Canvabadges is that they can be stored in the Mozilla Backpack, and you can't seem to limit that.  If I create a badge simply to track progress through the course, it seems that students can display that in places like their LinkedIn profile.  I don't want a student completing one module on Javascript in our Website Design and Management course, and then display a DU "Javascript" badge, which looks like an official certification from our institution.

Does anyone have any thoughts on how to manage that? Am I missing something about badging, and that concern is unfounded?

 @John_Lowe ​,  @kona ​ maybe you could help?  Also, is Brain Whitmer not in the community?

[kona]

873179959, I'm honestly not sure. I'm going to pull in  @jward ​ on this to see if he can help.

[raccoon]

how dare you raccoons are not evil