sample-survey.clj

{:product/type :product.type/ebp
 :product/name "Teen Intervene"
 :product/surveys
 [{:survey/type :survey.type/pre
   :survey/title "Pre-Test"
   :survey/version 3
   :survey/questions
   [{:question/id 2030
     :question/text "Do you smoke?"
     :question/type :question.type/single-option
     :question/answers
     [{:answer/text "Yes"
       :answer/value 1}
      {:answer/text "No"
       :answer/value 0}
      {:answer/text "Participant Did Not Answer"
       :answer/value -1}]}
    {:question/id 2031
     :question/text "How often do you smoke?"
     :question/type :question.type/single-option
     :question/dependency
     {:question.dependency/id 2030
      :question.dependency/value 1}
     :question/answers
     [{:answer/text "Several times a day"
       :answer/value 1}
      {:answer/text "Once a day"
       :answer/value 2}
      {:answer/text "A few times a week"
       :answer/value 3}
      {:answer/text "Rarely"
       :answer/value 4}
      {:answer/text "I never smoke"
       :answer/value 0}
      {:answer/text "Participant did not answer"
       :answer/value -1}]}]}]}

ui.clj

;; these are React components that render differently
;; depending on the data model values (e.g. question type)

(defmulti survey-answer
  (fn [question-type question-id answer] question-type))

(defmethod survey-answer :question.type/single-option
  [_ qid {text :answer/text value :answer/value}]
  [:label
   [:input {:type "radio" :name (str "question-" qid) :value value}]
   [:span text]])

(defmethod survey-answer :question.type/multi-option
  [_ qid {text :answer/text value :answer/value}]
  [:label
   [:input {:type "checkbox" :name (str "question-" qid) :value value}]
   [:span text]])

(defmethod survey-answer :question.type/list
  [_ _ {text :answer/text value :answer/value}]
  [:option {:value value} text])

(defmulti survey-question :question/type)

(defmethod survey-question :question.type/list
  [{id      :question/id
    text    :question/text
    type    :question/type
    answers :question/answers}]
  [:div.question
   [:h3 text]
   [:select {:id (str "question-" id)}
    (map (partial survey-answer type id) answers)]])

(defmethod survey-question :default
  [{id      :question/id
    text    :question/text
    type    :question/type
    answers :question/answers}]
  [:div.question
   [:h3 text]
   (map (partial survey-answer type id) answers)])

;; ================================================================
;; render mutually-exclusive radio buttons
(survey-question {:question/id 2030
                  :question/text "Do you smoke?"
                  :question/type :question.type/single-option
                  :question/answers
                  [{:answer/text "Yes"
                    :answer/value 1}
                   {:answer/text "No"
                    :answer/value 0}
                   {:answer/text "Participant Did Not Answer"
                    :answer/value -1}]})
;; =>
;; [:div.question
;;  [:h3 "Do you smoke?"]
;;  ([:label
;;    [:input {:type "radio", :name "question-2030", :value 1}]
;;    [:span "Yes"]]
;;   [:label
;;    [:input {:type "radio", :name "question-2030", :value 0}]
;;    [:span "No"]]
;;   [:label
;;    [:input {:type "radio", :name "question-2030", :value -1}]
;;    [:span "Participant Did Not Answer"]])]
;;
;; ===============================================================
;; render mutliple checkboxes
(survey-question {:question/id 2030
                  :question/text "Do you smoke?"
                  :question/type :question.type/multi-option
                  :question/answers
                  [{:answer/text "Yes"
                    :answer/value 1}
                   {:answer/text "No"
                    :answer/value 0}
                   {:answer/text "Participant Did Not Answer"
                    :answer/value -1}]})
;; =>
;; [:div.question
;;  [:h3 "Do you smoke?"]
;;  ([:label
;;    [:input {:type "checkbox", :name "question-2030", :value 1}]
;;    [:span "Yes"]]
;;   [:label
;;    [:input {:type "checkbox", :name "question-2030", :value 0}]
;;    [:span "No"]]
;;   [:label
;;    [:input {:type "checkbox", :name "question-2030", :value -1}]
;;    [:span "Participant Did Not Answer"]])]
;;
;; ================================================================

;; ================================================================
;; render dropdown box
(survey-question {:question/id 2030
                  :question/text "Do you smoke?"
                  :question/type :question.type/list
                  :question/answers
                  [{:answer/text "Yes"
                    :answer/value 1}
                   {:answer/text "No"
                    :answer/value 0}
                   {:answer/text "Participant Did Not Answer"
                    :answer/value -1}]})
;; =>
;; [:div.question
;;  [:h3 "Do you smoke?"]
;;  [:select {:id "question-2030"}
;;   ([:option {:value 1} "Yes"]
;;    [:option {:value 0} "No"]
;;    [:option {:value -1} "Participant Did Not Answer"])]]
;;
;; ================================================================

ignore the duplication, it's trivial to get rid of (e.g. (input-item :type "radio" :name (str "question-" qid) :value value :text text))

also, the survey question duplication can be gotten rid of by having a function do the inner work which takes an optional "context" or "wrapper" vector (the [:select]). If it's not nil, then the answers are (conj)d onto the end of the vector. voila, no more duplication in survey-question...