|
1 | | -// Javascript needed for the poll Sphinx directive type |
| 1 | +/* |
| 2 | +__author__ = Kirby Olson |
| 3 | +__date__ = 6/12/2015 */ |
2 | 4 |
|
| 5 | +var pollList = {}; |
3 | 6 |
|
4 | | -function submitPoll(div_id) { |
5 | | - var form = $("#"+div_id+"_poll"); |
6 | | - var poll_val = form.find("input:radio[name="+div_id +"_opt]:checked").val(); |
7 | | - if(poll_val === undefined) |
| 7 | +Poll.prototype = new RunestoneBase(); |
| 8 | + |
| 9 | +function Poll(opts) { |
| 10 | + if (opts) { |
| 11 | + this.init(opts); |
| 12 | + } |
| 13 | +} |
| 14 | + |
| 15 | +Poll.prototype.init = function (opts) { |
| 16 | + RunestoneBase.apply(this, arguments); |
| 17 | + var orig = opts.orig; //entire <p> element |
| 18 | + this.origElem = orig; |
| 19 | + this.divid = orig.id; |
| 20 | + this.children = this.origElem.childNodes; |
| 21 | + this.optionList = []; |
| 22 | + this.optsArray = []; |
| 23 | + this.comment = false; |
| 24 | + if ($(this.origElem).is("[data-comment]")) { |
| 25 | + this.comment = true; |
| 26 | + } |
| 27 | + console.log(this.comment); |
| 28 | + |
| 29 | + this.getQuestionText(); |
| 30 | + this.getOptionText(); //populates optionList |
| 31 | + this.renderPoll(); //generates HTML |
| 32 | + this.checkPollStorage(); //checks localStorage to see if this poll has already been completed by this user |
| 33 | +}; |
| 34 | + |
| 35 | +Poll.prototype.getQuestionText = function() { |
| 36 | + //finds the text inside the parent tag, but before the first <li> tag and sets it as the question |
| 37 | + var _this = this; |
| 38 | + var firstAnswer; |
| 39 | + for (var i=0; i<this.children.length; i++) { |
| 40 | + if (this.children[i].tagName == "LI") { |
| 41 | + firstAnswer = _this.children[i]; |
| 42 | + break; |
| 43 | + } |
| 44 | + } |
| 45 | + var delimiter = firstAnswer.outerHTML; |
| 46 | + var fulltext = $(this.origElem).html(); |
| 47 | + var temp = fulltext.split(delimiter); |
| 48 | + this.question = temp[0]; |
| 49 | +}; |
| 50 | + |
| 51 | +Poll.prototype.getOptionText = function() { |
| 52 | + //Gets the text from each <li> tag and places it in this.optionList |
| 53 | + var _this = this; |
| 54 | + for (var i=0; i<this.children.length; i++) { |
| 55 | + if (_this.children[i].tagName == "LI") { |
| 56 | + _this.optionList.push($(_this.children[i]).text()); |
| 57 | + } |
| 58 | + } |
| 59 | +}; |
| 60 | + |
| 61 | +Poll.prototype.renderPoll = function() { |
| 62 | + //generates the HTML that the user interacts with |
| 63 | + var _this = this; |
| 64 | + this.containerDiv = document.createElement("div"); |
| 65 | + this.pollForm = document.createElement("form"); |
| 66 | + this.resultsDiv = document.createElement("div"); |
| 67 | + |
| 68 | + this.containerDiv.id = this.divid + "_container"; |
| 69 | + $(this.containerDiv).addClass("alert alert-warning"); |
| 70 | + |
| 71 | + $(this.pollForm).text(this.question); |
| 72 | + $(this.pollForm).attr({ |
| 73 | + "id":this.divid +"_form", |
| 74 | + "method" : "get", |
| 75 | + "action" : "", |
| 76 | + "onsubmit" : "return false;" |
| 77 | + }); |
| 78 | + this.pollForm.appendChild(document.createElement("br")); |
| 79 | + for (var i=0; i<this.optionList.length; i++) { |
| 80 | + var radio = document.createElement("input"); |
| 81 | + var tmpid = _this.divid + "_opt_" + i; |
| 82 | + $(radio).attr({ |
| 83 | + "id":tmpid, |
| 84 | + "name":this.divid +"_group1", |
| 85 | + "type":"radio", |
| 86 | + "value":i |
| 87 | + }); |
| 88 | + var label = document.createElement("label"); |
| 89 | + $(label).attr("for", tmpid); |
| 90 | + $(label).text(this.optionList[i]); |
| 91 | + this.pollForm.appendChild(radio); |
| 92 | + this.optsArray.push(radio); |
| 93 | + this.pollForm.appendChild(label); |
| 94 | + this.pollForm.appendChild(document.createElement("br")); |
| 95 | + } |
| 96 | + |
| 97 | + if (this.comment) { |
| 98 | + this.renderTextField(); |
| 99 | + } |
| 100 | + |
| 101 | + var button = document.createElement("button"); |
| 102 | + button.onclick = function() { |
| 103 | + _this.submitPoll(); |
| 104 | + }; |
| 105 | + button.textContent = "Complete"; |
| 106 | + $(button).attr({ |
| 107 | + "class" : "btn btn-success", |
| 108 | + "name" : "Submit Poll", |
| 109 | + }); |
| 110 | + |
| 111 | + this.resultsDiv.id = this.divid + "_results"; |
| 112 | + |
| 113 | + |
| 114 | + this.pollForm.appendChild(button); |
| 115 | + this.containerDiv.appendChild(this.pollForm); |
| 116 | + this.containerDiv.appendChild(this.resultsDiv); |
| 117 | + $(this.origElem).replaceWith(this.containerDiv); |
| 118 | +}; |
| 119 | + |
| 120 | +Poll.prototype.renderTextField = function () { |
| 121 | + this.textfield = document.createElement("input"); |
| 122 | + this.textfield.type = "text"; |
| 123 | + $(this.textfield).addClass("form-control"); |
| 124 | + this.textfield.style.width = "300px"; |
| 125 | + this.textfield.name = this.divid + "_comment"; |
| 126 | + this.textfield.placeholder = "Any comments?"; |
| 127 | + this.pollForm.appendChild(this.textfield); |
| 128 | + this.pollForm.appendChild(document.createElement("br")); |
| 129 | +}; |
| 130 | + |
| 131 | +Poll.prototype.submitPoll = function() { |
| 132 | + //checks the poll, sets localstorage and submits to the server |
| 133 | + var poll_val = null; |
| 134 | + for (var i = 0; i < this.optsArray.length; i++) { |
| 135 | + if (this.optsArray[i].checked) { |
| 136 | + poll_val = this.optsArray[i].value; |
| 137 | + break; |
| 138 | + } |
| 139 | + } |
| 140 | + if(poll_val === null) |
8 | 141 | return; |
9 | 142 |
|
10 | | - var poll_comment = form.find("input:text[name="+div_id+"_comment]").val(); |
| 143 | + var comment_val = ""; |
| 144 | + if (this.comment) { |
| 145 | + comment_val = this.textfield.value; |
| 146 | + } |
11 | 147 |
|
12 | | - var act = ''; |
13 | | - if((poll_comment === undefined) || (poll_comment[0] !== undefined)) |
14 | | - act = poll_val + ":" + poll_comment; |
15 | | - else |
| 148 | + var act = ""; |
| 149 | + if(comment_val !== "") { |
| 150 | + act = poll_val + ":" + comment_val; |
| 151 | + } else { |
16 | 152 | act = poll_val; |
| 153 | + } |
17 | 154 |
|
18 | | - var eventInfo = {'event':'poll', 'act':act, 'div_id':div_id}; |
| 155 | + var eventInfo = {"event":"poll", "act":act, "div_id":this.divid}; |
19 | 156 |
|
20 | 157 | // log the response to the database |
21 | 158 | this.logBookEvent(eventInfo); // in bookfuncs.js |
22 | 159 |
|
23 | 160 | // log the fact that the user has answered the poll to local storage |
24 | | - localStorage.setItem(div_id, "true"); |
25 | | - |
26 | | - // hide the poll inputs |
27 | | - $("#"+div_id+"_poll_input").hide(); |
| 161 | + localStorage.setItem(this.divid, "true"); |
28 | 162 |
|
29 | 163 | // show the results of the poll |
30 | 164 | var data = {}; |
31 | | - data.div_id = div_id; |
| 165 | + data.div_id = this.divid; |
32 | 166 | data.course = eBookConfig.course; |
33 | | - jQuery.get(eBookConfig.ajaxURL+'getpollresults', data, showPollResults); |
34 | | -} |
35 | | - |
36 | | -function showPollResults(data) { |
37 | | - // create the display of the poll results |
| 167 | + jQuery.get(eBookConfig.ajaxURL+"getpollresults", data, this.showPollResults); |
| 168 | +}; |
38 | 169 |
|
39 | | - results = eval(data); |
| 170 | +Poll.prototype.showPollResults = function(data) { |
| 171 | + //displays the results returned by the server |
| 172 | + var results = eval(data); |
40 | 173 | var total = results[0]; |
41 | 174 | var opt_list = results[1]; |
42 | 175 | var count_list = results[2]; |
43 | 176 | var div_id = results[3]; |
44 | 177 |
|
45 | | - var result_div = $("#"+div_id+"_results"); |
46 | | - result_div.html("<b>Results:</b><br><br>"); |
47 | | - result_div.show(); |
| 178 | + this.resultsDiv.html("<b>Results:</b><br><br>"); |
48 | 179 |
|
49 | 180 | var list = $(document.createElement("ol")); |
50 | 181 | for(var i=0; i<opt_list.length; i++) { |
51 | 182 | var count = count_list[i]; |
52 | 183 | var percent = (count / total) * 100; |
53 | 184 | var text = Math.round(10*percent)/10 + "%"; // round percent to 10ths |
54 | 185 |
|
55 | | - var html = "<li value='"+opt_list[i]+"'><div class='progress'><div class='progress-bar progress-bar-success' style='width:"+percent+"%;'><span class='poll-text'>"+text+"</span></div></div></li>"; |
| 186 | + var html = "<li value='"+opt_list[i]+"'><div class='progress'><div class='progress-bar progress-bar-success' style=width:'"+percent+"'%;><span class='poll-text'>"+text+"</span></div></div></li>"; |
56 | 187 | var el = $(html); |
57 | 188 | list.append(el); |
58 | 189 | } |
59 | | - result_div.append(list); |
60 | | -} |
| 190 | + this.resultsDiv.append(list); |
| 191 | +}; |
| 192 | + |
| 193 | +Poll.prototype.disableOptions = function() { |
| 194 | + |
| 195 | +}; |
| 196 | + |
| 197 | +Poll.prototype.checkPollStorage = function() { |
| 198 | + //checks the localstorage to see if the poll has been completed already |
| 199 | + var _this = this; |
| 200 | + var len = localStorage.length; |
| 201 | + if (len > 0) { //If the poll has already been completed, show the results |
| 202 | + var data = {}; |
| 203 | + data.div_id = this.divid; |
| 204 | + data.course = eBookConfig.course; |
| 205 | + jQuery.get(eBookConfig.ajaxURL+"getpollresults", data, this.showPollResults); |
| 206 | + } |
| 207 | +}; |
| 208 | + |
| 209 | + |
| 210 | + |
61 | 211 |
|
| 212 | +$(document).ready(function() { |
| 213 | + $("[data-component=poll]").each(function(index) { |
| 214 | + pollList[this.id] = new Poll({"orig":this}); |
| 215 | + }); |
| 216 | +}); |
0 commit comments