Skip to content

R
RecommenderXBlock
Commit 87553af7 by swdanielli
Options

v0.1 + flag problematic entry, give reason

parent 2952b4d8
Showing with 183 additions and 111 deletions
recommender/static/html/recommender.html
......@@ -114,7 +114,7 @@
text-overflow:ellipsis;
}
.recommender_entryId, .recommender_url, .recommender_descriptionSlot {
.recommender_entryId, .recommender_descriptionSlot, .recommender_problematicReason {
display:none;
}
......@@ -143,11 +143,11 @@
float: left;
font-size: small;
}*/
.addSourceBlockTitle, .editSourceBlockTitle {
.addSourceBlockTitle, .editSourceBlockTitle, .flagSourceBlockTitle {
margin-bottom: 1em;
}
.editSourceBlock, .recommender_add {
.editSourceBlock, .recommender_add, .flagSourceBlock {
padding-left: 1em;
}
......@@ -187,24 +187,24 @@
} */
/*
[title]{
position:relative;
position:relative;
}
[title]:after{
content:attr(title);
color:#fff;
background:#333;
background:rgba(51,51,51,0.75);
padding:5px;
position:absolute;
left:-9999px;
opacity:0;
bottom:100%;
white-space:nowrap;
-webkit-transition:0.25s linear opacity;
content:attr(title);
color:#fff;
background:#333;
background:rgba(51,51,51,0.75);
padding:5px;
position:absolute;
left:-9999px;
opacity:0;
bottom:100%;
white-space:nowrap;
-webkit-transition:0.25s linear opacity;
}
[title]:hover:after{
left:5px;
opacity:1;
left:5px;
opacity:1;
}*/
.downArrowIcon:before { content: '▼'; }
......@@ -221,20 +221,30 @@ form { margin: 0em; }
<div class="recommender_block">
<div class="recommender_recommendations">
<div class="recommender_content">
<div class="recommender_content">
<div class="recommender_row_top hide-show resource_list_expanded">
Related resources<div class='recommender_panel'><span class="resource_add_button plusIcon"></span> <span class='hide-show-icon upArrowIcon'></span> </div>
</div>
<div class='recommender_row_inner'>
<div class="recommender_row">
Related resources<div class='recommender_panel'><span class="resource_add_button plusIcon"></span> <span class='hide-show-icon upArrowIcon'></span> </div>
</div>
<div class='recommender_row_inner'>
<div class="recommender_row">
% for elem in resources:
% if elem['id'] in downvotes:
<%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isProblematic=elem['isProblematic'],voteMode='downvoting'" />
% elif elem['id'] in upvotes:
<%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isProblematic=elem['isProblematic'],voteMode='upvoting'" />
% else:
<%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isProblematic=elem['isProblematic'],voteMode='nonevoting'" />
% endif
<%
if elem['id'] in downvotes:
voteMode = "downvoting"
elif elem['id'] in upvotes:
voteMode = 'upvoting'
else:
voteMode = 'nonevoting'
if elem['id'] in flagId:
flagMode = 'problematic'
reason = flagReason[flagId.index(elem['id'])]
else:
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" />
% endfor
</div>
<div class='pagination'> </div>
......@@ -245,9 +255,15 @@ form { margin: 0em; }
</div>
<div class='recommender_modify'>
<div class='recommender_modify_title_container'><div class='backToViewButton'>&lt; Related resources</div><div class='recommender_modify_title'></div></div>
<div class="editSourceBlock" id="editSourceBlock">
<div class="flagSourceBlock">
<div class="flagSourceBlockTitle">Give or edit the reasons why you flagged this resource, or unflag it.</div>
Reasons: <input type="text" class="flag_reason" style="height: 25px; position: relative; left: 10px;"><br>
<input type="button" value="Save the reason" class="flag_reason_submit" style="margin-top: 0.5em">
<input type="button" value="Unflag the resource" class="unflag_button" style="margin-top: 0.5em">
</div>
<div class="editSourceBlock">
</div>
<div class="recommender_add" id="recommender_add">
<div class="recommender_add">
<div class="addSourceBlockTitle">Recommend a new helpful resource for this problem with a short description, hyperlink, and previewing screenshot to the new resource.</div>
Description: <input type="text" class="in_title" style="height: 25px; position: relative; left: 10px;"><br>
HyperLink: <input type="text" class="in_url" style="height: 25px; position: relative; left: 22px;"><br>
......
recommender/static/html/resourcebox.html
<%page args="title,votes,url,description,id,isProblematic,voteMode"/>
<div class="recommender_resource">
<%page args="title,votes,url,description,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>
<div class="recommender_vote_score ${voteMode}"><b>${votes}</b></div>
<div class="recommender_vote_arrow_down ${voteMode}" role="button" aria-label="downvote" tabindex="0"><b>↓</b></div>
</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_entryId">${id}</div></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_entryId">${id}</div>
<div class="recommender_problematicReason">${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 ${isProblematic}"></span></div>
</div>
</div>
recommender/static/js/src/recommender.js
......@@ -13,17 +13,18 @@ function RecommenderXBlock(runtime, element) {
/* resource list collapse or expansion */
$(".hide-show").click(function () {
if ($(this).hasClass('resource_list_expanded')) {
$(this).find('.hide-show-icon').removeClass('upArrowIcon').addClass('downArrowIcon');
//$(this).find('.hide-show-icon').removeClass('upArrowIcon').addClass('downArrowIcon');
$(".recommender_row_inner", element).slideUp('fast');
$('.resource_add_button').css('visibility', 'hidden');
$(this).css('cursor', 's-resize');
}
else {
$(this).find('.hide-show-icon').removeClass('downArrowIcon').addClass('upArrowIcon');
//$(this).find('.hide-show-icon').removeClass('downArrowIcon').addClass('upArrowIcon');
$(".recommender_row_inner", element).slideDown('fast');
$('.resource_add_button').css('visibility', 'visible');
$(this).css('cursor', 'n-resize');
}
$(this).find('.hide-show-icon').toggleClass('upArrowIcon').toggleClass('downArrowIcon');
$(this).toggleClass('resource_list_expanded');
addTooltip();
});
......@@ -93,9 +94,10 @@ function RecommenderXBlock(runtime, element) {
/* change between different mode (resource list or add/edit mode) */
function backToView() {
$('.recommender_add').hide();
$('.editSourceBlock').hide();
$('.recommender_modify').hide();
$('.flagSourceBlock').hide();
$('.editSourceBlock').hide();
$('.recommender_add').hide();
$('.recommender_content').show();
if ($('.recommender_row_top').css('cursor') == 's-resize') { $(".hide-show").click(); }
}
......@@ -185,12 +187,12 @@ function RecommenderXBlock(runtime, element) {
'</div>' +
'<div class="recommender_blurb"><div class="recommender_title">' +
'<a href="' + data['resource']['url'] + '" target="_blank">' + data['resource']['title'] + '</a>' + '</div>' +
'<div class="recommender_url">' + data['resource']['url'] +
'</div><div class="recommender_descriptionSlot">' + data['resource']['description'] +
'<div class="recommender_descriptionSlot">' + data['resource']['description'] +
'</div><div class="recommender_entryId">' + result['id'] +
'</div></div><div class="recommender_edit">' +
'</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 notProblematic" title="Flag irrelevant resource">' +
'<span class="ui-icon ui-icon-flag flagResource" title="Flag irrelevant resource">' +
'</span></div></div>';
/* show the added resource at right place (pos), based on sorting the votes, and lead student to that page */
......@@ -202,13 +204,14 @@ function RecommenderXBlock(runtime, element) {
$('.recommender_resource:eq(' + pos.toString() + ')').before(content);
currentPage = Math.ceil((pos + 1)/entriesPerPage);
}
addResourceReset();
unbindEvent();
bindEvent();
paginationRow();
pagination();
backToView();
}
addResourceReset();
unbindEvent();
bindEvent();
paginationRow();
pagination();
backToView();
else { alert('add redundant resource'); }
}
});
});
......@@ -385,6 +388,7 @@ function RecommenderXBlock(runtime, element) {
$('.editSourceBlock').empty();
backToView();
}
else { alert('add redundant resource'); }
}
});
});
......@@ -392,28 +396,71 @@ function RecommenderXBlock(runtime, element) {
/* flag problematic resource: TODO */
$('.flagResource').click(function() {
var data = {};
if ($(this).hasClass('notProblematic')) {
data['isProblematic'] = 'problematic';
$(this).removeClass('notProblematic').addClass('problematic');
}
else {
data['isProblematic'] = 'notProblematic';
$(this).removeClass('problematic').addClass('notProblematic');
}
data['resource'] = parseInt($(this).parent().parent().find('.recommender_entryId').text());
$.ajax({
type: "POST",
url: flagResourceUrl,
data: JSON.stringify(data)
});
});
$('.flagSourceBlock').show();
$('.recommender_content').hide();
$('.recommender_modify').show();
$('.recommender_modify_title').text('Reasons for flagging the resource');
var flagDiv = $(this);
var flaggedResourceDiv = $(this).parent().parent();
$('.flag_reason').val($(flaggedResourceDiv).find('.recommender_problematicReason').text());
if (!$(this).hasClass('problematic')){
data = {};
data['resource'] = parseInt($(flaggedResourceDiv).find('.recommender_entryId').text());
data['reason'] = '';
data['isProblematic'] = true;
$.ajax({
type: "POST",
url: flagResourceUrl,
data: JSON.stringify(data),
success: function(result) {
$(flagDiv).addClass('problematic');
}
});
}
addTooltip();
$('.flag_reason_submit').unbind();
$('.unflag_button').unbind();
$('.flag_reason_submit').click(function() {
data = {};
data['resource'] = parseInt($(flaggedResourceDiv).find('.recommender_entryId').text());
data['reason'] = $('.flag_reason').val();
data['isProblematic'] = true;
$.ajax({
type: "POST",
url: flagResourceUrl,
data: JSON.stringify(data),
success: function(result) {
$(flagDiv).addClass('problematic');
$(flaggedResourceDiv).find('.recommender_problematicReason').text(data['reason']);
backToView();
}
});
});
$('.unflag_button').click(function() {
data = {};
data['resource'] = parseInt($(flaggedResourceDiv).find('.recommender_entryId').text());
data['isProblematic'] = false;
$.ajax({
type: "POST",
url: flagResourceUrl,
data: JSON.stringify(data),
success: function(result) {
$(flagDiv).removeClass('problematic');
$(flaggedResourceDiv).find('.recommender_problematicReason').text('');
backToView();
}
});
});
});
addTooltip();
}
function addTooltip() {
$('.notProblematic').attr('title', 'Flag this resource as problematic and give the reason');
$('.problematic').attr('title', 'Edit the reason of this problematic resource');
$('.resource_add_button').attr('title', 'Recommend a new helpful resource for this problem with a short description, hyperlink, and previewing screenshot to the new resource');
$('.resource_edit_button').attr('title', 'Edit the description, hypelink, and previewing screenshot of this resource');
$('.recommender_vote_arrow_up').attr('title', 'Upvote for a helpful resource');
......@@ -426,15 +473,20 @@ function RecommenderXBlock(runtime, element) {
$('.edit_title').attr('title', 'Type in the description of the resource');
$('.edit_url').attr('title', 'Type in the hyperlink to the resource');
$('.backToViewButton').attr('title', 'Back to list of related resources');
if ($('.flagResource').hasClass('problematic')) { $('.flagResource').attr('title', 'Unflag this problematic resource or edit the reason for it'); }
else { $('.flagResource').attr('title', 'Flag this resource as problematic and give the reason' ); }
if ($('.recommender_row_top').hasClass('resource_list_expanded')) { $('.recommender_row_top').attr('title', 'Select to hide the list'); }
else { $('.recommender_row_top').attr('title', 'Select for expanding resource list' ); }
}
function initial() {
$(".hide-show").click();
$('.editSourceBlock').hide();
$('.recommender_add').hide();
$('.recommender_modify').hide();
$('.flagSourceBlock').hide();
$('.editSourceBlock').hide();
$('.recommender_add').hide();
paginationRow();
pagination();
addResourceReset();
......
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