Skip to content

R
RecommenderXBlock
Commit 1386d9a4 by swdanielli
Options

collect reasons for endorsement

parent e7014efa
Showing with 110 additions and 63 deletions
recommender/static/css/recommender.css
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
} }
.descriptionImg { .descriptionImg {
max-height: 820px; max-height: 1020px;
max-width: 700px; max-width: 700px;
margin-top: 2em; margin-top: 2em;
} }
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
color: #948f8f; color: #948f8f;
} }
.problematic_reasons { .show_problematic_reasons {
max-height: 200px; max-height: 200px;
overflow: auto; overflow: auto;
padding: 0.5em; padding: 0.5em;
...@@ -101,7 +101,16 @@ ...@@ -101,7 +101,16 @@
color: white; color: white;
} }
.problematic_reasons:before { content: 'This resource was flagged problematic by students'; } .show_endorsed_reasons {
max-height: 200px;
overflow: auto;
padding: 0.5em;
background-color: rgb(69, 194, 10);
color: white;
}
.show_problematic_reasons:before { content: 'This resource was flagged problematic by students.'; }
.show_endorsed_reasons:before { content: 'This resource was endorsed by course staff.'; }
.previewingImg { .previewingImg {
margin-top: 1em; margin-top: 1em;
...@@ -147,7 +156,7 @@ ...@@ -147,7 +156,7 @@
.recommender_endorse { width:15px; display: inline-block; } .recommender_endorse { width:15px; display: inline-block; }
.recommender_entryId, .recommender_descriptionImg, .recommender_problematicReason, .recommender_descriptionText { .recommender_entryId, .recommender_descriptionImg, .recommender_problematicReason, .recommender_descriptionText, .recommender_endorse_reason {
display:none; display:none;
} }
......
recommender/static/html/recommender.html
...@@ -18,8 +18,11 @@ ...@@ -18,8 +18,11 @@
<% <%
if elem['id'] in endorsed_recommendation_ids: if elem['id'] in endorsed_recommendation_ids:
endorseMode = 'endorsed' endorseMode = 'endorsed'
endorsed_index = endorsed_recommendation_ids.index(elem['id'])
endorsed_reason = endorsed_recommendation_reasons[endorsed_index]
else: else:
endorseMode = '' endorseMode = ''
endorsed_reason = ''
if elem['id'] in downvoted_ids: if elem['id'] in downvoted_ids:
voteMode = "downvoting" voteMode = "downvoting"
...@@ -35,7 +38,7 @@ ...@@ -35,7 +38,7 @@
flagMode = '' flagMode = ''
reason = '' reason = ''
%> %>
<%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,endorseMode=endorseMode" /> <%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,endorseMode=endorseMode,endorsedReason=endorsed_reason" />
% endfor % endfor
<div class="recommender_resourceTemplate hidden"> <div class="recommender_resourceTemplate hidden">
<div class="recommender_vote_box"> <div class="recommender_vote_box">
...@@ -49,6 +52,7 @@ ...@@ -49,6 +52,7 @@
<div class="recommender_descriptionImg"></div> <div class="recommender_descriptionImg"></div>
<div class="recommender_entryId"></div> <div class="recommender_entryId"></div>
<div class="recommender_problematicReason"></div> <div class="recommender_problematicReason"></div>
<div class="recommender_endorse_reason"></div>
</div> </div>
<div class="recommender_endorse"><div class="endorse"></div></div> <div class="recommender_endorse"><div class="endorse"></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 class="recommender_edit"> <span class="ui-icon ui-icon-pencil resource_edit_button"></span> <span class="ui-icon ui-icon-flag flagResource "></span></div>
...@@ -71,7 +75,9 @@ ...@@ -71,7 +75,9 @@
</div> </div>
<div class="recommender_description"> <div class="recommender_description">
<div class="descriptionImg"> <div class="descriptionImg">
<div class='problematic_reasons hidden'></div> <div class='show_endorsed_reasons hidden'></div>
<div class="clearFix"></div>
<div class='show_problematic_reasons hidden'></div>
<div class="clearFix"></div> <div class="clearFix"></div>
<div class='descriptionText'> 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 thought might be helpful. If you find another useful
......
recommender/static/html/resourcebox.html
<%page args="title,votes,url,description,descriptionText,id,isProblematic,problematicReason,voteMode,endorseMode "/> <%page args="title,votes,url,description,descriptionText,id,isProblematic,problematicReason,voteMode,endorseMode,endorsedReason"/>
<div class="recommender_resource"> <div class="recommender_resource">
<div class="recommender_vote_box"> <div class="recommender_vote_box">
<div class="recommender_vote_arrow_up ${voteMode}" role="button" aria-label="upvote" tabindex="0"><b>↑</b></div> <div class="recommender_vote_arrow_up ${voteMode}" role="button" aria-label="upvote" tabindex="0"><b>↑</b></div>
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
<div class="recommender_descriptionImg">${description}</div> <div class="recommender_descriptionImg">${description}</div>
<div class="recommender_entryId">${id}</div> <div class="recommender_entryId">${id}</div>
<div class="recommender_problematicReason">${problematicReason}</div> <div class="recommender_problematicReason">${problematicReason}</div>
<div class="recommender_endorse_reason">${endorsedReason}</div>
</div> </div>
<div class="recommender_endorse"><div class="endorse ${endorseMode}"></div></div> <div class="recommender_endorse"><div class="endorse ${endorseMode}"></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 ${isProblematic}"></span></div> <div class="recommender_edit"> <span class="ui-icon ui-icon-pencil resource_edit_button"></span> <span class="ui-icon ui-icon-flag flagResource ${isProblematic}"></span></div>
......
recommender/static/js/src/cats.js
...@@ -111,5 +111,5 @@ var s3_info_textareas_placeholder = { ...@@ -111,5 +111,5 @@ var s3_info_textareas_placeholder = {
}; };
var problematic_ressons_prefix = '<br/>Here is a list of reasons why students think this resource problematic: <br/>&nbsp;&nbsp;&nbsp;&nbsp;' var problematic_ressons_prefix = '<br/>Here is a list of reasons why students think this resource problematic: <br/>&nbsp;&nbsp;&nbsp;&nbsp;'
var endorsed_ressons_prefix = '<br/>The reason why it is endorsed is: <br/>&nbsp;&nbsp;&nbsp;&nbsp;'
var reason_separator = '<br/>&nbsp;&nbsp;&nbsp;&nbsp;' var reason_separator = '<br/>&nbsp;&nbsp;&nbsp;&nbsp;'
recommender/static/js/src/recommender.js
...@@ -137,7 +137,8 @@ function RecommenderXBlock(runtime, element) { ...@@ -137,7 +137,8 @@ function RecommenderXBlock(runtime, element) {
$('.recommender_resource', element).removeClass('resource_hovered'); $('.recommender_resource', element).removeClass('resource_hovered');
$('.previewingImg', element).addClass('hidden'); $('.previewingImg', element).addClass('hidden');
$('.descriptionText', element).hide(); $('.descriptionText', element).hide();
$('.problematic_reasons', element).addClass('hidden'); $('.show_problematic_reasons', element).addClass('hidden');
$('.show_endorsed_reasons', element).addClass('hidden');
$('.recommender_content', element).show(); $('.recommender_content', element).show();
} }
...@@ -287,6 +288,7 @@ function RecommenderXBlock(runtime, element) { ...@@ -287,6 +288,7 @@ function RecommenderXBlock(runtime, element) {
$(newDiv).find('.recommender_descriptionText').text(result['descriptionText']); $(newDiv).find('.recommender_descriptionText').text(result['descriptionText']);
$(newDiv).find('.recommender_entryId').text(result['id']); $(newDiv).find('.recommender_entryId').text(result['id']);
$(newDiv).find('.recommender_problematicReason').text(''); $(newDiv).find('.recommender_problematicReason').text('');
$(newDiv).find('.recommender_endorse_reason').text('');
$(newDiv).find('.flagResource').removeClass('problematic'); $(newDiv).find('.flagResource').removeClass('problematic');
$(newDiv).find('.endorse').removeClass('endorsed'); $(newDiv).find('.endorse').removeClass('endorsed');
bindEvent(newDiv); bindEvent(newDiv);
...@@ -422,16 +424,24 @@ function RecommenderXBlock(runtime, element) { ...@@ -422,16 +424,24 @@ function RecommenderXBlock(runtime, element) {
$(".previewingImg", element).error(function() { $('.previewingImg', element).addClass('hidden'); }); $(".previewingImg", element).error(function() { $('.previewingImg', element).addClass('hidden'); });
if ($('.previewingImg', element).attr('src') == '') { $('.previewingImg', element).addClass('hidden'); } if ($('.previewingImg', element).attr('src') == '') { $('.previewingImg', element).addClass('hidden'); }
$('.problematic_reasons', element).addClass('hidden'); $('.show_problematic_reasons', element).addClass('hidden');
if (!$.isEmptyObject(flagged_resource_reasons)) { if (!$.isEmptyObject(flagged_resource_reasons)) {
var resource_id = parseInt($(this).find('.recommender_entryId').text()); var resource_id = parseInt($(this).find('.recommender_entryId').text());
var reasons = ''; var reasons = '';
if (resource_id in flagged_resource_reasons) { if (resource_id in flagged_resource_reasons) {
$('.problematic_reasons', element).removeClass('hidden'); $('.show_problematic_reasons', element).removeClass('hidden');
reasons = flagged_resource_reasons[resource_id].join(reason_separator); reasons = flagged_resource_reasons[resource_id].join(reason_separator);
} }
if (reasons != '') { $('.problematic_reasons', element).html(problematic_ressons_prefix + reasons); } if (reasons != '') { $('.show_problematic_reasons', element).html(problematic_ressons_prefix + reasons); }
else { $('.problematic_reasons', element).html(''); } else { $('.show_problematic_reasons', element).html(''); }
}
$('.show_endorsed_reasons', element).addClass('hidden');
if ($(this).find('.endorse').hasClass('endorsed')) {
var reasons = $(this).find('.recommender_endorse_reason').text();
if (reasons != '') { $('.show_endorsed_reasons', element).html(endorsed_ressons_prefix + reasons); }
else { $('.show_endorsed_reasons', element).html(''); }
$('.show_endorsed_reasons', element).removeClass('hidden');
} }
Logger.log('resource.hover.event', { Logger.log('resource.hover.event', {
...@@ -809,7 +819,7 @@ function RecommenderXBlock(runtime, element) { ...@@ -809,7 +819,7 @@ function RecommenderXBlock(runtime, element) {
sortResource('decreasing', 0); sortResource('decreasing', 0);
paginationRow(); paginationRow();
pagination(); pagination();
$('.problematic_reasons', element).addClass('hidden'); $('.show_problematic_reasons', element).addClass('hidden');
flagged_resource_reasons = {}; flagged_resource_reasons = {};
} }
}); });
...@@ -920,7 +930,11 @@ function RecommenderXBlock(runtime, element) { ...@@ -920,7 +930,11 @@ function RecommenderXBlock(runtime, element) {
var data = {}; var data = {};
data['id'] = parseInt($(this).parent().parent().find('.recommender_entryId').text()); data['id'] = parseInt($(this).parent().parent().find('.recommender_entryId').text());
if ($(ele).hasClass('endorsed')) { if ($(this).hasClass('endorsed')) {
/* Undo the endorsement of a selected resource */
endorse(data)
}
else {
$('.endorseBlock', element).show(); $('.endorseBlock', element).show();
$('.recommender_content', element).hide(); $('.recommender_content', element).hide();
$('.recommender_modify', element).show(); $('.recommender_modify', element).show();
...@@ -932,11 +946,7 @@ function RecommenderXBlock(runtime, element) { ...@@ -932,11 +946,7 @@ function RecommenderXBlock(runtime, element) {
data['reason'] = $('.endorse_reason', element).val(); data['reason'] = $('.endorse_reason', element).val();
/* Endorse a selected resource */ /* Endorse a selected resource */
endorse(data); endorse(data);
} });
}
else {
/* Undo the endorsement of a selected resource */
endorse(data)
} }
}); });
......
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