Skip to content

R
RecommenderXBlock
Commit a3139fc1 by swdanielli
Options

Merge branch 'develop' 

Conflicts:
	recommender/recommender.py
parents 0c6cbf77 14c6e22f
Showing with 67 additions and 39 deletions
recommender/recommender.py
...@@ -6,7 +6,6 @@ import pkg_resources ...@@ -6,7 +6,6 @@ import pkg_resources
from mako.template import Template from mako.template import Template
from mako.lookup import TemplateLookup from mako.lookup import TemplateLookup
from xblock.core import XBlock from xblock.core import XBlock
from xblock.fields import Scope, Integer, String, BlockScope, List from xblock.fields import Scope, Integer, String, BlockScope, List
from xblock.fragment import Fragment from xblock.fragment import Fragment
...@@ -21,7 +20,7 @@ class HelpResource(dict): ...@@ -21,7 +20,7 @@ class HelpResource(dict):
self.update(s) self.update(s)
else: else:
raise TypeError("Inappropriate type "+str(type(s))+" initializing HelpResource. Should be str or dict") 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: if e not in self:
raise TypeError("Insufficient fields initializing HelpResource. "+e+" required.") raise TypeError("Insufficient fields initializing HelpResource. "+e+" required.")
if not isinstance(self["e"], t): if not isinstance(self["e"], t):
...@@ -128,10 +127,10 @@ class RecommenderXBlock(XBlock): ...@@ -128,10 +127,10 @@ class RecommenderXBlock(XBlock):
self.template_lookup.put_string("recommender.html", self.resource_string("static/html/recommender.html")) 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")) 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]
# TODO: Sort by votes # TODO: Sort by votes
# Ideally, we'd estimate score based on votes, such that items with 1 vote have a sensible ranking (rather than a perfect rating) # Ideally, we'd estimate score based on votes, such that items with 1 vote have a sensible ranking (rather than a perfect rating)
# #
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 = 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") frag.add_css_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css")
...@@ -150,7 +149,12 @@ class RecommenderXBlock(XBlock): ...@@ -150,7 +149,12 @@ class RecommenderXBlock(XBlock):
("RecommenderXBlock", ("RecommenderXBlock",
"""<vertical_demo> """<vertical_demo>
<recommender> <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> </recommender>
</vertical_demo> </vertical_demo>
"""), """),
......
recommender/static/html/recommender.html
...@@ -3,11 +3,16 @@ ...@@ -3,11 +3,16 @@
width : 100%; width : 100%;
} }
.recommender_row {
width:700px;
}
.recommender_resource { .recommender_resource {
border : 1; border : 1;
padding : 1; padding : 1;
margin : 10; margin : 1;
display:table-cell; /* display:table-cell;*/
float:left;
width:300px; width:300px;
border-color:red; border-color:red;
border-width:1px; border-width:1px;
...@@ -24,6 +29,11 @@ ...@@ -24,6 +29,11 @@
flex-grow : 1 flex-grow : 1
} }
.thumbnailImg {
width: 600px;
height: 450px;
}
.recommender_recommendations { .recommender_recommendations {
display:table; display:table;
width:100%; width:100%;
...@@ -37,6 +47,10 @@ ...@@ -37,6 +47,10 @@
text-overflow:ellipsis; text-overflow:ellipsis;
} }
.recommender_url, .recommender_thumbnail {
display:none;
}
.recommender_vote_box { .recommender_vote_box {
display:inline-block; display:inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -65,41 +79,29 @@ ...@@ -65,41 +79,29 @@
} }
</style> </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_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_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_recommendations">
<div class="recommender_row"> <!--
<div class="recommender_resource"> <iframe width=800 height=600 src="http://wikipedia.com"></iframe>
<div class="recommender_vote_box"> <iframe width=800 height=600 src="http://www.moocworkshop.org/"></iframe>
<div class="recommender_vote_arrow_up" role="button" aria-label="upvote" tabindex="0"><span class="ui-icon ui-icon-triangle-1-n"></span></div> <iframe width=800 height=600 src="https://answers.yahoo.com/question/index?qid=20081112142253AA1kQN1"></iframe>
<!--div class="recommender_vote_score_dislikes">2927</div--> <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_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 class="recommender_row"> <div class="recommender_row">
% for elem in resources: % for elem in resources:
<li> ${elem} </li> <!-- <li> ${elem} </li>
<%include file="resourcebox.html" args="title=elem['title'],votes=elem['votes']" /> -->
<%include file="resourcebox.html" args="title=elem['title'],votes=elem['votes'],url=elem['url'],thumbnail=elem['thumbnail']" />
% endfor % endfor
</div> </div>
</div> </div>
<div class="recommender_description"> <div class="recommender_description">
<div class="thumbnailImg"></div>
</div> </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_resource">
<div class="recommender_vote_box"> <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_arrow_up" role="button" aria-label="upvote" tabindex="0"><span class="ui-icon ui-icon-triangle-1-n"></span></div>
...@@ -7,6 +7,6 @@ ...@@ -7,6 +7,6 @@
<!--div class="recommender_vote_score_likes">2927</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 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>
<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 class="recommender_edit"><span class="ui-icon ui-icon-pencil"></span></div>
</div> </div>
recommender/static/js/src/recommender.js
function RecommenderXBlock(runtime, element) { function RecommenderXBlock(runtime, element) {
var handlerUrl = runtime.handlerUrl(element, 'handle_upvote'); 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(){ $('.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({ $.ajax({
type: "POST", type: "POST",
url: handlerUrl, url: handlerUrl,
...@@ -11,4 +15,23 @@ function RecommenderXBlock(runtime, element) { ...@@ -11,4 +15,23 @@ function RecommenderXBlock(runtime, element) {
success: voted 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