implementing mustache templates

crowdsourcehinter/crowdsourcehinter.py

@@ -55,6 +55,7 @@ class CrowdsourceHinter(XBlock):
         """
         html = self.resource_string("static/html/crowdsourcehinter.html")
         frag = Fragment(html.format(self=self))
+        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"))
         frag.initialize_js('CrowdsourceHinter')

crowdsourcehinter/static/html/crowdsourcehinter.html

 <script type="x-tmpl-mustache" id="show_hint_feedback">
-    <div class="hint_value" value={{hint}}>
+    <div class="hint_value" value={{hintvalue}}>
         <div role="button" class="rate_hint" data-rate="upvote" data-icon="arrow-u" aria-label="upvote">
             <b>↑</b>
         </div>
@@ -13,6 +13,13 @@
         </div>
     </div>
 </script>
+
+<script type="text/template" id="testing">
+    <div>
+        {{testone}}
+        {{testtwo}}
+    </div>
+</script>
 <div class="crowdsourcehinter_block">  <!--most stuff just for testing purposes-->
 
 <p> <span class='HintsToUse'></span>
@@ -28,7 +35,21 @@
 
 
 <div class="feedback">
-
+<script type="x-tmpl-mustache" id="show_hint_feedback">
+    <div class="hint_value" value={{hintvalue}}>
+        <div role="button" class="rate_hint" data-rate="upvote" data-icon="arrow-u" aria-label="upvote">
+            <b>↑</b>
+        </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>
 
 <p>

crowdsourcehinter/static/js/src/crowdsourcehinter.js

@@ -17,6 +17,7 @@ function CrowdsourceHinter(runtime, element){
 
     //read the data from the problem_graded event here
     function get_event_data(event_type, data, element){
+        console.log("is this still changing");
         onStudentSubmission(data);
     }
     Logger.listen('problem_graded', null, get_event_data);
@@ -72,12 +73,18 @@ function CrowdsourceHinter(runtime, element){
     //This appended div includes upvote/downvote/flagging buttons, the hint, and the hint's rating
         $(".student_answer", element).each(function(){
             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 = {
-                    "hint": result.hint,
-                    "rating": result.rating
+                    hintvalue: "result.hint",
+                    hint: "result.hint",
+                    rating: "result.rating"
                 };
-                $(this).append(Mustache.to_html(template, data));
+                $(this).append(Mustache.render(template, data)); */
+                var template = $('#testing').html();
+                var data= {testone: "testing", testtwo: "TESTING"};
+                var html = Mustache.to_html(template, data);
+                $(this).html(html);
                 /**$(this).append(unescape("<div class=\"hint_value\" value = \"" + result.hint + "\">" +
                 "<div role=\"button\"class=\"rate_hint\"data-rate=\"upvote\" data-icon=\"arrow-u\" aria-label=\"upvote\"><b>↑</b></div>" +
                 "<div role=\"button\" class=\"rate_hint\" data-rate=\"flag\" data-icon=\"flag\" aria-label=\"flag\"><b>!</b></div>"+

crowdsourcehinter_xblock.egg-info/SOURCES.txt

@@ -3,23 +3,13 @@ crowdsourcehinter/__init__.py
 crowdsourcehinter/crowdsourcehinter.py
 crowdsourcehinter/static/README.txt
 crowdsourcehinter/static/css/crowdsourcehinter.css
-crowdsourcehinter/static/css/crowdsourcehinter.css~
-crowdsourcehinter/static/css/crowdxblock.css~
 crowdsourcehinter/static/html/crowdsourcehinter.html
-crowdsourcehinter/static/html/crowdsourcehinter.html~
 crowdsourcehinter/static/html/crowdsourcehinterstudio.html
-crowdsourcehinter/static/html/crowdsourcehinterstudio.html~
-crowdsourcehinter/static/html/crowdxblock.html~
 crowdsourcehinter/static/js/src/crowdsourcehinter.js
 crowdsourcehinter/static/js/src/crowdsourcehinter.js~
-crowdsourcehinter/static/js/src/crowdxblock.js~
 crowdsourcehinter_xblock.egg-info/PKG-INFO
-crowdsourcehinter_xblock.egg-info/PKG-INFO~
 crowdsourcehinter_xblock.egg-info/SOURCES.txt
-crowdsourcehinter_xblock.egg-info/SOURCES.txt~
 crowdsourcehinter_xblock.egg-info/dependency_links.txt
 crowdsourcehinter_xblock.egg-info/entry_points.txt
-crowdsourcehinter_xblock.egg-info/entry_points.txt~
 crowdsourcehinter_xblock.egg-info/requires.txt
-crowdsourcehinter_xblock.egg-info/top_level.txt
-crowdsourcehinter_xblock.egg-info/top_level.txt~
\ No newline at end of file
+crowdsourcehinter_xblock.egg-info/top_level.txt
\ No newline at end of file