Skip to content

R
RecommenderXBlock
Commit 6b18c0f8 by swdanielli
Options

add text description for resource, fix corner case bug

parent 6ac6ca1e
Showing with 103 additions and 52 deletions
recommender/recommender.py
......@@ -188,10 +188,9 @@ class RecommenderXBlock(XBlock):
@XBlock.json_handler
def add_resource(self, data, suffix=''):
''' untested '''
resource = data['resource']
# Construct new resource
valid_fields = ['url', 'title', 'description']
valid_fields = ['url', 'title', 'description', 'descriptionText']
new_resource = {}
for field in valid_fields:
new_resource[field] = data['resource'][field]
......@@ -209,8 +208,8 @@ class RecommenderXBlock(XBlock):
new_resource['upvotes'] = 0
new_resource['downvotes'] = 0
new_resource['isProblematic'] = "notProblematic"
new_resource['problematicReason'] = ""
#new_resource['isProblematic'] = "notProblematic"
#new_resource['problematicReason'] = ""
self.recommendations.append(new_resource)
return {"Success": True, "id": new_resource['id']}
......@@ -223,7 +222,7 @@ class RecommenderXBlock(XBlock):
tracker.emit('edit_resource', {'id': resource, 'error': 'bad id'})
return {"Success": False}
valid_fields = ['url', 'title', 'description']
valid_fields = ['url', 'title', 'description', 'descriptionText']
resource_log = {}
resource_log['id'] = resource
for field in valid_fields:
......@@ -291,7 +290,7 @@ class RecommenderXBlock(XBlock):
# Ideally, we'd estimate score based on votes, such that items with 1 vote have a sensible ranking (rather than a perfect rating)
#
resources = [{'id' : r['id'], 'title' : r['title'], "votes" : r['upvotes'] - r['downvotes'], 'url' : r['url'], 'description' : r['description']} for r in self.recommendations]
resources = [{'id' : r['id'], 'title' : r['title'], "votes" : r['upvotes'] - r['downvotes'], 'url' : r['url'], 'description' : r['description'], 'descriptionText' : r['descriptionText']} for r in self.recommendations]
resources = sorted(resources, key = lambda r: r['votes'], reverse=True)
frag = Fragment(self.template_lookup.get_template("recommender.html").render(resources = resources, upvotes = self.upvotes, downvotes = self.downvotes, flagId = self.flagId, flagReason = self.flagReason))
......@@ -313,18 +312,15 @@ class RecommenderXBlock(XBlock):
"""<vertical_demo>
<html_demo><img class="question" src="http://people.csail.mit.edu/swli/edx/recommendation/img/pset.png"></img></html_demo>
<recommender>
{"id": 1, "title": "Covalent bonding and periodic trends", "upvotes" : 15, "downvotes" : 5, "url" : "https://courses.edx.org/courses/MITx/3.091X/2013_Fall/courseware/SP13_Week_4/SP13_Periodic_Trends_and_Bonding/", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/videopage1.png"}
{"id": 2, "title": "Polar covalent bonds and electronegativity", "upvotes" : 10, "downvotes" : 7, "url" : "https://courses.edx.org/courses/MITx/3.091X/2013_Fall/courseware/SP13_Week_4/SP13_Covalent_Bonding/", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/videopage2.png"}
{"id": 3, "title": "Longest wavelength able to to break a C-C bond ...", "upvotes" : 1230, "downvotes" : 7, "url" : "https://answers.yahoo.com/question/index?qid=20081112142253AA1kQN1", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage1.png"}
{"id": 4, "title": "Calculate the maximum wavelength of light for ...", "upvotes" : 10, "downvotes" : 3457, "url" : "https://answers.yahoo.com/question/index?qid=20100110115715AA6toHw", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage2.png"}
{"id": 1, "title": "Covalent bonding and periodic trends", "upvotes" : 15, "downvotes" : 5, "url" : "https://courses.edx.org/courses/MITx/3.091X/2013_Fall/courseware/SP13_Week_4/SP13_Periodic_Trends_and_Bonding/", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/videopage1.png", "descriptionText" : "short description for Covalent bonding and periodic trends"}
{"id": 2, "title": "Polar covalent bonds and electronegativity", "upvotes" : 10, "downvotes" : 7, "url" : "https://courses.edx.org/courses/MITx/3.091X/2013_Fall/courseware/SP13_Week_4/SP13_Covalent_Bonding/", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/videopage2.png", "descriptionText" : "short description for Polar covalent bonds and electronegativity"}
{"id": 3, "title": "Longest wavelength able to to break a C-C bond ...", "upvotes" : 1230, "downvotes" : 7, "url" : "https://answers.yahoo.com/question/index?qid=20081112142253AA1kQN1", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage1.png", "descriptionText" : "short description for Longest wavelength able to to break a C-C bond ..."}
{"id": 4, "title": "Calculate the maximum wavelength of light for ...", "upvotes" : 10, "downvotes" : 3457, "url" : "https://answers.yahoo.com/question/index?qid=20100110115715AA6toHw", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage2.png", "descriptionText" : "short description for Calculate the maximum wavelength of light for ..."}
{"id": 5, "title": "Covalent bond - wave mechanical concept", "upvotes" : 10, "downvotes" : 7, "url" : "http://people.csail.mit.edu/swli/edx/recommendation/img/textbookpage1.png", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/textbookpage1.png", "descriptionText" : "short description for Covalent bond - wave mechanical concept"}
{"id": 6, "title": "Covalent bond - Energetics of covalent bond", "upvotes" : 10, "downvotes" : 7, "url" : "http://people.csail.mit.edu/swli/edx/recommendation/img/textbookpage2.png", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/textbookpage2.png", "descriptionText" : "short description for Covalent bond - Energetics of covalent bond"}
</recommender>
</vertical_demo>
"""),
# {"id": 5, "title": "Covalent bond - wave mechanical concep", "upvotes" : 10, "downvotes" : 7, "url" : "", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/textbookpage1.png", "isProblematic": "notProblematic"}
# {"id": 6, "title": "Covalent bond - Energetics of covalent bond", "upvotes" : 10, "downvotes" : 7, "url" : "", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/textbookpage2.png", "isProblematic": "notProblematic"}
# </recommender>
# </vertical_demo>
# """),
]
@classmethod
......
recommender/static/css/recommender.css
......@@ -88,7 +88,14 @@
margin-top: 2em;
}
.descriptionText {
padding: 0.5em;
background-color: #f5efef;
color: #948f8f;
}
.previewingImg {
margin-top: 1em;
max-width: 100%;
max-height: 100%;
}
......@@ -129,7 +136,7 @@
text-overflow:ellipsis;
}
.recommender_entryId, .recommender_descriptionSlot, .recommender_problematicReason {
.recommender_entryId, .recommender_descriptionImg, .recommender_problematicReason, .recommender_descriptionText {
display:none;
}
......@@ -175,15 +182,13 @@
background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png);
}
.in_title, .edit_title {
.in_title, .edit_title, .in_descriptionText, .edit_descriptionText {
height: 75px;
position: relative;
margin-left: 0.5em;
width:100%;
}
.in_url, .edit_url, .flag_reason {
height: 25px;
position: relative;
margin-left: 0.5em;
width:100%;
}
......@@ -206,8 +211,8 @@
.rightArrowIcon:before { content: '►'; }
.leftArrowIcon:before { content: '◄'; }
.moreIcon:before { content: '...'; }
.lightgreyBg { background-color: #f5efef; }
.lightgreyBg { background-color: #948f8f; }
a { word-break: break-all; }
a:link { color: black; }
a:link, a:visited { color: black; }
form { margin: 0em; }
recommender/static/html/recommender.html
......@@ -31,8 +31,23 @@
flagMode = ''
reason = ''
%>
<%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isProblematic=flagMode,problematicReason=reason,voteMode=voteMode" />
<%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],descriptionText=elem['descriptionText'],isProblematic=flagMode,problematicReason=reason,voteMode=voteMode" />
% endfor
<div class="recommender_resourceTemplate hidden">
<div class="recommender_vote_box">
<div class="recommender_vote_arrow_up" role="button" aria-label="upvote" tabindex="0"><b>↑</b></div>
<div class="recommender_vote_score"></div>
<div class="recommender_vote_arrow_down" role="button" aria-label="downvote" tabindex="0"><b>↓</b></div>
</div>
<div class="recommender_blurb">
<div class="recommender_title"><a href="" target="_blank"></a></div>
<div class="recommender_descriptionText"></div>
<div class="recommender_descriptionImg"></div>
<div class="recommender_entryId"></div>
<div class="recommender_problematicReason"></div>
</div>
<div class="recommender_edit"> <span class="ui-icon ui-icon-pencil resource_edit_button"></span> <span class="ui-icon ui-icon-flag flagResource "></span></div>
</div>
</div>
<div class="resource_add_button">Add new resource &gt;&gt;</div>
<div class='pagination'>
......@@ -46,7 +61,7 @@
</div>
<div class="recommender_description">
<div class="descriptionImg">
<div class='descriptionIntro'> This is a list of resources your fellow students
<div class='descriptionText'> This is a list of resources your fellow students
thought might be helpful. If you find another useful
resource, either on edx.org or elsewhere, please add
it. If you can improve the description or preview of a
......@@ -72,14 +87,18 @@
</div>
<div class="editSourceBlock">
<div class="editSourceBlockTitle">Edit the description, hypelink, and previewing screenshot for the selected resource.</div>
<div style="float: left">Description&nbsp;</div><div class = 'redTxt'>*</div>
<div style="float: left">Title&nbsp;</div><div class = 'redTxt'>*</div>
<textarea
class="edit_title"
placeholder="Provide a meaningful description so other students know whether this is useful to them"></textarea><br/>
placeholder="Provide a meaningful title so other students know whether this is useful to them"></textarea><br/>
<div style="float: left">Location&nbsp;</div><div class = 'redTxt'>*</div>
<input type="text"
class="edit_url"
placeholder="http://en.wikipedia.org/wiki/Edx"/><br/>
<div style="float: left">Description&nbsp;</div>
<textarea
class="edit_descriptionText"
placeholder="Provide a meaningful description so other students know whether this is useful to them"></textarea><br/>
<form method="post" id="editResourceForm">
Previewing screenshot: <input type="file" name="file"><br/>
<input type="button" value="Save change" class="edit_submit" style="margin-top: 0.5em" disabled >
......@@ -87,12 +106,18 @@
</div>
<div class="recommender_add">
<div class="addSourceBlockTitle">Suggest a resource which can help other students with this problem.</div>
<div style="float: left">Description&nbsp;</div><div class = 'redTxt'>*</div><textarea
<div style="float: left">Title&nbsp;</div><div class = 'redTxt'>*</div>
<textarea
class="in_title"
placeholder="Provide a meaningful description so other students know whether this is useful to them"></textarea><br/>
<div style="float: left">Location&nbsp;</div><div class = 'redTxt'>*</div> <input type="text"
placeholder="Provide a meaningful title so other students know whether this is useful to them"></textarea><br/>
<div style="float: left">Location&nbsp;</div><div class = 'redTxt'>*</div>
<input type="text"
class="in_url"
placeholder="http://en.wikipedia.org/wiki/Edx"/><br/>
placeholder="http://en.wikipedia.org/wiki/Edx"/><br/>
<div style="float: left">Description&nbsp;</div>
<textarea
class="in_descriptionText"
placeholder="Provide a meaningful description so other students know whether this is useful to them"></textarea><br/>
<form method="post" id="addResourceForm">
Previewing screenshot: <input type="file" name="file"><br/>
<input type="button" value="Add resource" class="add_submit" style="margin-top: 0.5em" disabled >
......
recommender/static/html/resourcebox.html
<%page args="title,votes,url,description,id,isProblematic,problematicReason,voteMode"/>
<%page args="title,votes,url,description,descriptionText,id,isProblematic,problematicReason,voteMode"/>
<div class="recommender_resource">
<div class="recommender_vote_box">
<div class="recommender_vote_arrow_up ${voteMode}" role="button" aria-label="upvote" tabindex="0"><b>↑</b></div>
......@@ -7,7 +7,8 @@
</div>
<div class="recommender_blurb">
<div class="recommender_title"><a href="${url}" target="_blank">${title}</a></div>
<div class="recommender_descriptionSlot">${description}</div>
<div class="recommender_descriptionText">${descriptionText}</div>
<div class="recommender_descriptionImg">${description}</div>
<div class="recommender_entryId">${id}</div>
<div class="recommender_problematicReason">${problematicReason}</div>
</div>
......
recommender/static/js/src/cats.js
......@@ -24,7 +24,7 @@ var tooltipsCatsText = {
'.recommender_vote_arrow_up': 'Upvote for a helpful resource',
'.recommender_vote_arrow_down': 'Downvote for an irrelevant resource',
'.recommender_vote_score': 'Votes',
'.recommender_blurb': 'The description of a helpful resource',
'.recommender_blurb': 'The title of a helpful resource',
'.previewingImg': 'Previewing screenshot',
'.in_title': 'Type in the description of the resource',
'.in_url': 'Type in the hyperlink to the resource',
......
recommender/static/js/src/recommender.js
......@@ -152,6 +152,7 @@ function RecommenderXBlock(runtime, element) {
function addResourceReset() {
$('.in_title').val('');
$('.in_url').val('');
$('.in_descriptionText').val('');
$('#addResourceForm').find("input[name='file']").val('');
$('.add_submit').attr('disabled', true);
}
......@@ -176,6 +177,7 @@ function RecommenderXBlock(runtime, element) {
data['resource'] = {};
data['resource']['url'] = $('.in_url').val();
data['resource']['title'] = $('.in_title').val();
data['resource']['descriptionText'] = $('.in_descriptionText').val();
data['resource']['description'] = '';
var formDiv = $('#addResourceForm');
var file = new FormData($(formDiv)[0]);
......@@ -183,7 +185,8 @@ function RecommenderXBlock(runtime, element) {
'status': 'Add new resource',
'title': data['resource']['title'],
'url': data['resource']['url'],
'description': $(formDiv).find("input[name='file']").val()
'description': $(formDiv).find("input[name='file']").val(),
'descriptionText': data['resource']['descriptionText']
});
if ($(formDiv).find("input[name='file']").val() == '') { addResource(data); }
......@@ -230,28 +233,40 @@ function RecommenderXBlock(runtime, element) {
});
/* show the added resource at right place (pos), based on sorting the votes, and lead student to that page */
if (pos == -1) {
var toDiv = $('.recommender_resource:last');
currentPage = Math.ceil($('.recommender_resource').length/entriesPerPage);
}
if ($('.recommender_resource').length == 0) {
$('.noResourceIntro').addClass('hidden');
$('.descriptionText').show();
currentPage = 1;
var newDiv = $('.recommender_resourceTemplate').clone().removeClass('hidden').removeClass('recommender_resourceTemplate').addClass('recommender_resource');
}
else {
var toDiv = $('.recommender_resource:eq(' + pos.toString() + ')');
currentPage = Math.ceil((pos + 1)/entriesPerPage);
if (pos == -1) {
var toDiv = $('.recommender_resource:last');
currentPage = Math.ceil(($('.recommender_resource').length+1)/entriesPerPage);
}
else {
var toDiv = $('.recommender_resource:eq(' + pos.toString() + ')');
currentPage = Math.ceil((pos + 1)/entriesPerPage);
}
var newDiv = $(toDiv).clone();
}
/* div for the new resource */
var newDiv = $(toDiv).clone();
$(newDiv).find('.recommender_vote_arrow_up,.recommender_vote_score,.recommender_vote_arrow_down')
.removeClass('downvoting').removeClass('upvoting').addClass('nonevoting');
$(newDiv).find('.recommender_vote_score').text('0');
$(newDiv).find('a').attr('href', data['resource']['url']);
$(newDiv).find('a').text(data['resource']['title']);
$(newDiv).find('.recommender_descriptionSlot').text(data['resource']['description']);
$(newDiv).find('.recommender_descriptionImg').text(data['resource']['description']);
$(newDiv).find('.recommender_descriptionText').text(data['resource']['descriptionText']);
$(newDiv).find('.recommender_entryId').text(result['id']);
$(newDiv).find('.recommender_problematicReason').text('');
$(newDiv).find('.flagResource').removeClass('problematic');
if (pos == -1) { $(toDiv).after(newDiv); }
else { $(toDiv).before(newDiv); }
if ($('.recommender_resource').length == 0) { $('.recommender_resourceTemplate').before(newDiv); }
else {
if (pos == -1) { $(toDiv).after(newDiv); }
else { $(toDiv).before(newDiv); }
}
addResourceReset();
unbindEvent();
......@@ -357,9 +372,10 @@ function RecommenderXBlock(runtime, element) {
function() {
$('.recommender_resource').removeClass('resource_hovered');
$(this).addClass('resource_hovered');
$('.descriptionIntro').hide();
// $('.descriptionText').hide();
$('.previewingImg').removeClass('hidden');
$('.previewingImg').attr('src', $(this).find('.recommender_descriptionSlot').text());
$('.previewingImg').attr('src', $(this).find('.recommender_descriptionImg').text());
$('.descriptionText').text($(this).find('.recommender_descriptionText').text());
Logger.log('resource.hover.event', {
'status': 'Hovering resource',
......@@ -379,6 +395,7 @@ function RecommenderXBlock(runtime, element) {
/* initialize the text area */
$('.edit_title').val($(this).parent().parent().find('.recommender_title').find('a').text());
$('.edit_url').val($(this).parent().parent().find('.recommender_title').find('a').attr('href'));
$('.edit_descriptionText').val($(this).parent().parent().find('.recommender_descriptionText').text());
$('#editResourceForm').find("input[name='file']").val('');
$('.edit_submit').attr('disabled', true);
var divEdit = this;
......@@ -398,10 +415,12 @@ function RecommenderXBlock(runtime, element) {
}
/* check whether the input text area is changed, if yes, check whether student can submit the resource */
$('.edit_title').unbind();
$('.edit_url').unbind();
$('.edit_title').bind('input propertychange', function() { enableEditSubmit(); });
$('.edit_url').bind('input propertychange', function() { enableEditSubmit(); });
$('.edit_title,.edit_url,.edit_descriptionText').unbind();
$('.edit_title,.edit_url,.edit_descriptionText').bind('input propertychange', function() { enableEditSubmit(); });
$('#editResourceForm').find("input[name='file']").unbind();
$('#editResourceForm').find("input[name='file']").change(function() {
if ($(this).val() != '') { enableEditSubmit(); }
});
/* upload the screen shot, submit the edited resource, save to database, update the current view */
$('.edit_submit').unbind();
......@@ -411,6 +430,7 @@ function RecommenderXBlock(runtime, element) {
data['resource'] = parseInt($(divEdit).parent().parent().find('.recommender_entryId').text());
data['url'] = $('.edit_url').val();
data['title'] = $('.edit_title').val();
data['descriptionText'] = $('.edit_descriptionText').val();
data['description'] = ''
if (data['url'] == '' || data['title'] == '') { return; }
var formDiv = $('#editResourceForm');
......@@ -420,6 +440,7 @@ function RecommenderXBlock(runtime, element) {
'status': 'Edit existing resource',
'title': data['title'],
'url': data['url'],
'descriptionText': data['descriptionText'],
'description': $(formDiv).find("input[name='file']").val(),
'id': $(divEdit).parent().parent().find('.recommender_entryId').text()
});
......@@ -460,7 +481,8 @@ function RecommenderXBlock(runtime, element) {
/* show the edited resource */
$(divEdit).parent().parent().find('.recommender_title').find('a').text(data['title']);
$(divEdit).parent().parent().find('.recommender_title').find('a').attr('href', data['url']);
if (data["description"] != "") { $(divEdit).parent().parent().find('.recommender_descriptionSlot').text(data['description']); }
if (data["description"] != "") { $(divEdit).parent().parent().find('.recommender_descriptionImg').text(data['description']); }
if (data["descriptionText"] != "") { $(divEdit).parent().parent().find('.recommender_descriptionText').text(data['descriptionText']); }
backToView();
}
else { alert('The url you entered has been already provided by your fellows'); }
......@@ -487,6 +509,7 @@ function RecommenderXBlock(runtime, element) {
});
/* record the flagging once user click on the flag button */
/*
if (!$(this).hasClass('problematic')) {
data = {};
data['resource'] = parseInt($(flaggedResourceDiv).find('.recommender_entryId').text());
......@@ -502,7 +525,7 @@ function RecommenderXBlock(runtime, element) {
}
});
}
*/
$('.flag_reason_submit').unbind();
$('.unflag_button').unbind();
......@@ -575,7 +598,8 @@ function RecommenderXBlock(runtime, element) {
bindEvent();
if ($('.recommender_resource').length == 0) {
$('.noResourceIntro').show();
$('.noResourceIntro').removeClass('hidden');
$('.descriptionText').hide();
}
}
initial();
......
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