Skip to content

C
crowdsourcehinter
Commit 28c85d5f by solashirai
Options

naming changes (partial), fixes to Mustache template usage

parent 7ee2a4c5
Showing with 96 additions and 124 deletions
crowdsourcehinter/crowdsourcehinter.py
......@@ -115,7 +115,7 @@ class CrowdsourceHinter(XBlock):
data['submittedanswer']: The string of text that the student submits for a problem.
returns:
'Hints': the highest rated hint for an incorrect answer
'bestHint': the highest rated hint for an incorrect answer
or another random hint for an incorrect answer
or 'Sorry, there are no more hints for this answer.' if no more hints exist
"""
......@@ -146,12 +146,12 @@ class CrowdsourceHinter(XBlock):
# currently set by default to True
if best_hint not in self.Reported.keys():
self.Used.append(best_hint)
return {'Hints': best_hint, "StudentAnswer": answer}
return {'BestHint': best_hint, "StudentAnswer": answer}
if best_hint not in self.Used:
# choose highest rated hint for the incorrect answer
if best_hint not in self.Reported.keys():
self.Used.append(best_hint)
return {'Hints': best_hint, "StudentAnswer": answer}
return {'BestHint': best_hint, "StudentAnswer": answer}
# choose another random hint for the answer.
temporary_hints_list = []
for hint_keys in self.hint_database[str(answer)]:
......@@ -160,12 +160,12 @@ class CrowdsourceHinter(XBlock):
temporary_hints_list.append(str(hint_keys))
not_used = random.choice(temporary_hints_list)
self.Used.append(not_used)
return {'Hints': not_used, "StudentAnswer": answer}
return {'BestHint': not_used, "StudentAnswer": answer}
# find generic hints for the student if no specific hints exist
if len(self.generic_hints) != 0:
not_used = random.choice(self.generic_hints)
self.Used.append(not_used)
return {'Hints': not_used, "StudentAnswer": answer}
return {'BestHint': not_used, "StudentAnswer": answer}
else:
# if there are no more hints left in either the database or defaults
self.Used.append(str("There are no hints for" + " " + answer))
......
crowdsourcehinter/static/css/crowdsourcehinter.css
......@@ -22,7 +22,7 @@
flex-direction: column;
}
.csh_HintQuickFeedback{
.csh_hint_rating_on_incorrect{
display: flex;
flex-direction: row;
justify-content: flex-end;
......
crowdsourcehinter/static/html/crowdsourcehinter.html
<script type='x-tmpl/mustache' id='show_hint_feedback'>
<div class='csh_hint_value' value="{{hintvalue}}">
<script type='x-tmpl/mustache' id='show_hint_contribution'>
<div class='csh_hint_value' value="{{hintText}}">
<div class='csh_hint_data'>
<div class="csh_hint"><b>{{hint}}</b></div>
<div class="csh_hint"><b>{{hintText}}</b></div>
</div>
<div class='csh_rating_data'>
<div role="button" class="csh_rate_hint" data-rate="upvote">
......@@ -17,9 +17,9 @@
</div>
</script>
<script type="x-tmpl/mustache" id="show_reported_feedback">
<div class="csh_hint_value" value ="{{hint}}">
<div class="csh_hint">{{hint}}</div>
<script type="x-tmpl/mustache" id="show_reported_moderation">
<div class="csh_hint_value" value ="{{reportedHintText}}">
<div class="csh_hint">{{reportedHintText}}</div>
<div role="button" class="csh_staff_rate" data-rate="unreport" aria-label="unreport">
<u><b>Return hint for use in the hinter</b></u>
</div>
......@@ -30,7 +30,7 @@
</div>
</script>
<script type="x-tmpl/mustache" id="student_hint_creation">
<script type="x-tmpl/mustache" id="hint_text_input">
<p>
<input type="text" name="studentinput" class="csh_student_text_input">
</p>
......@@ -44,10 +44,10 @@
</div>
</script>
<script type="x-tmpl/mustache" id="show_answer_feedback">
<script type="x-tmpl/mustache" id="show_student_submission">
<div class="csh_student_answer">
<h class="csh_answer_text" answer={{answer}}>
<i> Improve hints for this question by leaving feedback on this hint or contributing your own! </i> <br>
<i> Improve hints for this question by rating hints as helpful/unhelpful or contributing your own! </i> <br>
<i> Your original answer was: {{answer}} </i></h>
</div>
</script>
......@@ -62,9 +62,9 @@
<div class="crowdsourcehinter_block">
<div class='csh_hint_reveal'>
<div class='csh_Hints' student_answer = '' hint_received=''>
<div class='csh_hint_text' student_answer = '' hint_received=''>
</div>
<div class='csh_HintQuickFeedback'>
<div class='csh_hint_rating_on_incorrect'>
<div role="button" class="csh_rate_hint" data-rate="upvote" title="This hint was helpful!">
<b>+</b>
</div>
......@@ -81,10 +81,7 @@
<div class="crowdsourcehinter_block">
<section class="csh_correct"></section>
<p>
<span class='Thankyou'></span>
</p>
<div class="csh_feedback">
<div class="csh_student_submission">
<div class="csh_reported_hints">
<span>moderate reported hints</span>
</div>
......
crowdsourcehinter/static/js/src/crowdsourcehinter.js
......@@ -3,7 +3,6 @@ function CrowdsourceHinter(runtime, element, data){
var executeHinter = true;
var isShowingHintFeedback = false;
var voted = false;
var correctSubmission = false;
$(".crowdsourcehinter_block", element).hide();
......@@ -25,24 +24,27 @@ function CrowdsourceHinter(runtime, element, data){
Logger.listen('seq_goto', null, stopScript);
/**
* Get a hint to show to the student after incorrectly answering a question.
* Get a hint from the server to show to the student after incorrectly answering a
* question. On success, continue to showHint.
* @param data is data generated by the problem_graded event
*/
function get_hint(data){
function getHint(problemGradedEvent){
$(".crowdsourcehinter_block", element).show();
$.ajax({
type: "POST",
url: runtime.handlerUrl(element, 'get_hint'),
data: JSON.stringify({"submittedanswer": unescape(data[0])}),
data: JSON.stringify({"submittedanswer": unescape(problemGradedEvent[0])}),
success: showHint
});
}
/**
* Start student hint feedback. This function is called after the student answers
* Start student hint contribution. This will allow students to contribute new hints
* to the hinter as well as vote on the helpfulness of the first hint they received
* for the current problem. This function is called after the student answers
* the question correctly.
*/
function start_feedback(){
function startHintContribution(){
$('.csh_correct', element).show();
$(".csh_hint_reveal", element).hide();
//send empty data for ajax call because not having a data field causes error
......@@ -50,11 +52,25 @@ function CrowdsourceHinter(runtime, element, data){
type: "POST",
url: runtime.handlerUrl(element, 'get_feedback'),
data: JSON.stringify({}),
success: showStudentContribution
success: setStudentContribution
});
}
/**
* Check whether or not the question was correctly answered by the student.
* The current method of checking the correctness of the answer is very brittle
* since we simply look for a string within the problemGradedEventData.
* @param problemGradedEventData is the data from problem_graded event.
*/
function checkIsAnswerCorrect(problemGradedEventData){
if (problemGradedEventData[1].search(/class="correct/) === -1){
return false;
} else {
return true;
}
}
/**
* Check whether student answered the question correctly and call the appropriate
* function afterwards. Current method for determining correctness if very brittle.
* @param event_type, element are both unused but automatically passed
......@@ -63,82 +79,59 @@ function CrowdsourceHinter(runtime, element, data){
function onStudentSubmission(){ return function(event_type, data, element){
//search method of correctness of problem is brittle due to checking for a class within
//the problem block.
if (data[1].search(/class="correct/) === -1){
get_hint(data);
} else { //if the correct answer is submitted
start_feedback();
if (checkIsAnswerCorrect(data)){
startHintContribution();
} else { //if the submitted answer is incorrect
getHint(data);
}
}}
Logger.listen('problem_graded', data.hinting_element, onStudentSubmission());
/**
* Modify csh_Hints attributes to show hint to the student.
* Modify csh_hint_text attributes to show hint to the student.
*/
function showHint(result){
$('.csh_Hints', element).attr('student_answer', result.StudentAnswer);
$('.csh_Hints', element).attr('hint_received', result.Hints);
$('.csh_Hints', element).text("Hint: " + result.Hints);
$('.csh_hint_text', element).attr('student_answer', result.StudentAnswer);
$('.csh_hint_text', element).attr('hint_received', result.BestHint);
$('.csh_hint_text', element).text("Hint: " + result.BestHint);
Logger.log('crowd_hinter.showHint', {"student_answer": result.StudentAnswer, "hint_received": result.Hints});
}
/**
* Called by showStudentContribution to append hints into divs created by
* Called by setStudentContribution to append hints into divs created by
* showStudentSubmissoinHistory, after the student answered the question correctly.
* Feedback on hints at this stage consists of upvote/downvote/report buttons.
* @param hint is the first hint that was shown to the student
* @param student_answer is the first incorrect answer submitted by the student
*/
function showHintFeedback(hint, student_answer){
$(".csh_student_answer", element).each(function(){
if ($(this).find('.csh_answer_text').attr('answer') == student_answer){
var html = "";
$(function(){
var data = {
hint: hint
};
html = Mustache.render($("#show_hint_feedback").html(), data);
});
$(this).append(html);
var html = "";
var template = $('#add_hint_creation').html();
var data = {};
html = Mustache.render(template, data);
$(this).append(html);
}
});
function showStudentHintContribution(hint, student_answer){
var hintContributionTemplate = $(Mustache.render($('#show_hint_contribution').html(), {hintText: hint}));
$('.csh_answer_text', element).append(hintContributionTemplate);
var hintCreationTemplate = $(Mustache.render($('#add_hint_creation').html(), {}));
$('.csh_answer_text', element).append(hintCreationTemplate);
}
/**
* Show options to remove or return reported hints from/to the hint pool. Called after
* correctly answering the question, only visible to staff.
* @param result is the reported hint text
* A better method of moderating hints should probably be implemented in the future. Hints
* only can be moderated after being reported, so unreported hints will stay in the system.
* @param reportedHint is the reported hint text
*/
function showReportedFeedback(result){
var html = "";
$(function(){
var template = $('#show_reported_feedback').html();
var data = {
hint: result
};
html = Mustache.render(template, data);
});
$(".csh_reported_hints", element).append(html);
function showReportedModeration(reportedHint){
var reportedModerationTemplate = $(Mustache.render($('#show_reported_moderation').html(), {reportedHintText: reportedHint}));
$('.csh_reported_hints', element).append(reportedModerationTemplate);
}
/**
* Append new divisions into html for each answer the student submitted before correctly
* answering the question. showHintFeedback appends new hints into these divs.
* answering the question. showStudentHintContribution appends new hints into these divs.
* When the hinter is set to show best, only one div will be created.
* @param student_answers is the text of the student's incorrect answer
*/
function showStudentSubmissionHistory(student_answers){
var html = "";
var template = $('#show_answer_feedback').html();
var data = {
answer: student_answers
};
html = Mustache.render(template, data);
$(".csh_feedback", element).append(html);
function showStudentSubmissionHistory(student_answer){
var showStudentSubmissionTemplate = $(Mustache.render($('#show_student_submission').html(), {answer: student_answer}));
$('.csh_student_submission', element).append(showStudentSubmissionTemplate);
}
/**
......@@ -149,7 +142,7 @@ function CrowdsourceHinter(runtime, element, data){
* @param result is a dictionary of incorrect answers and hints, with the index being the hint and the value
* being the incorrect answer
*/
function showStudentContribution(result){
function setStudentContribution(result){
//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.
if(data.isStaff){
......@@ -157,7 +150,7 @@ function CrowdsourceHinter(runtime, element, data){
$.each(result, function(index, value) {
if(value == "Reported") {
//index represents the reported hint's text
showReportedFeedback(index);
showReportedModeration(index);
}
});
}
......@@ -169,24 +162,14 @@ function CrowdsourceHinter(runtime, element, data){
hint = index;
//hints return null if no answer-specific hints exist
if(hint === "null"){
$(".csh_student_answer", element).each(function(){
if ($(this).find('.csh_answer_text').attr('answer') == student_answer){
var html = "";
var template = $('#show_no_hints').html();
var data = {};
html = Mustache.render(template, data);
$(this).append(html);
var html = "";
var template = $('#add_hint_creation').html();
var data = {};
html = Mustache.render(template, data);
$(this).append(html);
}
});
var noHintsTemplate = $(Mustache.render($('#show_no_hints').html(), {}));
$('.csh_student_answer', element).append(noHintsTemplate);
var hintCreationTemplate = $(Mustache.render($('#add_hint_creation').html(), {}));
$('.csh_student_answer', element).append(hintCreationTemplate);
}
//reported hints have their corresponding answer set to "Reported"
else {
showHintFeedback(hint, student_answer);
showStudentHintContribution(hint, student_answer);
}
}
});
......@@ -197,27 +180,19 @@ function CrowdsourceHinter(runtime, element, data){
/**
* Create a text input area for the student to create a new hint. This function
* is triggered by clicking the "contribute a new hint" button.
* @param clicked is the "contribute a new hint" button that was clicked
* @param createTextInputButtonHTML is the "contribute a new hint" button that was clicked
*/
function create_text_input(){ return function(clicked){
function create_text_input(){ return function(createTextInputButtonHTML){
$('.csh_student_hint_creation', element).each(function(){
$(clicked.currentTarget).show();
$(createTextInputButtonHTML.currentTarget).show();
});
$('.csh_student_text_input', element).remove();
$('.csh_submit_new', element).remove();
$(clicked.currentTarget).hide();
student_answer = $(clicked.currentTarget).parent().parent().find('.csh_answer_text').attr('answer');
$(".csh_student_answer", element).each(function(){
if ($('.csh_answer_text', element).attr('answer') == student_answer){
var html = "";
$(function(){
var template = $('#student_hint_creation').html();
var data = {student_answer: student_answer};
html = Mustache.render(template, data);
});
$(this).append(html);
}
});
$(createTextInputButtonHTML.currentTarget).hide();
student_answer = $('.csh_answer_text', element).attr('answer');
console.log(student_answer);
var hintTextInputTemplate = $(Mustache.render($('#hint_text_input').html(), {student_answer: student_answer}));
$('.csh_answer_text', element).append(hintTextInputTemplate);
}}
$(element).on('click', '.csh_student_hint_creation', create_text_input($(this)));
......@@ -225,22 +200,22 @@ function CrowdsourceHinter(runtime, element, data){
* Submit a new hint created by the student to the hint pool. Hint text is in
* the text input area created by create_text_input. Contributed hints are specific to
* incorrect answers. Triggered by clicking the "submit hint" button.
* @param clicked is the "submit hint" button clicked
* @param submitHintButtonHTML is the "submit hint" button clicked
*/
function submit_new_hint(){ return function(clicked){
function submit_new_hint(){ return function(submitHintButtonHTML){
//add the newly created hint to the hinter's pool of hints
if($('.csh_student_text_input', element).val().length > 0){
var answerdata = unescape(clicked.currentTarget.attributes['answer'].value);
var newhint = unescape($('.csh_student_text_input').val());
var studentAnswer = unescape(submitHintButtonHTML.currentTarget.attributes['answer'].value);
var newHint = unescape($('.csh_student_text_input').val());
$('.csh_submitbutton', element).show();
$.ajax({
type: "POST",
url: runtime.handlerUrl(element, 'add_new_hint'),
data: JSON.stringify({"submission": newhint, "answer": answerdata}),
success: Logger.log('crowd_hinter.submit_new.click.event', {"student_answer": answerdata, "new_hint_submission": newhint})
data: JSON.stringify({"submission": newHint, "answer": studentAnswer}),
success: Logger.log('crowd_hinter.submit_new.click.event', {"student_answer": studentAnswer, "new_hint_submission": newHint})
});
$('.csh_student_text_input', element).remove();
$(clicked.currentTarget).remove();
$(submitHintButtonHTML.currentTarget).remove();
}
}}
$(element).on('click', '.csh_submit_new', submit_new_hint($(this)));
......@@ -249,16 +224,16 @@ function CrowdsourceHinter(runtime, element, data){
* Send vote data to modify a hint's rating (or mark it as reported). Triggered by
* clicking a button to upvote, downvote, or report the hint (both before and after
* the student correctly submits an answer).
* @param clicked is the rate_hint button clicked (upvote/downvote/report)
* @param rateHintButtonHTML is the rate_hint button clicked (upvote/downvote/report)
*/
function rate_hint(){ return function(clicked){
rating = clicked.currentTarget.attributes['data-rate'].value;
function rate_hint(){ return function(rateHintButtonHTML){
rating = rateHintButtonHTML.currentTarget.attributes['data-rate'].value;
if(!voted || rating=="report"){
if (rating == "report"){
alert("This hint has been reported for review.");
}
hint = $('.csh_Hints', element).attr('hint_received');
student_answer = $('.csh_Hints', element).attr('student_answer');
hint = $('.csh_hint_text', element).attr('hint_received');
student_answer = $('.csh_hint_text', element).attr('student_answer');
$.ajax({
type: "POST",
url: runtime.handlerUrl(element, 'rate_hint'),
......@@ -286,11 +261,11 @@ function CrowdsourceHinter(runtime, element, data){
/**
* Send staff rating data to determine whether or not a reported hint will be removed from the
* hint pool or not. Triggered by clicking a staff_rate button.
* @param clicked is the csh_staff_rate button that was clicked
* @param staffRateHintButtonHTML is the csh_staff_rate button that was clicked
*/
function staff_rate_hint(){ return function(clicked){
hint = $(clicked.currentTarget).parent().find(".csh_hint").text();
rating = clicked.currentTarget.attributes['data-rate'].value
function staff_rate_hint(){ return function(staffRateHintButtonHTML){
hint = $(staffRateHintButtonHTML.currentTarget).parent().find(".csh_hint").text();
rating = staffRateHintButtonHTML.currentTarget.attributes['data-rate'].value
student_answer = "Reported";
Logger.log('crowd_hinter.staff_rate_hint.click.event', {"hint": hint, "student_answer": student_answer, "rating": rating});
$.ajax({
......
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