v0.1 -> test on edx-platform, lms

recommender/recommender.py

@@ -58,7 +58,7 @@ class RecommenderXBlock(XBlock):
     # Scope-wide. List of JSON objects corresponding to recommendations combine XML and user. 
     default_recommendations = List(help="List of help resources", default=[], scope=Scope.content)
     # Scope-wide. List of JSON objects corresponding to recommendations as defined in XML. 
-    recommendations = List(help="List of help resources", default=[], scope=Scope.content)
+    recommendations = List(help="List of help resources", default=[], scope=Scope.user_state_summary)
     # Upvotes for this particular user
     upvotes = List(help="List of items user gave upvote to", default=[], scope=Scope.user_state)
     # Downvotes for this particular user
@@ -131,7 +131,6 @@ class RecommenderXBlock(XBlock):
     def add_resource(self, data, suffix=''):
         ''' untested '''
         resource = data['resource']
-
         # check url for redundancy
         recoms = self.recommendations
         #if not recoms:
@@ -150,8 +149,10 @@ class RecommenderXBlock(XBlock):
         new_resource['downvotes'] = 0
         new_resource['id'] = self.getResourceNewId()
         new_resource['isMisuse'] = "notMisuse"
+        print "before append"
 #        self.resources.append(new_resource)
         self.recommendations.append(new_resource)
+        print "after append"
         return {"Success": True, "id": new_resource['id']}
 
     @XBlock.json_handler
@@ -196,6 +197,8 @@ class RecommenderXBlock(XBlock):
         print "entered"
         if not self.recommendations:
             self.recommendations = self.default_recommendations
+        if not self.recommendations:
+            self.recommendations = []
 
         if not self.template_lookup:
             self.template_lookup = TemplateLookup() 
@@ -208,11 +211,16 @@ class RecommenderXBlock(XBlock):
         resources = [{'id' : r['id'], 'title' : r['title'], "votes" : r['upvotes'] - r['downvotes'], 'url' : r['url'], 'description' : r['description'], 'isMisuse': r['isMisuse']} for r in self.recommendations]
         resources = sorted(resources, key = lambda r: r['votes'], reverse=True)
 
+        print resources
+
         frag = Fragment(self.template_lookup.get_template("recommender.html").render(resources = resources))
         frag.add_css_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css")
+        frag.add_css_url("//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css")
         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/recommender.css"))
+        frag.add_css(self.resource_string("static/css/colorbox.css"))
         frag.add_javascript(self.resource_string("static/js/src/recommender.js"))
+        frag.add_javascript(self.resource_string("static/js/src/jquery.colorbox.js"))
         frag.initialize_js('RecommenderXBlock')
         return frag
 
