├── readme.md ├── assets ├── img │ ├── loading.gif │ └── generated.png ├── js │ ├── questionnaire.js │ └── app.js └── css │ └── layout.css └── index.html /readme.md: -------------------------------------------------------------------------------- 1 | # Poll.io 2 | 3 | 4 | A smart and visual tool for creating polls -------------------------------------------------------------------------------- /assets/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polls/polls.github.com/gh-pages/assets/img/loading.gif -------------------------------------------------------------------------------- /assets/img/generated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/polls/polls.github.com/gh-pages/assets/img/generated.png -------------------------------------------------------------------------------- /assets/js/questionnaire.js: -------------------------------------------------------------------------------- 1 | var questionnaire = { 2 | 1: { 3 | q: "Question 1 ?", 4 | a: "oui:2|non:3" 5 | }, 6 | 2: { 7 | q: "Question 2 é à ?", 8 | a: "oui:3|non:4" 9 | }, 10 | 3: { 11 | q: "Question 3 ?", 12 | a: "oui:4|non:5" 13 | }, 14 | 4: { 15 | q: "Question 4 ?", 16 | a: "oui:5|non:6" 17 | }, 18 | 5: { 19 | q: "Question 5 ?", 20 | a: "oui:7|non:7" 21 | } 22 | }; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Enquête Communication interne CMG-EC 2013 4 | 5 | 6 | 7 | 8 | 9 | 10 |

11 |

12 | 13 |

Enquête Communication interne CMG-EC 2013

14 | 15 |

Voici les questions de l'enquête 2013. Merci de prendre le temps de répondre à celles-ci afin que nous puissions continuer à améliorer le travail de l'équipe...

16 | 17 |

18 |

Chargement ...

19 |

20 |

21 | 22 |

23 |

24 |

25 | 26 |

