Update questionnaire docs
This commit is contained in:
parent
d9cd7b121b
commit
6700382a78
1 changed files with 74 additions and 52 deletions
|
|
@ -1,8 +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-09-14 Thu]
|
#+date: [2023-09-15 Fri]
|
||||||
|
|
||||||
* Introduction
|
* Introduction
|
||||||
|
|
||||||
Questionnaires are powerful tools for gathering information and insights from
|
Questionnaires are powerful tools for gathering information and insights from
|
||||||
|
|
@ -29,56 +28,79 @@ To create a questionnaire in your Common Lisp web application,
|
||||||
cl-sbt/questionnaire macros can be employed. These macros generate the HTML
|
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.
|
||||||
|
|
||||||
#+begin_src lisp :results none
|
#+begin_src lisp
|
||||||
(defpackage feat-questionnaire
|
(defpackage my-web-app
|
||||||
(:use :cl)
|
(:use :cl :cl-sbt/questionnaire)
|
||||||
(:import-from
|
(:export :generate-button-page))
|
||||||
:cl-sbt
|
|
||||||
:with-page
|
|
||||||
:write-html-to-file)
|
|
||||||
(:import-from
|
|
||||||
:cl-sbt/grid
|
|
||||||
:con)
|
|
||||||
(:import-from
|
|
||||||
:cl-sbt/questionnaire
|
|
||||||
:questionnaire))
|
|
||||||
|
|
||||||
(in-package :feat-questionnaire)
|
(in-package :my-web-app)
|
||||||
|
|
||||||
(write-html-to-file "questionnaire.html"
|
(defun generate-questionnaire-page ()
|
||||||
(spinneret:with-html-string
|
"Generates an HTML page with questionnaires using cl-sbt/questionnaire macros."
|
||||||
(with-page (:author "Marcus Kammer" :pagetitle "Questionnaire Example")
|
(spinneret:with-html-string
|
||||||
(con ()
|
(:html
|
||||||
(questionnaire "/submit"
|
(:head
|
||||||
(:ask "How old are you?"
|
(:title "Questionnaire Examples")
|
||||||
:group "age"
|
;; Include Bootstrap CSS and JavaScript links here
|
||||||
:choices (:single "18-24" "25-34" "35-44" "45-54" "55+"))
|
)
|
||||||
(:ask "Your Gender?"
|
(:body
|
||||||
:group "gender"
|
(:h1 "Questionnaire Examples")
|
||||||
:choices (:single "Male" "Female" "Non-Binary" "Prefer not to say"))
|
(questionnaire "/submit"
|
||||||
(:ask "How many hours per day, on average, do you spend browsing the internet?"
|
(:ask "What is your favorite color?"
|
||||||
:group "internet"
|
:group "favcolor"
|
||||||
:choices (:single "Less than 1 hour" "1-3 hours" "3-5 hours" "5+ hours"))
|
:choices (:radio "Red" "Green" "Blue")))
|
||||||
(:ask "Which of the following devices do you regularly use to browse the internet? (Select all that apply)"
|
;; Include Bootstrap JavaScript initialization script here
|
||||||
:group "devices"
|
))))
|
||||||
:choices (:multiple
|
|
||||||
"Desktop"
|
(generate-questionnaire-page)
|
||||||
"Laptop"
|
|
||||||
"Tablet"
|
|
||||||
"Smartphone"
|
|
||||||
:text
|
|
||||||
"Others (please specify):"))
|
|
||||||
(:ask "Which social media platforms do you use regularly? (Select all that apply)"
|
|
||||||
:group "socialmedia"
|
|
||||||
:choices (:multiple
|
|
||||||
"Facebook"
|
|
||||||
"Twitter"
|
|
||||||
"Instagram"
|
|
||||||
"LinkedIn"
|
|
||||||
"TikTok"
|
|
||||||
"Snapchat"
|
|
||||||
"Pinterest"
|
|
||||||
"Youtube"
|
|
||||||
:text
|
|
||||||
"Others (please specify):")))))))
|
|
||||||
#+end_src
|
#+end_src
|
||||||
|
|
||||||
|
#+RESULTS:
|
||||||
|
#+begin_example
|
||||||
|
<html lang=en>
|
||||||
|
<head>
|
||||||
|
<meta charset=UTF-8>
|
||||||
|
<title>Questionnaire Examples</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Questionnaire Examples</h1>
|
||||||
|
<form class=py-5 action=/submit method=post>
|
||||||
|
<fieldset>
|
||||||
|
<legend>What is your favorite color?</legend>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label for=group-favcolor-red
|
||||||
|
class="form-check-label group-favcolor">
|
||||||
|
<input class=form-check-input type=radio name=group-favcolor
|
||||||
|
value=red id=group-favcolor-red> Red</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label for=group-favcolor-green
|
||||||
|
class="form-check-label group-favcolor">
|
||||||
|
<input class=form-check-input type=radio name=group-favcolor
|
||||||
|
value=green id=group-favcolor-green> Green</label>
|
||||||
|
</div>
|
||||||
|
<li>
|
||||||
|
<!-- FORM/CHECKABLE -->
|
||||||
|
<div class=form-check>
|
||||||
|
<label for=group-favcolor-blue
|
||||||
|
class="form-check-label group-favcolor">
|
||||||
|
<input class=form-check-input type=radio name=group-favcolor
|
||||||
|
value=blue id=group-favcolor-blue> Blue</label>
|
||||||
|
</div>
|
||||||
|
</ol>
|
||||||
|
<hr class=my-4>
|
||||||
|
</fieldset>
|
||||||
|
<button class="btn btn-primary" type=submit>Submit</button>
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
#+end_example
|
||||||
|
|
||||||
|
This example demonstrates the integration of the cl-sbt/questionnaire macros into a
|
||||||
|
web application. The macros assist in generating the required HTML for
|
||||||
|
different types of Bootstrap questionnaires.
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue