Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
stephanie_long
New Member

Badges

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?

Tags (1)
35 Replies

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

  });

  }

});

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!

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?

 @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");
  }
});
jward
Instructure
Instructure

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
Community Member

 @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.

mcarruth
Community Contributor

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

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
Community Contributor

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
Community Contributor

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

Martin Carruth

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