marcuskammer/dev.metalisp.sbt
1
1
Fork 0
Code Issues 1 Pull requests Projects 1 Releases Packages Wiki Activity Actions

Update docs

Browse source
This commit is contained in:
Marcus Kammer 2024-04-21 22:01:47 +02:00
parent 5d273e1d19
commit cd60d7bdba
Signed by: marcuskammer
GPG key ID: C374817BE285268F
2 changed files with 43 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
docs/pattern/questionnaire-page.html
View file

@ -10,10 +10,10 @@
<body> <body>
<h1 class=visually-hidden>Questionnaire Example</h1> <h1 class=visually-hidden>Questionnaire Example</h1>
<main class=container> <main class=container>
<form class=py-5 action=/submit method=post> <form class=py-5 action=# method=post>
<fieldset> <fieldset>
<legend>How old are you?</legend> <legend>How old are you?</legend>
<ol> <ol style="list-style-type: none">
<li> <li>
<!-- FORM/CHECKABLE --> <!-- FORM/CHECKABLE -->
<div class=form-check> <div class=form-check>
@ -50,11 +50,10 @@
id=group-age-55> 55+</label> id=group-age-55> 55+</label>
</div> </div>
</ol> </ol>
<hr class=my-4>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Gender</legend> <legend>Gender</legend>
<ol> <ol style="list-style-type: none">
<li> <li>
<!-- FORM/CHECKABLE --> <!-- FORM/CHECKABLE -->
<div class=form-check> <div class=form-check>
@ -93,18 +92,18 @@
value=other id=group-gender-other> Other</label> value=other id=group-gender-other> Other</label>
</div> </div>
<li> <li>
<!-- FORM/CTRL --> <!-- FORM/CTRL text gender -->
<div class=mb-3> <div class=mb-3>
<label class="form-label group-gender" for=group-gender-other>Other</label> <label class="form-label group-gender"
<input class=form-control id=group-gender-other type=text for=group-gender-pleasespecify>Please specify</label>
<input class=form-control id=group-gender-pleasespecify type=text
name=group-gender> name=group-gender>
</div> </div>
</ol> </ol>
<hr class=my-4>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>How many hours per day, on average, do you spend browsing the internet?</legend> <legend>How many hours per day, on average, do you spend browsing the internet?</legend>
<ol> <ol style="list-style-type: none">
<li> <li>
<!-- FORM/CHECKABLE --> <!-- FORM/CHECKABLE -->
<div class=form-check> <div class=form-check>
@ -138,11 +137,10 @@
value=5+-hours id=group-webbrowsing-5hours> 5+ hours</label> value=5+-hours id=group-webbrowsing-5hours> 5+ hours</label>
</div> </div>
</ol> </ol>
<hr class=my-4>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>What are your favorite brands?</legend> <legend>What are your favorite brands?</legend>
<ol> <ol style="list-style-type: none">
<li> <li>
<!-- FORM/CHECKABLE --> <!-- FORM/CHECKABLE -->
<div class=form-check> <div class=form-check>
@ -172,18 +170,25 @@
value=none id=group-brands-none> None</label> value=none id=group-brands-none> None</label>
</div> </div>
<li> <li>
<!-- FORM/CTRL --> <!-- 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 -->
<div class=mb-3> <div class=mb-3>
<label class="form-label group-brands" for=group-brands-other>Other</label> <label class="form-label group-brands"
<input class=form-control id=group-brands-other type=text for=group-brands-pleasespecify>Please specify</label>
<input class=form-control id=group-brands-pleasespecify type=text
name=group-brands> name=group-brands>
</div> </div>
</ol> </ol>
<hr class=my-4>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>How often do you shop online?</legend> <legend>How often do you shop online?</legend>
<ol> <ol style="list-style-type: none">
<li> <li>
<!-- FORM/CHECKABLE --> <!-- FORM/CHECKABLE -->
<div class=form-check> <div class=form-check>
@ -225,11 +230,10 @@
value=never id=group-shopping-never> Never</label> value=never id=group-shopping-never> Never</label>
</div> </div>
</ol> </ol>
<hr class=my-4>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Which of the following devices do you own?</legend> <legend>Which of the following devices do you own?</legend>
<ol> <ol style="list-style-type: none">
<li> <li>
<!-- FORM/CHECKABLE --> <!-- FORM/CHECKABLE -->
<div class=form-check> <div class=form-check>
@ -270,11 +274,10 @@
value=none id=group-devices-none> None</label> value=none id=group-devices-none> None</label>
</div> </div>
</ol> </ol>
<hr class=my-4>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>What is your preferred method of payment for online purchases?</legend> <legend>What is your preferred method of payment for online purchases?</legend>
<ol> <ol style="list-style-type: none">
<li> <li>
<!-- FORM/CHECKABLE --> <!-- FORM/CHECKABLE -->
<div class=form-check> <div class=form-check>
@ -316,11 +319,10 @@
value=cryptocurrency id=group-payment-cryptocurrency> Cryptocurrency</label> value=cryptocurrency id=group-payment-cryptocurrency> Cryptocurrency</label>
</div> </div>
</ol> </ol>
<hr class=my-4>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>Which social media platforms do you use regularly?</legend> <legend>Which social media platforms do you use regularly?</legend>
<ol> <ol style="list-style-type: none">
<li> <li>
<!-- FORM/CHECKABLE --> <!-- FORM/CHECKABLE -->
<div class=form-check> <div class=form-check>
@ -370,19 +372,26 @@
value=none id=group-socialmedia-none> None</label> value=none id=group-socialmedia-none> None</label>
</div> </div>
<li> <li>
<!-- FORM/CTRL --> <!-- 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 -->
<div class=mb-3> <div class=mb-3>
<label class="form-label group-socialmedia" <label class="form-label group-socialmedia"
for=group-socialmedia-other>Other</label> for=group-socialmedia-pleasespecify>Please specify</label>
<input class=form-control id=group-socialmedia-other type=text <input class=form-control id=group-socialmedia-pleasespecify
name=group-socialmedia> type=text name=group-socialmedia>
</div> </div>
</ol> </ol>
<hr class=my-4>
</fieldset> </fieldset>
<fieldset> <fieldset>
<legend>How do you usually consume news?</legend> <legend>How do you usually consume news?</legend>
<ol> <ol style="list-style-type: none">
<li> <li>
<!-- FORM/CHECKABLE --> <!-- FORM/CHECKABLE -->
<div class=form-check> <div class=form-check>
@ -434,7 +443,6 @@
value=none id=group-newsconsumption-none> None</label> value=none id=group-newsconsumption-none> None</label>
</div> </div>
</ol> </ol>
<hr class=my-4>
</fieldset> </fieldset>
<button class="btn btn-primary" type=submit>Submit</button> <button class="btn btn-primary" type=submit>Submit</button>
</form> </form>

