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 3.8
      • 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. Installing the XBlock
      • 7.3.3. Enable the XBlock in Your Course
      • 7.3.4. 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 »
  • 5. Customize Your XBlock
  • Get Help orGive Doc Feedback Edit on GitHub

5. Customize Your XBlockΒΆ

Now that you have created your XBlock skeleton, myxblock, you need to make it do something. This part of the tutorial explains modifying myxblock; for practical purposes, we will update it to match the Thumbs XBlock that is installed with the XBlock SDK.

For more information about the Thumbs XBlock, see Anatomy of an XBlock

For more information about the different components of an XBlock, see XBlock Concepts.

  • 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
Next Previous

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