@@ -228,8 +236,8 @@ class RecommenderXBlock(XBlock):
                <recommender> 
                      {"id": 1, "title": "Covalent bonding and periodic trends", "upvotes" : 15, "downvotes" : 5, "url" : "https://courses.edx.org/courses/MITx/3.091X/2013_Fall/courseware/SP13_Week_4/SP13_Periodic_Trends_and_Bonding/", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/videopage1.png", "isMisuse": "notMisuse"}
                      {"id": 2, "title": "Polar covalent bonds and electronegativity", "upvotes" : 10, "downvotes" : 7, "url" : "https://courses.edx.org/courses/MITx/3.091X/2013_Fall/courseware/SP13_Week_4/SP13_Covalent_Bonding/", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/videopage2.png", "isMisuse": "notMisuse"}
-                     {"id": 3, "title": "Longest wavelength able to to break a C-C bond ...", "upvotes" : 10, "downvotes" : 7, "url" : "https://answers.yahoo.com/question/index?qid=20081112142253AA1kQN1", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage1.png", "isMisuse": "notMisuse"}
-                     {"id": 4, "title": "Calculate the maximum wavelength of light for ...", "upvotes" : 10, "downvotes" : 7, "url" : "https://answers.yahoo.com/question/index?qid=20100110115715AA6toHw", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage2.png", "isMisuse": "notMisuse"}
+                     {"id": 3, "title": "Longest wavelength able to to break a C-C bond ...", "upvotes" : 1230, "downvotes" : 7, "url" : "https://answers.yahoo.com/question/index?qid=20081112142253AA1kQN1", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage1.png", "isMisuse": "notMisuse"}
+                     {"id": 4, "title": "Calculate the maximum wavelength of light for ...", "upvotes" : 10, "downvotes" : 3457, "url" : "https://answers.yahoo.com/question/index?qid=20100110115715AA6toHw", "description" : "http://people.csail.mit.edu/swli/edx/recommendation/img/dispage2.png", "isMisuse": "notMisuse"}
                   </recommender>
                 </vertical_demo>
              """),

recommender/static/html/recommender.html

@@ -7,10 +7,14 @@
 
 .recommender_content {
   width: 700px;
+/*  width : 100%;*/
   float: left;
 }
 
-.recommender_row { overflow:hidden; }
+.recommender_row { 
+  overflow:scroll;
+  max-height:200px;
+}
 
 .question {
   width:700px;
@@ -22,13 +26,26 @@
   margin : 1;
 /*  display:table-cell;*/
   float:left;
-  width:340px;
+/*  width:340px;*/
+  width : 95%;
   border-color:gray;
   border-width:1px;
   border-style:solid;
   border-radius:5px;
 }
 
+.resource_list_less, .resource_list_more {
+  border : 1;
+  padding : 1;
+  margin : 1;
+  width : 95%;
+  border-color:gray;
+  border-width:1px;
+  border-style:solid;
+  border-radius:5px;
+
+}
+
 .recommender_header {
   display : flex;
   padding : 0 0 10 0;
@@ -46,6 +63,33 @@
 .descriptionImg {
   height: 400px;
   overflow-x: scroll;
+  margin-top: 2em;
+}
+
+.recommender_vote_arrow_down {
+  color: red;
+  cursor: pointer;
+  float: left;
+  width: 20px;
+  margin-left:auto;
+  margin-right:auto;
+  text-align:center;
+}
+
+.recommender_vote_arrow_up {
+  color: green;
+  cursor: pointer;
+  float: left;
+  width: 20px; 
+  margin-left:auto;
+  margin-right:auto;
+  text-align:center;
+}
+
+.recommender_vote_score {
+  float: left;
+  width: 50px; 
+  text-align: center;
 }
 
 .recommender_recommendations {
@@ -55,7 +99,7 @@
 .recommender_blurb {
   display:inline-block;
   vertical-align: middle;
-  width:225px;
+  width:525px;
   overflow:hidden;
   text-overflow:ellipsis;
 }
@@ -67,23 +111,7 @@
 .recommender_vote_box {
   display:inline-block;
   vertical-align: middle;
-  width:45px;
-}
-
-.recommender_vote_arrow_up {
-  margin-left:auto;
-  margin-right:auto;
-  text-align:center;
-}
-
-.recommender_vote_arrow_down {
-  margin-left:auto;
-  margin-right:auto;
-  text-align:center;
-}
-
-.recommender_vote_score {
-  width:100%;
+  width:90px;
 }
 
 .recommender_edit{
@@ -91,42 +119,56 @@
   vertical-align: top;
 }
 
-.misuse, .redTxt {
+.redTxt {
   color: red;
 }
 
+.resource_edit_button { float:left; }
+
 .addSourceBlockTitle, .editSourceBlockTitle {
-  margin-top: 1em;
   margin-bottom: 1em;
 }
 
-.resource_hovered { background: lightsteelblue; }
+.editSourceBlock, .recommender_add {
+  padding: 1em;
+}
+
+.ui-icon.misuse {
+    background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png);
+}
+
+.resource_hovered { background: #1d9dd9; }
 .recommender_modify { margin-left: 2em; }
+
+form { margin: 0em; }
 </style>
 
 <div class="recommender_block">
   <div class="recommender_header">
     <div class="recommender_title">Helpful resources</div>
+    <a class="inline cboxElement resource_add_button" href="#recommender_add"><span class="ui-icon ui-icon-plusthick"></span></a>
   </div>
 
   <div class="recommender_recommendations">
    <div class="recommender_content">
     <div class="recommender_row">
+      <input type="button" class="resource_list_less" value="Show less">
       % for elem in resources:
         <%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isMisuse=elem['isMisuse']" />
       % endfor
+      <input type="button" class="resource_list_more" value="Show more">
     </div>
     <div class="recommender_description">
       <div class="descriptionImg"></div>
     </div>
    </div>
     <div class='recommender_modify'>
-      <div class="editSourceBlock">
+      <div class="editSourceBlock" id="editSourceBlock">
       </div>
-      <div class="recommender_add">
-        <div class="addSourceBlockTitle">Add new resource</div>
-        Title: <input type="text" class="in_title"><br>
-        Url: <input type="text" class="in_url"><br>
+      <div class="recommender_add" id="recommender_add">
+        <div class="addSourceBlockTitle">Recommend a new helpful resource for this problem with a short description, hyperlink, and previewing screenshot to the new resource.</div>
+        Description: <input type="text" class="in_title"><br>
+        HyperLink: <input type="text" class="in_url"><br>
         <form id="addResourceForm" action="http://danielswli.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
           <input type="hidden" name="acl" value="public-read">
           <input type="hidden" name="Content-Type" value="image/jpeg">

recommender/static/html/resourcebox.html

 <%page args="title,votes,url,description,id,isMisuse"/> 
-      <div class="recommender_resource">
+      <div class="recommender_resource hidden">
 	<div class="recommender_vote_box">
-	  <div class="recommender_vote_arrow_up" role="button" aria-label="upvote" tabindex="0"><span class="ui-icon ui-icon-triangle-1-n"></span></div>
+	  <div class="recommender_vote_arrow_up" role="button" aria-label="upvote" tabindex="0">↑</div>
 	  <!--div class="recommender_vote_score_dislikes">2927</div-->
 	  <div class="recommender_vote_score">${votes}</div>
 	  <!--div class="recommender_vote_score_likes">2927</div-->
-	  <div class="recommender_vote_arrow_down" role="button" aria-label="downvote" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span></div>
+	  <div class="recommender_vote_arrow_down" role="button" aria-label="downvote" tabindex="0">↓</div>
 	</div>
 	<div class="recommender_blurb"><div class="recommender_title">${title}</div><div class="recommender_url">${url}</div><div class="recommender_descriptionSlot">${description}</div><div class="recommender_entryId">${id}</div></div>
-	<div class="recommender_edit"><input type="button" value="Edit" class="editResource"><br><input type="button" value="Misuse" class="flagResource ${isMisuse}"></div>
+	<div class="recommender_edit"><a class="inline cboxElement resource_edit_button" href="#editSourceBlock"><span class="ui-icon ui-icon-pencil editResource"></span></a><span class="ui-icon ui-icon-flag flagResource ${isMisuse}"></span></div>
       </div>