Add html for survey
This commit is contained in:
parent
380c1ccc53
commit
b2ff3dc228
4 changed files with 353 additions and 0 deletions
110
docs/pattern/survey-examples/behavioral-survey.html
Normal file
110
docs/pattern/survey-examples/behavioral-survey.html
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang=en data-bs-theme=dark>
|
||||||
|
<head>
|
||||||
|
<meta charset=utf-8>
|
||||||
|
<meta name=viewport content="width=device-width, initial-scale=1">
|
||||||
|
<title>Product Experience Survey</title>
|
||||||
|
<link rel=stylesheet type=text/css
|
||||||
|
href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 class=visually-hidden>Product Experience Survey</h1>
|
||||||
|
<main class=container>
|
||||||
|
<form class=py-5 action=/submit method=post>
|
||||||
|
<fieldset>
|
||||||
|
<legend>How often do you use our software?</legend>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-beh-useage"
|
||||||
|
for=group-beh-useage-daily>
|
||||||
|
<input class=form-check-input type=radio name=group-beh-useage
|
||||||
|
value=daily id=group-beh-useage-daily> Daily</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-beh-useage"
|
||||||
|
for=group-beh-useage-weekly>
|
||||||
|
<input class=form-check-input type=radio name=group-beh-useage
|
||||||
|
value=weekly id=group-beh-useage-weekly> Weekly</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-beh-useage"
|
||||||
|
for=group-beh-useage-monthly>
|
||||||
|
<input class=form-check-input type=radio name=group-beh-useage
|
||||||
|
value=monthly id=group-beh-useage-monthly> Monthly</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-beh-useage"
|
||||||
|
for=group-beh-useage-lessfrequently>
|
||||||
|
<input class=form-check-input type=radio name=group-beh-useage
|
||||||
|
value=less-frequently id=group-beh-useage-lessfrequently> Less frequently</label>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<hr class=my-4>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>What features do you use the most?</legend>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-beh-feature"
|
||||||
|
for=group-beh-feature-bookmarks>
|
||||||
|
<input class=form-check-input type=checkbox name=group-beh-feature
|
||||||
|
value=bookmarks id=group-beh-feature-bookmarks> Bookmarks</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-beh-feature"
|
||||||
|
for=group-beh-feature-kpi>
|
||||||
|
<input class=form-check-input type=checkbox name=group-beh-feature
|
||||||
|
value=kpi id=group-beh-feature-kpi> KPI</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-beh-feature"
|
||||||
|
for=group-beh-feature-contacts>
|
||||||
|
<input class=form-check-input type=checkbox name=group-beh-feature
|
||||||
|
value=contacts id=group-beh-feature-contacts> Contacts</label>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<hr class=my-4>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Have you used our software for along period of time?</legend>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-beh-longuse"
|
||||||
|
for=group-beh-longuse-yes>
|
||||||
|
<input class=form-check-input type=radio name=group-beh-longuse
|
||||||
|
value=yes id=group-beh-longuse-yes> Yes</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-beh-longuse"
|
||||||
|
for=group-beh-longuse-no>
|
||||||
|
<input class=form-check-input type=radio name=group-beh-longuse
|
||||||
|
value=no id=group-beh-longuse-no> No</label>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<hr class=my-4>
|
||||||
|
</fieldset>
|
||||||
|
<button class="btn btn-primary" type=submit>Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
<script
|
||||||
|
src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
148
docs/pattern/survey-examples/demographics-survey.html
Normal file
148
docs/pattern/survey-examples/demographics-survey.html
Normal file
|
|
@ -0,0 +1,148 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang=en data-bs-theme=dark>
|
||||||
|
<head>
|
||||||
|
<meta charset=utf-8>
|
||||||
|
<meta name=viewport content="width=device-width, initial-scale=1">
|
||||||
|
<title>Product Experience Survey</title>
|
||||||
|
<link rel=stylesheet type=text/css
|
||||||
|
href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 class=visually-hidden>Product Experience Survey</h1>
|
||||||
|
<main class=container>
|
||||||
|
<form class=py-5 action=/submit method=post>
|
||||||
|
<fieldset>
|
||||||
|
<legend>What is your age range?</legend>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-demo-age-range"
|
||||||
|
for=group-demo-age-range-1824>
|
||||||
|
<input class=form-check-input type=radio name=group-demo-age-range
|
||||||
|
value=18-24 id=group-demo-age-range-1824> 18-24</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-demo-age-range"
|
||||||
|
for=group-demo-age-range-2534>
|
||||||
|
<input class=form-check-input type=radio name=group-demo-age-range
|
||||||
|
value=25-34 id=group-demo-age-range-2534> 25-34</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-demo-age-range"
|
||||||
|
for=group-demo-age-range-3544>
|
||||||
|
<input class=form-check-input type=radio name=group-demo-age-range
|
||||||
|
value=35-44 id=group-demo-age-range-3544> 35-44</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-demo-age-range"
|
||||||
|
for=group-demo-age-range-4554>
|
||||||
|
<input class=form-check-input type=radio name=group-demo-age-range
|
||||||
|
value=45-54 id=group-demo-age-range-4554> 45-54</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-demo-age-range"
|
||||||
|
for=group-demo-age-range-55>
|
||||||
|
<input class=form-check-input type=radio name=group-demo-age-range
|
||||||
|
value=55+ id=group-demo-age-range-55> 55+</label>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<hr class=my-4>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>What is your gender?</legend>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-demo-gender"
|
||||||
|
for=group-demo-gender-male>
|
||||||
|
<input class=form-check-input type=radio name=group-demo-gender
|
||||||
|
value=male id=group-demo-gender-male> Male</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-demo-gender"
|
||||||
|
for=group-demo-gender-female>
|
||||||
|
<input class=form-check-input type=radio name=group-demo-gender
|
||||||
|
value=female id=group-demo-gender-female> Female</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-demo-gender"
|
||||||
|
for=group-demo-gender-nonbinary>
|
||||||
|
<input class=form-check-input type=radio name=group-demo-gender
|
||||||
|
value=non-binary id=group-demo-gender-nonbinary> Non-binary</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-demo-gender"
|
||||||
|
for=group-demo-gender-prefernottosay>
|
||||||
|
<input class=form-check-input type=radio name=group-demo-gender
|
||||||
|
value=prefer-not-to-say id=group-demo-gender-prefernottosay> Prefer not to say</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label class="form-check-label group-demo-gender"
|
||||||
|
for=group-demo-gender-other>
|
||||||
|
<input class=form-check-input type=radio name=group-demo-gender
|
||||||
|
value=other id=group-demo-gender-other> Other</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CTRL -->
|
||||||
|
<div class=mb-3>
|
||||||
|
<label class="form-label group-demo-gender"
|
||||||
|
for=group-demo-gender-other>Other</label>
|
||||||
|
<input class=form-control id=group-demo-gender-other type=text
|
||||||
|
name=group-demo-gender>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<hr class=my-4>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>What is your profession?</legend>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CTRL -->
|
||||||
|
<div class=mb-3>
|
||||||
|
<label class="form-label group-demo-profession"
|
||||||
|
for=group-demo-profession-profession>Profession</label>
|
||||||
|
<input class=form-control id=group-demo-profession-profession
|
||||||
|
type=text name=group-demo-profession>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<hr class=my-4>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>What is your educational background?</legend>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CTRL -->
|
||||||
|
<div class=mb-3>
|
||||||
|
<label class="form-label group-demo-edu"
|
||||||
|
for=group-demo-edu-lastdegree>Last Degree</label>
|
||||||
|
<input class=form-control id=group-demo-edu-lastdegree type=text
|
||||||
|
name=group-demo-edu>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<hr class=my-4>
|
||||||
|
</fieldset>
|
||||||
|
<button class="btn btn-primary" type=submit>Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
<script
|
||||||
|
src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
47
docs/pattern/survey-examples/geographics-survey.html
Normal file
47
docs/pattern/survey-examples/geographics-survey.html
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang=en data-bs-theme=dark>
|
||||||
|
<head>
|
||||||
|
<meta charset=utf-8>
|
||||||
|
<meta name=viewport content="width=device-width, initial-scale=1">
|
||||||
|
<title>Product Experience Survey</title>
|
||||||
|
<link rel=stylesheet type=text/css
|
||||||
|
href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 class=visually-hidden>Product Experience Survey</h1>
|
||||||
|
<main class=container>
|
||||||
|
<form class=py-5 action=/submit method=post>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Where are you located?</legend>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CTRL -->
|
||||||
|
<div class=mb-3>
|
||||||
|
<label class="form-label group-geo-loca" for=group-geo-loca-country>Country</label>
|
||||||
|
<input class=form-control id=group-geo-loca-country type=text
|
||||||
|
name=group-geo-loca>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<hr class=my-4>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>Which timezone do you operate in?</legend>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CTRL -->
|
||||||
|
<div class=mb-3>
|
||||||
|
<label class="form-label group-geo-timezone"
|
||||||
|
for=group-geo-timezone-timezone>Timezone</label>
|
||||||
|
<input class=form-control id=group-geo-timezone-timezone type=text
|
||||||
|
name=group-geo-timezone>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<hr class=my-4>
|
||||||
|
</fieldset>
|
||||||
|
<button class="btn btn-primary" type=submit>Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
<script
|
||||||
|
src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
docs/pattern/survey-examples/psychographics-survey.html
Normal file
48
docs/pattern/survey-examples/psychographics-survey.html
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang=en data-bs-theme=dark>
|
||||||
|
<head>
|
||||||
|
<meta charset=utf-8>
|
||||||
|
<meta name=viewport content="width=device-width, initial-scale=1">
|
||||||
|
<title>Product Experience Survey</title>
|
||||||
|
<link rel=stylesheet type=text/css
|
||||||
|
href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 class=visually-hidden>Product Experience Survey</h1>
|
||||||
|
<main class=container>
|
||||||
|
<form class=py-5 action=/submit method=post>
|
||||||
|
<fieldset>
|
||||||
|
<legend>What do you value most in our software?</legend>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CTRL -->
|
||||||
|
<div class=mb-3>
|
||||||
|
<label class="form-label group-psy-value"
|
||||||
|
for=group-psy-value-mostvalue>Most value</label>
|
||||||
|
<input class=form-control id=group-psy-value-mostvalue type=text
|
||||||
|
name=group-psy-value>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<hr class=my-4>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset>
|
||||||
|
<legend>What motivates you to use our software?</legend>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CTRL -->
|
||||||
|
<div class=mb-3>
|
||||||
|
<label class="form-label group-psy-motivate"
|
||||||
|
for=group-psy-motivate-yourmotivation>Your motivation</label>
|
||||||
|
<input class=form-control id=group-psy-motivate-yourmotivation
|
||||||
|
type=text name=group-psy-motivate>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<hr class=my-4>
|
||||||
|
</fieldset>
|
||||||
|
<button class="btn btn-primary" type=submit>Submit</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
<script
|
||||||
|
src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue