2023-09-14 15:00:36 +02:00
|
|
|
#+title: Creating a Questionnaire using cl-sbt/questionnaire Macros in a Web Application
|
|
|
|
|
#+author: Marcus Kammer
|
|
|
|
|
#+email: marcus.kammer@mailbox.org
|
2023-09-15 10:32:46 +02:00
|
|
|
#+date: [2023-09-15 Fri]
|
2023-09-14 15:00:36 +02:00
|
|
|
* Introduction
|
|
|
|
|
|
|
|
|
|
Questionnaires are powerful tools for gathering information and insights from
|
|
|
|
|
users. They are crucial for understanding user behaviors, preferences, and
|
|
|
|
|
requirements. This document will demonstrate how to build a web-based
|
|
|
|
|
questionnaire using the cl-sbt/questionnaire macros in a Common Lisp
|
|
|
|
|
application.
|
|
|
|
|
|
|
|
|
|
** The Importance of Questionnaires
|
|
|
|
|
|
|
|
|
|
Questionnaires help in collecting data for various purposes including market
|
|
|
|
|
research, user experience study, and many more. They can be in multiple formats
|
|
|
|
|
like single-choice, multiple-choice, or open-ended questions.
|
|
|
|
|
|
|
|
|
|
*** Types of Questions
|
|
|
|
|
|
|
|
|
|
- Single Choice: Questions that allow one answer.
|
|
|
|
|
- Multiple Choice: Questions that allow multiple answers.
|
|
|
|
|
- Text: Open-ended questions for free text input.
|
|
|
|
|
|
|
|
|
|
* Integrating cl-sbt/questionnaire Macros
|
|
|
|
|
|
|
|
|
|
To create a questionnaire in your Common Lisp web application,
|
|
|
|
|
cl-sbt/questionnaire macros can be employed. These macros generate the HTML
|
|
|
|
|
required for different types of questions in a questionnaire.
|
2023-08-25 22:01:32 +02:00
|
|
|
|
2023-09-15 10:32:46 +02:00
|
|
|
#+begin_src lisp
|
|
|
|
|
(defpackage my-web-app
|
|
|
|
|
(:use :cl :cl-sbt/questionnaire)
|
|
|
|
|
(:export :generate-button-page))
|
|
|
|
|
|
|
|
|
|
(in-package :my-web-app)
|
2023-08-25 22:01:32 +02:00
|
|
|
|
2023-09-15 10:32:46 +02:00
|
|
|
(defun generate-questionnaire-page ()
|
|
|
|
|
"Generates an HTML page with questionnaires using cl-sbt/questionnaire macros."
|
|
|
|
|
(spinneret:with-html-string
|
|
|
|
|
(:html
|
|
|
|
|
(:head
|
|
|
|
|
(:title "Questionnaire Examples")
|
|
|
|
|
;; Include Bootstrap CSS and JavaScript links here
|
|
|
|
|
)
|
|
|
|
|
(:body
|
|
|
|
|
(:h1 "Questionnaire Examples")
|
|
|
|
|
(questionnaire "/submit"
|
|
|
|
|
(:ask "What is your favorite color?"
|
|
|
|
|
:group "favcolor"
|
|
|
|
|
:choices (:radio "Red" "Green" "Blue")))
|
|
|
|
|
;; Include Bootstrap JavaScript initialization script here
|
|
|
|
|
))))
|
2023-08-25 22:01:32 +02:00
|
|
|
|
2023-09-15 10:32:46 +02:00
|
|
|
(generate-questionnaire-page)
|
2023-08-25 22:01:32 +02:00
|
|
|
#+end_src
|
2023-09-15 10:32:46 +02:00
|
|
|
|
|
|
|
|
#+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.
|
