Skip to content

R
RecommenderXBlock
Commit 14c6e22f by swdanielli
Options

add image of problems, link and thumbnail of recommended content

parent 98543f2c
Showing with 68 additions and 40 deletions
recommender/recommender.py
......@@ -6,7 +6,6 @@ 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
from xblock.fragment import Fragment
......@@ -21,7 +20,7 @@ class HelpResource(dict):
self.update(s)
else:
raise TypeError("Inappropriate type "+str(type(s))+" initializing HelpResource. Should be str or dict")
for e,t in (('title', str), ('url', str), ('upvotes', int), ('downvotes', int)):
for e,t in (('title', str), ('url', str), ('upvotes', int), ('downvotes', int), ('thumbnail', str)):
if e not in self:
raise TypeError("Insufficient fields initializing HelpResource. "+e+" required.")
if not isinstance(self["e"], t):
......@@ -73,7 +72,7 @@ class RecommenderXBlock(XBlock):
return data.decode("utf8")
@XBlock.json_handler
def handle_upvote(slef, data, suffix=''):
def handle_upvote(self, data, suffix=''):
print "Upvote clicked!"
return {"Success": True}
......@@ -91,7 +90,7 @@ class RecommenderXBlock(XBlock):
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"))
resources = [{'title' : r['title'], "votes" : r['up'] - r['down']} for r in self.recommendations]
resources = [{'title' : r['title'], "votes" : r['up'] - r['down'], 'url' : r['url'], 'thumbnail' : r['thumbnail']} for r in self.recommendations]
frag = Fragment(self.template_lookup.get_template("recommender.html").render(resources = resources))
frag.add_css_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css")
......@@ -110,7 +109,12 @@ class RecommenderXBlock(XBlock):
("RecommenderXBlock",
"""<vertical_demo>
<recommender>
{"title": "Textbook page 501", "up" : 50, "down" : 75, "url" : "google.com"}
{"title": "Covalent bonding and periodic trends", "up" : 15, "down" : 5, "url" : "https://courses.edx.org/courses/MITx/3.091X/2013_Fall/courseware/SP13_Week_4/SP13_Periodic_Trends_and_Bonding/", "thumbnail" : "http://people.csail.mit.edu/swli/edx/recommendation/img/videopage1.png"}
{"title": "Polar covalent bonds and electronegativity", "up" : 10, "down" : 7, "url" : "https://courses.edx.org/courses/MITx/3.091X/2013_Fall/courseware/SP13_Week_4/SP13_Covalent_Bonding/", "thumbnail" : "http://people.csail.mit.edu/swli/edx/recommendation/img/videopage2.png"}
{"title": "Longest wavelength able to to break a C-C bond ...", "up" : 10, "down" : 7, "url" : "https://answers.yahoo.com/question/index?qid=20081112142253AA1kQN1", "thumbnail" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage1.png"}
{"title": "Calculate the maximum wavelength of light for ...", "up" : 10, "down" : 7, "url" : "https://answers.yahoo.com/question/index?qid=20100110115715AA6toHw", "thumbnail" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage2.png"}
{"title": "Covalent bond - wave mechanical concep", "up" : 10, "down" : 7, "url" : "", "thumbnail" : "http://people.csail.mit.edu/swli/edx/recommendation/img/textbookpage1.png"}
{"title": "Covalent bond - Energetics of covalent bond", "up" : 10, "down" : 7, "url" : "", "thumbnail" : "http://people.csail.mit.edu/swli/edx/recommendation/img/textbookpage2.png"}
</recommender>
</vertical_demo>
"""),
......
recommender/static/html/recommender.html
......@@ -3,11 +3,16 @@
width : 100%;
}
.recommender_row {
width:700px;
}
.recommender_resource {
border : 1;
padding : 1;
margin : 10;
display:table-cell;
margin : 1;
/* display:table-cell;*/
float:left;
width:300px;
border-color:red;
border-width:1px;
......@@ -24,6 +29,11 @@
flex-grow : 1
}
.thumbnailImg {
width: 600px;
height: 450px;
}
.recommender_recommendations {
display:table;
width:100%;
......@@ -37,6 +47,10 @@
text-overflow:ellipsis;
}
.recommender_url, .recommender_thumbnail {
display:none;
}
.recommender_vote_box {
display:inline-block;
vertical-align: middle;
......@@ -65,41 +79,29 @@
}
</style>
<div class="question"><img src="http://people.csail.mit.edu/swli/edx/recommendation/img/pset.png" width=700px></div>
<div class="recommender_block">
<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>
<!--
<iframe width=800 height=600 src="http://wikipedia.com"></iframe>
<iframe width=800 height=600 src="http://www.moocworkshop.org/"></iframe>
<iframe width=800 height=600 src="https://answers.yahoo.com/question/index?qid=20081112142253AA1kQN1"></iframe>
<iframe style="width:800px height:600px" src="https://courses.edx.org/courses/MITx/3.091X/2013_Fall/courseware/SP13_Week_4/SP13_Covalent_Bonding/"></iframe>
-->
<div class="recommender_row">
% for elem in resources:
<li> ${elem} </li>
<%include file="resourcebox.html" args="title=elem['title'],votes=elem['votes']" />
<!-- <li> ${elem} </li>
-->
<%include file="resourcebox.html" args="title=elem['title'],votes=elem['votes'],url=elem['url'],thumbnail=elem['thumbnail']" />
% endfor
</div>
</div>
<div class="recommender_description">
<div class="thumbnailImg"></div>
</div>
</div>
recommender/static/html/resourcebox.html
<%page args="title,votes"/>
<%page args="title,votes,url,thumbnail"/>
<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>
......@@ -7,6 +7,6 @@
<!--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">${title}</div>
<div class="recommender_blurb">${title}<div class="recommender_url">${url}</div><div class="recommender_thumbnail">${thumbnail}</div></div>
<div class="recommender_edit"><span class="ui-icon ui-icon-pencil"></span></div>
</div>
recommender/static/js/src/recommender.js
function RecommenderXBlock(runtime, element) {
var handlerUrl = runtime.handlerUrl(element, 'handle_upvote');
function voted(result) { console.log("Voted"); }
function voted(result) {
console.log("Voted");
}
$('.recommender_vote_arrow_up', element).click(function(){
var myVote = $(this).parent().find('.recommender_vote_score').text();
$(this).parent().find('.recommender_vote_score').text(parseInt(myVote) + 1);
$.ajax({
type: "POST",
url: handlerUrl,
......@@ -11,4 +15,23 @@ function RecommenderXBlock(runtime, element) {
success: voted
});
});
}
\ No newline at end of file
$('.recommender_blurb').click(function(){
var win = window.open($(this).find('.recommender_url').text(), '_blank');
win.focus();
});
$('.recommender_resource').hover(
function() {
$('.thumbnailImg').empty();
$('.thumbnailImg').append('<img src="' + $(this).find('.recommender_thumbnail').text() + '" height=100%>');
}, function() {
// $('.thumbnailImg').empty();
}
);
/* $('.ui-icon-zoomin').click(function(){
//alert($(this).parent().parent().find('.recommender_url').text());
$(this).colorbox({iframe:true, width:800, height:600, href:$(this).parent().parent().find('.recommender_url').text()});
});*/
}
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