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.
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.
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
anddownvote
as class values for thespan
elements. You will define these classes inmyxblock.css
. For more information, see Customize myxblock.css.Within each
span
element, create anotherspan
element, each with the class valuecount
. For the value of each embeddedspan
element, reference theupvotes
anddownvotes
fields you defined in the Python file for the XBlock.For the value of each of the outer
span
elements, use the HTML unicode characters↑
and&darr
to show thumbs up and thumbs down symbols next to the number of votes.
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>↑</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.
Next Step#
After you complete your customizations to the HTML file, you can continue on and customize the XBlock JavaScript file.