Skip to content

R
RecommenderXBlock
Commit 44f80037 by Piotr Mitros
Options

Mako templates

parent 2be7edba
Showing with 149 additions and 21 deletions
recommender/recommender.py
"""TO-DO: Write a description of what this XBlock is."""
import json
import pkg_resources
from mako.template import Template
from mako.lookup import TemplateLookup
from xblock.core import XBlock
from xblock.fields import Scope, Integer, String, BlockScope, List
......@@ -51,13 +56,16 @@ class RecommenderXBlock(XBlock):
"""
This XBlock will show a set of recommended resources
"""
# Scope-wide. List of JSON objects corresponding to recommendations combine XML and user.
recommendations = List(help="List of help resources", default=0, scope=Scope.content)
# Scope-wide. List of JSON objects corresponding to recommendations as defined in XML.
recommendations = List(help="List of help resources", default=0, scope=Scope.content)
# Upvotes for this particular user
upvotes = List(help="List of items user gave upvote to", default=False, scope=Scope.user_state)
# Downvotes for this particular user
downvotes = List(help="List of items user gave downvote to", default=False, scope=Scope.user_state)
# Fields are defined on the class. You can access them in your code as
# self.<fieldname>.
objects = List(
scope = BlockScope,
help = "List of help resources"
)
template_lookup = None
def resource_string(self, path):
"""Handy helper for getting resources from our kit."""
......@@ -70,15 +78,17 @@ class RecommenderXBlock(XBlock):
The primary view of the RecommenderXBlock, shown to students
when viewing courses.
"""
html = self.resource_string("static/html/recommender.html")
print html.format
frag = Fragment(html.format())
if not self.template_lookup:
self.template_lookup = TemplateLookup()
self.template_lookup.put_string("recommender.html", self.resource_string("static/html/recommender.html"))
self.template_lookup.put_string("resourcebox.html", self.resource_string("static/html/resourcebox.html"))
frag = Fragment(self.template_lookup.get_template("recommender.html").render())
frag.add_css_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css")
frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js")
frag.add_css(self.resource_string("static/css/recommender.css"))
frag.add_javascript(self.resource_string("static/js/src/recommender.js"))
frag.initialize_js('RecommenderXBlock')
print self.xml_text_content()
return frag
# TO-DO: change this to create the scenarios you'd like to see in the
......@@ -90,10 +100,28 @@ class RecommenderXBlock(XBlock):
("RecommenderXBlock",
"""<vertical_demo>
<recommender>
</recommender>
<recommender>
{"title": "Textbook page 501", "up" : 50, "down" : 75, "url" : "google.com"}
</recommender>
</vertical_demo>
"""),
]
@classmethod
def parse_xml(cls, node, runtime, keys, id_generator):
"""
Parse the XML for an HTML block.
The entire subtree under `node` is re-serialized, and set as the
content of the XBlock.
"""
block = runtime.construct_xblock_from_class(cls, keys)
lines = []
for line in node.text.split('\n'):
line = line.strip()
if len(line) > 2:
print "Decoding", line
lines.append(json.loads(line))
block.default_recommendations = lines
return block
recommender/static/html/recommender.html
<style>
.recommender_block {
width : 100%;
}
.recommender_resource {
border : 1;
padding : 1;
margin : 10;
display:table-cell;
width:300px;
border-color:red;
border-width:1px;
border-style:solid;
border-radius:5px;
}
.recommender_header {
display : flex;
padding : 0 0 10 0;
}
.recommender_title {
flex-grow : 1
}
.recommender_recommendations {
display:table;
width:100%;
}
.recommender_blurb {
display:inline-block;
vertical-align: middle;
width:225px;
overflow:hidden;
text-overflow:ellipsis;
}
.recommender_vote_box {
display:inline-block;
vertical-align: middle;
width:45px;
}
.recommender_vote_arrow_up {
margin-left:auto;
margin-right:auto;
text-align:center;
}
.recommender_vote_arrow_down {
margin-left:auto;
margin-right:auto;
text-align:center;
}
.recommender_vote_score {
width:100%;
}
.recommender_edit{
display:inline-block;
vertical-align: top;
}
</style>
<div class="recommender_block">
Helpful resources
<table>
<tr>
<td>
</td>
</tr>
</table>
<span class="ui-icon ui-icon-plusthick"></span>
<div class="recommender_header"> <div class="recommender_title">Helpful resources</div><div class="recommender_add"> <span class="ui-icon ui-icon-plusthick"></span></div></div>
<div class="recommender_recommendations">
<div class="recommender_row">
<div class="recommender_resource">
<div class="recommender_vote_box">
<div class="recommender_vote_arrow_up" role="button" aria-label="upvote" tabindex="0"><span class="ui-icon ui-icon-triangle-1-n"></span></div>
<!--div class="recommender_vote_score_dislikes">2927</div-->
<div class="recommender_vote_score">2926</div>
<!--div class="recommender_vote_score_likes">2927</div-->
<div class="recommender_vote_arrow_down" role="button" aria-label="downvote" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span></div>
</div>
<div class="recommender_blurb">Textbook Page 501</div>
<div class="recommender_edit"><span class="ui-icon ui-icon-pencil"></span></div>
</div>
<div class="recommender_resource">
Textbook Page 502
</div>
</div>
<div class="recommender_row">
<div class="recommender_resource">
Textbook Page 504
</div>
<div class="recommender_resource">
Textbook Page 505
</div>
</div>
</div>
<div class="recommender_description">
</div>
</div>
recommender/static/html/resourcebox.html 0 → 100644
<div class="recommender_resource">
<div class="recommender_vote_box">
<div class="recommender_vote_arrow_up" role="button" aria-label="upvote" tabindex="0"><span class="ui-icon ui-icon-triangle-1-n"></span></div>
<!--div class="recommender_vote_score_dislikes">2927</div-->
<div class="recommender_vote_score">2926</div>
<!--div class="recommender_vote_score_likes">2927</div-->
<div class="recommender_vote_arrow_down" role="button" aria-label="downvote" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span></div>
</div>
<div class="recommender_blurb">Textbook Page 501</div>
<div class="recommender_edit"><span class="ui-icon ui-icon-pencil"></span></div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment