Created
December 19, 2020 22:22
-
-
Save fischerbach/0b94d49e3874df91410f0a4df98a8c72 to your computer and use it in GitHub Desktop.
Code for article
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> | |
<!-- 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">×</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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Gist for the article:
How to create online survey for free with SurveyJS and Google Sheets