27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /assets/css/layout.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | :focus { 51 | outline :none; 52 | } 53 | 54 | 55 | /* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 56 | .clearfix:before, .clearfix:after { content: ""; display: table; } 57 | .clearfix:after { clear: both; } 58 | .clearfix { zoom: 1; } 59 | 60 | 61 | body { 62 | color: #666; 63 | font-family: Ubuntu,sans-serif; 64 | font-weight: 300; 65 | font-size: 14px; 66 | line-height: 24px; 67 | background: #fff url("../img/generated.png") 0 0 repeat; 68 | /*overflow-y: hidden; 69 | 70 | height: 3000px;*/ 71 | } 72 | 73 | body:before { /* top shadow */ 74 | content: ""; 75 | position: fixed; 76 | top: -10px; 77 | left: -10px; 78 | width: 110%; 79 | height: 10px; 80 | box-shadow: 0px 0px 10px rgba(0,0,0,.3); 81 | z-index: 100; 82 | } 83 | 84 | #wrapper { 85 | width: 500px; 86 | margin: 0 auto 100px; 87 | padding-top: 130px; 88 | } 89 | 90 | h1 { 91 | font-size: 20px; 92 | } 93 | 94 | p { 95 | line-height: 28px; 96 | margin: 100px 0; 97 | text-indent: 15px; 98 | } 99 | 100 | section { 101 | /*width: 300px;*/ 102 | background: #fff; 103 | text-align: center; 104 | padding: 0; 105 | border: solid 1px #ccc; 106 | border-radius: 3px; 107 | -moz-box-shadow: 0 2px 4px -2px #aaa; 108 | box-shadow: 0 2px 4px -2px #aaa; 109 | margin-bottom: 100px; 110 | } 111 | 112 | section.begin { 113 | display: block; 114 | } 115 | 116 | section p { 117 | margin: 0; 118 | text-indent: 0; 119 | } 120 | 121 | #message { 122 | margin: 15px; 123 | } 124 | 125 | section p:nth-child(2){ 126 | border-top: solid 1px #eee; 127 | } 128 | 129 | section button { 130 | margin: 0; 131 | padding: 0; 132 | height: 40px; 133 | border: 0; 134 | background: #fff; 135 | font-family: Ubuntu,sans-serif; 136 | font-weight: 300; 137 | width: 100%; 138 | border-radius: 2px; 139 | } 140 | 141 | .oui, .non { 142 | width: 50%; 143 | } 144 | 145 | .buttons button:first-child { 146 | border-right: solid 1px #eee; 147 | border-radius: 0 0 0 2px; 148 | } 149 | 150 | .buttons button:last-child { 151 | border-radius: 0 0 2px 0; 152 | } 153 | 154 | .oui { 155 | color: green; 156 | } 157 | 158 | .oui:hover, .green-h { background: #349534 } 159 | 160 | .non, .red { 161 | color: red 162 | } 163 | 164 | .non:hover, .red-h { background: #D12F19 } 165 | 166 | .neutral { 167 | color: #656565; 168 | } 169 | 170 | .neutral:hover { background: #656565; } 171 | 172 | button:hover, .green-h, .red-h { 173 | color: #fff; 174 | cursor: pointer; 175 | } 176 | 177 | .green-h, .red-h { 178 | border-color: transparent; 179 | } 180 | 181 | button { 182 | transition: all .3s; 183 | -moz-transition: all .3s; 184 | -webkit-transition: all .3s; 185 | -o-transition: all .3s; 186 | } 187 | 188 | 189 | canvas { 190 | display: none; 191 | } 192 | 193 | #progress { 194 | width: 100px; 195 | height: 10px; 196 | background: #eee; 197 | float: right; 198 | } 199 | 200 | #indicator { 201 | height: 100%; 202 | width: 0; 203 | background: #ccc; 204 | } 205 | 206 | 207 | 208 | .r5 { 209 | width: 20%; 210 | } 211 | 212 | input { 213 | display: none; 214 | } 215 | 216 | label { 217 | display: inline-block; 218 | width: 100%; 219 | border-right: solid 1px #eee; 220 | -moz-box-sizing: border-box; 221 | box-sizing: border-box; 222 | height: 40px; 223 | line-height: 40px; 224 | text-align: center; 225 | } 226 | 227 | label:last-child { 228 | border-right: 0; 229 | } 230 | 231 | label:hover { 232 | background: #eee; 233 | cursor: pointer; 234 | } 235 | 236 | [type=radio]:checked + label { 237 | background: green; 238 | color: #fff; 239 | } -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | // ============ 2 | // VARIABLES 3 | // ============ 4 | 5 | var w = window, 6 | d = document, 7 | tpl, 8 | prev, 9 | next, 10 | nombre, 11 | question, 12 | questionnaire, 13 | reponses, 14 | suites, 15 | goTo, 16 | max, 17 | hash, 18 | Poll = {}, 19 | entityMap = { 20 | "[e1]": "é", 21 | "[e2]": "è", 22 | "[i1]": "ï" 23 | }, 24 | templates = { 25 | button : "", 26 | range : "{1}" 27 | }; 28 | 29 | 30 | // ============ 31 | // HELPERS 32 | // ============ 33 | 34 | function $(expr) { return d.querySelector(expr); } 35 | 36 | function k(c, f, p){ 37 | if (w.c === c) f(p); 38 | } 39 | 40 | function lgth(object){ 41 | return Object.keys(object).length; 42 | } 43 | 44 | String.prototype.upperCase = function(){ 45 | return this.charAt(0).toUpperCase() + this.substring(1); 46 | }; 47 | 48 | function convertChar(string){ 49 | return String(string).replace(/\[(e1|e2|i1)\]/g, function(s){ 50 | return entityMap[s]; 51 | }); 52 | } 53 | 54 | String.prototype.format = function(){ 55 | var string = this; 56 | 57 | for (var i = 0, j = arguments.length; i < j; i++) { 58 | string = string.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]); 59 | } 60 | 61 | return string; 62 | }; 63 | 64 | 65 | // ================= 66 | // CSS MANIPULATIONS 67 | // ================= 68 | 69 | Element.prototype.hasClass = function (className) { 70 | return new RegExp(' ' + className + ' ').test(' ' + this.className + ' '); 71 | }; 72 | 73 | Element.prototype.addClass = function (className) { 74 | if (!this.hasClass(className)) { 75 | this.className += ' ' + className; 76 | } 77 | return this; 78 | }; 79 | 80 | Element.prototype.removeClass = function (className) { 81 | var newClass = ' ' + this.className.replace(/[\t\r\n]/g, ' ') + ' ' 82 | if (this.hasClass(className)) { 83 | while (newClass.indexOf( ' ' + className + ' ') >= 0) { 84 | newClass = newClass.replace(' ' + className + ' ', ' '); 85 | } 86 | this.className = newClass.replace(/^\s+|\s+$/g, ' '); 87 | } 88 | return this; 89 | }; 90 | 91 | 92 | 93 | // ============ 94 | // POLL OBJECT 95 | // ============ 96 | 97 | function isFirstRun(){ 98 | localStorage.getItem("Poll") ? load() : save(); 99 | } 100 | 101 | function load(){ 102 | Poll = JSON.parse(localStorage.getItem("Poll")); 103 | } 104 | 105 | function save(){ 106 | localStorage.setItem("Poll", JSON.stringify(Poll)); 107 | load(); 108 | } 109 | 110 | function set(num, val){ 111 | console.log(num, val); 112 | Poll[num] = val; 113 | save(); 114 | } 115 | 116 | function get(num){ 117 | return Poll[num]; 118 | } 119 | 120 | 121 | // ============ 122 | // INTERFACE 123 | // ============ 124 | 125 | function run(){ 126 | hash = w.location.hash.replace("#",""), 127 | hash !== "" ? getQuestionnaire(hash) : info("hash"); 128 | } 129 | 130 | function getQuestionnaire(id){ 131 | var xhr = null; 132 | 133 | if (window.XMLHttpRequest){ // Firefox 134 | xhr = new XMLHttpRequest(); 135 | } else if (window.ActiveXObject){ // Internet Explorer 136 | xhr = new ActiveXObject("Microsoft.XMLHTTP"); 137 | } else { 138 | info("xhr"); 139 | return; 140 | } 141 | 142 | xhr.open("GET", "https://api.github.com/gists/" + id, false); 143 | xhr.send(null); 144 | 145 | if (xhr.readyState == 4){ 146 | if(xhr.status == 200){ 147 | var data = JSON.parse(JSON.parse(xhr.responseText).files.questionnaire.content); 148 | questionnaire = data.questions, 149 | nombre = lgth(questionnaire); 150 | w.i = 0; 151 | setI(0); 152 | } else { 153 | info("nf"); 154 | } 155 | } 156 | }; 157 | 158 | 159 | function setI(i){ 160 | prev = w.i; 161 | 162 | w.i = (w.i + i <= 0) ? 0 : w.i + i; // beginning of object 163 | w.i = (w.i > nombre - 1) ? nombre - 1 : w.i; // end of object 164 | 165 | next = w.i; 166 | 167 | if(w.i === 0){ 168 | display(0); 169 | } else if (next !== prev) { 170 | display(w.i); 171 | } 172 | } 173 | 174 | function display(i){ 175 | if(questionnaire[i]){ 176 | question = questionnaire[i]; 177 | $("#message").innerHTML = convertChar(question.q); 178 | $(".buttons").innerHTML = parseQ(question.a, i); 179 | w.i = i; 180 | setProgress(i+1); 181 | } 182 | } 183 | 184 | function parseQ(a, n){ 185 | tpl = ""; 186 | 187 | // Range 188 | if(a.match(/range/g)){ 189 | max = a.match(/\d/g) || 5; 190 | goTo = n + 2; 191 | 192 | for (var i = 0; i < max; i++){ 193 | tpl += templates.range.format(n, i, max, goTo); 194 | } 195 | 196 | // Basic question 197 | } else { 198 | reponses = a.match(/[a-z]+/g); 199 | suites = a.match(/\d/g) || n + 2; 200 | 201 | for (var i = 0, length = reponses.length; i < length; i++) { 202 | goTo = suites[i] || suites; 203 | tpl += templates.button.format(reponses[i], goTo, n, reponses[i].upperCase()); 204 | } 205 | } 206 | return tpl; 207 | } 208 | 209 | function proceed(q, n){ 210 | set(n+1, q.innerText); 211 | if(n+1 < nombre){ 212 | display(q.getAttribute("data-go")-1); 213 | } else { 214 | $("#indicator").style.background = "green"; 215 | $(".buttons").style.display = "none"; 216 | info("end"); 217 | } 218 | } 219 | 220 | 221 | 222 | // ================ 223 | // FEEDBACK TO USER 224 | // ================ 225 | 226 | function setProgress(n){ 227 | $("#indicator").style.width = (n*100) / nombre + "px"; 228 | } 229 | 230 | function setMessage(cls, msg){ 231 | $("#holder").addClass(cls); 232 | $("#message").innerHTML = msg; 233 | } 234 | 235 | var triggerInfo = { 236 | hash: function() { setMessage("red-h", "Oups !! Something went wrong ☹"); }, 237 | nf: function() { setMessage("red-h", "Questionnaire was not found. Please check the URL."); }, 238 | xhr: function() { setMessage("red-h", "Your browser is not compatible. Please try with an other one."); }, 239 | end: function() { setMessage("green-h", "Thank you for taking the time to complete this questionnaire."); } 240 | } 241 | 242 | function info(msg){ 243 | triggerInfo[msg](); 244 | } 245 | 246 | 247 | 248 | // =================== 249 | // RUN YOU CLEVER BOY 250 | // =================== 251 | 252 | isFirstRun(); 253 | 254 | run(); 255 | 256 | d.onkeydown = function(e){ 257 | w.c = e.keyCode; 258 | k(37, setI, -1); // 37 = left 259 | k(39, setI, 1); // 39 = right 260 | }; 261 | 262 | w.onhashchange = function() { 263 | run(); 264 | }; --------------------------------------------------------------------------------