marcuskammer/dev.metalisp.sbt
1
1
Fork 0
Code Issues 1 Pull requests Projects 1 Releases Packages Wiki Activity Actions
dev.metalisp.sbt/docs/pattern/questionnaire-page.html

453 lines
18 KiB
HTML
Raw Permalink Normal View History

Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<!DOCTYPE html>
<html lang=en data-bs-theme=dark>
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<head>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Questionnaire Example</title>
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<link rel=stylesheet type=text/css
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
</head>
<body>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<h1 class=visually-hidden>Questionnaire Example</h1>
<main class=container>
Update docs
2024-04-21 22:01:47 +02:00
<form class=py-5 action=# method=post>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<fieldset>
<legend>How old are you?</legend>
Update docs
2024-04-21 22:01:47 +02:00
<ol style="list-style-type: none">
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-age" for=group-age-1824>
<input class=form-check-input type=radio name=group-age value=18-24
id=group-age-1824> 18-24</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-age" for=group-age-2534>
<input class=form-check-input type=radio name=group-age value=25-34
id=group-age-2534> 25-34</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-age" for=group-age-3544>
<input class=form-check-input type=radio name=group-age value=35-44
id=group-age-3544> 35-44</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-age" for=group-age-4554>
<input class=form-check-input type=radio name=group-age value=45-54
id=group-age-4554> 45-54</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-age" for=group-age-55>
<input class=form-check-input type=radio name=group-age value=55+
id=group-age-55> 55+</label>
</div>
</ol>
</fieldset>
<fieldset>
<legend>Gender</legend>
Update docs
2024-04-21 22:01:47 +02:00
<ol style="list-style-type: none">
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-gender" for=group-gender-male>
<input class=form-check-input type=radio name=group-gender
value=male id=group-gender-male> Male</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-gender" for=group-gender-female>
<input class=form-check-input type=radio name=group-gender
value=female id=group-gender-female> Female</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-gender"
for=group-gender-nonbinary>
<input class=form-check-input type=radio name=group-gender
value=non-binary id=group-gender-nonbinary> Non-binary</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-gender"
for=group-gender-prefernottosay>
<input class=form-check-input type=radio name=group-gender
value=prefer-not-to-say id=group-gender-prefernottosay> Prefer not to say</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-gender" for=group-gender-other>
<input class=form-check-input type=radio name=group-gender
value=other id=group-gender-other> Other</label>
</div>
<li>
Update docs
2024-04-21 22:01:47 +02:00
<!-- FORM/CTRL text gender -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=mb-3>
Update docs
2024-04-21 22:01:47 +02:00
<label class="form-label group-gender"
for=group-gender-pleasespecify>Please specify</label>
<input class=form-control id=group-gender-pleasespecify type=text
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
name=group-gender>
</div>
</ol>
</fieldset>
<fieldset>
<legend>How many hours per day, on average, do you spend browsing the internet?</legend>
Update docs
2024-04-21 22:01:47 +02:00
<ol style="list-style-type: none">
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-webbrowsing"
for=group-webbrowsing-lessthan1hour>
<input class=form-check-input type=radio name=group-webbrowsing
value=less-than-1-hour id=group-webbrowsing-lessthan1hour> Less than 1 hour</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-webbrowsing"
for=group-webbrowsing-13hours>
<input class=form-check-input type=radio name=group-webbrowsing
value=1-3-hours id=group-webbrowsing-13hours> 1-3 hours</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-webbrowsing"
for=group-webbrowsing-35hours>
<input class=form-check-input type=radio name=group-webbrowsing
value=3-5-hours id=group-webbrowsing-35hours> 3-5 hours</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<div class=form-check>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<label class="form-check-label group-webbrowsing"
for=group-webbrowsing-5hours>
<input class=form-check-input type=radio name=group-webbrowsing
value=5+-hours id=group-webbrowsing-5hours> 5+ hours</label>
</div>
</ol>
</fieldset>
Extend questionnaire docs
2024-01-28 11:38:41 +01:00
<fieldset>
<legend>What are your favorite brands?</legend>
Update docs
2024-04-21 22:01:47 +02:00
<ol style="list-style-type: none">
Extend questionnaire docs
2024-01-28 11:38:41 +01:00
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-brands" for=group-brands-branda>
<input class=form-check-input type=checkbox name=group-brands
value=brand-a id=group-brands-branda> Brand A</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-brands" for=group-brands-brandb>
<input class=form-check-input type=checkbox name=group-brands
value=brand-b id=group-brands-brandb> Brand B</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-brands" for=group-brands-brandc>
<input class=form-check-input type=checkbox name=group-brands
value=brand-c id=group-brands-brandc> Brand C</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-brands" for=group-brands-none>
<input class=form-check-input type=checkbox name=group-brands
value=none id=group-brands-none> None</label>
</div>
<li>
Update docs
2024-04-21 22:01:47 +02:00
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-brands" for=group-brands-other>
<input class=form-check-input type=checkbox name=group-brands
value=other id=group-brands-other> Other</label>
</div>
<li>
<!-- FORM/CTRL text brands -->
Extend questionnaire docs
2024-01-28 11:38:41 +01:00
<div class=mb-3>
Update docs
2024-04-21 22:01:47 +02:00
<label class="form-label group-brands"
for=group-brands-pleasespecify>Please specify</label>
<input class=form-control id=group-brands-pleasespecify type=text
Extend questionnaire docs
2024-01-28 11:38:41 +01:00
name=group-brands>
</div>
</ol>
</fieldset>
<fieldset>
<legend>How often do you shop online?</legend>
Update docs
2024-04-21 22:01:47 +02:00
<ol style="list-style-type: none">
Extend questionnaire docs
2024-01-28 11:38:41 +01:00
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-shopping"
for=group-shopping-daily>
<input class=form-check-input type=radio name=group-shopping
value=daily id=group-shopping-daily> Daily</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-shopping"
for=group-shopping-weekly>
<input class=form-check-input type=radio name=group-shopping
value=weekly id=group-shopping-weekly> Weekly</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-shopping"
for=group-shopping-monthly>
<input class=form-check-input type=radio name=group-shopping
value=monthly id=group-shopping-monthly> Monthly</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-shopping"
for=group-shopping-rarely>
<input class=form-check-input type=radio name=group-shopping
value=rarely id=group-shopping-rarely> Rarely</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-shopping"
for=group-shopping-never>
<input class=form-check-input type=radio name=group-shopping
value=never id=group-shopping-never> Never</label>
</div>
</ol>
</fieldset>
<fieldset>
<legend>Which of the following devices do you own?</legend>
Update docs
2024-04-21 22:01:47 +02:00
<ol style="list-style-type: none">
Extend questionnaire docs
2024-01-28 11:38:41 +01:00
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-devices"
for=group-devices-smartphone>
<input class=form-check-input type=checkbox name=group-devices
value=smartphone id=group-devices-smartphone> Smartphone</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-devices"
for=group-devices-laptoppc>
<input class=form-check-input type=checkbox name=group-devices
value=laptop/pc id=group-devices-laptoppc> Laptop/PC</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-devices"
for=group-devices-tablet>
<input class=form-check-input type=checkbox name=group-devices
value=tablet id=group-devices-tablet> Tablet</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-devices"
for=group-devices-smartwatch>
<input class=form-check-input type=checkbox name=group-devices
value=smartwatch id=group-devices-smartwatch> Smartwatch</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-devices" for=group-devices-none>
<input class=form-check-input type=checkbox name=group-devices
value=none id=group-devices-none> None</label>
</div>
</ol>
</fieldset>
<fieldset>
<legend>What is your preferred method of payment for online purchases?</legend>
Update docs
2024-04-21 22:01:47 +02:00
<ol style="list-style-type: none">
Extend questionnaire docs
2024-01-28 11:38:41 +01:00
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-payment"
for=group-payment-creditdebitcard>
<input class=form-check-input type=radio name=group-payment
value=credit/debit-card id=group-payment-creditdebitcard> Credit/Debit Card</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-payment"
for=group-payment-paypal>
<input class=form-check-input type=radio name=group-payment
value=paypal id=group-payment-paypal> PayPal</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-payment"
for=group-payment-banktransfer>
<input class=form-check-input type=radio name=group-payment
value=bank-transfer id=group-payment-banktransfer> Bank Transfer</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-payment"
for=group-payment-cashondelivery>
<input class=form-check-input type=radio name=group-payment
value=cash-on-delivery id=group-payment-cashondelivery> Cash on Delivery</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-payment"
for=group-payment-cryptocurrency>
<input class=form-check-input type=radio name=group-payment
value=cryptocurrency id=group-payment-cryptocurrency> Cryptocurrency</label>
</div>
</ol>
</fieldset>
<fieldset>
<legend>Which social media platforms do you use regularly?</legend>
Update docs
2024-04-21 22:01:47 +02:00
<ol style="list-style-type: none">
Extend questionnaire docs
2024-01-28 11:38:41 +01:00
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-socialmedia"
for=group-socialmedia-facebook>
<input class=form-check-input type=checkbox name=group-socialmedia
value=facebook id=group-socialmedia-facebook> Facebook</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-socialmedia"
for=group-socialmedia-twitter>
<input class=form-check-input type=checkbox name=group-socialmedia
value=twitter id=group-socialmedia-twitter> Twitter</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-socialmedia"
for=group-socialmedia-instagram>
<input class=form-check-input type=checkbox name=group-socialmedia
value=instagram id=group-socialmedia-instagram> Instagram</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-socialmedia"
for=group-socialmedia-linkedin>
<input class=form-check-input type=checkbox name=group-socialmedia
value=linkedin id=group-socialmedia-linkedin> LinkedIn</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-socialmedia"
for=group-socialmedia-tiktok>
<input class=form-check-input type=checkbox name=group-socialmedia
value=tiktok id=group-socialmedia-tiktok> TikTok</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-socialmedia"
for=group-socialmedia-none>
<input class=form-check-input type=checkbox name=group-socialmedia
value=none id=group-socialmedia-none> None</label>
</div>
<li>
Update docs
2024-04-21 22:01:47 +02:00
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-socialmedia"
for=group-socialmedia-other>
<input class=form-check-input type=checkbox name=group-socialmedia
value=other id=group-socialmedia-other> Other</label>
</div>
<li>
<!-- FORM/CTRL text socialmedia -->
Extend questionnaire docs
2024-01-28 11:38:41 +01:00
<div class=mb-3>
<label class="form-label group-socialmedia"
Update docs
2024-04-21 22:01:47 +02:00
for=group-socialmedia-pleasespecify>Please specify</label>
<input class=form-control id=group-socialmedia-pleasespecify
type=text name=group-socialmedia>
Extend questionnaire docs
2024-01-28 11:38:41 +01:00
</div>
</ol>
</fieldset>
<fieldset>
<legend>How do you usually consume news?</legend>
Update docs
2024-04-21 22:01:47 +02:00
<ol style="list-style-type: none">
Extend questionnaire docs
2024-01-28 11:38:41 +01:00
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-newsconsumption"
for=group-newsconsumption-onlinenewswebsites>
<input class=form-check-input type=radio name=group-newsconsumption
value=online-news-websites
id=group-newsconsumption-onlinenewswebsites> Online News Websites</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-newsconsumption"
for=group-newsconsumption-socialmedia>
<input class=form-check-input type=radio name=group-newsconsumption
value=social-media id=group-newsconsumption-socialmedia> Social Media</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-newsconsumption"
for=group-newsconsumption-television>
<input class=form-check-input type=radio name=group-newsconsumption
value=television id=group-newsconsumption-television> Television</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-newsconsumption"
for=group-newsconsumption-newspapersmagazines>
<input class=form-check-input type=radio name=group-newsconsumption
value=newspapers/magazines
id=group-newsconsumption-newspapersmagazines> Newspapers/Magazines</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-newsconsumption"
for=group-newsconsumption-radio>
<input class=form-check-input type=radio name=group-newsconsumption
value=radio id=group-newsconsumption-radio> Radio</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label class="form-check-label group-newsconsumption"
for=group-newsconsumption-none>
<input class=form-check-input type=radio name=group-newsconsumption
value=none id=group-newsconsumption-none> None</label>
</div>
</ol>
</fieldset>
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
<button class="btn btn-primary" type=submit>Submit</button>
</form>
</main>
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
<script
Modify with-page and questionnaire docs
2024-01-27 14:41:21 +01:00
src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js></script>
Update example code to properly write to file
2023-11-09 17:56:37 +01:00
</body>
</html>
Reference in a new issue Copy permalink