Add a field in Studio for the component's display name.

oppia/oppia.py

@@ -33,16 +33,10 @@ class OppiaXBlock(XBlock):
     _EVENT_NAME_EXPLORATION_COMPLETED = 'oppia.exploration.completed'
     _EVENT_NAME_STATE_TRANSITION = 'oppia.exploration.state.changed'
 
-    # The display name of the component. Note that this is not editable in
-    # Studio.
     display_name = String(
         help="Display name of the component",
         default="Oppia Exploration",
-        scope=Scope.settings)
-
-    # Note: These fields are defined on the class, and can be accessed in the
-    # code as self.<fieldname>.
-
+        scope=Scope.content)
     oppiaid = String(
         help="ID of the Oppia exploration to embed",
         default="4",
@@ -117,7 +111,7 @@ class OppiaXBlock(XBlock):
             __name__, "static/html/oppia_edit.html")
         oppiaid = self.oppiaid or ''
         frag = Fragment(unicode(html_str).format(
-            oppiaid=oppiaid, src=self.src))
+            oppiaid=oppiaid, src=self.src, display_name=self.display_name))
 
         js_str = pkg_resources.resource_string(
             __name__, "static/js/oppia_edit.js")
@@ -133,6 +127,7 @@ class OppiaXBlock(XBlock):
         """
         self.oppiaid = data.get('oppiaid')
         self.src = data.get('src')
+        self.display_name = data.get('display_name')
 
         return {'result': 'success'}
 

oppia/static/html/oppia_edit.html

@@ -2,14 +2,21 @@
   <ul class="list-input settings-list">
     <li class="field comp-setting-entry is-set">
       <div class="wrapper-comp-setting">
-        <label class="label setting-label" for="oppiaid">Oppia exploration ID</label>
+        <label class="label setting-label" for="display_name">Component Display Name</label>
+        <input class="input setting-input" name="display_name" id="display_name" value="{display_name}" type="text" />
+      </div>
+      <span class="tip setting-help">The name students see. This name appears in the course ribbon and as a header for the Oppia exploration.</span>
+    </li>
+    <li class="field comp-setting-entry is-set">
+      <div class="wrapper-comp-setting">
+        <label class="label setting-label" for="oppiaid">Oppia Exploration ID</label>
         <input class="input setting-input" name="oppiaid" id="oppiaid" value="{oppiaid}" type="text" />
       </div>
       <span class="tip setting-help">Example: a4j3jdj21tvv</span>
     </li>
     <li class="field comp-setting-entry is-set">
       <div class="wrapper-comp-setting">
-        <label class="label setting-label" for="src">Oppia server URL</label>
+        <label class="label setting-label" for="src">Oppia Server URL</label>
         <input class="input setting-input" name="src" id="src" value="{src}" type="text" />
       </div>
       <span class="tip setting-help">Example: https://www.oppia.org</span>

oppia/static/js/oppia_edit.js

@@ -21,7 +21,8 @@ function OppiaXBlockEditor(runtime, element) {
     var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
     var data = {
       oppiaid: $(element).find('input[name=oppiaid]').val(),
-      src: $(element).find('input[name=src]').val()
+      src: $(element).find('input[name=src]').val(),
+      display_name: $(element).find('input[name=display_name]').val()
     };
     runtime.notify('save', {state: 'start'});
     $.post(handlerUrl, JSON.stringify(data)).done(function(response) {