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.
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.
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.
span
elements, to display up-votes and down-votes.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.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.span
elements, use the entities
↑
and &darr
to show thumbs up and thumbs down symbols next to
the number of votes.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>↑</span>
<span class='downvote'><span class='count'>{self.downvotes}</span>↓</span>
</p>
If necessary, make corrections to the HTML in your XBlock so that it matches the HTML in the Thumbs XBlock.
After you complete your customizations to the HTML file, you continue on and customize the XBlock JavaScript file.