Open edX XBlock Tutorial
  • 1. General Information
    • 1.1. Read Me
    • 1.2. Other edX Resources
    • 1.3. edX Browser Support
    • 1.4. Change Log
  • 2. XBlock Overview
    • 2.1. Introduction to XBlocks
    • 2.2. XBlock Examples
  • 3. Build an XBlock: Quick Start
    • 3.1. Install XBlock Prerequisites
    • 3.2. Set Up the XBlock Software Development Kit
    • 3.3. Create Your First XBlock
  • 4. Anatomy of an XBlock
    • 4.1. The XBlock Python File
    • 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.2. Customize myxblock.html
    • 5.3. Customize myxblock.js
    • 5.4. Customize myxblock.css
  • 6. XBlock Concepts
    • 6.1. XBlock Fields
    • 6.2. XBlock Methods
    • 6.3. XBlock Fragments
    • 6.4. XBlock Children
    • 6.5. XBlock Runtimes
    • 6.6. XBlocks, Events, and Grading
  • 7. XBlocks and the edX Platform
    • 7.1. EdX Studio as an XBlock Runtime
    • 7.2. EdX Learning Management System as an XBlock Runtime
    • 7.3. Deploy Your XBlock in Devstack
    • 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
 
Open edX XBlock Tutorial
  • Table of Contents »
  • 5. Customize Your XBlock
  • Need Help? |Feedback

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 © 2016, edX Inc.
Creative Commons License
These works by edX Inc. are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.