Add display_name field and author_view method; remove width/height fields; add…

Add display_name field and author_view method; remove width/height fields; add event tracking; include a local copy of the embedding script with an appropriate title for the iframe.

.gitignore

+*.pyc
+oppia_xblock.egg-info/*

oppia/oppia.py

@@ -18,6 +18,8 @@
 
 import pkg_resources
 
+from eventtracking import tracker
+
 from xblock.core import XBlock
 from xblock.fields import Scope, Integer, String
 from xblock.fragment import Fragment
@@ -27,26 +29,28 @@ class OppiaXBlock(XBlock):
     """
     An XBlock providing an embedded Oppia exploration.
     """
+    _EVENT_NAME_EXPLORATION_LOADED = 'oppia.exploration.loaded'
+    _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>.
 
     oppiaid = String(
         help="ID of the Oppia exploration to embed",
-        default=None,
+        default="4",
         scope=Scope.content)
     src = String(
         help="Source URL of the site",
         default="https://www.oppia.org",
         scope=Scope.content)
-    width = Integer(
-        help="Width of the embedded exploration",
-        default=700,
-        scope=Scope.content)
-    height = Integer(
-        help="Height of the embedded exploration",
-        default=500,
-        scope=Scope.content)
 
     def resource_string(self, path):
         """Handy helper for getting resources from our kit."""
@@ -60,35 +64,50 @@ class OppiaXBlock(XBlock):
         """
         html = self.resource_string("static/html/oppia.html")
         frag = Fragment(html.format(self=self))
-        frag.add_javascript_url(
-            "//cdn.jsdelivr.net/oppia/0.0.1/oppia-player.min.js")
+        frag.add_javascript(
+            self.resource_string('static/lib/oppia-player-0.0.1-modified.js'))
         frag.add_javascript(self.resource_string("static/js/oppia.js"))
         frag.initialize_js('OppiaXBlock')
         return frag
 
-    def _log(self, message):
+    def author_view(self, context=None):
+        """
+        A view of the XBlock to show within the Studio preview. For some
+        reason, the student_view() does not display, so we show a placeholder
+        instead.
+        """
+        html = self.resource_string("static/html/oppia_preview.html")
+        frag = Fragment(html.format(self=self))
+        return frag
+
+    def _log(self, event_name, payload):
         """
         Logger for load, state transition and completion events.
         """
-        pass
+        tracker.emit(event_name, payload)
 
     @XBlock.json_handler
     def on_exploration_loaded(self, data, suffix=''):
         """Called when an exploration has loaded."""
-        self._log('Exploration %s was loaded.' % self.oppiaid)
+        self._log(self._EVENT_NAME_EXPLORATION_LOADED, {
+            'exploration_id': self.oppiaid,
+        })
 
     @XBlock.json_handler
     def on_state_transition(self, data, suffix=''):
         """Called when a state transition in the exploration has occurred."""
-        self._log(
-            "Recording the following state transition for exploration %s: "
-            "'%s' to '%s'" % (
-                self.oppiaid, data['oldStateName'], data['newStateName']))
+        self._log(self._EVENT_NAME_STATE_TRANSITION, {
+            'exploration_id': self.oppiaid,
+            'old_state_name': data['oldStateName'],
+            'new_state_name': data['newStateName'],
+        })
 
     @XBlock.json_handler
     def on_exploration_completed(self, data, suffix=''):
         """Called when the exploration has been completed."""
-        self._log('Exploration %s has been completed.' % self.oppiaid)
+        self._log(self._EVENT_NAME_EXPLORATION_COMPLETED, {
+            'exploration_id': self.oppiaid
+        })
 
     def studio_view(self, context):
         """
@@ -98,8 +117,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, width=self.width,
-            height=self.height))
+            oppiaid=oppiaid, src=self.src))
 
         js_str = pkg_resources.resource_string(
             __name__, "static/js/oppia_edit.js")
@@ -115,8 +133,6 @@ class OppiaXBlock(XBlock):
         """
         self.oppiaid = data.get('oppiaid')
         self.src = data.get('src')
-        self.width = data.get('width')
-        self.height = data.get('height')
 
         return {'result': 'success'}
 
@@ -126,7 +142,7 @@ class OppiaXBlock(XBlock):
         return [
             ("Oppia Embedding",
              """<vertical_demo>
-                <oppia oppiaid="0" src="https://www.oppia.org" width="700" />
+                <oppia oppiaid="0" src="https://www.oppia.org"/>
                 </vertical_demo>
              """),
         ]

oppia/static/html/oppia.html

-<div class="oppia_block">
+<div class="oppia_block"
+     style="margin-left: auto; margin-right: auto; width: 700px;">
   <oppia oppia-id="{self.oppiaid}" src="{self.src}"
-         width="{self.width}" height="{self.height}"></oppia>
+         width="700" height="900"></oppia>
 </div>

oppia/static/html/oppia_edit.html

@@ -14,20 +14,6 @@
       </div>
       <span class="tip setting-help">Example: https://www.oppia.org</span>
     </li>
-    <li class="field comp-setting-entry is-set">
-      <div class="wrapper-comp-setting">
-        <label class="label setting-label" for="width">Width</label>
-        <input class="input setting-input" name="width" id="width" value="{width}" type="text" />
-      </div>
-      <span class="tip setting-help">Width of the embedded exploration</span>
-    </li>
-    <li class="field comp-setting-entry is-set">
-      <div class="wrapper-comp-setting">
-        <label class="label setting-label" for="height">Height</label>
-        <input class="input setting-input" name="height" id="height" value="{height}" type="text" />
-      </div>
-      <span class="tip setting-help">Height of the embedded exploration</span>
-    </li>
   </ul>
   <div class="xblock-actions">
     <ul>

oppia/static/html/oppia_preview.html

+<div style="opacity: 0.7;">
+  <p>
+    This XBlock does not have an inline Studio preview.
+  </p>
+  <p>
+    It is an embedded version of the Oppia exploration with id
+    <strong>"{self.oppiaid}"</strong> located at
+    <strong>{self.src}</strong>.
+  </p>
+</div>

oppia/static/js/oppia_edit.js

@@ -21,9 +21,7 @@ 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(),
-      width: $(element).find('input[name=width]').val(),
-      height: $(element).find('input[name=height]').val()
+      src: $(element).find('input[name=src]').val()
     };
     runtime.notify('save', {state: 'start'});
     $.post(handlerUrl, JSON.stringify(data)).done(function(response) {