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

Update example code to properly write to file

Browse source
This commit is contained in:
Marcus Kammer 2023-11-09 17:56:37 +01:00
parent 841fb6ac80
commit 87c23ecac9
Signed by: marcuskammer
GPG key ID: C374817BE285268F
2 changed files with 173 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
docs/pattern/questionnaire-page.html Normal file
View file

@ -0,0 +1,145 @@
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Questionnaire Examples</title>
<link rel=stylesheet type=text/css
href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css>
</head>
<body>
<h1>Questionnaire Examples</h1>
<form class=py-5 action=/submit method=post>
<fieldset>
<legend>How old are you?</legend>
<ol>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label for=group-age-1824 class="form-check-label group-age">
<input class=form-check-input type=radio name=group-age value=18-24
id=group-age-1824> 18-24</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label for=group-age-2534 class="form-check-label group-age">
<input class=form-check-input type=radio name=group-age value=25-34
id=group-age-2534> 25-34</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label for=group-age-3544 class="form-check-label group-age">
<input class=form-check-input type=radio name=group-age value=35-44
id=group-age-3544> 35-44</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label for=group-age-4554 class="form-check-label group-age">
<input class=form-check-input type=radio name=group-age value=45-54
id=group-age-4554> 45-54</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label for=group-age-55 class="form-check-label group-age">
<input class=form-check-input type=radio name=group-age value=55+
id=group-age-55> 55+</label>
</div>
</ol>
<hr class=my-4>
</fieldset>
<fieldset>
<legend>Gender</legend>
<ol>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label for=group-gender-male class="form-check-label group-gender">
<input class=form-check-input type=radio name=group-gender
value=male id=group-gender-male> Male</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label for=group-gender-female class="form-check-label group-gender">
<input class=form-check-input type=radio name=group-gender
value=female id=group-gender-female> Female</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label for=group-gender-nonbinary
class="form-check-label group-gender">
<input class=form-check-input type=radio name=group-gender
value=non-binary id=group-gender-nonbinary> Non-binary</label>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label for=group-gender-prefernottosay
class="form-check-label 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>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label for=group-gender-other class="form-check-label group-gender">
<input class=form-check-input type=radio name=group-gender
value=other id=group-gender-other> Other</label>
</div>
<li>
<!-- FORM/CTRL -->
<div class=mb-3>
<label for=group-gender-other class="form-label group-gender">Other</label>
<input class=form-control id=group-gender-other type=text
name=group-gender>
</div>
</ol>
<hr class=my-4>
</fieldset>
<fieldset>
<legend>How many hours per day, on average, do you spend browsing the internet?</legend>
<ol>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label for=group-webbrowsing-lessthan1hour
class="form-check-label 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>
</div>
<li>
<!-- FORM/CHECKABLE -->
<div class=form-check>
<label for=group-webbrowsing-13hours
class="form-check-label group-webbrowsing">
<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 -->
<div class=form-check>
<label for=group-webbrowsing-35hours
class="form-check-label group-webbrowsing">
<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 -->
<div class=form-check>
<label for=group-webbrowsing-5hours
class="form-check-label group-webbrowsing">
<input class=form-check-input type=radio name=group-webbrowsing
value=5+-hours id=group-webbrowsing-5hours> 5+ hours</label>
</div>
</ol>
<hr class=my-4>
</fieldset>
<button class="btn btn-primary" type=submit>Submit</button>
</form>
<script
src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js></script>
</body>
</html>

55
docs/pattern/questionnaire.org
View file

@ -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-09T16:17+01:00 #+date: 2023-11-09T16:51+01:00
* Introduction * Introduction
Questionnaires are powerful tools for gathering information and insights from Questionnaires are powerful tools for gathering information and insights from
@ -29,38 +29,39 @@ cl-sbt/questionnaire macros can be employed. These macros generate the HTML
required for different types of questions in a questionnaire. required for different types of questions in a questionnaire.
#+name: questionnaire-page #+name: questionnaire-page
#+begin_src lisp :results value 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 :cl-sbt/questionnaire)
(:export :generate-button-page)) (: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 (spinneret:with-html-string
(:html (:html
(:head (:head
(:title "Questionnaire Examples") (:title "Questionnaire Examples")
(:link :type "text/css" :rel "stylesheet" :href "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css") (:link :type "text/css"
;; Include Bootstrap CSS and JavaScript links here :rel "stylesheet"
) :href "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"))
(:body (:body
(:h1 "Questionnaire Examples") (:h1 "Questionnaire Examples")
(questionnaire "/submit" ;; ---
(:ask "How old are you?" (questionnaire "/submit"
:group "age" (:ask "How old are you?"
:choices (:radio "18-24" "25-34" "35-44" "45-54" "55+")) :group "age"
(:ask "Gender" :choices (:radio "18-24" "25-34" "35-44" "45-54" "55+"))
:group "gender" (:ask "Gender"
:choices (:radio "Male" "Female" "Non-binary" "Prefer not to say" :text "Other")) :group "gender"
(:ask "How many hours per day, on average, do you spend browsing the internet?" :choices (:radio "Male" "Female" "Non-binary" "Prefer not to say" "Other" :text "Other"))
:group "webbrowsing" (:ask "How many hours per day, on average, do you spend browsing the internet?"
:choices (:radio "Less than 1 hour" "1-3 hours" "3-5 hours" "5+ hours"))) :group "webbrowsing"
(:script :src "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js") :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")))))
(generate-questionnaire-page) (format t (generate-questionnaire-page))
#+end_src #+end_src
#+RESULTS: questionnaire-page #+RESULTS: questionnaire-page