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
»
2.
XBlock Overview
Get Help
or
Give Doc Feedback
Edit on GitHub
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