OpenEdx XBlocks

Slide Deck

class: title middle left

# Open edX XBlocks

.subtitle[How They Work]

.thirdtitle[Open edX Boston Meetup: March 28th, 2016]

---

# Who am I?

**Julia Eskew**

Principal Software Engineer - edX

Core Platform Team

<https://github.com/doctoryes>

---

# Talk Summary

* What is an XBlock?

* XBlock Composition

* Should you create an XBlock?

---

# What is an edX course?

* An edX course is a tree composed of XBlocks.

.float-left.scale50[![Course tree diagram](assets/edx_course.png "edX Course")]

---

# XBlocks Origin

* Course Authors:

* experimenting with teaching methods

* needed to add their own rich interactives

* Adding code for these interactions to edx-platform???

--
 
 
 
<center>.bigtext[DIFFICULT]</center>

---

# XBlocks Origin

<center>Different Users, Different Needs</center>

* Course Authors

* Need: develop modules independently of edx-platform

* Open edX installations (like edx.org)

* Need: easily plugin and use these modules

--
 
 
<center>The XBlock architecture meets both these needs!</center>

---

# Exactly what is an XBlock?

--
 
 
<center>A stand-alone, installable Python module</center>
--
 
<center>that does not have to be open-sourced.</center>

---

# What's in an XBlock Python module?

* A Python class derived from the core XBlock class

* Fields

* Views

* Handlers

---

# XBlock Fields

* Store block state

* Basic field types:

* Integer
 * String
 * DateTime
 * List
 * Set
 * etc....

---

# XBlock Field Examples:

```python
    ssh_pwd = String(
        default='~',
        scope=Scope.user_state,
        help="When using cd command, previous path is stored here."
    )

visible_to_staff_only = Boolean(
        default=False,
        scope=Scope.settings,
        help="If true, seen only by course staff, regardless of start date."
    )
```
---

# XBlock Views

* For the LMS:

* `student_view()`

* For Studio:

* `author_view()` & `studio_view()`

---

# XBlock View Example - student_view()

```python
def student_view(self, context=None):
    """
    The primary view of the AudioXBlock, shown to students
    when viewing courses.
    """
    html = self.load_resource("static/html/audio.html")
    frag = Fragment(html.format(src = self.src))
    frag.add_css(self.load_resource("static/css/audio.css"))
    return frag
```
---

# XBlock View Example - studio_view()

```python
def studio_view(self, context):
    """
    The view for editing the AudioXBlock parameters inside Studio.
    """
    html = self.load_resource("static/html/audio_edit.html")
    frag = Fragment(html.format(src = self.src))
    js = self.load_resource("static/js/src/audio_edit.js")
    frag.add_javascript(js)
    frag.initialize_js('AudioEditBlock')
    return frag
```
---

# XBlock Handlers

* Python methods to handle user input

* Implements interaction

* Called by client-side Javascript in the XBlock

* Examples:

* Change the subtitles on this video to Spanish

* Submit a preliminary answer.

---

# XBlock Handler Example

```python
@XBlock.json_handler
def getPort(self, data):
    selected_host = data["selectedHost"]
    x = 0
    for host in self.ssh_hostnames:
        if host == selected_host:
            return {"port": self.ssh_portList[x]}
        x += 1
    return {"port": ""}
```

---

# XBlock Environments

* XBlocks operate within LMS and Studio.

* Also: XBlock Workbench - and others.

* An XBlock may need interaction with its running environment, such as:

* Information about the current user

* Translate this text.

* Publish a grade.

---

# XBlock Environments

* How does an XBlock interact with its environment?

---

# XBlock Environments

Via the XBlock Runtime:

.float-center.scale50[![XBlock Runtime diagram](assets/runtime.png "XBlock Runtime")]

---

# XBlock Runtime

* Provides:

* User registration

* Progress tracking

* Grading

---

# XBlock Runtime

* Data storage

* Course content stored in MongoDB

* Student response data in MySQL

BUT:

Your XBlock code doesn't care!

* Specify the correct Field scopes.

---

# XBlock vs. LTI

* (LTI: Learning Tools Interoperability)

* A way to integrate external learning experiences into edX courses.

* External grades are securely transferred back to the edX course.

--
 
 
<center>Which should I use? / What's the difference?</center>

---

# XBlock vs. LTI

* XBlock:
 * runs along with/inside of LMS.
 * installed into LMS code and is tightly coupled.

* LTI:
 * integrates a separate app with LMS.
 * loosely coupled with LMS.

---

# XBlock vs. LTI

* XBlock:
 * written in Python/JS/HTML only.
 * currently only an Open Edx "standard" - not formally adopted.

* LTI
 * module can be in any language.
 * widely adopted standard and can be used in other contexts.

---

# What's Right For My Situation?

Suppose you need an XBlock that does:

<center>insert interesting educational experience here...</center>

What should you do?

---

# What's Right For My Situation?

* Consider LTI.

* See also: [Five ways to extend edX](https://github.com/edx/edx-platform/wiki/Five-ways-to-extend-edX)

* Check the [list of existing XBlocks](https://openedx.atlassian.net/wiki/display/COMM/XBlocks+Directory).

* If no XBlock exists:

* learn the architecture and possibilities of XBlocks

---

# XBlock Development

So - you've decided to develop an XBlock.

How do you get started?

--
* Perform the [XBlock tutorial](http://edx.readthedocs.org/projects/xblock-tutorial)

* Examine [existing XBlocks](https://openedx.atlassian.net/wiki/display/COMM/XBlocks+Directory)

--
* Ask questions on the edx-code mailing list and/or Slack channel.

* [edx-code Google Group](https://groups.google.com/forum/#!forum/edx-code)

* [#general on OpenEdx Slack](https://openedx.slack.com)

---

# XBlock Resources

* What XBlocks currently exist?

* [XBlocks Directory](https://openedx.atlassian.net/wiki/display/COMM/XBlocks+Directory)
 * [xblocks.org](http://xblocks.org/)

* Learning about XBlocks

* [XBlock API doc](http://xblock.readthedocs.org/ "XBlock API Doc")
 * [XBlock Tutorial](http://edx.readthedocs.org/projects/xblock-tutorial)

* XBlock source code

* [XBlock repo](https://github.com/edx/xblock)
 * [XBlock SDK repo](https://github.com/edx/xblock-sdk)

---

# Thanks for your time!

* This talk's slides can be accessed here:

<https://doctoryes.github.io/openedx_talk_xblocks>