|
| 1 | +/*========================================== |
| 2 | +======= Master shortanswer.js ======== |
| 3 | +============================================ |
| 4 | +=== This file contains the JS for === |
| 5 | +=== the Runestone shortanswer component. === |
| 6 | +============================================ |
| 7 | +=== Created by === |
| 8 | +=== Isaiah Mayerchak === |
| 9 | +=== 7/2/15 === |
| 10 | +==========================================*/ |
1 | 11 |
|
| 12 | +var saList = {}; // Dictionary that contains all instances of shortanswer objects |
2 | 13 |
|
3 | | -/** |
4 | | - * If the divid is in the localStorage, then assume it was put there in a panic |
5 | | - * Check against the server to find which is more recent, and use that. |
6 | | - * |
7 | | - */ |
8 | | -function loadJournal(directive_id) { |
9 | | - if (storage.has(directive_id)) { |
10 | | - var solution = $('#' + directive_id + '_solution'); |
11 | | - solution.text(storage.get(directive_id)); |
| 14 | + |
| 15 | +function ShortAnswer (opts) { |
| 16 | + if (opts) { |
| 17 | + this.init(opts); |
12 | 18 | } |
| 19 | +} |
13 | 20 |
|
14 | | - /*directiveRemoteCommand('get_journal_entry', directive_id, {}, |
15 | | - function(data) { |
16 | | - var solution = $('#'+directive_id+'_solution'); |
17 | | - solution.text(data.solution); |
18 | | - if (storage.has(directive_id)) { |
19 | | - if (storage.is_new(directive_id, data.timestamp)) { |
20 | | - storage.remove(directive_id); |
| 21 | +ShortAnswer.prototype = new RunestoneBase(); |
| 22 | + |
| 23 | +/*======================================== |
| 24 | +== Initialize basic ShortAnswer attributes == |
| 25 | +========================================*/ |
| 26 | +ShortAnswer.prototype.init = function (opts) { |
| 27 | + RunestoneBase.apply(this, arguments); |
| 28 | + var orig = opts.orig; // entire <p> element that will be replaced by new HTML |
| 29 | + this.useRunestoneServies = opts.useRunestoneServices || eBookConfig.useRunestoneServices; |
| 30 | + this.origElem = orig; |
| 31 | + this.divid = orig.id; |
| 32 | + this.question = this.origElem.innerHTML; |
| 33 | + |
| 34 | + this.optional = false; |
| 35 | + if ($(this.origElem).is("[data-optional]")) { |
| 36 | + this.optional = true; |
| 37 | + } |
| 38 | + |
| 39 | + this.renderHTML(); |
| 40 | + this.loadJournal(); |
| 41 | +}; |
| 42 | + |
| 43 | +ShortAnswer.prototype.renderHTML = function() { |
| 44 | + this.containerDiv = document.createElement("div"); |
| 45 | + this.containerDiv.id = this.divid; |
| 46 | + if (this.optional) { |
| 47 | + $(this.containerDiv).addClass("journal alert alert-success"); |
21 | 48 | } else { |
22 | | - solution.text(storage.get(directive_id)); |
23 | | - submitJournal(directive_id); |
| 49 | + $(this.containerDiv).addClass("journal alert alert-warning"); |
24 | 50 | } |
25 | | - } |
26 | | - }, |
27 | | - function(data) { |
28 | | - console.log(data.message); |
29 | | - }); */ |
30 | | -} |
31 | 51 |
|
32 | | -function submitJournal(directive_id) { |
33 | | - var value = $('#'+directive_id+'_solution').val(); |
34 | | - storage.set(directive_id, value); |
| 52 | + this.newForm = document.createElement("form"); |
| 53 | + this.newForm.id = this.divid + "_journal"; |
| 54 | + this.newForm.name = this.newForm.id; |
| 55 | + this.newForm.action = ""; |
| 56 | + this.containerDiv.appendChild(this.newForm); |
| 57 | + |
| 58 | + this.fieldSet = document.createElement("fieldset"); |
| 59 | + this.newForm.appendChild(this.fieldSet); |
| 60 | + |
| 61 | + this.legend = document.createElement("legend"); |
| 62 | + this.legend.innerHTML = "Short Answer"; |
| 63 | + this.fieldSet.appendChild(this.legend); |
| 64 | + |
| 65 | + this.firstLegendDiv = document.createElement("div"); |
| 66 | + this.firstLegendDiv.innerHTML = this.question; |
| 67 | + $(this.firstLegendDiv).addClass("journal-question"); |
| 68 | + this.fieldSet.appendChild(this.firstLegendDiv); |
| 69 | + |
| 70 | + this.jInputDiv = document.createElement("div"); |
| 71 | + this.jInputDiv.id = this.divid + "_journal_input"; |
| 72 | + this.fieldSet.appendChild(this.jInputDiv); |
| 73 | + |
| 74 | + this.jOptionsDiv = document.createElement("div"); |
| 75 | + $(this.jOptionsDiv).addClass("journal-options"); |
| 76 | + this.jInputDiv.appendChild(this.jOptionsDiv); |
| 77 | + |
| 78 | + this.jLabel = document.createElement("label"); |
| 79 | + $(this.jLabel).addClass("radio-inline"); |
| 80 | + this.jOptionsDiv.appendChild(this.jLabel); |
| 81 | + |
| 82 | + this.jTextArea = document.createElement("textarea"); |
| 83 | + this.jTextArea.id = this.divid + "_solution"; |
| 84 | + $(this.jTextArea).css("display:inline, width:530px"); |
| 85 | + $(this.jTextArea).addClass("form-control"); |
| 86 | + this.jTextArea.rows = 4; |
| 87 | + this.jTextArea.cols = 50; |
| 88 | + this.jLabel.appendChild(this.jTextArea); |
| 89 | + |
| 90 | + this.fieldSet.appendChild(document.createElement("br")); |
| 91 | + |
| 92 | + this.buttonDiv = document.createElement("div"); |
| 93 | + this.fieldSet.appendChild(this.buttonDiv); |
| 94 | + |
| 95 | + this.submitButton = document.createElement("button"); |
| 96 | + $(this.submitButton).addClass("btn btn-default"); |
| 97 | + this.submitButton.type = "button"; |
| 98 | + this.submitButton.textContent = "Save"; |
| 99 | + this.submitButton.onclick = function () { |
| 100 | + this.submitJournal(); |
| 101 | + }.bind(this); |
| 102 | + this.buttonDiv.appendChild(this.submitButton); |
| 103 | + |
| 104 | + this.randomSpan = document.createElement("span"); |
| 105 | + this.randomSpan.innerHTML = "Instructor's Feedback"; |
| 106 | + this.fieldSet.appendChild(this.randomSpan); |
| 107 | + |
| 108 | + this.otherOptionsDiv = document.createElement("div"); |
| 109 | + $(this.otherOptionsDiv).css("padding-left:20px"); |
| 110 | + $(this.otherOptionsDiv).addClass("journal-options"); |
| 111 | + this.fieldSet.appendChild(this.otherOptionsDiv); |
| 112 | + |
| 113 | + this.feedbackDiv = document.createElement("div"); |
| 114 | + $(this.feedbackDiv).addClass("bg-info form-control"); |
| 115 | + $(this.feedbackDiv).css("width:530px, background-color:#eee, font-style:italic"); |
| 116 | + this.feedbackDiv.id = this.divid + "_feedback"; |
| 117 | + this.feedbackDiv.innerHTML = "There is no feedback yet."; |
| 118 | + this.otherOptionsDiv.appendChild(this.feedbackDiv); |
| 119 | + |
| 120 | + this.fieldSet.appendChild(document.createElement("br")); |
| 121 | + |
| 122 | + $(this.origElem).replaceWith(this.containerDiv); |
| 123 | +}; |
| 124 | + |
| 125 | +ShortAnswer.prototype.submitJournal = function () { |
| 126 | + var value = $("#"+this.divid+"_solution").val(); |
| 127 | + localStorage.setItem(this.divid, value); |
35 | 128 | /* |
36 | | - directiveRemoteCommand('set_journal_entry', directive_id, {'solution': value}, |
| 129 | + directiveRemoteCommand("set_journal_entry", this.divid, {"solution": value}, |
37 | 130 | function(data) { |
38 | | - storage.remove(directive_id); |
| 131 | + storage.remove(this.divid); |
39 | 132 | }, |
40 | 133 | function(data) { |
41 | 134 | console.log(data.message); |
42 | 135 | }); */ |
43 | | - this.logBookEvent({'event': 'shortanswer', 'act': JSON.stringify(value), 'div_id': directive_id}); |
44 | | -} |
| 136 | + this.logBookEvent({'event': 'shortanswer', 'act': JSON.stringify(value), 'div_id': this.divid}); |
| 137 | +}; |
| 138 | + |
| 139 | +ShortAnswer.prototype.loadJournal = function () { |
| 140 | + |
| 141 | + // Ask the server to send the latest |
| 142 | + var loadAnswer = function(data,status,whatever) { |
| 143 | + var len = localStorage.length; |
| 144 | + var answer = {}; |
| 145 | + if (! jQuery.isEmptyObject(data)) { |
| 146 | + answer = data; |
| 147 | + } else { |
| 148 | + answer.answer = ""; |
| 149 | + } |
| 150 | + var solution = $("#" + this.divid + "_solution"); |
| 151 | + if (len > 0) { |
| 152 | + var ex = storage.get(this.divid); |
| 153 | + if (ex !== null ) { |
| 154 | + if (! storage.is_new(answer.divid, new Date(answer.timestamp))) { |
| 155 | + solution.text(storage.get(this.divid)); |
| 156 | + // now send the newer answer to the server... |
| 157 | + } else { |
| 158 | + solution.text(answer.answer); |
| 159 | + } |
| 160 | + } else { |
| 161 | + solution.text(answer.answer); |
| 162 | + } |
| 163 | + } else { |
| 164 | + solution.text(answer.answer); |
| 165 | + } |
| 166 | + }.bind(this); |
| 167 | + var data = {'div_id' : this.divid}; |
| 168 | + if (this.useRunestoneServies) { |
| 169 | + jQuery.get(eBookConfig.ajaxURL + 'getlastanswer', data, loadAnswer); |
| 170 | + } else { |
| 171 | + loadAnswer({},null,null); |
| 172 | + } |
| 173 | +}; |
| 174 | + |
45 | 175 |
|
| 176 | +/*================================= |
| 177 | +== Find the custom HTML tags and == |
| 178 | +== execute our code on them == |
| 179 | +=================================*/ |
| 180 | +$(document).ready(function () { |
| 181 | + $("[data-component=shortanswer]").each(function (index) { |
| 182 | + saList[this.id] = new ShortAnswer({"orig": this, 'useRunestoneServices': eBookConfig.useRunestoneServices}); |
| 183 | + }); |
46 | 184 |
|
| 185 | +}); |
0 commit comments