Skip to content

Instantly share code, notes, and snippets.

@fischerbach

fischerbach/survey.html

Created December 19, 2020 22:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fischerbach/0b94d49e3874df91410f0a4df98a8c72 to your computer and use it in GitHub Desktop.
Save fischerbach/0b94d49e3874df91410f0a4df98a8c72 to your computer and use it in GitHub Desktop.
Download ZIP
Code for article
Raw
survey.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://unpkg.com/survey-jquery@1.8.21/modern.css" type="text/css" rel="stylesheet" />
<title>SurveyJS and Google Sheets example</title>
</head>
<body>
<!-- Button trigger modal -->
<main role="main" class="container">
<div>
<h1>SurveyJS and Google Sheets demo</h1>
<p class="lead">This is example website. More information: [INSERT MEDIUM URL AFTER PUBLICATION]</p>
<p><button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">
Launch demo survey
</button></p>
<p><a href="https://docs.google.com/spreadsheets/d/1N2dqkzZvW0UFkY8Pi5blR1C3qE0Dj_NAJv2xYuxkqMg/edit?usp=sharing" class="btn btn-info" target="_blank">
Results in Google Sheets
</a></p>
</div>
</main><!-- /.container -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="surveyContainer"></div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/survey-jquery@1.8.21/survey.jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
Survey.StylesManager.applyTheme("modern");
var surveyJSON = {"pages":[{"name":"page1","elements":[{"type":"rating","name":"rate","title":"On a scale of one to five, how likely are you to recommend my article to a friend or colleague? *","minRateDescription":"(Most unlikely)","maxRateDescription":"(Most likely)"}]}]};
function sendDataToServer(survey, options) {
options.showDataSaving();
$.ajax({
url: 'https://script.google.com/macros/s/AKfycby_XZaWjAb7DMbtXdOsEsPiwS3lM4NkLPhi5f3D1fdhCatn5sOQ0r2v/exec',
type: 'post',
data: JSON.stringify(survey.data),
headers: {
"Content-Type": "text/plain"
},
processData: false,
complete: function(res, status) {
if (status == 'success') {
options.showDataSavingSuccess();
}else {
options.showDataSavingError();
}
},
});
}
var survey = new Survey.Model(surveyJSON);
$("#surveyContainer").Survey({
model: survey,
onComplete: sendDataToServer
});
</script>
</body>
</html>
@fischerbach
Copy link
Author

Gist for the article:
How to create online survey for free with SurveyJS and Google Sheets

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment