Skip to content

C
crowdsourcehinter
Commit fda7431d by solashirai Committed by Piotr Mitros
Options

templates working

parent 38496af0
Showing with 26 additions and 56 deletions
crowdsourcehinter/crowdsourcehinter.py
......@@ -54,7 +54,7 @@ class CrowdsourceHinter(XBlock):
in, and most of the remaining functionality is in the JavaScript.
"""
html = self.resource_string("static/html/crowdsourcehinter.html")
frag = Fragment(html.format(self=self))
frag = Fragment(html)
frag.add_javascript_url('//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js')
frag.add_css(self.resource_string("static/css/crowdsourcehinter.css"))
frag.add_javascript(self.resource_string("static/js/src/crowdsourcehinter.js"))
......
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_feedback'>
<div class='csh_hint_value' value="{{hintvalue}}">
<div role="button" class="csh_rate_hint" data-rate="upvote" data-icon="arrow-u" aria-label="upvote">
<b>↑</b>
</div>
......@@ -9,13 +9,13 @@
<b>↓</b>
</div>
<div role="button" class="csh_rate_hint" data-rate="flag" data-icon="flag" aria-label="flag">
<b>"Report this hint"</b>
<b>Report this hint</b>
</div>
</div>
</script>
<script type="x-tmpl-mustache" id="show_flagged_feedback">
<div class="csh_hint_value" value ={{hint}}>
<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>
......@@ -25,16 +25,9 @@
</div>
</div>
</script>
<script type="x-tmpl/mustache" id="s1">
Sample template 1 is {{var}}
</script>
<script type="x-tmpl/mustache" id="s2">
Sample template 2 is {{var}}
</script>
<script type="x-tmpl-mustache" id="show_answer_feedback">
<script type="x-tmpl/mustache" id="show_answer_feedback">
<div class="csh_student_answer">
<span><b> {{answer}}</b></span>
<span><b>{{answer}}</b></span>
<div>
<input type ="button" class="csh_student_hint_creation" value="Submit a new hint for this answer."
</input>
......@@ -53,9 +46,6 @@
<p>
<span class='Thankyou'></span>
</p>
<div class="sample1"></div>
<div class="sample2"></div>
<div class="csh_feedback">
<div class="csh_flagged_hints">
<span>Flagged</span>
......
crowdsourcehinter/static/js/src/crowdsourcehinter.js
......@@ -28,21 +28,6 @@ function CrowdsourceHinter(runtime, element){
function onStudentSubmission(problem_graded_event_data){
//This function will determine whether or not the student correctly answered the question.
//If it was correctly answered it will begin the process for giving feedback on hints.
$(function(){
// Simple example
$(".sample1").html(Mustache.render(unescape($("#s1").html()), {var : "rendered"}));
// Broken out to show pieces. You can add console.log() to inspect these individually.
// It will be easiest, probably, to cut-and-paste pieces like this into the JavaScript console in Chrome, and seeing what they do in the interpretter
var template = $("#s2").html();
console.log(template);
var parameters = {var : "also rendered"};
console.log(parameters);
var rendered_html = Mustache.render(template, parameters);
console.log(rendered_html);
$(".sample2").html(rendered_html);
});
//end of sample code
if (problem_graded_event_data[1].search(/class="correct/) === -1){
$.ajax({
type: "POST",
......@@ -91,51 +76,46 @@ function CrowdsourceHinter(runtime, element){
//This appended div includes upvote/downvote/flagging buttons, the hint, and the hint's rating
$(".csh_student_answer", element).each(function(){
if ($(this).find("span").text() == result.student_answer){
/*$(function(){
var template = $('#show_hint_feedback').html();
var html = "";
$(function(){
var data = {
hint: result.hint,
rating: result.rating
};
$(this).append(Mustache.render(template, data));
});*/
$(this).append(unescape("<div class=\"csh_hint_value\" value = \"" + result.hint + "\">" +
"<div role=\"button\"class=\"csh_rate_hint\"data-rate=\"upvote\" data-icon=\"arrow-u\" aria-label=\"upvote\"><b>↑</b></div>" +
"<div class = \"csh_rating\">" + result.rating + "</div>"+
"<div class=\"csh_hint\">" + ""+result.hint+"</div>" +
"<div role=\"button\" class=\"csh_rate_hint\" data-rate=\"downvote\" aria-label=\"downvote\"><b>↓</b></div>"+
"<div role=\"button\" class=\"csh_rate_hint\" data-rate=\"flag\" data-icon=\"flag\" aria-label=\"flag\">" +
"<b>Report this hint</b></div> </div>"));
html = Mustache.render($("#show_hint_feedback").html(), data);
});
$(this).append(html);
}
});
}
function showFlaggedFeedback(result){
//For staff use, shows hints that have been flagged by students and allows for the hints' unflagging/removal.
$(".csh_flagged_hints", element).append(unescape("<div class=\"csh_hint_value\" value = \"" + result.hint + "\">" +
"<div role=\"button\" class=\"csh_staff_rate\" data-rate=\"unflag\" aria-label=\"unflag\"><b>O</b></div>" +
"<hint class=\"csh_hint\">" + ""+result.hint+"</hint>" +
"<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 html = "";
$(function(){
var template = $('#show_flagged_feedback').html();
var data = {
hint: result.hint
};
$(".flagged_hints", element).append(Mustache.render(template, data));*/
html = Mustache.render(template, data);
console.log(html);
});
$(".csh_flagged_hints", element).append(html);
}
function setStudentAnswers(student_answers){
//Append divs for each answer the student submitted before correctly answering the question.
//showHintFeedback appends new hints into these divs.
for(var i = 0; i < student_answers.length; i++){
$('.csh_feedback', element).append("<div class=\"csh_student_answer\"><span><b>"+student_answers[i]+"</b></span>"+
"<div><input type =\"button\" class=\"csh_student_hint_creation\"value=\"Submit a new hint for this answer.\" </input></div></div>");
/*
var html = "";
$(function(){
var template = $('#show_answer_feedback').html();
var data = {
answer = student_answers[i]
answer: student_answers[i]
};
$(".feedback", element).append(Mustache.render(template, data));
*/
html = Mustache.render(template, data);
});
$(".csh_feedback", element).append(html);
}
}
......
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