From 78e61293ee1d06e29aa871659bd71cccf29c7331 Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Tue, 11 Apr 2023 01:28:07 -0500
Subject: [PATCH] add dont care option to make survey UX more understandable
---
src/components/Survey.tsx | 42 ++++++++++++++++++++++++++++++++--
src/pages/resources/survey.tsx | 1 +
2 files changed, 41 insertions(+), 2 deletions(-)
diff --git a/src/components/Survey.tsx b/src/components/Survey.tsx
index 1762cb7..c9f7a32 100644
--- a/src/components/Survey.tsx
+++ b/src/components/Survey.tsx
@@ -12,6 +12,7 @@ export interface Question<T> {
for: string,
header: string,
question: string,
+ maxSelect?: number,
optional: true,
options: Option<T>[]
}
@@ -35,14 +36,19 @@ const GreetingPage = ({updatePage}: {
/**
* Single question component for a guided survey
*/
-const QuestionPage = ({isLastPage, page, question, updatePage, formData, updateFormData}: {
+const QuestionPage = ({isLastPage, page, question, updatePage, formData, updateFormData, dontCareData, setDontCareData}: {
isLastPage: boolean,
page: number,
question: Question<QuestionTypes>,
updatePage: (pageNumber: number) => void,
formData: Record<string, QuestionTypes[]>,
updateFormData: Dispatch<SetStateAction<Record<string, QuestionTypes[]>>>,
+ dontCareData: Record<string, boolean>,
+ setDontCareData: Dispatch<SetStateAction<Record<string, boolean>>>,
+
}) => {
+ const dontCare = dontCareData[question.for] ?? false;
+
const OptionToggle = ({option}: {option: Option<QuestionTypes>}) => {
const selected = formData[question.for]?.includes(option.value) ?? false;
@@ -64,6 +70,14 @@ const QuestionPage = ({isLastPage, page, question, updatePage, formData, updateF
updateFormData(newFormData);
}
+ if (dontCare) {
+ return (
+ <button disabled type="button" onClick={handleToggle} className={"mx-auto w-64 py-2 shadow rounded-lg border border-neutral-400 " + (selected ? "bg-amber-200" : "bg-white")}>
+ {option.label}
+ </button>
+ )
+ }
+
return (
<button type="button" onClick={handleToggle} className={"mx-auto w-64 py-2 shadow rounded-lg border border-neutral-400 " + (selected ? "bg-amber-200" : "bg-white")}>
{option.label}
@@ -80,6 +94,24 @@ const QuestionPage = ({isLastPage, page, question, updatePage, formData, updateF
}
});
+ const dontCareToggle = () => {
+ if (formData[question.for]) {
+ const newFormData = {
+ ...formData
+ };
+
+ newFormData[question.for] = [];
+ updateFormData(newFormData);
+ }
+
+ const newDontCareData = {
+ ...dontCareData
+ }
+
+ newDontCareData[question.for] = !dontCare;
+ setDontCareData(newDontCareData);
+ }
+
const nextClick = () => {
updatePage(page + 1);
}
@@ -120,6 +152,11 @@ const QuestionPage = ({isLastPage, page, question, updatePage, formData, updateF
);
})}
</section>
+ {question.optional ?
+ <button type="button" onClick={dontCareToggle} className={"mx-auto w-64 py-2 shadow rounded-lg border border-neutral-400 " + (dontCare ? "bg-amber-200" : "bg-white")}>
+ No Preference
+ </button>
+ : undefined}
<AdvanceButtons />
</div>
)
@@ -152,6 +189,7 @@ const GuidedSurvey = ({questions}: {
}) => {
const [page, setPage] = useState<number>(0);
const [formData, setFormData] = useState<(Record<string, QuestionTypes[]>)>({});
+ const [dontCareData, setDoneCareData] = useState<(Record<string, boolean>)>({});
const [previousPage, setPreviousPage] = useState<number | undefined>(undefined);
const updatePage = (pageNumber: number) => {
@@ -180,7 +218,7 @@ const GuidedSurvey = ({questions}: {
const isLastPage = pageNumber === questions.length
return (
- <QuestionPage isLastPage={isLastPage} page={page} formData={formData} updateFormData={setFormData} updatePage={updatePage} question={question} />
+ <QuestionPage dontCareData={dontCareData} setDontCareData={setDoneCareData} isLastPage={isLastPage} page={page} formData={formData} updateFormData={setFormData} updatePage={updatePage} question={question} />
);
}
diff --git a/src/pages/resources/survey.tsx b/src/pages/resources/survey.tsx
index 2a757d0..19ae224 100644
--- a/src/pages/resources/survey.tsx
+++ b/src/pages/resources/survey.tsx
@@ -6,6 +6,7 @@ const questions: Question<QuestionTypes>[] = [
for: "ages",
header: "Age of Patient",
question: "How old is the patient?",
+ maxSelect: 1,
optional: true,
options: [
{