5.2. Customize myxblock.html

This section describes how to modify the static HTML file of the XBlock you created, myxblock.html, to provide the functionality in the Thumbs XBlock example in the XBlock SDK.

In myxblock.html, you will 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.

5.2.1. The Default XBlock HTML File

When you create a new XBlock, the default static HTML file is created automatically, with skeletal functionality defined. In the xblock_development/myxblock/myxblock/static/html directory, see the file myxblock.html.

<div class="myxblock_block">
  <p>MyXBlock: count is now
    <span class='count'>{self.count}</span> (click me to increment).
  </p>
</div>

The file contains HTML to display the count field that was added by default to the XBlock. Delete the HTML between the div elements.

5.2.2. Add HTML Content

You can create HTML as needed to display the state of your XBlock. The Thumbs XBlock displays the up and down votes. Create a single paragraph and follow the guidelines below.

  • Create two span elements, to display up-votes and down-votes.
  • Use upvote and downvote as class values for the span elements. You will define these classes in myxblock.css. For more information, see Customize myxblock.css.
  • Within each span element, create another span element, each with the class value count. For the value of each embedded span element, reference the upvotes and downvotes fields you defined in the Python file for the XBlock.
  • For the value of each of the outer span elements, use the entities &uarr; and &darr to show thumbs up and thumbs down symbols next to the number of votes.

5.2.3. Check HTML Against the Thumbs XBlock

After you have defined the HTML, check your work against the HTML in the Thumbs XBlock, in the file xblock_development/xblock-sdk/sample_xblocks/thumbs/static/html/thumbs.html.

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

If necessary, make corrections to the HTML in your XBlock so that it matches the HTML in the Thumbs XBlock.

5.2.4. Next Step

After you complete your customizations to the HTML file, you continue on and customize the XBlock JavaScript file.