Open edX XBlock Tutorial
  • 1. General Information
    • 1.1. Read Me
    • 1.2. Other edX Resources
      • 1.2.1. Resources for edx.org Learners
      • 1.2.2. The edX Partner Portal
      • 1.2.3. The Open edX Portal
      • 1.2.4. System Status
      • 1.2.5. Resources for edx.org Course Teams
      • 1.2.6. Resources for Researchers
      • 1.2.7. Resources for Developers
      • 1.2.8. Resources for Open edX
    • 1.3. edX Browser Support
  • 2. XBlock Overview
    • 2.1. Introduction to XBlocks
      • 2.1.1. Overview
      • 2.1.2. XBlock API and Runtimes
      • 2.1.3. XBlocks and the edX Platform
      • 2.1.4. XBlocks for Developers
    • 2.2. XBlock Examples
      • 2.2.1. Google Drive and Calendar XBlock
      • 2.2.2. Examples in the XBlock SDK
  • 3. Build an XBlock: Quick Start
    • 3.1. Install XBlock Prerequisites
      • 3.1.1. Python 2.7
      • 3.1.2. Git
      • 3.1.3. A Virtual Environment
    • 3.2. Set Up the XBlock Software Development Kit
      • 3.2.1. Create a Directory for XBlock Work
      • 3.2.2. Create and Activate the Virtual Environment
      • 3.2.3. Clone the XBlock Software Development Kit
    • 3.3. Create Your First XBlock
      • 3.3.1. Create an XBlock
      • 3.3.2. Install the XBlock
      • 3.3.3. Create the SQLite Database
      • 3.3.4. Run the XBlock SDK Server
      • 3.3.5. Next Steps
  • 4. Anatomy of an XBlock
    • 4.1. The XBlock Python File
      • 4.1.1. Thumb XBlock Fields
      • 4.1.2. Thumb XBlock Student View
      • 4.1.3. Thumb XBlock Vote Handler
    • 4.2. The XBlock HTML File
    • 4.3. The XBlock JavaScript File
    • 4.4. The XBlock Stylesheets
  • 5. Customize Your XBlock
    • 5.1. Customize myxblock.py
      • 5.1.1. The Default XBlock Python File
      • 5.1.2. Add Comments
      • 5.1.3. Add XBlock Fields
      • 5.1.4. Define the Student View
      • 5.1.5. Define the Vote Handler
      • 5.1.6. Next Step
    • 5.2. Customize myxblock.html
      • 5.2.1. The Default XBlock HTML File
      • 5.2.2. Add HTML Content
      • 5.2.3. Check HTML Against the Thumbs XBlock
      • 5.2.4. Next Step
    • 5.3. Customize myxblock.js
      • 5.3.1. The Default XBlock JavaScript File
      • 5.3.2. Add JavaScript Code
      • 5.3.3. Check JavaScript Against the Thumbs XBlock
      • 5.3.4. Next Step
    • 5.4. Customize myxblock.css
      • 5.4.1. The Default XBlock CSS File
      • 5.4.2. Add CSS Code
      • 5.4.3. Check CSS Against the Thumbs XBlock
  • 6. XBlock Concepts
    • 6.1. XBlock Fields
      • 6.1.1. XBlock Fields and State
      • 6.1.2. Field Scope
      • 6.1.3. Fields and Data Storage
      • 6.1.4. Initializing Fields
      • 6.1.5. Fields and OLX
      • 6.1.6. Field Requirements in the edX Platform
      • 6.1.7. Default Fields in a New XBlock
    • 6.2. XBlock Methods
      • 6.2.1. View Methods
      • 6.2.2. Handler Methods
      • 6.2.3. Default Methods in a New XBlock
    • 6.3. XBlock Fragments
      • 6.3.1. Fragment Contents
      • 6.3.2. Fragments and XBlock Children
      • 6.3.3. Fragments and Views
    • 6.4. XBlock Children
      • 6.4.1. XBlock Tree Structure
      • 6.4.2. Accessing Children (Server-Side)
      • 6.4.3. Accessing Children (Client-Side)
    • 6.5. XBlock Runtimes
      • 6.5.1. Runtime Functions
      • 6.5.2. Extending XBlocks
      • 6.5.3. JavaScript Runtimes
      • 6.5.4. XBlock Runtime API
      • 6.5.5. Rendering XBlocks with the XBlock URL
    • 6.6. XBlocks, Events, and Grading
      • 6.6.1. When an XBlock Should Emit Events
      • 6.6.2. Publish Events in Handler Methods
      • 6.6.3. Publish Grade Events
  • 7. XBlocks and the edX Platform
    • 7.1. EdX Studio as an XBlock Runtime
      • 7.1.1. Studio Requirements for XBlocks
    • 7.2. EdX Learning Management System as an XBlock Runtime
      • 7.2.1. LMS Requirements for XBlocks
      • 7.2.2. Internationalization Support
    • 7.3. Deploy Your XBlock in Devstack
      • 7.3.1. Prerequisites
      • 7.3.2. Install the XBlock
      • 7.3.3. Enable the XBlock in the edX Platform
      • 7.3.4. Start the LMS and Studio
      • 7.3.5. Enable the XBlock in Your Course
      • 7.3.6. Add an Instance of the XBlock to a Unit
    • 7.4. Submit Your XBlock to edX
  • 8. Glossary
    • 8.1. A
    • 8.2. C
    • 8.3. D
    • 8.4. E
    • 8.5. F
    • 8.6. G
    • 8.7. H
    • 8.8. I
    • 8.9. K
    • 8.10. L
    • 8.11. M
    • 8.12. N
    • 8.13. O
    • 8.14. P
    • 8.15. Q
    • 8.16. R
    • 8.17. S
    • 8.18. T
    • 8.19. U
    • 8.20. V
    • 8.21. W
    • 8.22. XYZ
  • Using XBlock Software Development Kit
    • Getting Started with the XBlock SDK
      • Clone the XBlock Software Development Kit
      • Create an XBlock
      • Install the XBlock
      • Create the SQLite Database
      • Run the XBlock SDK Server
 
Open edX XBlock Tutorial
  • Table of Contents »
  • 2. XBlock Overview
  • Get Help orGive Doc Feedback

2. XBlock OverviewΒΆ

  • 2.1. Introduction to XBlocks
    • 2.1.1. Overview
    • 2.1.2. XBlock API and Runtimes
    • 2.1.3. XBlocks and the edX Platform
    • 2.1.4. XBlocks for Developers
  • 2.2. XBlock Examples
    • 2.2.1. Google Drive and Calendar XBlock
    • 2.2.2. Examples in the XBlock SDK
Next Previous

Copyright © 2018, edX Inc.
Creative Commons License
These works by edX Inc. are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.