dev.metalisp.sbt/docs/pattern/survey-examples/tcl-survey.html

124 lines
No EOL
5.5 KiB
HTML

<!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&#39;m-an-early-adopter.
id=group-tcl-adopt-alwaysimanearlyadopter> Always - I&#39;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&#39;s-necessary-for-work-or-other-important-tasks.
id=group-tcl-adopt-rarelyionlyadoptnewtechnologieswhenitsnecessaryforworkorotherimportanttasks> Rarely - I only
adopt new technologies when it&#39;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>