-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsurvey.html
112 lines (112 loc) · 7.23 KB
/
survey.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<title>Online Shopping Survey</title>
<script src="https://kit.fontawesome.com/8beace882b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="survey.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<form class="mt-3 mb-3 w-75 pb-2 mx-auto rounded">
<h1 class="text-uppercase bg-danger text-light rounded">Online Shopping Survey</h1>
<div class="container description-survey">
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore est illo beatae hic provident perspiciatis laboriosam animi soluta, quia incidunt nemo
<hr class="border border-dark">
</p>
<p>neque optio dolorum nam amet molestiae suscipit quis? Fugit! Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni blanditiis dolorum unde totam quae, labore assumenda voluptatem! Ea, odit perspiciatis?Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem esse totam eum architecto quibusdam fugiat soluta quisquam at veniam tempore.</p>
</div>
<div class="personal-info">
<div class="container">
<div id="error"></div>
<h3>Personal Information</h3>
<div class="form-group">
<label for="firstname" class="form-label">First Name</label>
<input type="text" name="firstname" class="form-control" id="firstname">
<label for="lastname" class="form-label mt-2">Last Name</label>
<input type="text" class="form-control" id="lastname">
<label for="email" class="form-label mt-2">Email</label>
<input type="text" name='email 'class="form-control" id="email">
<label for="age" class="form label mt-2">What is your age?</label>
<select class="custom-select form-control" id="age">
<option selected disabled>Choose your age</option>
<option>0-15 years old</option>
<option>15-30 years old</option>
<option>30-45 years old</option>
<option>45+</option>
<option>Prefer not to answer</option>
</select>
<label for="ethnicity" class="form label mt-2">Etnicity</label>
<select class="custom-select form-control" id="ethnicity">
<option selected disabled>Choose your ethnicity</option>
<option>Caucasian</option>
<option>African-American</option>
<option>Latino or Hispanic</option>
<option>Asian</option>
<option>Native American</option>
<option>Native Hawaiian or Pacific Islander</option>
<option>Two or More</option>
<option>Other/Unknown</option>
<option>Prefer not to answer</option>
</select>
</div>
</div>
</div>
<div class="questionnaire">
<div class="container">
<h3>Questionnaire</h3>
<div class="question">
<p id="question1" class="mt-3"> 1) How often have you come across this product online?</p>
<div class="form-check mb-1">
<input type="radio" class="form-check-input" id="quest1-1" name="quest1">
<label for="quest1-1" class="form-check-label">Very Often</label>
</div>
<div class="form-check mb-1">
<input type="radio" class="form-check-input" id="quest1-2" name="quest1">
<label for="quest1-2" class="form-check-label">Seldom</label>
</div>
<div class="form-check mb-1">
<input type="radio" class="form-check-input" id="quest1-3" name="quest1">
<label for="quest1-3" class="form-check-label">Not at all</label>
</div>
<p id="question2" class="mt-3"> 2) Do your friends/your family members/colleagues etc. influence your product choice?</p>
<div class="form-check mb-1">
<input type="radio" class="form-check-input" id="quest2-1" name="quest2">
<label for="quest2-1" class="form-check-label">Yes</label>
</div>
<div class="form-check mb-1">
<input type="radio" class="form-check-input" id="quest2-2" name="quest2">
<label for="quest2-2" class="form-check-label">No</label>
</div>
<p id="question3" class="mt-3"> 3) How likely are you to buy this product online?</p>
<div class="range">
<label for="formControlRange">Very unlikely</label>
<label for="customRange3" class="form-label float-right">Very Likely</label>
<input type="range" class="form-control-range" min="0" max="6" step="1" id="customRange3">
</div>
<p id="question4" class="mt-3"> 4) How likely are you to recommend a product to your online community?</p>
<div class="range">
<label for="formControlRange">Very unlikely</label>
<label for="customRange3" class="form-label float-right">Very Likely</label>
<input type="range" class="form-control-range" min="0" max="6" step="1" id="customRange3">
</div>
<p class="mt-4"><strong>What could we improve?</strong></p>
<div class="form-outline mb-2">
<textarea class="form-control" id="textarea4" rows="4" placeholder="Help us improve our products & services with your feedback"></textarea>
<label class="form-label" for="textarea4"></label>
</div>
</div>
<button type="button" id="buton" class="btn btn-primary btn-lg btn-block">Submit
</button>
</div>
</div>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
<script src="survey.js"></script>
</body>
</html>