Fixed for courses which have url_names with colons, e.g. problem:question1

What's this PR do?
It fixes display.js to escape colons in element ID's so they can be selected with jquery,
Previously jquery was throwing errors about unsupported pseudos, e.g.:

unrecognized expression: unsupported pseudo: pset1_1_2_1
How should this be manually tested?
create a course with column (:) in its problem id, and see console for any issue

Added tests

common/lib/xmodule/xmodule/js/spec/capa/display_spec.js

@@ -550,6 +550,41 @@ data-url='/problem/quiz/'> \
     });
   });
 
+  describe('show problem with column in id', function() {
+    beforeEach(function () {
+      this.problem = new Problem($('.xblock-student_view'));
+      this.problem.el.prepend('<div id="answer_1_1:11" /><div id="answer_1_2:12" />');
+    });
+
+    it('log the problem_show event', function() {
+      this.problem.show();
+      expect(Logger.log).toHaveBeenCalledWith('problem_show',
+          {problem: 'i4x://edX/101/problem/Problem1'});
+    });
+
+    it('fetch the answers', function() {
+      spyOn($, 'postWithPrefix');
+      this.problem.show();
+      expect($.postWithPrefix).toHaveBeenCalledWith('/problem/Problem1/problem_show',
+          jasmine.any(Function));
+    });
+
+    it('show the answers', function() {
+      spyOn($, 'postWithPrefix').and.callFake(
+        (url, callback) => callback({answers: {'1_1:11': 'One', '1_2:12': 'Two'}})
+      );
+      this.problem.show();
+      expect($("#answer_1_1\\:11")).toHaveHtml('One');
+      expect($("#answer_1_2\\:12")).toHaveHtml('Two');
+    });
+
+    it('disables the show answer button', function() {
+      spyOn($, 'postWithPrefix').and.callFake((url, callback) => callback({answers: {}}));
+      this.problem.show();
+      expect(this.problem.el.find('.show').attr('disabled')).toEqual('disabled');
+    });
+  });
+
   describe('show', function() {
     beforeEach(function() {
       this.problem = new Problem($('.xblock-student_view'));

common/lib/xmodule/xmodule/js/src/capa/display.js

@@ -710,9 +710,10 @@
                 var answers;
                 answers = response.answers;
                 $.each(answers, function(key, value) {
+                    var safeKey = key.replace(':', '\\:'); // fix for courses which use url_names with colons, e.g. problem:question1
                     var answer;
                     if (!$.isArray(value)) {
-                        answer = that.$('#answer_' + key + ', #solution_' + key);
+                        answer = that.$('#answer_' + safeKey + ', #solution_' + safeKey);
                         edx.HtmlUtils.setHtml(answer, edx.HtmlUtils.HTML(value));
                         Collapsible.setCollapsibles(answer);
 
@@ -1061,6 +1062,7 @@
                 var answer, choice, inputId, i, len, results, $element, $inputLabel, $inputStatus;
                 $element = $(element);
                 inputId = $element.attr('id').replace(/inputtype_/, '');
+                inputId = inputId.replace(':', '\\:'); // fix for courses which use url_names with colons, e.g. problem:question1
                 answer = answers[inputId];
                 results = [];
                 for (i = 0, len = answer.length; i < len; i++) {