Skip to content

Instantly share code, notes, and snippets.

@icoolguy1995

icoolguy1995/index.html

Created December 13, 2022 01:15
Show Gist options
  • Save icoolguy1995/78ef04403bf0d9d0e71f08120fb4d048 to your computer and use it in GitHub Desktop.
Save icoolguy1995/78ef04403bf0d9d0e71f08120fb4d048 to your computer and use it in GitHub Desktop.
Download ZIP
Survey Form | FCC
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
<main id="main" class="container">
<div class="row">
<div class="col-xs-12 col-lg-offset-3 col-lg-6">
<div class="m-b-md text-center">
<h1 id="title">Survey Form</h1>
<p id="description" class="description" class="text-center">GENERATOR OF CONSENT REQUEST DOCUMENTS </p>
</div>
<form id="survey-form" onsubmit="getResult()">
<fieldset>
<label for="name" id="name-label">
Name of the study *
<input class="" type="text" id="studyName" name="name" />
</label>
</fieldset>
<fieldset>
<label for="email" id="email-label">
Who is conducting this study? (Should the staff change, the document should also be updated. Name only key research figures.) *
<input class="" type="text" id="researcherNames" name="email" placeholder="This study is being conducted by" />
</label>
</fieldset>
<fieldset>
<label for="email" id="email-label">
The purpose of this research is: *
<input class="" type="text" id="ResearchDesc" name="email" placeholder="Describe using simple vocabulary." />
</label>
</fieldset>
<fieldset>
<label for="email" id="email-label">
Explain activities of the participants, if the study requires several activities, please specify the duration for each activity.Regarding interviews or questionnaires, please explain briefly what kind of questions will be asked. *
<input class="" type="text" id="procedureDesc" name="email" placeholder="If you agree to participate, you will be asked to:" />
</label>
</fieldset>
<fieldset>
<label for="email" id="email-label">
Describe in detail all possible risks associated with the research, whether physical, emotional, psychological, social or financial.If you are ABSOLUTELY sure that the research posses no risk to participants, write "none" *
<input class="" type="text" id="riskDesc" name="email" placeholder="The risks to your person related to this research are:" />
</label>
</fieldset>
<fieldset>
<label for="email" id="email-label">
Describe in advance the duration of the research, it is advisable to overestimate the assumed time. (eg. interviews could take 1 to 2 hours total, depending on the candidate) *
<input class="" type="text" id="time" name="email" placeholder="Your participation will last for" />
</label>
</fieldset>
<fieldset>
<label for="email" id="email-label">
Describe the benefits to society or research that you think will be brought about by the results of this research *
<input class="" type="text" id="benefit" name="email" placeholder="We think that the results of this research can" />
</label>
</fieldset>
<fieldset>
<label for="email" id="email-label">
Optional:If there is a compensation for participants, it CANNOT be overestimated in any way *
<input class="" type="text" id="compensation" name="email" placeholder="Your compensation for taking part in this research will be" />
</label>
</fieldset>
<fieldset>
<label for="email" id="email-label">
Share exactly what personal information will be collected during the search, e.g. name, address, phone number, nationality etc. *
<input class="" type="text" id="personalInfo" name="email" placeholder="The following personal information will be collected from participants" />
</label>
</fieldset>
<fieldset>
<label for="email" id="email-label">
Include the duration of data storage time. If some data should be kept for longer, specify these exceptions clearly *
<input class="" type="text" id="timeInfo" name="email" placeholder="Participants' personal data will be stored for" />
</label>
</fieldset>
<fieldset>
<label for="email" id="email-label">
Explain how the data will be kept safe once collected. For example, "the data collected will be anonymous" or "we will keep all documents safe in a safe in a locked office" or " the data will be saved on a computer, protected with encryption and passwords"
*
<input class="" type="text" id="protectionInfo" name="email" placeholder="Participants' personal data will be protected in this way" />
</label>
</fieldset>
<fieldset>
<label for="email" id="email-label">
Specify who will have access to the data, whether researchers only or whether the data will be public or published anonymously *
<input class="" type="text" id="sharedInfo" name="email" placeholder="Participants' data will be shared with" />
</label>
</fieldset>
<fieldset>
<label for="email" id="email-label">
If you have any questions regarding this research, please contact us at our phone number *
<input class="" type="text" id="phone" name="email" />
</label>
</fieldset>
<fieldset>
<label for="email" id="email-label">
Or at our email: *
<input class="" type="email" id="email" name="email" />
</label>
</fieldset>
<label for="survey-form-suggestions">
Any Comments or Suggestions?
<textarea id="survey-form-suggestions" maxlength="194"></textarea>
</label>
</fieldset>
<button id="submit" type="submit" class="btn">Submit the form</button>
</form>
</div>
</div>
<h3>RESULT:</h3>
<div id="result">
<h1 id="title"></h1>
<p id="intro"></p>
<p id="staff"></p>
<p id ="resDesc"></p>
<h2 id = "dataProt"></h2>
<p id="data"></p>
<p id ="contact"></p>
</div>
<input id="downloadBtn" type="button" value="DOWNLOAD" class="btn" onclick="download('consentform.html',document.getElementById('result').innerHTML)";
</main>
</body>
</html>
Raw
script.js
function getResult(){
var studyName = document.getElementById("studyName").value;
const introd = "Informed Consent <br><br>You are invited to participate in this study, this form is to indicate your decision to participate or not in said study."+
" <br>The research will only take into account people who voluntarily decide to take part in it, participation will be completely voluntary, and you can terminate your participation at any time."+
"<br>If you have any questions about the research or this form, please ask the staff these questions before you decide to participate"
var ResearcherName = document.getElementById("researcherNames").value;
var researchDescription = document.getElementById("ResearchDesc").value;
var proDesc = document.getElementById("procedureDesc").value;
var risk = document.getElementById("riskDesc").value;
var resTime = document.getElementById("time").value;
var resBenefit = document.getElementById("benefit").value;
var resComp = document.getElementById("compensation").value;
var persData = document.getElementById("personalInfo").value;
var persDataTime = document.getElementById("timeInfo").value;
var dataProInfo = document.getElementById("protectionInfo").value;
var shareInfo = document.getElementById("sharedInfo").value;
var phoneNum = document.getElementById("phone").value;
var ResEmail = document.getElementById("email").value;
const finalStatement = "By signing this document, you agree to participate in this study. <br>Please be sure you understand what this entails before you sign."+
" If you have further questions about the study, please contact us using the information provided just above.<br><br>"+
"I declare that I am 18 years of age or older and agree to participate in this study."
event.preventDefault();
document.getElementById("title").innerHTML = studyName;
document.getElementById("intro").innerHTML = introd;
document.getElementById("staff").innerHTML = "This research is being conducted by " + ResearcherName ;
document.getElementById("resDesc").innerHTML = "The purpose of this research is: " + researchDescription +"<br> If you agree to participate, you will be asked to: " + proDesc+
"<br> By taking part in this research, you may experience those potential risks: " + risk + "<br> Your participation will last for " + resTime +
"<br> We think that the results of this research can: "+ resBenefit + "<br> Your compensation for taking part in this research will be: "+ resComp;
document.getElementById("dataProt").innerHTML = "DATA PROTECTION";
document.getElementById("data").innerHTML = "The following personal information will be collected from participants: " + persData +
"<br>Participants' personal data will be stored for: " + persDataTime + "<br>Participants' personal data will be protected in this way: " + dataProInfo +
"<br> Participants' data will be shared with: " + shareInfo;
document.getElementById("contact").innerHTML = "You are encouraged to ask questions at any time during this study. For further information about the study, contact us via phone: " + phoneNum +
"<br> or at our email: " + ResEmail + "<br><br>" + finalStatement + "<br><br><br><br>Participant's Name _______________________"+ "<br><br><br><br>Partcipant's signature ________________________";
}
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
Raw
scripts
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.css
.m-b-xs {
margin-bottom: 2%;
}
.m-b-md {
margin-bottom: 10%;
}
.m-t-xs {
margin-top: 2%;
}
.m-t-sm {
margin-top: 5%;
}
* {
outline: 0 !important;
}
body {
padding: 2% 0;
background-color: #37404a;
}
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-size: 2.2em;
font-weight: 300;
color: #85ffc7;
text-transform: uppercase;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 1.1em;
font-weight: 300;
color: #fff;
}
a {
color: #fff;
}
a:hover {
text-decoration: none;
color: #fff;
}
#survey-form label, #survey-form .labels {
display: block;
margin-bottom: 2%;
font-family: 'Roboto', sans-serif;
font-size: 1.1em;
font-weight: 300;
color: #fff;
letter-spacing: 0.5px;
}
#survey-form input:-moz-placeholder {
color: transparent !important;
}
#survey-form input, #survey-form select {
display: block;
width: 100%;
overflow: hidden;
outline: none;
border: 2px solid #333;
}
#survey-form input {
margin-top: 1.5%;
padding: 0 0 5px 0;
background: transparent;
border: none;
outline: none;
border-bottom: 2px solid #fff;
font-size: 1.1em;
font-weight: 300;
color: #85ffc7;
}
#survey-form input:focus {
border-color: #85ffc7;
}
#survey-form [type="checkbox"], #survey-form [type="radio"] {
display: inline-block;
width: auto;
margin: 0px 10px 0 0;
}
#survey-form [type="checkbox"], #survey-form [type="radio"] {
display: inline-block;
margin: 0 10px 0 0 !important;
position: relative;
top: 5px;
right: 0;
bottom: 0;
left: 0;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
height: 23px;
width: 23px;
transition: all 0.15s ease-out 0s;
background: #37404a;
color: #fff;
cursor: pointer;
outline: none;
z-index: 1000;
border: 1px solid #fff;
}
#survey-form [type="checkbox"]:hover, #survey-form [type="radio"]:hover {
border-color: #85ffc7;
}
#survey-form [type="checkbox"]:checked:before, #survey-form [type="radio"]:checked:before {
display: inline-block;
height: 21px;
width: 21px;
position: relative;
left: 0;
bottom: 0;
content: "\e014";
text-align: center;
font-family: 'Glyphicons Halflings';
line-height: 20px;
font-size: 15px;
color: #85ffc7;
}
#survey-form [type="checkbox"]:focus, #survey-form [type="radio"]:focus {
outline: none;
border-color: #fff;
}
#survey-form [type="radio"] {
border-radius: 50%;
}
#survey-form [type="radio"]:after {
border-radius: 50%;
}
#survey-form [type=number] {
width: 45px;
}
#survey-form [type=number]::-webkit-inner-spin-button, #survey-form [type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
#survey-form select {
height: 40px;
padding-left: 5px;
background-color: #37404a;
border: 2px solid #fff;
color: #85ffc7;
}
#survey-form select option {
padding: 5px 10px;
font-weight: 300;
cursor: pointer;
}
#survey-form select option:hover {
background-color: #85ffc7;
}
#survey-form textarea {
resize: none;
margin-top: 2%;
padding: 10px 10px 0px 20px;
width: 100%;
height: 90px;
color: #85ffc7;
background-color: #37404a;
border: 2px solid #fff;
}
#survey-form .btn {
display: inline-block;
position: relative;
width: 100%;
margin: 3% 0 0 0;
height: 45px;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
border: 3px solid #85ffc7;
border-radius: 0;
font-weight: 500;
font-size: 1.2em;
color: #85ffc7;
text-align: center;
background: none;
transition: color 0.25s ease;
}
#survey-form .btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: #85ffc7;
transform-origin: left;
transition: width 0.5s ease;
z-index: -1;
}
#survey-form .btn:hover {
color: #37404a;
}
#survey-form .btn:hover:after {
width: 100%;
}
#survey-form fieldset {
margin: 5% 0 0 0;
}
.copyright {
text-align: center;
font-size: 10px;
color: #fff;
}
.copyright i {
color: #ef5350;
}
@media only screen and (max-width: 600px) {
body {
padding: 8% 0;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Raw
survey-form-fcc.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment