Last active
May 28, 2017 11:52
-
-
Save nightkingdoms/fbecb52846a0e63f14f13b59e1c6d5fc to your computer and use it in GitHub Desktop.
Single Page, Configurable Survey
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head><title id="page-title"></title> | |
| <!-- tell search engine robots not to follow --> | |
| <meta name="robots" content="noindex, nofollow"> | |
| <meta name="googlebot" content="noindex, nofollow"> | |
| <meta charset="utf-8"> | |
| <!-- prevent caching --> | |
| <meta http-equiv="Pragma" content="no-cache"> | |
| <!-- try to force out of compatibility view --> | |
| <meta http-equiv="X-UA-Compatible" content="IE=11" /> | |
| <!-- mobile-first view --> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- jQuery --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> | |
| <!-- Moment --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> | |
| <!-- animate.css --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> | |
| <!-- bootstrap --> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <!-- font awesome --> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> | |
| <!-- Noty --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-noty/2.3.6/packaged/jquery.noty.packaged.min.js"></script> | |
| <style> | |
| .loaders { | |
| width: 100%; | |
| box-sizing: border-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex: 0 1 auto; | |
| -ms-flex: 0 1 auto; | |
| flex: 0 1 auto; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| } | |
| .loader { | |
| box-sizing: border-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex: 0 1 auto; | |
| -ms-flex: 0 1 auto; | |
| flex: 0 1 auto; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -webkit-flex-grow: 1; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| -webkit-flex-shrink: 0; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| -webkit-flex-basis: 25%; | |
| -ms-flex-preferred-size: 25%; | |
| flex-basis: 25%; | |
| max-width: 25%; | |
| height: 200px; | |
| -webkit-align-items: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| } | |
| .table-force-spacing { | |
| padding: 2px !important; | |
| border-bottom: 2px solid #2b3e50; | |
| } | |
| .text-center-vertical { | |
| vertical-align: middle; | |
| line-height: 2em; | |
| } | |
| .editable { | |
| transition: background: 0.5s linear; | |
| } | |
| .editable:hover { | |
| background-color: rgba(255,255,0,0.3); | |
| } | |
| @import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic&subset=latin,cyrillic); | |
| .wrapper { | |
| width: 500px; | |
| margin: 0 auto; } | |
| .wrapper h1 { | |
| text-align: center; | |
| color: #34495e; } | |
| .preloader { | |
| position: relative; | |
| height: 8px; | |
| width: 100%; } | |
| .preloader .line { | |
| position: absolute; | |
| height: 8px; | |
| width: 100%; } | |
| .preloader .line.blue:before { | |
| position: absolute; | |
| content: ""; | |
| left: 0; | |
| height: 8px; | |
| background-color: #2980b9; | |
| -webkit-animation: line-left 2500ms linear 0ms infinite; | |
| animation: line-left 2500ms linear 0ms infinite; } | |
| .preloader .line.blue:after { | |
| position: absolute; | |
| content: ""; | |
| right: 0; | |
| height: 8px; | |
| background-color: #2980b9; | |
| -webkit-animation: line-right 2500ms linear 0ms infinite; | |
| animation: line-right 2500ms linear 0ms infinite; } | |
| .preloader .line.green:before { | |
| position: absolute; | |
| content: ""; | |
| left: 0; | |
| height: 8px; | |
| background-color: #27ae60; | |
| -webkit-animation: line-left 2500ms linear 625ms infinite; | |
| animation: line-left 2500ms linear 625ms infinite; } | |
| .preloader .line.green:after { | |
| position: absolute; | |
| content: ""; | |
| right: 0; | |
| height: 8px; | |
| background-color: #27ae60; | |
| -webkit-animation: line-right 2500ms linear 625ms infinite; | |
| animation: line-right 2500ms linear 625ms infinite; } | |
| .preloader .line.orange:before { | |
| position: absolute; | |
| content: ""; | |
| left: 0; | |
| height: 8px; | |
| background-color: #e67e22; | |
| -webkit-animation: line-left 2500ms linear 1250ms infinite; | |
| animation: line-left 2500ms linear 1250ms infinite; } | |
| .preloader .line.orange:after { | |
| position: absolute; | |
| content: ""; | |
| right: 0; | |
| height: 8px; | |
| background-color: #e67e22; | |
| -webkit-animation: line-right 2500ms linear 1250ms infinite; | |
| animation: line-right 2500ms linear 1250ms infinite; } | |
| .preloader .line.red:before { | |
| position: absolute; | |
| content: ""; | |
| left: 0; | |
| height: 8px; | |
| background-color: #e74c3c; | |
| -webkit-animation: line-left 2500ms linear 1875ms infinite; | |
| animation: line-left 2500ms linear 1875ms infinite; } | |
| .preloader .line.red:after { | |
| position: absolute; | |
| content: ""; | |
| right: 0; | |
| height: 8px; | |
| background-color: #e74c3c; | |
| -webkit-animation: line-right 2500ms linear 1875ms infinite; | |
| animation: line-right 2500ms linear 1875ms infinite; } | |
| @-webkit-keyframes line-right { | |
| 0% { | |
| width: 0; | |
| margin-right: 50%; } | |
| 25% { | |
| width: 35%; | |
| margin-right: 15%; } | |
| 50% { | |
| width: 15%; | |
| margin-right: 0; } | |
| 75% { | |
| width: 0; | |
| margin-right: 0; } } | |
| @-moz-keyframes line-right { | |
| 0% { | |
| width: 0; | |
| margin-right: 50%; } | |
| 25% { | |
| width: 35%; | |
| margin-right: 15%; } | |
| 50% { | |
| width: 15%; | |
| margin-right: 0; } | |
| 75% { | |
| width: 0; | |
| margin-right: 0; } } | |
| @-ms-keyframes line-right { | |
| 0% { | |
| width: 0; | |
| margin-right: 50%; } | |
| 25% { | |
| width: 35%; | |
| margin-right: 15%; } | |
| 50% { | |
| width: 15%; | |
| margin-right: 0; } | |
| 75% { | |
| width: 0; | |
| margin-right: 0; } } | |
| @keyframes line-right { | |
| 0% { | |
| width: 0; | |
| margin-right: 50%; } | |
| 25% { | |
| width: 35%; | |
| margin-right: 15%; } | |
| 50% { | |
| width: 15%; | |
| margin-right: 0; } | |
| 75% { | |
| width: 0; | |
| margin-right: 0; } } | |
| @-webkit-keyframes line-left { | |
| 0% { | |
| width: 0; | |
| margin-left: 50%; } | |
| 25% { | |
| width: 35%; | |
| margin-left: 15%; } | |
| 50% { | |
| width: 15%; | |
| margin-left: 0; } | |
| 75% { | |
| width: 0; | |
| margin-left: 0; } } | |
| @-moz-keyframes line-left { | |
| 0% { | |
| width: 0; | |
| margin-left: 50%; } | |
| 25% { | |
| width: 35%; | |
| margin-left: 15%; } | |
| 50% { | |
| width: 15%; | |
| margin-left: 0; } | |
| 75% { | |
| width: 0; | |
| margin-left: 0; } } | |
| @-ms-keyframes line-left { | |
| 0% { | |
| width: 0; | |
| margin-left: 50%; } | |
| 25% { | |
| width: 35%; | |
| margin-left: 15%; } | |
| 50% { | |
| width: 15%; | |
| margin-left: 0; } | |
| 75% { | |
| width: 0; | |
| margin-left: 0; } } | |
| @keyframes line-left { | |
| 0% { | |
| width: 0; | |
| margin-left: 50%; } | |
| 25% { | |
| width: 35%; | |
| margin-left: 15%; } | |
| 50% { | |
| width: 15%; | |
| margin-left: 0; } | |
| 75% { | |
| width: 0; | |
| margin-left: 0; } } | |
| div.terms { | |
| width: 100% !important; | |
| height: 100% !important; | |
| border: 1px solid #ccc; | |
| background: #f2f2f2; | |
| padding-left: 10px !important; | |
| padding-right: 10px !important; | |
| padding-top: 15px; | |
| padding-bottom: 25px; | |
| overflow: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="loading" class="row" style="display: none; margin-bottom: 15px;"> | |
| <div class="col-xs-12 col-md-12 col-lg-12 text-center text-muted"> | |
| <div class="preloader"> | |
| <div class="line blue"></div> | |
| <div class="line green"></div> | |
| <div class="line orange"></div> | |
| <div class="line red"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="all-content" class="container-fluid" style="margin-top: 10px;"> | |
| <!-- header --> | |
| <div class="row"> | |
| <div class="col-xs-12 col-md-12 col-lg-12"> | |
| <h1 id="display-title" class="text-primary text-center" style="font-weight: bold;">Survey</h1> | |
| </div> | |
| </div> | |
| <!-- /header --> | |
| <!-- processing --> | |
| <div id="processing" class="row" style="display: none;"> | |
| <div class="col-xs-12 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> | |
| <div class="well well-sm text-center text-muted"> | |
| <h4 style="font-weight: bold;"><i class="fa fa-gear fa-spin fa-2x"></i> <em id="processing-message">processing...</em></h4> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- /processing --> | |
| <!-- capture name --> | |
| <div id="capture-name" class="row" style="display: none;"> | |
| <div class="col-xs-12 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> | |
| <div id="capture-name-error" class="alert alert-warning" style="display: none;"> | |
| <h4 class="text-center" style="font-weight: bold;">Error</h4> | |
| <p id="capture-name-error-message" class="text-center" style="font-weight: bold;"> | |
| </p><br> | |
| </div> | |
| <div class="well well-sm text-center text-muted"> | |
| <input id="capture-name-input" type="text" class="input input-lg form-control col-xs-10" style="margin-bottom: 25px;" placeholder="Please enter your name..."><br> | |
| <button class="btn btn-lg btn-info" onClick="Surveys.process.next_capture_name();return false;"><i class="fa fa-angle-double-right"></i> Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- /capture name --> | |
| <!-- notice --> | |
| <div id="notice" class="row" style="display: none;"> | |
| <div class="col-xs-12 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> | |
| <div class="alert alert-info text-muted"> | |
| <h4 class="text-center" style="font-weight: bold;">Important Information</h4> | |
| <div id="notice-message" class="terms"> | |
| Sample notice | |
| </div><br> | |
| <br> | |
| <div class="row"> | |
| <div class="col-xs-12 col-md-10 col-lg-offset-1 col-lg-10 col-lg-offset-1"> | |
| <button class="btn btn-lg btn-info btn-block" onClick="Surveys.process.next_notice();return false;"><i class="fa fa-check-circle"></i> OK</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- /notice --> | |
| <!-- capture consent --> | |
| <div id="capture-consent" class="row" style="display: none;"> | |
| <div class="col-xs-12 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> | |
| <div class="alert alert-info text-muted"> | |
| <h4 class="text-center" style="font-weight: bold;"><em>Please agree to the following terms to continue.</em></h4> | |
| <div id="capture-consent-message" class="terms"> | |
| Sample terms | |
| </div><br> | |
| <br> | |
| <div class="row"> | |
| <div class="col-xs-12 col-md-6 col-lg-6"> | |
| <button class="btn btn-lg btn-default btn-block" onClick="Surveys.process.next_capture_consent(false);return false;"><i class="fa fa-times-circle"></i> Disagree</button><br> | |
| </div> | |
| <div class="col-xs-12 col-md-6 col-lg-6"> | |
| <button class="btn btn-lg btn-info btn-block" onClick="Surveys.process.next_capture_consent(true);return false;"><i class="fa fa-check-circle"></i> Agree</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- /capture consent --> | |
| <!-- question --> | |
| <div id="question" class="row" style="display: none;"> | |
| <div class="col-xs-12 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1"> | |
| <h3 id="question-title" class="text-primary" style="font-weight: bold;"></h3> | |
| <div id="question-answers"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- /question --> | |
| <!-- disagree message --> | |
| <div id="disagree" class="row" style="display: none;"> | |
| <div class="col-xs-12 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> | |
| <div class="alert alert-warning text-center"> | |
| <h1 style="font-weight: bold;"><i class="fa fa-times-rectangle fa-5x"></i></h1><br> | |
| <h3>The Terms must be agreed to in order to continue.</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- /disagree message --> | |
| <!-- unique message --> | |
| <div id="unique" class="row" style="display: none;"> | |
| <div class="col-xs-12 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> | |
| <div class="alert alert-success text-center"> | |
| <h1 style="font-weight: bold;"><i class="fa fa-check-circle-o fa-5x"></i></h1><br> | |
| <h3 id="unique-message"></h3> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- /unique message --> | |
| <!-- complete message --> | |
| <div id="complete" class="row" style="display: none;"> | |
| <div class="col-xs-12 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> | |
| <div class="alert alert-success text-center"> | |
| <h1 style="font-weight: bold;"><i class="fa fa-check-circle fa-5x"></i></h1> | |
| <h1 style="font-weight: bold;">Thank you!</h1><br> | |
| <h4 id="complete-message"></h4> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- /complete message --> | |
| </div> | |
| <script> | |
| $(document).ready(function() { | |
| Surveys.process.preprocess(); | |
| }); | |
| var Surveys = { | |
| config: { | |
| title: "Sample Survey", | |
| survey_id: "0", // enter a unique id for this survey (optional), used for json posts to servers; | |
| processing_message: "crunching numbers and stuff...", // message to show while submitting data and waiting for response; | |
| send_format: "post", // options: post, discord - how the data will be transmitted; | |
| when_done: { | |
| url: "http://localhost/my-awesome-script.php", // URL of where the data will be sent to; | |
| format: "pretty", // options: pretty (formatted), json (default); | |
| response: "message", // options: message (displayed on-screen), redirect (to URL); | |
| response_url: "", // URL for the when_done.response=redirect; | |
| message: "Your response is greatly appreciated!", // message shown to responder when response=message; | |
| }, | |
| require_name: true, // requires responder to give their name to start; | |
| require_consent: true, // requires responder to agree to terms before continuing; | |
| require_notice: true, // shows a notice to the responder; | |
| require_unique: false, // requires each response to be unique; | |
| consent_terms: "This is just sample content.", // terms responder must agree to before continuing; | |
| notice_content: "This is a sample notice.", // introduction notice responder will see at the start; | |
| unique_content: "You have already given your response. Thank you!", // notice responder will see if they've already taken survey when unique responses are required; | |
| }, | |
| data: { | |
| curr_ques: 0, | |
| answers: [], | |
| responder_name: "(none)", | |
| agreed_terms: false, | |
| answers_pretty: "", | |
| response_data: null, | |
| }, | |
| questions: [ | |
| { | |
| "title": "What color is the sky?", | |
| "answers": [ | |
| { | |
| category: 'button', | |
| value_display: 'Black', | |
| value_save: 'Black' | |
| }, | |
| { | |
| category: 'button', | |
| value_display: 'Purple', | |
| value_save: 'Purple' | |
| }, | |
| { | |
| category: 'button', | |
| value_display: 'Blue', | |
| value_save: 'Blue' | |
| }, | |
| { | |
| category: 'button', | |
| value_display: 'Red', | |
| value_save: 'Red' | |
| }, | |
| ] | |
| }, | |
| { | |
| "title": "What's your favorite pet?", | |
| "answers": [ | |
| { | |
| category: 'button', | |
| value_display: 'Cats', | |
| value_save: 'Cats' | |
| }, | |
| { | |
| category: 'button', | |
| value_display: 'Dogs', | |
| value_save: 'Dogs' | |
| }, | |
| { | |
| category: 'button', | |
| value_display: 'Fish', | |
| value_save: 'Fish' | |
| }, | |
| { | |
| category: 'button', | |
| value_display: 'Gerbils', | |
| value_save: 'Gerbils' | |
| }, | |
| { | |
| category: 'long', | |
| value_display: 'Other', | |
| value_save: 'Enter a custom answer here...' | |
| }, | |
| ] | |
| } | |
| ], | |
| process: { | |
| preprocess: function() { | |
| $('#loading').fadeIn(); | |
| $('#page-title').html(Surveys.config.title); | |
| $('#display-title').html(Surveys.config.title); | |
| $('#processing-message').html(Surveys.config.processing_message); | |
| $('#capture-consent-message').html(Surveys.config.consent_terms); | |
| $('#notice-message').html(Surveys.config.notice_content); | |
| $('#unique-message').html(Surveys.config.unique_content); | |
| if (Surveys.config.require_unique === true) { | |
| if (Common.checkLocalStorage() === true) { | |
| var unique_check = Common.getLocalStorage('survey_id_' + Surveys.config.survey_id); | |
| if (unique_check === false || unique_check === null) { | |
| // continue - not responded; | |
| } else { | |
| $('#loading').fadeOut(); | |
| $('#unique').fadeIn(); | |
| return false; | |
| } | |
| } else { | |
| // continue - can't check unique; | |
| } | |
| } | |
| if (Surveys.config.require_name === true) { | |
| Surveys.process.load_capture_name(); | |
| } else { | |
| if (Surveys.config.require_notice === true) { | |
| Surveys.process.load_notice(); | |
| } else { | |
| if (Surveys.config.require_consent === true) { | |
| Surveys.process.load_capture_consent(); | |
| } else { | |
| Surveys.process.load_first(); | |
| } | |
| } | |
| } | |
| $('#loading').fadeOut(); | |
| }, | |
| load_capture_name: function() { | |
| $('#capture-name').fadeIn(); | |
| $('#capture-name-input').focus(); | |
| }, | |
| next_capture_name: function() { | |
| $('#capture-name').fadeOut(); | |
| var tmp_val = $('#capture-name-input').val(); | |
| if (tmp_val === null || tmp_val == '') { | |
| $('#capture-name-error-message').html('You must enter a name.'); | |
| $('#capture-name-error').show(); | |
| $('#capture-name').fadeIn(); | |
| return false; | |
| } | |
| if (tmp_val.length <= 2) { | |
| $('#capture-name-error-message').html('You must enter a valid name.'); | |
| $('#capture-name-error').show(); | |
| $('#capture-name').fadeIn(); | |
| return false; | |
| } | |
| Surveys.data.responder_name = tmp_val; | |
| if (Surveys.config.require_notice === true) { | |
| Surveys.process.load_notice(); | |
| } else { | |
| if (Surveys.config.require_consent === true) { | |
| Surveys.process.load_capture_consent(); | |
| } else { | |
| Surveys.process.load_first(); | |
| } | |
| } | |
| }, | |
| load_notice: function() { | |
| $('#notice').fadeIn(); | |
| }, | |
| next_notice: function() { | |
| $('#notice').fadeOut(); | |
| if (Surveys.config.require_consent === true) { | |
| Surveys.process.load_capture_consent(); | |
| } else { | |
| Surveys.process.load_first(); | |
| } | |
| }, | |
| load_capture_consent: function() { | |
| $('#capture-consent').fadeIn(); | |
| }, | |
| next_capture_consent: function(tmp_val) { | |
| $('#capture-consent').fadeOut(); | |
| Surveys.data.agreed_terms = tmp_val; | |
| if (tmp_val === true) { | |
| Surveys.process.load_first(); | |
| } else { | |
| $('#disagree').fadeIn(); | |
| } | |
| }, | |
| processing_start: function() { | |
| $('#loading').fadeIn(); | |
| $('#processing').fadeIn(); | |
| }, | |
| processing_stop: function() { | |
| $('#processing').fadeOut(); | |
| $('#loading').fadeOut(); | |
| }, | |
| load_question: function() { | |
| $('#question-title').html('#' + (Surveys.data.curr_ques + 1) + ' ' + Surveys.questions[Surveys.data.curr_ques].title); | |
| $.each(Surveys.questions[Surveys.data.curr_ques].answers, function(index, item) { | |
| var tmp_value = item.value_save.replace(/(['"])/g, "\\$1"); | |
| switch(item.category) { | |
| case "long": // textarea; | |
| var tmp_row = '<div class="form-inline"><div class="form-group" style="width: 80% !important;"><div class="input-group" style="width: 80% !important;">'; | |
| tmp_row += '<div class="input-group-addon"><b>' + item.value_display + ':</b></div>'; | |
| tmp_row += '<textarea id="answer-' + Surveys.data.curr_ques + '-' + index + '" class="input input-lg form-control" rows="10" placeholder="' + item.value_save + '"></textarea></div>'; | |
| tmp_row += '<br><button class="btn btn-info btn-lg" style="margin-left: 15px;" onClick="Surveys.process.load_next(' + Surveys.data.curr_ques + ', $(\'#answer-' + Surveys.data.curr_ques + '-' + index + '\').val()); return false;"><i class="fa fa-floppy-o"></i> Save Answer</button>'; | |
| tmp_row += '</div></div>'; | |
| break; | |
| case "short": // text box; | |
| var tmp_row = '<div class="form-inline"><div class="form-group" style="width: 80% !important;"><div class="input-group" style="width: 80% !important;">'; | |
| tmp_row += '<div class="input-group-addon"><b>' + item.value_display + ':</b></div>'; | |
| tmp_row += '<input id="answer-' + Surveys.data.curr_ques + '-' + index + '" type="text" class="input input-lg form-control" placeholder="' + item.value_save + '"></div>'; | |
| tmp_row += '<button class="btn btn-info btn-lg" style="margin-left: 15px;" onClick="Surveys.process.load_next(' + Surveys.data.curr_ques + ', $(\'#answer-' + Surveys.data.curr_ques + '-' + index + '\').val()); return false;"><i class="fa fa-floppy-o"></i> Save Answer</button>'; | |
| tmp_row += '</div></div>'; | |
| break; | |
| default: // button; | |
| var tmp_row = '<button id="answer-' + Surveys.data.curr_ques + '-' + index + '" class="btn btn-lg btn-info btn-block answer-btns" onClick="Surveys.process.load_next(' + Surveys.data.curr_ques + ', \'' + tmp_value + '\'); return false;">' + item.value_display + '</button>'; | |
| break; | |
| } | |
| $('#question-answers').append(tmp_row); | |
| }); | |
| $('#question').fadeIn(); | |
| }, | |
| load_first: function() { | |
| Surveys.data.curr_ques = 0; | |
| Surveys.process.load_question(); | |
| }, | |
| load_next: function(curr_ques, response) { | |
| Surveys.data.curr_ques++; | |
| $('#question').fadeOut(); | |
| $('#question-answers').html(''); | |
| Surveys.data.answers.push({"title": Surveys.questions[curr_ques].title, "answer": response}); | |
| if (Surveys.data.curr_ques < Surveys.questions.length) { | |
| Surveys.process.load_question(); | |
| } else { | |
| Surveys.process.all_stop(); | |
| } | |
| }, | |
| all_stop: function() { | |
| if (Surveys.config.when_done.format == 'pretty') { | |
| Surveys.process.answers_make_pretty(); | |
| } else { | |
| var tmp_data = { | |
| title: Surveys.config.title, | |
| survey_id: Surveys.config.survey_id, | |
| responder: Surveys.data.responder_name, | |
| responses: Surveys.data.answers, | |
| agreed_terms: Surveys.data.agreed_terms, | |
| }; | |
| Surveys.data.response_data = JSON.stringify(tmp_data); | |
| console.log('final data', Surveys.data.response_data); | |
| } | |
| if (Surveys.config.require_unique === true) { | |
| // set survey block in local storage; | |
| Common.setLocalStorage('survey_id_' + Surveys.config.survey_id, 'responded'); | |
| } | |
| Surveys.process.send_results(); | |
| }, | |
| send_results: function() { | |
| Surveys.process.processing_start(); | |
| if (Surveys.config.send_format == 'discord') { | |
| Surveys.process.send_discord(); | |
| } else { // post; | |
| Surveys.process.send_post(); | |
| } | |
| }, | |
| send_discord: function() { | |
| Common.post( | |
| Surveys.config.when_done.url, | |
| {content: Surveys.data.response_data}, | |
| Surveys.process.send_discord_done | |
| ); | |
| }, | |
| send_discord_done: function() { | |
| console.log('Discord notification sent!'); | |
| Surveys.process.processing_stop(); | |
| Surveys.process.handle_finish(); | |
| }, | |
| send_post: function() { | |
| Common.post( | |
| Surveys.config.when_done.url, | |
| {content: Surveys.data.response_data}, | |
| Surveys.process.send_post_done | |
| ); | |
| }, | |
| send_post_done: function() { | |
| console.log('Custom post sent!'); | |
| Surveys.process.processing_stop(); | |
| Surveys.process.handle_finish(); | |
| }, | |
| handle_finish: function() { | |
| if (Surveys.config.when_done.response == 'redirect') { | |
| Common.redirect(Surveys.config.when_done.response_url + '?survey_id=' + Surveys.config.survey_id + '&responder=' + Surveys.data.responder_name) | |
| } else { | |
| $('#complete-message').html(Surveys.config.when_done.message); | |
| $('#complete').fadeIn(); | |
| } | |
| }, | |
| answers_make_pretty: function() { | |
| Surveys.data.answers_pretty = "[ Responses ]\n"; | |
| $.each(Surveys.data.answers, function(index, item) { | |
| Surveys.data.answers_pretty += "# " + item.title + "\n"; | |
| Surveys.data.answers_pretty += item.answer + "\n\n"; | |
| }); | |
| if (Surveys.config.get_name === true) { | |
| Surveys.data.answers_pretty = "### Responses from " + Surveys.data.responder_name + "\n\n" + Surveys.data.answers_pretty; | |
| } | |
| Surveys.data.answers_pretty = "### " + Surveys.config.title + " Response ###\n" + Surveys.data.answers_pretty; | |
| Surveys.data.response_data = Surveys.data.answers_pretty; | |
| console.log('final data', Surveys.data.response_data); | |
| } | |
| } | |
| }; | |
| var PageAlerts = { | |
| notice: function(message){ | |
| noty({ | |
| text: '<i class="fa fa-hand-o-right fa-2x"></i> ' + message, | |
| theme: 'relax', | |
| type: 'alert', | |
| animation: { | |
| open: 'animated bounceInRight', // Animate.css class names | |
| close: 'animated bounceOutRight' // Animate.css class names | |
| }, | |
| layout: 'topLeft', | |
| timeout: 5000 // 10 seconds; | |
| }); | |
| }, | |
| info: function(message){ | |
| noty({ | |
| text: '<i class="fa fa-info-circle fa-2x"></i> ' + message, | |
| theme: 'relax', | |
| type: 'information', | |
| animation: { | |
| open: 'animated bounceInRight', // Animate.css class names | |
| close: 'animated bounceOutRight' // Animate.css class names | |
| }, | |
| layout: 'topLeft', | |
| timeout: 5000 // 10 seconds; | |
| }); | |
| }, | |
| warning: function(message){ | |
| noty({ | |
| text: '<i class="fa fa-thumbs-down fa-2x"></i> ' + message, | |
| theme: 'relax', | |
| type: 'warning', | |
| animation: { | |
| open: 'animated bounceInRight', // Animate.css class names | |
| close: 'animated bounceOutRight' // Animate.css class names | |
| }, | |
| layout: 'topLeft', | |
| timeout: 5000 // 10 seconds; | |
| }); | |
| }, | |
| error: function(message){ | |
| noty({ | |
| text: '<i class="fa fa-times-circle fa-2x"></i> ' + message, | |
| theme: 'relax', | |
| type: 'error', | |
| animation: { | |
| open: 'animated bounceInRight', // Animate.css class names | |
| close: 'animated bounceOutRight' // Animate.css class names | |
| }, | |
| layout: 'topLeft', | |
| timeout: 5000 // 10 seconds; | |
| }); | |
| }, | |
| success: function(message){ | |
| noty({ | |
| text: '<i class="fa fa-thumbs-up fa-2x"></i> ' + message, | |
| theme: 'relax', | |
| type: 'success', | |
| animation: { | |
| open: 'animated bounceInRight', // Animate.css class names | |
| close: 'animated bounceOutRight' // Animate.css class names | |
| }, | |
| layout: 'topLeft', | |
| timeout: 5000 | |
| }); | |
| } | |
| }; | |
| var Common = { | |
| page_timeout: 10000, | |
| get: function(url, callback) { | |
| $.ajax({ | |
| type: 'GET', | |
| cache: false, | |
| url: url, | |
| timeout: Common.page_timeout | |
| }).success(function(response) { | |
| callback({call_status: 'success', data: response}); | |
| }).fail(function(error) { | |
| if (error.status == 503) { | |
| callback({call_status: 'error', data: 503}); | |
| } else if (error.status == 404) { | |
| callback({call_status: 'error', data: 404}); | |
| } else if (error.status == 500) { | |
| callback({call_status: 'error', data: 500}); | |
| } else if (error.statusText == 'timeout') { | |
| callback({call_status: 'error', data: 'timeout'}); | |
| } else { | |
| callback({call_status: 'error', data: JSON.stringify(error)}); | |
| } | |
| }); | |
| }, | |
| post: function(url, post_data, callback) { | |
| $.ajax({ | |
| type: 'POST', | |
| cache: false, | |
| url: url, | |
| data: post_data, | |
| timeout: Common.page_timeout | |
| }).success(function(response) { | |
| callback({call_status: 'success', data: response}); | |
| }).fail(function(error) { | |
| if (error.status == 503) { | |
| callback({call_status: 'error', data: 503}); | |
| } else if (error.status == 404) { | |
| callback({call_status: 'error', data: 404}); | |
| } else if (error.status == 500) { | |
| callback({call_status: 'error', data: 500}); | |
| } else if (error.statusText == 'timeout') { | |
| callback({call_status: 'error', data: 'timeout'}); | |
| } else { | |
| callback({call_status: 'error', data: JSON.stringify(error)}); | |
| } | |
| }); | |
| }, | |
| redirect: function(url) { | |
| location.href=url; | |
| }, | |
| checkLocalStorage: function() { | |
| try { | |
| var storage = window.localStorage; | |
| var x = '__storage_test__'; | |
| storage.setItem(x, x); | |
| storage.removeItem(x); | |
| return true; | |
| } catch(e) { | |
| return false; | |
| } | |
| }, | |
| getLocalStorage: function(key) { | |
| if (Common.checkLocalStorage() === true) { | |
| return localStorage.getItem(key); | |
| } else { | |
| return false; | |
| } | |
| }, | |
| setLocalStorage: function(key, val) { | |
| if (Common.checkLocalStorage() === true) { | |
| localStorage.setItem(key, val); | |
| return true; | |
| } else { | |
| return false; | |
| } | |
| }, | |
| unsetLocalStorage: function(key) { | |
| localStorage.removeItem(key); | |
| }, | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This file is a self-contained HTML page for quickly getting mass user input on a survey by just editing the configuration and pointing it to something to process it.
Configurable options