4.2. The XBlock HTML FileΒΆ

This section of the tutorial walks through the HTML file, thumbs.html, that is part of the Thumbs XBlock in the XBlock SDK.

If you completed the steps in Build an XBlock: Quick Start, you can find this file locally at xblock_development/xblock-sdk/sample_xblocks/thumbs/static/html/thumbs.html.

In the XBlock HTML file, you define the HTML content that is added to a fragment. The HTML content can reference the XBlock fields. The fragment is returned by the view method, to be displayed by the runtime application.

<p>
  <span class='upvote'><span class='count'>{self.upvotes}</span>&uarr;</span>
  <span class='downvote'><span class='count'>{self.downvotes}</span>&darr;</span>
</p>

Note the following details about the HTML file.

  • The class values reference styles in the thumbs.css file. For more information, see The XBlock Stylesheets.
  • The values self.upvotes and self.downvotes reference the fields in the XBlock Python class.