12
docs/pattern/questionnaire.org
View file

@ -1,7 +1,7 @@
#+title: Creating a Questionnaire using dev.metalisp.sbt/component/questionnaire Macros in a Web Application #+title: Creating a Questionnaire using dev.metalisp.sbt/component/questionnaire Macros in a Web Application
#+author: Marcus Kammer #+author: Marcus Kammer
#+email: marcus.kammer@mailbox.org #+email: marcus.kammer@mailbox.org
#+date: [2024-04-17 09:36] #+date: [2024-04-21 18:55]
* Introduction * Introduction
Questionnaires are powerful tools for gathering information and insights from Questionnaires are powerful tools for gathering information and insights from
@ -39,7 +39,7 @@ required for different types of questions in a questionnaire.
(defpackage my-web-questionnaire-app (defpackage my-web-questionnaire-app
(:use :cl) (:use :cl)
(:import-from :dev.metalisp.sbt :with-page) (:import-from :dev.metalisp.sbt :with-page)
(:import-from :dev.metalisp.sbt/pattern/questionnaire :questionnaire) (:import-from :dev.metalisp.sbt/questionnaire :questionnaire)
(:export :generate-questionnaire-page)) (:export :generate-questionnaire-page))
#+end_src #+end_src
@ -54,14 +54,14 @@ required for different types of questions in a questionnaire.
"Generates an HTML page with questionnaires using questionnaire macros." "Generates an HTML page with questionnaires using questionnaire macros."
(with-output-to-string (spinneret:*html*) (with-output-to-string (spinneret:*html*)
(with-page (:title "Questionnaire Example" :main-con t) (with-page (:title "Questionnaire Example" :main-con t)
(questionnaire "/submit" (questionnaire "#" "none"
(:ask "How old are you?" (:ask "How old are you?"
:group "age" :group "age"
:choices (:radio "18-24" "25-34" "35-44" "45-54" "55+")) :choices (:radio "18-24" "25-34" "35-44" "45-54" "55+"))
(:ask "Gender" (:ask "Gender"
:group "gender" :group "gender"
:choices (:radio "Male" "Female" "Non-binary" "Prefer not to say" "Other" :text "Other")) :choices (:radio "Male" "Female" "Non-binary" "Prefer not to say" "Other" :text "Please specify"))
(:ask "How many hours per day, on average, do you spend browsing the internet?" (:ask "How many hours per day, on average, do you spend browsing the internet?"
:group "webbrowsing" :group "webbrowsing"
@ -69,7 +69,7 @@ required for different types of questions in a questionnaire.
(:ask "What are your favorite brands?" (:ask "What are your favorite brands?"
:group "brands" :group "brands"
:choices (:checkbox "Brand A" "Brand B" "Brand C" "None" :text "Other")) :choices (:checkbox "Brand A" "Brand B" "Brand C" "None" "Other" :text "Please specify"))
(:ask "How often do you shop online?" (:ask "How often do you shop online?"
:group "shopping" :group "shopping"
@ -85,7 +85,7 @@ required for different types of questions in a questionnaire.
(:ask "Which social media platforms do you use regularly?" (:ask "Which social media platforms do you use regularly?"
:group "socialmedia" :group "socialmedia"
:choices (:checkbox "Facebook" "Twitter" "Instagram" "LinkedIn" "TikTok" "None" :text "Other")) :choices (:checkbox "Facebook" "Twitter" "Instagram" "LinkedIn" "TikTok" "None" "Other" :text "Please specify"))
(:ask "How do you usually consume news?" (:ask "How do you usually consume news?"
:group "newsconsumption" :group "newsconsumption"