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