Skip to content

C
crowdsourcehinter
Commit 4ad9860b by Sola
Options

moving to templates

parent 8ec8332f
Showing with 103 additions and 123 deletions
crowdsourcehinter/crowdsourcehinter.py
...@@ -295,21 +295,17 @@ class CrowdsourceHinter(XBlock): ...@@ -295,21 +295,17 @@ class CrowdsourceHinter(XBlock):
@XBlock.json_handler @XBlock.json_handler
def rate_hint(self, data, suffix=''): def rate_hint(self, data, suffix=''):
""" """
Used to facilitate hint rating by students. Ratings are -1, 1, or 0. -1 is downvote, 1 is upvote, and 0 is Used to facilitate hint rating by students.
when a student flags a hint. 'zzeerroo' is returned to JS when a hint's rating is 0 because whenever 0 was
simply returned, JS would interpret it as null.
Hint ratings in hint_database are updated and the resulting hint rating (or flagged status) is returned to JS. Hint ratings in hint_database are updated and the resulting hint rating (or flagged status) is returned to JS.
Args: Args:
data['student_answer']: The incorrect answer that corresponds to the hint that is being voted on data['student_answer']: The incorrect answer that corresponds to the hint that is being voted on
data['hint']: The hint that is being voted on data['hint']: The hint that is being voted on
data['student_rating']: The rating chosen by the student. The value is -1, 1, or 0. data['student_rating']: The rating chosen by the student.
Returns: Returns:
"rating": The rating of the hint. 'zzeerroo' is returned if the hint's rating is 0. "rating": The rating of the hint.
If the hint has already been voted on, 'You have already voted on this hint!'
will be returned to JS.
""" """
answer_data = data['student_answer'] answer_data = data['student_answer']
# answer_data is manipulated to remove symbols to prevent errors that # answer_data is manipulated to remove symbols to prevent errors that
...@@ -343,19 +339,6 @@ class CrowdsourceHinter(XBlock): ...@@ -343,19 +339,6 @@ class CrowdsourceHinter(XBlock):
return {"rating": str(rating), 'hint': data_hint} return {"rating": str(rating), 'hint': data_hint}
else: else:
return {"rating": str('voted'), 'hint': data_hint} return {"rating": str('voted'), 'hint': data_hint}
# def hint_flagged(self, data_hint, answer_data):
# """
# This is used to add a hint to the self.flagged dictionary. When a hint is returned with the rating
# of 0, it is considered to be flagged.
# Args:
# data_hint: This is equal to the data['hint'] in self.rate_hint
# answer_data: This is equal to the data['student_answer'] in self.rate_hint
# """
# for answer_keys in self.hint_database:
# if answer_keys == data_hint:
# for hint_keys in self.hint_database[str(answer_keys)]:
# if str(hint_keys) == answer_data:
self.Flagged[str(data_hint)] = str(answer_data) self.Flagged[str(data_hint)] = str(answer_data)
def change_rating(self, data_hint, data_rating, answer_data): def change_rating(self, data_hint, data_rating, answer_data):
......
crowdsourcehinter/static/css/crowdsourcehinter.css
...@@ -50,6 +50,15 @@ div[data-rate="downvote"] { ...@@ -50,6 +50,15 @@ div[data-rate="downvote"] {
font-weight: bold; font-weight: bold;
} }
[csh_isStaff="false"] .csh_flagged_hints {
visibility: hidden;
display: none;
}
[csh_isStaff="true"] .csh_flagged_hints {
visibility: visible;
}
.rating{ .rating{
margin-right: 10px; margin-right: 10px;
} }
......
crowdsourcehinter/static/html/crowdsourcehinter.html
<script type="x-tmpl-mustache" id="show_hint_feedback"> <script type='x-tmpl-mustache' id='show_hint_feedback'>
<div class="hint_value" value={{hintvalue}}> <div class='csh_hint_value' value={{hintvalue}}>
<div role="button" class="rate_hint" data-rate="upvote" data-icon="arrow-u" aria-label="upvote"> <div role="button" class="csh_rate_hint" data-rate="upvote" data-icon="arrow-u" aria-label="upvote">
<b>↑</b> <b>↑</b>
</div> </div>
<div role="button" class="rate_hint" data-rate="flag" data-icon="flag" aria-label="flag"> <div role="button" class="csh_rate_hint" data-rate="flag" data-icon="flag" aria-label="flag">
<b>!</b> <b>!</b>
</div> </div>
<div class ="rating"> {{rating}} </div> <div class ="csh_rating"> {{rating}} </div>
<div class="hint"> {{hint}} </div> <div class="csh_hint"> {{hint}} </div>
<div role="button" class="rate_hint" data-rate="downvote" aria-label="downvote"> <div role="button" class="csh_rate_hint" data-rate="downvote" aria-label="downvote">
<b>↓</b> <b>↓</b>
</div> </div>
</div> </div>
</script> </script>
<script type="text/template" id="testing"> <script type="x-tmpl-mustache" id="show_flagged_feedback">
<div class="csh_hint_value" value ={{hint}}>
<div role="button" class="csh_staff_rate" data-rate="unflag" aria-label="unflag">
<b>O</b>
</div>
<div class="csh_hint"> {{hint}} </div>
<div role="button" class="csh_staff_rate" data-rate="remove" aria-label="remove">
<b>X</b>
</div>
</div>
</script>
<script type="x-tmpl-mustache" id="show_answer_feedback">
<div class="csh_student_answer">
<span><b> {{answer}}</b></span>
<div> <div>
{{testone}} <input type ="button" class="csh_student_hint_creation" value="Submit a new hint for this answer."
{{testtwo}} </input>
</div>
</div> </div>
</script> </script>
<div class="crowdsourcehinter_block"> <!--most stuff just for testing purposes-->
<p> <span class='HintsToUse'></span> <div class="crowdsourcehinter_block" csh_isStaff= false>
<p> <span class='csh_HintsToUse'></span>
</p> </p>
</div>
<div class="crowdsourcehinter_block"> <div class="crowdsourcehinter_block">
<section class="correct"></section> <section class="csh_correct"></section>
<p> <p>
<span class='Thankyou'></span> <span class='Thankyou'></span>
</p> </p>
<div class="feedback"> <div class="csh_feedback">
<script type="x-tmpl-mustache" id="show_hint_feedback"> <div class="csh_flagged_hints">
<div class="hint_value" value={{hintvalue}}> <span>Flagged</span>
<div role="button" class="rate_hint" data-rate="upvote" data-icon="arrow-u" aria-label="upvote"> </div>
<b>↑</b> </div>
</div> </div>
<div role="button" class="rate_hint" data-rate="flag" data-icon="flag" aria-label="flag">
<b>!</b>
</div>
<div class ="rating"> {{rating}} </div>
<div class="hint"> {{hint}} </div>
<div role="button" class="rate_hint" data-rate="downvote" aria-label="downvote">
<b>↓</b>
</div>
</div>
</script>
</div> </div>
<p>
</p>
<section class="action">
<input type="hidden" name="problem_id" value="Numerical Input">
<section class="problem">
</div></section></span>
</section>
<section class="crowdsource-wrapper">
</section>
</section>
</section>
</section>
crowdsourcehinter/static/js/src/crowdsourcehinter.js
...@@ -33,9 +33,9 @@ function CrowdsourceHinter(runtime, element){ ...@@ -33,9 +33,9 @@ function CrowdsourceHinter(runtime, element){
success: seehint success: seehint
}); });
}else{ }else{
$('.correct', element).show(); $('.csh_correct', element).show();
$('.correct', element).text("You're correct! Please help us improve our hints by voting on them, or submit your own hint!"); $('.csh_correct', element).text("You're correct! Please help us improve our hints by voting on them, or submit your own hint!");
$(".HintsToUse", element).text(" "); $(".csh_HintsToUse", element).text(" ");
//send empty data for ajax call because not having a data field causes error //send empty data for ajax call because not having a data field causes error
$.ajax({ $.ajax({
type: "POST", type: "POST",
...@@ -44,6 +44,7 @@ function CrowdsourceHinter(runtime, element){ ...@@ -44,6 +44,7 @@ function CrowdsourceHinter(runtime, element){
success: function(result) { success: function(result) {
if (result['is_user_staff']) { if (result['is_user_staff']) {
isStaff = true; isStaff = true;
$('.crowdsourcehinter_block').attr('csh_isStaff', true);
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: runtime.handlerUrl(element, 'get_feedback'), url: runtime.handlerUrl(element, 'get_feedback'),
...@@ -65,50 +66,56 @@ function CrowdsourceHinter(runtime, element){ ...@@ -65,50 +66,56 @@ function CrowdsourceHinter(runtime, element){
function seehint(result){ function seehint(result){
//Show a hint to the student after an incorrect answer is submitted. //Show a hint to the student after an incorrect answer is submitted.
$('.HintsToUse', element).text(result.HintsToUse); $('.csh_HintsToUse', element).text(result.HintsToUse);
} }
function showHintFeedback(result){ function showHintFeedback(result){
//Append answer-specific hints for each student answer during the feedback stage. //Append answer-specific hints for each student answer during the feedback stage.
//This appended div includes upvote/downvote/flagging buttons, the hint, and the hint's rating //This appended div includes upvote/downvote/flagging buttons, the hint, and the hint's rating
$(".student_answer", element).each(function(){ $(".csh_student_answer", element).each(function(){
if ($(this).find("span").text() == result.student_answer){ if ($(this).find("span").text() == result.student_answer){
/*var template = $('#show_hint_feedback').html(); /*var template = $('#show_hint_feedback').html();
Mustache.parse(template);
var data = { var data = {
hintvalue: "result.hint", hint: result.hint,
hint: "result.hint", rating: result.rating
rating: "result.rating"
}; };
$(this).append(Mustache.render(template, data)); */ $(this).append(Mustache.render(template, data));*/
var template = $('#testing').html(); $(this).append(unescape("<div class=\"csh_hint_value\" value = \"" + result.hint + "\">" +
var data= {testone: "testing", testtwo: "TESTING"}; "<div role=\"button\"class=\"csh_rate_hint\"data-rate=\"upvote\" data-icon=\"arrow-u\" aria-label=\"upvote\"><b>↑</b></div>" +
var html = Mustache.to_html(template, data); "<div role=\"button\" class=\"csh_rate_hint\" data-rate=\"flag\" data-icon=\"flag\" aria-label=\"flag\"><b>!</b></div>"+
$(this).html(html); "<div class = \"csh_rating\">" + result.rating + "</div>"+
/**$(this).append(unescape("<div class=\"hint_value\" value = \"" + result.hint + "\">" + "<div class=\"csh_hint\">" + ""+result.hint+"</div>" +
"<div role=\"button\"class=\"rate_hint\"data-rate=\"upvote\" data-icon=\"arrow-u\" aria-label=\"upvote\"><b>↑</b></div>" + "<div role=\"button\" class=\"csh_rate_hint\" data-rate=\"downvote\" aria-label=\"downvote\"><b>↓</b></div> </div>"));
"<div role=\"button\" class=\"rate_hint\" data-rate=\"flag\" data-icon=\"flag\" aria-label=\"flag\"><b>!</b></div>"+
"<div class = \"rating\">" + result.rating + "</div>"+
"<div class=\"hint\">" + ""+result.hint+"</div>" +
"<div role=\"button\" class=\"rate_hint\" data-rate=\"downvote\" aria-label=\"downvote\"><b>↓</b></div> </div>"));**/
} }
}); });
} }
function showFlaggedFeedback(result){ function showFlaggedFeedback(result){
//For staff use, shows hints that have been flagged by students and allows for the hints' unflagging/removal. //For staff use, shows hints that have been flagged by students and allows for the hints' unflagging/removal.
$(".flagged_hints", element).append("<div class=\"hint_value\" value = \"" + result.hint + "\">" + $(".csh_flagged_hints", element).append(unescape("<div class=\"csh_hint_value\" value = \"" + result.hint + "\">" +
"<div role=\"button\" class=\"staff_rate\" data-rate=\"unflag\" aria-label=\"unflag\"><b>O</b></div>" + "<div role=\"button\" class=\"csh_staff_rate\" data-rate=\"unflag\" aria-label=\"unflag\"><b>O</b></div>" +
"<hint class=\"hint\">" + ""+result.hint+"</hint>" + "<hint class=\"csh_hint\">" + ""+result.hint+"</hint>" +
"<div role=\"button\" class=\"staff_rate\" data-rate=\"remove\" aria-label=\"remove\"><b>X</b></div> </div>"); "<div role=\"button\" class=\"csh_staff_rate\" data-rate=\"remove\" aria-label=\"remove\"><b>X</b></div> </div>"));
/*var template = $('#show_flagged_feedback').html();
var data = {
hint: result.hint
};
$(".flagged_hints", element).append(Mustache.render(template, data));*/
} }
function setStudentAnswers(student_answers){ function setStudentAnswers(student_answers){
//Append divs for each answer the student submitted before correctly answering the question. //Append divs for each answer the student submitted before correctly answering the question.
//showHintFeedback appends new hints into these divs. //showHintFeedback appends new hints into these divs.
for(var i = 0; i < student_answers.length; i++){ for(var i = 0; i < student_answers.length; i++){
$('.feedback', element).append("<div class=\"student_answer\"><span><b>"+student_answers[i]+"</b></span>"+ $('.csh_feedback', element).append("<div class=\"csh_student_answer\"><span><b>"+student_answers[i]+"</b></span>"+
"<div><input type =\"button\" class=\"student_hint_creation\"value=\"Submit a new hint for this answer.\" </input></div></div>"); "<div><input type =\"button\" class=\"csh_student_hint_creation\"value=\"Submit a new hint for this answer.\" </input></div></div>");
/*
var template = $('#show_answer_feedback').html();
var data = {
answer = student_answers[i]
};
$(".feedback", element).append(Mustache.render(template, data));
*/
} }
} }
...@@ -116,9 +123,6 @@ function CrowdsourceHinter(runtime, element){ ...@@ -116,9 +123,6 @@ function CrowdsourceHinter(runtime, element){
//Set up the student feedback stage. Each student answer and all answer-specific hints for that answer are shown //Set up the student feedback stage. Each student answer and all answer-specific hints for that answer are shown
//to the student, as well as an option to create a new hint for an answer. //to the student, as well as an option to create a new hint for an answer.
if(!isShowingHintFeedback){ if(!isShowingHintFeedback){
if(isStaff){
$('.feedback', element).append("<div class=\"flagged_hints\"><span>Flagged</span></div>");
}
var student_answers = []; var student_answers = [];
$.each(result, function(index, value) { $.each(result, function(index, value) {
answer = value; answer = value;
...@@ -130,11 +134,11 @@ function CrowdsourceHinter(runtime, element){ ...@@ -130,11 +134,11 @@ function CrowdsourceHinter(runtime, element){
$.each(result, function(index, value) { $.each(result, function(index, value) {
student_answer = value; student_answer = value;
hint = index; hint = index;
//hints return undefined if no answer-specific hints exist //hints return null if no answer-specific hints exist
if(hint == undefined){ if(hint === "null"){
$(".student_answer", element).each(function(){ $(".csh_student_answer", element).each(function(){
if ($(this).find("span").text() == student_answer){ if ($(this).find("span").text() == student_answer){
$(this).append("<div class=\"hint_value\" value=\"There are no answer-specific hints for this answer.\"></div>"); $(this).append("<div class=\"csh_hint_value\" value=\"There are no answer-specific hints for this answer.\"></div>");
} }
}); });
} }
...@@ -160,29 +164,29 @@ function CrowdsourceHinter(runtime, element){ ...@@ -160,29 +164,29 @@ function CrowdsourceHinter(runtime, element){
} }
} }
$(document).on('click', '.student_hint_creation', function(){ $(element).on('click', '.csh_student_hint_creation', function(){
//Click event for the creation of a new hint. This button will bring up the text input. //Click event for the creation of a new hint. This button will bring up the text input.
$('.student_hint_creation').each(function(){ $('.csh_student_hint_creation').each(function(){
$(this).show(); $(this).show();
}); });
$('.student_text_input').remove(); $('.csh_student_text_input').remove();
$('.submit_new').remove(); $('.csh_submit_new').remove();
$(this).hide(); $(this).hide();
student_answer = $(this).parent().parent().find("span").text(); student_answer = $(this).parent().parent().find("span").text();
$(".student_answer", element).each(function(){ $(".csh_student_answer", element).each(function(){
if ($(this).find("span").text() == student_answer){ if ($(this).find("span").text() == student_answer){
$(this).append("<p><input type=\"text\" name=\"studentinput\" class=\"student_text_input\" size=\"40\"><input answer=\""+student_answer+"\" type=\"button\" class=\"submit_new\" value=\"Submit Hint\"> </p>"); $(this).append("<p><input type=\"text\" name=\"studentinput\" class=\"csh_student_text_input\" size=\"40\"><input answer=\""+student_answer+"\" type=\"button\" class=\"csh_submit_new\" value=\"Submit Hint\"> </p>");
} }
}); });
}) })
$(document).on('click', '.submit_new', function(){ $(element).on('click', '.csh_submit_new', function(){
//Click event to submit a new hint for an answer. //Click event to submit a new hint for an answer.
if($(this).parent().find('.student_text_input').val() != null){ if($(this).parent().find('.csh_student_text_input').val() != null){
var answerdata = unescape($(this).attr('answer')); var answerdata = unescape($(this).attr('answer'));
var newhint = unescape($('.student_text_input').val()); var newhint = unescape($('.csh_student_text_input').val());
Logger.log('submit_new.click.event', {"student_answer": answerdata, "new_hint_submission": newhint}); Logger.log('submit_new.click.event', {"student_answer": answerdata, "new_hint_submission": newhint});
$('.submitbutton').show(); $('.csh_submitbutton').show();
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: runtime.handlerUrl(element, 'give_hint'), url: runtime.handlerUrl(element, 'give_hint'),
...@@ -196,15 +200,15 @@ function CrowdsourceHinter(runtime, element){ ...@@ -196,15 +200,15 @@ function CrowdsourceHinter(runtime, element){
}); });
} }
}); });
$(this).parent().find('.student_text_input').remove(); $(this).parent().find('.csh_student_text_input').remove();
$(this).remove(); $(this).remove();
} }
}) })
$(document).on('click', '.rate_hint', function(){ $(element).on('click', '.csh_rate_hint', function(){
//Click event to change the rating/flag a hint. The attribute 'data-rate' within each .rate_hint button is used //Click event to change the rating/flag a hint. The attribute 'data-rate' within each .rate_hint button is used
//to determine whether the student is upvoting, downvoting, or flagging the hint. //to determine whether the student is upvoting, downvoting, or flagging the hint.
hint = $(this).parent().find(".hint").text(); hint = $(this).parent().find(".csh_hint").text();
student_answer = $(this).parent().parent().find("span").text(); student_answer = $(this).parent().parent().find("span").text();
Logger.log('crowd_hinter.rate_hint.click.event', {"hint": hint, "student_answer": student_answer, "rating": $(this).attr('data-rate')}); Logger.log('crowd_hinter.rate_hint.click.event', {"hint": hint, "student_answer": student_answer, "rating": $(this).attr('data-rate')});
$.ajax({ $.ajax({
...@@ -217,9 +221,9 @@ function CrowdsourceHinter(runtime, element){ ...@@ -217,9 +221,9 @@ function CrowdsourceHinter(runtime, element){
$(this).parent().remove(); $(this).parent().remove();
} }
else if(result.rating != "voted"){ else if(result.rating != "voted"){
$(".hint", element).each(function(){ $(".csh_hint", element).each(function(){
if ($(this).parent().find(".hint").text() == hint && $(this).parent().parent().find("span").text() == student_answer){ if ($(this).parent().find(".csh_hint").text() == hint && $(this).parent().parent().find("span").text() == student_answer){
$(this).parent().find('.rating').text(result.rating); $(this).parent().find('.csh_rating').text(result.rating);
} }
}) })
} }
...@@ -227,17 +231,17 @@ function CrowdsourceHinter(runtime, element){ ...@@ -227,17 +231,17 @@ function CrowdsourceHinter(runtime, element){
}); });
}) })
$(document).on('click', '.staff_rate', function(){ $(element).on('click', '.csh_staff_rate', function(){
//Staff ratings are the removal or unflagging of flagged hints from the database. The attribute 'data-rate' is used //Staff ratings are the removal or unflagging of flagged hints from the database. The attribute 'data-rate' is used
//to determine whether to unflag or delete the hint. //to determine whether to unflag or delete the hint.
hint = $(this).parent().find(".hint").text(); hint = $(this).parent().find(".csh_hint").text();
student_answer = $(this).parent().parent().find("span").text(); student_answer = $(this).parent().parent().find("span").text();
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: runtime.handlerUrl(element, 'rate_hint'), url: runtime.handlerUrl(element, 'rate_hint'),
data: JSON.stringify({"student_rating": $(this).attr('data-rate'), "hint": hint, "student_answer": student_answer}), data: JSON.stringify({"student_rating": $(this).attr('data-rate'), "hint": hint, "student_answer": student_answer}),
success: function (result){ success: function (result){
$('.hint_value', element).each(function(){ $('.csh_hint_value', element).each(function(){
if($(this).attr('value') == hint){ if($(this).attr('value') == hint){
$(this).remove(); $(this).remove();
} }
......
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