Working version, hopefully with grading. Needs styling

README.md

@@ -15,4 +15,10 @@ and this was on a short anough timeline that I did not have a chance
 to reach out to FutureLearn for permission. This is probably worth
 doing -- it'd be to the benefit of learners on all platforms and the
 industry as a whole if we could aim for consistency of experience
-between platforms where convenient.
+between platforms where convenient.
\ No newline at end of file
+
+Limitations: 
+
+* We can only have one of these per page. I'm waiting on XBlocks to
+  have a more mature client-side framework, since right now, managing
+  multiple per page would be messy.

done/done.py

@@ -14,7 +14,7 @@ class DoneXBlock(XBlock):
 
     # Fields are defined on the class.  You can access them in your code as
     # self.<fieldname>.
-    src = Boolean(
+    done = Boolean(
            scope = Scope.user_state, 
            help = "Is the student done?",
            default = False
@@ -27,7 +27,13 @@ class DoneXBlock(XBlock):
 
     @XBlock.json_handler
     def toggle_button(self, data, suffix=''):
-        print data
+        self.done = data['done']
+        if data['done']:
+            grade = 1
+        else:
+            grade = 0
+
+        self.runtime.publish(self, 'grade', {'value':grade, 'max_value': 1})
         return {}
 
 
@@ -42,6 +48,7 @@ class DoneXBlock(XBlock):
         #frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js")
         frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js")
         frag.add_css(self.resource_string("static/css/done.css"))
+        frag.add_javascript("var done_done = "+("true" if self.done else "false")+";")
         frag.add_javascript(self.resource_string("static/js/src/done.js"))
         frag.initialize_js('DoneXBlock')
         return frag

done/static/html/done.html

 <div class="done_block">
-  <div style="width:150px">
-    <div class="windshield_on windshield"> 
-      <div class="wipe wipe_on"> Wipe on </div>
-      <div class="wiper"> # </div>
-      <div class="wipe wipe_off"> Wipe off </div>
+  <div style="width:200px; height:30px;">
+    <div class="windshield"> 
+      <div class="wipe wipe_off"> Undo </div>
+      <div class="wiper"> <span class="ui-icon ui-icon-circle-plus"></span> </div>
+      <div class="wipe wipe_on"> Mark as complete </div>
     </div>
   </div>
 </div>
@@ -13,24 +13,31 @@
   -webkit-transition: width 0.2s;
   transition: width 0.2s;
   text-align:center;
+  vertical-align:middle;
 }
 
-.windshield {
+.windshield_animated {
   -webkit-transition: background-color 0.2s;
   transition: background-color 0.2s;
 }
 
+.windshield {
+  height:100%;
+}
+
 .windshield_on {
   background-color: #700000;
+  color: #4BA1A1;
 }
 
 .windshield_off {
   background-color: #048904;
+  color: #D59763;
 }
 
 .windshield_on .wipe_on {
   display:inline-block;
-  width:60%;
+  width:80%;
   overflow:hidden;
   text-overflow: clip;
   white-space:nowrap;
@@ -47,11 +54,12 @@
 .wiper {
   display:inline-block;
   width:7%;
+  vertical-align:middle;
 }
 
 .windshield_off .wipe_off {
   display:inline-block;
-  width:60%;
+  width:80%;
   overflow:hidden;
   text-overflow: clip;
   white-space:nowrap;

done/static/js/src/done.js

@@ -10,14 +10,22 @@ function DoneXBlock(runtime, element) {
     });
 
     $(function ($) {
+	if (done_done) {
+	    $('.windshield').addClass("windshield_off").removeClass("windshield_on");
+	} else {
+	    $('.windshield').addClass("windshield_on").removeClass("windshield_off");
+	}
+	// Don't have animations on for above class changes. This is probably not necessary. I 
+	// was seeing animations on page load. I did a few things to fix it. The line below 
+	// wasn't the one that fixed it, but I decided to keep it anyways. 
+	$('.windshield').addClass("windshield_animated")
 	$('.windshield').click(function(){
             $(this).toggleClass("windshield_on");
             $(this).toggleClass("windshield_off");
-	    console.log($(this).hasClass("windshield_on"));
 	    $.ajax({
 		type: "POST",
 		url: handlerUrl,
-		data: JSON.stringify({"hello": "world"}),
+		data: JSON.stringify({"done":$(this).hasClass("windshield_off")}),
 		success: updateCount
           
 	    });