⚒️make assignment status more intuitive and user friendly

* Do not mix progress and grading columns and terms * Change some headings and titles * Make it clear that it is the student’s responsibility to track status
RunestoneInteractive · Dec 13, 2022 · 1593ac2 · 1593ac2
1 parent 56cfa39
commit 1593ac2
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 65 deletions.
diff --git a/controllers/assignments.py b/controllers/assignments.py
@@ -550,7 +550,7 @@ def update_submit():
     assignment_id = (
         request.vars.assignment_id
     )  # used to grab the data from jQuery request
-    student_id = request.vars.student_id
+    student_id = auth.user.id
     # pull the grades table for the current student
     grade = (
         db(
@@ -560,17 +560,23 @@ def update_submit():
         .select()
         .first()
     )
+    if request.vars.new_state:
+        is_submit = request.vars.new_state
+    else:
+        is_submit = None
 
     res = {}
 
     if grade:
         # toggles the is_submit variable from True to False
-        if grade.is_submit == "In Progress":
-            is_submit = "Complete"
-        elif grade.is_submit == "Complete":
-            is_submit = "Not Started"
-        else:
-            is_submit = "In Progress"
+        # keep this clause for backward compatibility
+        if is_submit is None:
+            if grade.is_submit == "In Progress":
+                is_submit = "Complete"
+            elif grade.is_submit == "Complete":
+                is_submit = "Not Started"
+            else:
+                is_submit = "In Progress"
 
         db.grades.update_or_insert(
             (db.grades.auth_user == student_id)
@@ -912,7 +918,9 @@ def chooseAssignment():
         timezoneoffset = parsed_js.get("tz_offset", None)
 
     status = []  # This will be used to show the status of each assignment on html file
+    score = []
     duedates = []  # This will be used to display the due date for each assignment
+    ontime = []
 
     course = db(db.courses.id == auth.user.course_id).select().first()
     assignments = db(
@@ -951,10 +959,18 @@ def chooseAssignment():
                     percent_grade = 0.0
                 percent_grade = 100 * grade.score / assignment.points
                 if percent_grade % 10 == 0:
-                    status.append(str(int(percent_grade)) + "%")
+                    score.append(str(int(percent_grade)) + "%")
                 else:
-                    status.append("{0:.1f}%".format(percent_grade))
-            elif grade.is_submit:
+                    score.append("{0:.1f}%".format(percent_grade))
+            else:
+                score.append("Not Graded")
+
+            if deadline <= datetime.datetime.utcnow() and grade.is_submit != "Complete":
+                ontime.append(False)
+            else:
+                ontime.append(True)
+
+            if grade.is_submit:
                 status.append(grade.is_submit)
             elif timestamp > deadline and assignment.enforce_due:
                 status.append("Past Due")
@@ -972,8 +988,10 @@ def chooseAssignment():
         assignments=assignments,
         status=status,
         duedates=duedates,
+        score=score,
         course_id=auth.user.course_name,
         course=course,
+        ontime=ontime,
     )
 
 

diff --git a/static/js/markcomplete.js b/static/js/markcomplete.js
@@ -1,14 +1,44 @@
 function markComplete(assignment_id, student_id) {
+    // This function is deprecated as of December 2022
     jQuery.ajax({
         url: eBookConfig.app + '/assignments/update_submit',
         type: "POST",
         dataType: "JSON",
         data: {
             assignment_id: assignment_id,
-            student_id:student_id
+            student_id: student_id
         },
-        success: function (retdata) {
+        success: function(retdata) {
             window.location.reload(true);
         }
     });
-}
+}
+
+
+
+async function updateAssignmentProgress (newState, assignmentId) {
+
+    let data = {
+        assignment_id: assignmentId,
+        new_state: newState,
+    };
+    let jsheaders = new Headers({
+        "Content-type": "application/json; charset=utf-8",
+        Accept: "application/json",
+    });
+    let request = new Request(`${eBookConfig.app}/assignments/update_submit`, {
+        method: "POST",
+        headers: jsheaders,
+        body: JSON.stringify(data),
+    });
+    let resp = await fetch(request);
+    if (!resp.ok) {
+        alert(`Status Not Updated ${resp.statusText}`);
+    } else {
+        if (location.href.indexOf("doAssignment") > -1) {
+            window.location.reload(true);
+        }
+    }
+
+    console.log(newState);
+}
diff --git a/views/_sphinx_static_files.html b/views/_sphinx_static_files.html
@@ -63,39 +63,53 @@
 <script src="{{=URL('static', 'js/jquery.datetimepicker.full.min.js')}}"></script>
 <link rel="stylesheet" type="text/css" href="{{=URL('static', 'jquery.datetimepicker.min.css')}}" />
 
-<script type="text/x-mathjax-config">
-    MathJax.Hub.Config({
-        tex2jax: {
-            inlineMath: [['\\(','\\)']]
-        },
-        asciimath2jax: {
-            ignoreClass: ".*",
-            processClass: "has_am"
-        },
-        jax: ["input/AsciiMath"],
-        extensions: ["asciimath2jax.js"],
-        TeX: {
-            extensions: ["extpfeil.js", "autobold.js", "https://pretextbook.org/js/lib/mathjaxknowl.js", "AMScd.js", ],
-            // scrolling to fragment identifiers is controlled by other Javascript
-            positionToHash: false,
-            equationNumbers: { autoNumber: "none", useLabelIds: true, },
-            TagSide: "right",
-            TagIndent: ".8em",
-    Macros: {    },
-        },
-        // HTML-CSS output Jax to be dropped for MathJax 3.0
-        "HTML-CSS": {
-            scale: 88,
-            mtextFontInherit: true,
-        },
-        CommonHTML: {
-            scale: 88,
-            mtextFontInherit: true,
-        },
-    });
+<script>
+var runestoneMathReady = new Promise((resolve) => window.rsMathReady = resolve);
+window.MathJax = {
+  tex: {
+    inlineMath: [['\\(','\\)']],
+    tags: "none",
+    tagSide: "right",
+    tagIndent: ".8em",
+    packages: {'[+]': ['base', 'extpfeil', 'ams', 'amscd', 'newcommand', 'knowl']}
+  },
+  options: {
+    ignoreHtmlClass: "tex2jax_ignore|ignore-math",
+    processHtmlClass: "process-math",
+    renderActions: {
+        findScript: [10, function (doc) {
+            document.querySelectorAll('script[type^="math/tex"]').forEach(function(node) {
+                var display = !!node.type.match(/; *mode=display/);
+                var math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display);
+                var text = document.createTextNode('');
+                node.parentNode.replaceChild(text, node);
+                math.start = {node: text, delim: '', n: 0};
+                math.end = {node: text, delim: '', n: 0};
+                doc.math.push(math);
+            });
+        }, '']
+    },
+  },
+  chtml: {
+    scale: 0.88,
+    mtextInheritFont: true
+  },
+  loader: {
+    load: ['input/asciimath', '[tex]/extpfeil', '[tex]/amscd', '[tex]/newcommand', '[pretext]/mathjaxknowl3.js'],
+    paths: {pretext: "https://pretextbook.org/js/lib"},
+  },
+  startup: {
+    pageReady() {
+      return MathJax.startup.defaultPageReady().then(function () {
+      console.log("in ready function");
+      rsMathReady();
+      }
+    )}
+},
+};
 </script>
 
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
+<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 
 
 <style>

diff --git a/views/assignments/chooseAssignment.html b/views/assignments/chooseAssignment.html
@@ -2,17 +2,37 @@
 
 {{block moreincludes}}
     {{include '_sphinx_static_files.html'}}
+    <script src="/runestone/static/js/markcomplete.js" type="text/javascript"></script>
 {{end}}
 
 <h1>Assignments</h1><h2></h2>
 <table class="table table-striped">
-    <tr><th>Name</th><th>Status</th><th>Due</th><th>Description</th></tr>
+    <tr><th>Name</th><th>My Progress</th><th>Due</th><th>Score<th>Description</th></tr>
     {{i=0}}
     {{for assignment in assignments:}}
         <tr>
             <td><a href="doAssignment?assignment_id={{=assignment['id']}}">{{=assignment['name']}}</a></td>
-            <th>{{=status[i]}}</th>
-            <td>{{=duedates[i]}}</td>
+            <th>
+                <select onchange="updateAssignmentProgress(this.value, {{=assignment['id']}})">
+                {{for option in ["Not Started", "In Progress", "Complete"]:}}
+                    <option
+                    {{ if status[i] == option: }}
+                     selected
+                     {{ pass }}
+                     value="{{=option}}"
+                     >{{=option}}
+                     </option>
+                {{pass}}
+                </select>
+            </th>
+            {{ if ontime[i]:}}
+                <td>{{=duedates[i]}}</td>
+            {{else:}}
+                <td style="color: red">{{=duedates[i]}}</td>
+            {{pass}}
+            <td>
+                {{=score[i]}}
+            </td>
             <td>{{=assignment['description']}}</td>
             {{i+=1}}
         </tr>

diff --git a/views/assignments/doAssignment.html b/views/assignments/doAssignment.html
@@ -24,15 +24,15 @@ <h2 style='margin-left:1cm;'>Due: {{=assignment['duedate']}}</h2>
     <div>
         {{if is_submit == "Complete" or is_graded or enforce_pastdue:}}
             <div style='background-color:rgb(146, 207, 165); margin-left:2cm; margin-right:2cm;'>
-                <p style='margin-left:0.5cm; margin-right:0.5cm;'>This assignment has been submitted</p>
+                <p style='margin-left:0.5cm; margin-right:0.5cm;'>You have marked this assignment Complete.  Click to mark it <button onclick="updateAssignmentProgress('In Progress', assignmentId)" class="btn btn-info">In Progress</button></p>
             </div>
         {{elif is_submit == "In Progress":}}
             <div style='background-color:rgb(247, 238, 158); margin-left:2cm; margin-right:2cm;'>
-                <p style='margin-left:0.5cm; margin-right:0.5cm;'>This assignment is in progress</p>
+                <p style='margin-left:0.5cm; margin-right:0.5cm;'>You have marked this assignment as In Progress.  Click to mark it as <button onclick="updateAssignmentProgress('Complete', assignmentId)" class="btn btn-info">Complete</button></p>
             </div>
         {{else:}}
             <div style='background-color:rgb(236, 189, 189); margin-left:2cm; margin-right:2cm;'>
-                <p style='margin-left:0.5cm; margin-right:0.5cm;'>This assignment has not been started</p>
+                <p style='margin-left:0.5cm; margin-right:0.5cm;'>You can mark this assignment as <button onclick="updateAssignmentProgress('In Progress', assignmentId)" class="btn btn-info">In Progress</button> by clicking the button.</p>
             </div>
         {{pass}}
     </div>
@@ -125,7 +125,7 @@ <h5 style='text-align:center;'>Not yet graded</h5>
 <div>
     {{if is_submit == "Complete" or is_graded or enforce_pastdue:}}
         <div style='background-color:rgb(146, 207, 165); margin-left:2cm; margin-right:2cm;'>
-            <p style='margin-left:0.5cm; margin-right:0.5cm;'>This assignment has been submitted</p>
+            <p style='margin-left:0.5cm; margin-right:0.5cm;'>You have marked this assignment Complete.  Click to mark it <button onclick="updateAssignmentProgress('In Progress', assignmentId)" class="btn btn-info">In Progress</button></p>
         </div>
         {{if is_graded:}}
             <div style='background-color:powderblue; margin-left:2cm; margin-right:2cm;'>
@@ -141,29 +141,18 @@ <h5 style='text-align:center;'>Not yet graded</h5>
         {{pass}}
     {{elif is_submit == "In Progress":}}
         <div style='background-color:rgb(247, 238, 158); margin-left:2cm; margin-right:2cm;'>
-            <p style='margin-left:0.5cm; margin-right:0.5cm;'>This assignment is in progress</p>
+            <p style='margin-left:0.5cm; margin-right:0.5cm;'>You have marked this assignment as In Progress.  Click to mark it as <button onclick="updateAssignmentProgress('Complete', assignmentId)" class="btn btn-info">Complete</button></p>
         </div>
     {{else:}}
         <div style='background-color:rgb(236, 189, 189); margin-left:2cm; margin-right:2cm;'>
-            <p style='margin-left:0.5cm; margin-right:0.5cm;'>This assignment has not been started</p>
+            <p style='margin-left:0.5cm; margin-right:0.5cm;'>You can mark this assignment as <button onclick="updateAssignmentProgress('In Progress', assignmentId)" class="btn btn-info">In Progress</button> by clicking the button.</p>
         </div>
     {{pass}}
 </div>
 
 {{ if not released and not assignment.is_timed: }}
 <div style="text-align:center">
-    <button class="btn btn-lg buttonAskCompletion" id="gradeMeButton">Score Me</button>
-    {{if not is_graded and not enforce_pastdue:}}
-        <button class="btn btn-lg buttonAskCompletion" id="submitMeButton">
-            {{if is_submit == "Not Started":}}
-                Mark In Progress
-            {{elif is_submit == "In Progress":}}
-                Mark Complete
-            {{else:}}
-                Mark Incomplete
-            {{pass}}
-        </button>
-    {{pass}}
+    <button class="btn btn-lg buttonAskCompletion" id="gradeMeButton">Compute Score for Assignment</button>
     <p><strong>Warning:</strong> Scores for problems that you self grade are unofficial.
         Some problems will need to be manually graded, and your instructor may have requirements that cannot be autograded.
         No deadlines are enforced when self grading, but your instructor may penalize you