Add example survey html
This commit is contained in:
parent
6dc6865405
commit
373ca10b34
2 changed files with 172 additions and 0 deletions
48
docs/pattern/survey-examples/nc-survey.html
Normal file
48
docs/pattern/survey-examples/nc-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 challenges, if any, does our software help you overcome?</legend>
|
||||
<ol>
|
||||
<li>
|
||||
<!-- FORM/CTRL -->
|
||||
<div class=mb-3>
|
||||
<label class="form-label group-nc-challenges"
|
||||
for=group-nc-challenges-pleasedescribe>Please describe</label>
|
||||
<input class=form-control id=group-nc-challenges-pleasedescribe
|
||||
type=text name=group-nc-challenges>
|
||||
</div>
|
||||
</ol>
|
||||
<hr class=my-4>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>How could we improve to better meet your needs?</legend>
|
||||
<ol>
|
||||
<li>
|
||||
<!-- FORM/CHECKABLE -->
|
||||
<div class=form-check>
|
||||
<label class="form-check-label group-nc-improve"
|
||||
for=group-nc-improve-pleasedescribe>
|
||||
<input class=form-check-input type=radio name=group-nc-improve
|
||||
value=please-describe id=group-nc-improve-pleasedescribe> Please describe</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>
|
||||
124
docs/pattern/survey-examples/tcl-survey.html
Normal file
124
docs/pattern/survey-examples/tcl-survey.html
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<!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 would you rate your comfort level with technology?</legend>
|
||||
<ol>
|
||||
<li>
|
||||
<!-- FORM/CHECKABLE -->
|
||||
<div class=form-check>
|
||||
<label class="form-check-label group-tcl-likeart"
|
||||
for=group-tcl-likeart-1veryuncomfortable>
|
||||
<input class=form-check-input type=radio name=group-tcl-likeart
|
||||
value=1---very-uncomfortable
|
||||
id=group-tcl-likeart-1veryuncomfortable> 1 - Very Uncomfortable</label>
|
||||
</div>
|
||||
<li>
|
||||
<!-- FORM/CHECKABLE -->
|
||||
<div class=form-check>
|
||||
<label class="form-check-label group-tcl-likeart"
|
||||
for=group-tcl-likeart-2slightlyuncomfortable>
|
||||
<input class=form-check-input type=radio name=group-tcl-likeart
|
||||
value=2---slightly-uncomfortable
|
||||
id=group-tcl-likeart-2slightlyuncomfortable> 2 - Slightly Uncomfortable</label>
|
||||
</div>
|
||||
<li>
|
||||
<!-- FORM/CHECKABLE -->
|
||||
<div class=form-check>
|
||||
<label class="form-check-label group-tcl-likeart"
|
||||
for=group-tcl-likeart-3neutral>
|
||||
<input class=form-check-input type=radio name=group-tcl-likeart
|
||||
value=3---neutral id=group-tcl-likeart-3neutral> 3 - Neutral</label>
|
||||
</div>
|
||||
<li>
|
||||
<!-- FORM/CHECKABLE -->
|
||||
<div class=form-check>
|
||||
<label class="form-check-label group-tcl-likeart"
|
||||
for=group-tcl-likeart-4quitecomfortable>
|
||||
<input class=form-check-input type=radio name=group-tcl-likeart
|
||||
value=4---quite-comfortable
|
||||
id=group-tcl-likeart-4quitecomfortable> 4 - Quite Comfortable</label>
|
||||
</div>
|
||||
<li>
|
||||
<!-- FORM/CHECKABLE -->
|
||||
<div class=form-check>
|
||||
<label class="form-check-label group-tcl-likeart"
|
||||
for=group-tcl-likeart-5verycomfortable>
|
||||
<input class=form-check-input type=radio name=group-tcl-likeart
|
||||
value=5---very-comfortable
|
||||
id=group-tcl-likeart-5verycomfortable> 5 - Very Comfortable</label>
|
||||
</div>
|
||||
</ol>
|
||||
<hr class=my-4>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>How frequently do you adopt new technologies?</legend>
|
||||
<ol>
|
||||
<li>
|
||||
<!-- FORM/CHECKABLE -->
|
||||
<div class=form-check>
|
||||
<label class="form-check-label group-tcl-adopt"
|
||||
for=group-tcl-adopt-alwaysimanearlyadopter>
|
||||
<input class=form-check-input type=radio name=group-tcl-adopt
|
||||
value=always---i'm-an-early-adopter.
|
||||
id=group-tcl-adopt-alwaysimanearlyadopter> Always - I'm an early adopter.</label>
|
||||
</div>
|
||||
<li>
|
||||
<!-- FORM/CHECKABLE -->
|
||||
<div class=form-check>
|
||||
<label class="form-check-label group-tcl-adopt"
|
||||
for=group-tcl-adopt-oftenistayontopoftechnologicaladvancesandadoptthemfrequently>
|
||||
<input class=form-check-input type=radio name=group-tcl-adopt
|
||||
value=often---i-stay-on-top-of-technological-advances-and-adopt-them-frequently.
|
||||
id=group-tcl-adopt-oftenistayontopoftechnologicaladvancesandadoptthemfrequently> Often - I stay on top of
|
||||
technological advances and adopt them frequently.</label>
|
||||
</div>
|
||||
<li>
|
||||
<!-- FORM/CHECKABLE -->
|
||||
<div class=form-check>
|
||||
<label class="form-check-label group-tcl-adopt"
|
||||
for=group-tcl-adopt-sometimesiadoptnewtechnologiesnowandthen>
|
||||
<input class=form-check-input type=radio name=group-tcl-adopt
|
||||
value=sometimes---i-adopt-new-technologies-now-and-then.
|
||||
id=group-tcl-adopt-sometimesiadoptnewtechnologiesnowandthen> Sometimes - I adopt new technologies now and then.</label>
|
||||
</div>
|
||||
<li>
|
||||
<!-- FORM/CHECKABLE -->
|
||||
<div class=form-check>
|
||||
<label class="form-check-label group-tcl-adopt"
|
||||
for=group-tcl-adopt-rarelyionlyadoptnewtechnologieswhenitsnecessaryforworkorotherimportanttasks>
|
||||
<input class=form-check-input type=radio name=group-tcl-adopt
|
||||
value=rarely---i-only-adopt-new-technologies-when-it's-necessary-for-work-or-other-important-tasks.
|
||||
id=group-tcl-adopt-rarelyionlyadoptnewtechnologieswhenitsnecessaryforworkorotherimportanttasks> Rarely - I only
|
||||
adopt new technologies when it's necessary for work or other important tasks.</label>
|
||||
</div>
|
||||
<li>
|
||||
<!-- FORM/CHECKABLE -->
|
||||
<div class=form-check>
|
||||
<label class="form-check-label group-tcl-adopt"
|
||||
for=group-tcl-adopt-neveriavoidadoptingnewtechnologiesunlessabsolutelyrequired>
|
||||
<input class=form-check-input type=radio name=group-tcl-adopt
|
||||
value=never---i-avoid-adopting-new-technologies-unless-absolutely-required.
|
||||
id=group-tcl-adopt-neveriavoidadoptingnewtechnologiesunlessabsolutelyrequired> Never - I avoid adopting new
|
||||
technologies unless absolutely required.</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>
|
||||
Loading…
Add table
Reference in a new issue