brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add dont care option to make survey UX more understandable

Browse Source
This commit is contained in:
Brandon Egger 2023-04-11 01:28:07 -05:00
parent 4f6882492d
commit 78e61293ee
2 changed files with 41 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Survey.tsx
View File

@ -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} />
);
}

1
src/pages/resources/survey.tsx
View File

@ -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: [
{