Modify with-page and questionnaire docs
This commit is contained in:
parent
8127682042
commit
70251c7ec0
3 changed files with 148 additions and 152 deletions
|
|
@ -1,145 +1,149 @@
|
||||||
<html lang=en>
|
<!DOCTYPE html>
|
||||||
|
<html lang=en data-bs-theme=dark>
|
||||||
<head>
|
<head>
|
||||||
<meta charset=UTF-8>
|
<meta charset=utf-8>
|
||||||
<title>Questionnaire Examples</title>
|
<meta name=viewport content="width=device-width, initial-scale=1">
|
||||||
|
<title>Questionnaire Example</title>
|
||||||
<link rel=stylesheet type=text/css
|
<link rel=stylesheet type=text/css
|
||||||
href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css>
|
href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Questionnaire Examples</h1>
|
<h1 class=visually-hidden>Questionnaire Example</h1>
|
||||||
<form class=py-5 action=/submit method=post>
|
<main class=container>
|
||||||
<fieldset>
|
<form class=py-5 action=/submit method=post>
|
||||||
<legend>How old are you?</legend>
|
<fieldset>
|
||||||
<ol>
|
<legend>How old are you?</legend>
|
||||||
<li>
|
<ol>
|
||||||
<!-- FORM/CHECKABLE -->
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-age-1824 class="form-check-label group-age">
|
<label class="form-check-label group-age" for=group-age-1824>
|
||||||
<input class=form-check-input type=radio name=group-age value=18-24
|
<input class=form-check-input type=radio name=group-age value=18-24
|
||||||
id=group-age-1824> 18-24</label>
|
id=group-age-1824> 18-24</label>
|
||||||
</div>
|
</div>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CHECKABLE -->
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-age-2534 class="form-check-label group-age">
|
<label class="form-check-label group-age" for=group-age-2534>
|
||||||
<input class=form-check-input type=radio name=group-age value=25-34
|
<input class=form-check-input type=radio name=group-age value=25-34
|
||||||
id=group-age-2534> 25-34</label>
|
id=group-age-2534> 25-34</label>
|
||||||
</div>
|
</div>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CHECKABLE -->
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-age-3544 class="form-check-label group-age">
|
<label class="form-check-label group-age" for=group-age-3544>
|
||||||
<input class=form-check-input type=radio name=group-age value=35-44
|
<input class=form-check-input type=radio name=group-age value=35-44
|
||||||
id=group-age-3544> 35-44</label>
|
id=group-age-3544> 35-44</label>
|
||||||
</div>
|
</div>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CHECKABLE -->
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-age-4554 class="form-check-label group-age">
|
<label class="form-check-label group-age" for=group-age-4554>
|
||||||
<input class=form-check-input type=radio name=group-age value=45-54
|
<input class=form-check-input type=radio name=group-age value=45-54
|
||||||
id=group-age-4554> 45-54</label>
|
id=group-age-4554> 45-54</label>
|
||||||
</div>
|
</div>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CHECKABLE -->
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-age-55 class="form-check-label group-age">
|
<label class="form-check-label group-age" for=group-age-55>
|
||||||
<input class=form-check-input type=radio name=group-age value=55+
|
<input class=form-check-input type=radio name=group-age value=55+
|
||||||
id=group-age-55> 55+</label>
|
id=group-age-55> 55+</label>
|
||||||
</div>
|
</div>
|
||||||
</ol>
|
</ol>
|
||||||
<hr class=my-4>
|
<hr class=my-4>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Gender</legend>
|
<legend>Gender</legend>
|
||||||
<ol>
|
<ol>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CHECKABLE -->
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-gender-male class="form-check-label group-gender">
|
<label class="form-check-label group-gender" for=group-gender-male>
|
||||||
<input class=form-check-input type=radio name=group-gender
|
<input class=form-check-input type=radio name=group-gender
|
||||||
value=male id=group-gender-male> Male</label>
|
value=male id=group-gender-male> Male</label>
|
||||||
</div>
|
</div>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CHECKABLE -->
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-gender-female class="form-check-label group-gender">
|
<label class="form-check-label group-gender" for=group-gender-female>
|
||||||
<input class=form-check-input type=radio name=group-gender
|
<input class=form-check-input type=radio name=group-gender
|
||||||
value=female id=group-gender-female> Female</label>
|
value=female id=group-gender-female> Female</label>
|
||||||
</div>
|
</div>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CHECKABLE -->
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-gender-nonbinary
|
<label class="form-check-label group-gender"
|
||||||
class="form-check-label group-gender">
|
for=group-gender-nonbinary>
|
||||||
<input class=form-check-input type=radio name=group-gender
|
<input class=form-check-input type=radio name=group-gender
|
||||||
value=non-binary id=group-gender-nonbinary> Non-binary</label>
|
value=non-binary id=group-gender-nonbinary> Non-binary</label>
|
||||||
</div>
|
</div>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CHECKABLE -->
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-gender-prefernottosay
|
<label class="form-check-label group-gender"
|
||||||
class="form-check-label group-gender">
|
for=group-gender-prefernottosay>
|
||||||
<input class=form-check-input type=radio name=group-gender
|
<input class=form-check-input type=radio name=group-gender
|
||||||
value=prefer-not-to-say id=group-gender-prefernottosay> Prefer not to say</label>
|
value=prefer-not-to-say id=group-gender-prefernottosay> Prefer not to say</label>
|
||||||
</div>
|
</div>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CHECKABLE -->
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-gender-other class="form-check-label group-gender">
|
<label class="form-check-label group-gender" for=group-gender-other>
|
||||||
<input class=form-check-input type=radio name=group-gender
|
<input class=form-check-input type=radio name=group-gender
|
||||||
value=other id=group-gender-other> Other</label>
|
value=other id=group-gender-other> Other</label>
|
||||||
</div>
|
</div>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CTRL -->
|
<!-- FORM/CTRL -->
|
||||||
<div class=mb-3>
|
<div class=mb-3>
|
||||||
<label for=group-gender-other class="form-label group-gender">Other</label>
|
<label class="form-label group-gender" for=group-gender-other>Other</label>
|
||||||
<input class=form-control id=group-gender-other type=text
|
<input class=form-control id=group-gender-other type=text
|
||||||
name=group-gender>
|
name=group-gender>
|
||||||
</div>
|
</div>
|
||||||
</ol>
|
</ol>
|
||||||
<hr class=my-4>
|
<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>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CHECKABLE -->
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-webbrowsing-lessthan1hour
|
<label class="form-check-label group-webbrowsing"
|
||||||
class="form-check-label group-webbrowsing">
|
for=group-webbrowsing-lessthan1hour>
|
||||||
<input class=form-check-input type=radio name=group-webbrowsing
|
<input class=form-check-input type=radio name=group-webbrowsing
|
||||||
value=less-than-1-hour id=group-webbrowsing-lessthan1hour> Less than 1 hour</label>
|
value=less-than-1-hour id=group-webbrowsing-lessthan1hour> Less than 1 hour</label>
|
||||||
</div>
|
</div>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CHECKABLE -->
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-webbrowsing-13hours
|
<label class="form-check-label group-webbrowsing"
|
||||||
class="form-check-label group-webbrowsing">
|
for=group-webbrowsing-13hours>
|
||||||
<input class=form-check-input type=radio name=group-webbrowsing
|
<input class=form-check-input type=radio name=group-webbrowsing
|
||||||
value=1-3-hours id=group-webbrowsing-13hours> 1-3 hours</label>
|
value=1-3-hours id=group-webbrowsing-13hours> 1-3 hours</label>
|
||||||
</div>
|
</div>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CHECKABLE -->
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-webbrowsing-35hours
|
<label class="form-check-label group-webbrowsing"
|
||||||
class="form-check-label group-webbrowsing">
|
for=group-webbrowsing-35hours>
|
||||||
<input class=form-check-input type=radio name=group-webbrowsing
|
<input class=form-check-input type=radio name=group-webbrowsing
|
||||||
value=3-5-hours id=group-webbrowsing-35hours> 3-5 hours</label>
|
value=3-5-hours id=group-webbrowsing-35hours> 3-5 hours</label>
|
||||||
</div>
|
</div>
|
||||||
<li>
|
<li>
|
||||||
<!-- FORM/CHECKABLE -->
|
<!-- FORM/CHECKABLE -->
|
||||||
<div class=form-check>
|
<div class=form-check>
|
||||||
<label for=group-webbrowsing-5hours
|
<label class="form-check-label group-webbrowsing"
|
||||||
class="form-check-label group-webbrowsing">
|
for=group-webbrowsing-5hours>
|
||||||
<input class=form-check-input type=radio name=group-webbrowsing
|
<input class=form-check-input type=radio name=group-webbrowsing
|
||||||
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>
|
<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>
|
||||||
|
</main>
|
||||||
<script
|
<script
|
||||||
src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js></script>
|
src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
#+title: Creating a Questionnaire using cl-sbt/questionnaire Macros in a Web Application
|
#+title: Creating a Questionnaire using cl-sbt/questionnaire Macros in a Web Application
|
||||||
#+author: Marcus Kammer
|
#+author: Marcus Kammer
|
||||||
#+email: marcus.kammer@mailbox.org
|
#+email: marcus.kammer@mailbox.org
|
||||||
#+date: 2023-11-09T18:27+01:00
|
#+date: 2024-01-27T14:40+01:00
|
||||||
* Introduction
|
* Introduction
|
||||||
|
|
||||||
Questionnaires are powerful tools for gathering information and insights from
|
Questionnaires are powerful tools for gathering information and insights from
|
||||||
|
|
@ -31,35 +31,27 @@ required for different types of questions in a questionnaire.
|
||||||
#+name: questionnaire-page
|
#+name: questionnaire-page
|
||||||
#+begin_src lisp :results output file :file-ext html
|
#+begin_src lisp :results output file :file-ext html
|
||||||
(defpackage my-web-app
|
(defpackage my-web-app
|
||||||
(:use :cl :cl-sbt/questionnaire)
|
(:use :cl)
|
||||||
(:export :generate-button-page))
|
(:import-from :dev.metalisp.sbt :with-page)
|
||||||
|
(:import-from :dev.metalisp.sbt/pattern/questionnaire :questionnaire)
|
||||||
|
(:export :generate-button-page))
|
||||||
|
|
||||||
(in-package :my-web-app)
|
(in-package :my-web-app)
|
||||||
|
|
||||||
(defun generate-questionnaire-page ()
|
(defun generate-questionnaire-page ()
|
||||||
"Generates an HTML page with questionnaires using cl-sbt/questionnaire macros."
|
"Generates an HTML page with questionnaires using cl-sbt/questionnaire macros."
|
||||||
(spinneret:with-html-string
|
(with-output-to-string (spinneret:*html*)
|
||||||
(:html
|
(with-page (:title "Questionnaire Example" :main-con t)
|
||||||
(:head
|
(questionnaire "/submit"
|
||||||
(:title "Questionnaire Examples")
|
(:ask "How old are you?"
|
||||||
(:link :type "text/css"
|
:group "age"
|
||||||
:rel "stylesheet"
|
:choices (:radio "18-24" "25-34" "35-44" "45-54" "55+"))
|
||||||
:href "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"))
|
(:ask "Gender"
|
||||||
(:body
|
:group "gender"
|
||||||
(:h1 "Questionnaire Examples")
|
:choices (:radio "Male" "Female" "Non-binary" "Prefer not to say" "Other" :text "Other"))
|
||||||
;; ---
|
(:ask "How many hours per day, on average, do you spend browsing the internet?"
|
||||||
(questionnaire "/submit"
|
:group "webbrowsing"
|
||||||
(:ask "How old are you?"
|
:choices (:radio "Less than 1 hour" "1-3 hours" "3-5 hours" "5+ hours"))))))
|
||||||
:group "age"
|
|
||||||
:choices (:radio "18-24" "25-34" "35-44" "45-54" "55+"))
|
|
||||||
(:ask "Gender"
|
|
||||||
:group "gender"
|
|
||||||
:choices (:radio "Male" "Female" "Non-binary" "Prefer not to say" "Other" :text "Other"))
|
|
||||||
(:ask "How many hours per day, on average, do you spend browsing the internet?"
|
|
||||||
:group "webbrowsing"
|
|
||||||
:choices (:radio "Less than 1 hour" "1-3 hours" "3-5 hours" "5+ hours")))
|
|
||||||
;; ---
|
|
||||||
(:script :src "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js")))))
|
|
||||||
|
|
||||||
(format t (generate-questionnaire-page))
|
(format t (generate-questionnaire-page))
|
||||||
#+end_src
|
#+end_src
|
||||||
|
|
|
||||||
|
|
@ -69,9 +69,9 @@
|
||||||
(with-open-file (stream filename :direction :output :if-exists :supersede)
|
(with-open-file (stream filename :direction :output :if-exists :supersede)
|
||||||
(write-string string stream))))
|
(write-string string stream))))
|
||||||
|
|
||||||
(defmacro with-page ((&key meta title add-css-urls add-js-urls) &body body)
|
(defmacro with-page ((&key meta title main-con add-css-urls add-js-urls) &body body)
|
||||||
(unless title
|
(unless title
|
||||||
(error "Please add a title"))
|
(error "A page needs a title. Please add a title."))
|
||||||
`(spinneret:with-html
|
`(spinneret:with-html
|
||||||
(:doctype)
|
(:doctype)
|
||||||
(:html :data-bs-theme ,*color-theme*
|
(:html :data-bs-theme ,*color-theme*
|
||||||
|
|
@ -89,7 +89,7 @@
|
||||||
collect `(:link :type "text/css" :rel "stylesheet" :href ,url)))
|
collect `(:link :type "text/css" :rel "stylesheet" :href ,url)))
|
||||||
|
|
||||||
(:body (:h1 :class "visually-hidden" ,title)
|
(:body (:h1 :class "visually-hidden" ,title)
|
||||||
(:main ,@body)
|
(:main ,@(when main-con (list :class "container")) ,@body)
|
||||||
|
|
||||||
(:script :src ,(js-url))
|
(:script :src ,(js-url))
|
||||||
,@(loop for url in add-js-urls
|
,@(loop for url in add-js-urls
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue