Support attachments on shortanswer Qs

Author: bnmnetp

runestone/common/js/runestonebase.js

@@ -295,6 +295,12 @@ export default class RunestoneBase {
                         data = await response.json();
                         data = data.detail;
                         this.repopulateFromStorage(data);
+                        this.attempted = true;
+                        if (typeof(data.correct) !== "undefined") {
+                            this.correct = data.correct;
+                        } else {
+                            this.correct = null;
+                        }
                         this.csresolver("server");
                     } else {
                         console.log(

runestone/mchoice/js/mchoice.js

@@ -52,7 +52,7 @@ export default class MultipleChoice extends RunestoneBase {
         // https://docs.mathjax.org/en/latest/options/startup/startup.html
         // https://docs.mathjax.org/en/latest/web/configuration.html#startup-action
         // runestoneMathReady is defined in the preamble for all PTX authored books
-        this.queueMathJax(self.containerDiv);
+        this.queueMathJax(this.containerDiv);
         if (typeof Prism !== "undefined") {
             Prism.highlightAllUnder(this.containerDiv);
         }

runestone/shortanswer/js/shortanswer.js

@@ -28,12 +28,16 @@ export default class ShortAnswer extends RunestoneBase {
             this.divid = orig.id;
             this.question = this.origElem.innerHTML;
             this.optional = false;
+            this.attachURL = opts.attachURL;
             if ($(this.origElem).is("[data-optional]")) {
                 this.optional = true;
             }
             if ($(this.origElem).is("[data-mathjax]")) {
                 this.mathjax = true;
             }
+            if ($(this.origElem).is("[data-attachment]")) {
+                this.attachment = true;
+            }
             this.placeholder =
                 $(this.origElem).data("placeholder") ||
                 "Write your answer here";
@@ -73,7 +77,7 @@ export default class ShortAnswer extends RunestoneBase {
         this.jOptionsDiv.appendChild(this.jLabel);
         this.jTextArea = document.createElement("textarea");
         let self = this;
-        this.jTextArea.onchange = function () {
+        this.jTextArea.onchange = function() {
             self.isAnswered = true;
         };
         this.jTextArea.id = this.divid + "_solution";
@@ -84,7 +88,7 @@ export default class ShortAnswer extends RunestoneBase {
         this.jTextArea.rows = 4;
         this.jTextArea.cols = 50;
         this.jLabel.appendChild(this.jTextArea);
-        this.jTextArea.onchange = function () {
+        this.jTextArea.onchange = function() {
             this.feedbackDiv.innerHTML = "Your answer has not been saved yet!";
             $(this.feedbackDiv).removeClass("alert-success");
             $(this.feedbackDiv).addClass("alert alert-danger");
@@ -101,7 +105,7 @@ export default class ShortAnswer extends RunestoneBase {
         $(this.submitButton).addClass("btn btn-success");
         this.submitButton.type = "button";
         this.submitButton.textContent = "Save";
-        this.submitButton.onclick = function () {
+        this.submitButton.onclick = function() {
             this.checkCurrentAnswer();
             this.logCurrentAnswer();
             this.renderFeedback();
@@ -124,6 +128,24 @@ export default class ShortAnswer extends RunestoneBase {
         $(this.feedbackDiv).addClass("alert alert-danger");
         //this.otherOptionsDiv.appendChild(this.feedbackDiv);
         this.fieldSet.appendChild(this.feedbackDiv);
+        if (this.attachment) {
+            let attachDiv = document.createElement("div")
+            if (this.graderactive ) {
+                // If in grading mode make a button to create a popup with the image
+                let viewButton = document.createElement("button")
+                viewButton.type = "button"
+                viewButton.innerHTML = "View Attachment"
+                viewButton.onclick = this.viewFile.bind(this);
+                attachDiv.appendChild(viewButton);
+            } else {
+                // Otherwise make a button for the student to select a file to upload.
+                this.fileUpload = document.createElement("input")
+                this.fileUpload.type = "file";
+                this.fileUpload.id = `${this.divid}_fileme`;
+                attachDiv.appendChild(this.fileUpload);
+            }
+            this.containerDiv.appendChild(attachDiv);
+        }
         //this.fieldSet.appendChild(document.createElement("br"));
         $(this.origElem).replaceWith(this.containerDiv);
         // This is a stopgap measure for when MathJax is not loaded at all.  There is another
@@ -163,6 +185,9 @@ export default class ShortAnswer extends RunestoneBase {
             data.sid = sid;
         }
         await this.logBookEvent(data);
+        if (this.attachment) {
+            await this.uploadFile();
+        }
     }
 
     renderFeedback() {
@@ -234,7 +259,7 @@ export default class ShortAnswer extends RunestoneBase {
             $(toggle_answer_button).css("margin-left", "5px");
 
             $(toggle_answer_button).click(
-                function () {
+                function() {
                     var display_timestamp, button_text;
                     if (this.current_answer === "ontime") {
                         this.jTextArea.value = data.last_answer;
@@ -275,14 +300,42 @@ export default class ShortAnswer extends RunestoneBase {
     disableInteraction() {
         this.jTextArea.disabled = true;
     }
+
+    async uploadFile() {
+        const files = this.fileUpload.files
+        const data = new FormData()
+        if (this.fileUpload.files.length > 0) {
+            data.append('file', files[0])
+            fetch(`/ns/logger/upload/${this.divid}`, {
+                    method: 'POST',
+                    body: data
+                })
+                .then(response => response.json())
+                .then(data => {
+                    console.log(data)
+                })
+                .catch(error => {
+                    console.error(error)
+                })
+            }
+    }
+
+    viewFile() {
+        // Get the URL from the S3 API -- saved when we display in grader mode
+        if (this.attachURL) {
+            window.open(this.attachURL, "_blank");
+        } else {
+            alert("No attachment for this student.")
+        }
+    }
 }
 
 /*=================================
 == Find the custom HTML tags and ==
 ==   execute our code on them    ==
 =================================*/
-$(document).on("runestone:login-complete", function () {
-    $("[data-component=shortanswer]").each(function () {
+$(document).on("runestone:login-complete", function() {
+    $("[data-component=shortanswer]").each(function() {
         if ($(this).closest("[data-component=timedAssessment]").length == 0) {
             // If this element exists within a timed component, don't render it here
             try {

runestone/shortanswer/shortanswer.py

@@ -29,8 +29,11 @@
 
 def setup(app):
     app.add_directive("shortanswer", JournalDirective)
-    app.add_node(JournalNode, html=(visit_journal_html, depart_journal_html),
-                 xml=(visit_journal_xml, depart_journal_xml))
+    app.add_node(
+        JournalNode,
+        html=(visit_journal_html, depart_journal_html),
+        xml=(visit_journal_xml, depart_journal_xml),
+    )
 
     app.add_config_value("shortanswer_div_class", "journal", "html")
     app.add_config_value(
@@ -40,7 +43,7 @@ def setup(app):
 
 TEXT_START = """
 <div class="runestone">
-<div data-component="shortanswer" data-question_label="%(question_label)s" class="%(divclass)s" id=%(divid)s %(optional)s %(mathjax)s>
+<div data-component="shortanswer" data-question_label="%(question_label)s" class="%(divclass)s" id=%(divid)s %(optional)s %(mathjax)s %(attachment)s >
 """
 
 TEXT_END = """
@@ -55,7 +58,7 @@ def setup(app):
 
 XML_END = """
     </statement>
-</exercise> 
+</exercise>
 """
 
 
@@ -102,23 +105,23 @@ def depart_journal_xml(self, node):
 
 class JournalDirective(Assessment):
     """
-.. shortanswer:: uniqueid
-   :optional:
+    .. shortanswer:: uniqueid
+       :optional:
 
-   text of the question goes here
+       text of the question goes here
 
 
-config values (conf.py):
+    config values (conf.py):
 
-- shortanswer_div_class - custom CSS class of the component's outermost div
+    - shortanswer_div_class - custom CSS class of the component's outermost div
     """
 
     required_arguments = 1  # the div id
     optional_arguments = 0
     final_argument_whitespace = True
     has_content = True
     option_spec = Assessment.option_spec.copy()
-    option_spec.update({"mathjax": directives.flag})
+    option_spec.update({"mathjax": directives.flag, "attachment": directives.flag})
 
     node_class = JournalNode
 
@@ -129,12 +132,16 @@ def run(self):
         self.assert_has_content()
 
         self.options["mathjax"] = "data-mathjax" if "mathjax" in self.options else ""
+        self.options["attachment"] = (
+            "data-attachment" if "attachment" in self.options else ""
+        )
 
         journal_node = JournalNode()
         journal_node["runestone_options"] = self.options
-        journal_node["source"], journal_node["line"] = self.state_machine.get_source_and_line(
-            self.lineno
-        )
+        (
+            journal_node["source"],
+            journal_node["line"],
+        ) = self.state_machine.get_source_and_line(self.lineno)
 
         self.updateContent()