From 03df021fbffa9f17c7af09800c1a6051ffd5b8ce Mon Sep 17 00:00:00 2001 From: Chase Nelson Date: Mon, 14 Oct 2024 18:27:53 -0600 Subject: [PATCH] feat: add descriptive for question types (#3356) Co-authored-by: Matthias Nannt Co-authored-by: Johannes --- .../edit/components/AddQuestionButton.tsx | 21 +++++++++---- packages/lib/utils/questions.tsx | 30 +++++++++---------- 2 files changed, 31 insertions(+), 20 deletions(-) diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddQuestionButton.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddQuestionButton.tsx index fe73f85705..d7ac66d5b0 100644 --- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddQuestionButton.tsx +++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/AddQuestionButton.tsx @@ -21,6 +21,7 @@ interface AddQuestionButtonProps { export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestionButtonProps) => { const [open, setOpen] = useState(false); + const [hoveredQuestionId, setHoveredQuestionId] = useState(null); const availableQuestionTypes = isCxMode ? CXQuestionTypes : questionTypes; @@ -30,7 +31,7 @@ export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestio onOpenChange={setOpen} className={cn( open ? "shadow-lg" : "shadow-md", - "group w-full space-y-2 rounded-lg border border-slate-300 bg-white duration-300 hover:cursor-pointer hover:bg-slate-50" + "group w-full space-y-2 rounded-lg border border-slate-300 bg-white duration-200 hover:cursor-pointer hover:bg-slate-50" )}>
@@ -49,7 +50,7 @@ export const AddQuestionButton = ({ addQuestion, product, isCxMode }: AddQuestio ))} diff --git a/packages/lib/utils/questions.tsx b/packages/lib/utils/questions.tsx index b94c47003a..fc338bf7ab 100644 --- a/packages/lib/utils/questions.tsx +++ b/packages/lib/utils/questions.tsx @@ -50,7 +50,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.OpenText, label: "Free text", - description: "Ask for a text-based answer", + description: "Collect open-ended feedback", icon: MessageSquareTextIcon, preset: { headline: { default: "Who let the dogs out?" }, @@ -62,7 +62,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.MultipleChoiceSingle, label: "Single-Select", - description: "A single choice from a list of options (radio buttons)", + description: "Offer a list of options (choose one)", icon: Rows3Icon, preset: { headline: { default: "What do you do?" }, @@ -76,7 +76,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.MultipleChoiceMulti, label: "Multi-Select", - description: "Number of choices from a list of options (checkboxes)", + description: "Offer a list of options (choose multiple)", icon: ListIcon, preset: { headline: { default: "What's important on vacay?" }, @@ -91,7 +91,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.PictureSelection, label: "Picture Selection", - description: "Ask respondents to select one or more pictures", + description: "Ask respondents to choose one or more images", icon: ImageIcon, preset: { headline: { default: "Which is the cutest puppy?" }, @@ -111,7 +111,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.Rating, label: "Rating", - description: "Ask respondents for a rating", + description: "Ask respondents for a rating (stars, smileys, numbers)", icon: StarIcon, preset: { headline: { default: "How would you rate {{productName}}" }, @@ -124,7 +124,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.NPS, label: "Net Promoter Score (NPS)", - description: "Rate satisfaction on a 0-10 scale", + description: "Measure Net-Promoter-Score (0-10)", icon: PresentationIcon, preset: { headline: { default: "How likely are you to recommend {{productName}} to a friend or colleague?" }, @@ -135,7 +135,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.Ranking, label: "Ranking", - description: "Allow respondents to rank items", + description: "Ask respondents to order items by preference or importance", icon: ListOrderedIcon, preset: { headline: { default: "What is most important for you in life?" }, @@ -151,7 +151,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.Matrix, label: "Matrix", - description: "This is a matrix question", + description: "Create a grid to rate multiple items on the same set of criteria", icon: Grid3X3Icon, preset: { headline: { default: "How much do you love these flowers?" }, @@ -162,7 +162,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.CTA, label: "Statement (Call to Action)", - description: "Prompt respondents to perform an action", + description: "Display information and prompt users to take a specific action", icon: MousePointerClickIcon, preset: { headline: { default: "You are one of our power users!" }, @@ -178,7 +178,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.Consent, label: "Consent", - description: "Ask respondents for consent", + description: "Ask to agree to terms, conditions, or data usage", icon: CheckIcon, preset: { headline: { default: "Terms and Conditions" }, @@ -189,7 +189,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.FileUpload, label: "File Upload", - description: "Allow respondents to upload a file", + description: "Enable respondents to upload documents, images, or other files", icon: ArrowUpFromLineIcon, preset: { headline: { default: "File Upload" }, @@ -199,7 +199,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.Date, label: "Date", - description: "Ask your users to select a date", + description: "Ask for a date selection", icon: CalendarDaysIcon, preset: { headline: { default: "When is your birthday?" }, @@ -209,7 +209,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.Cal, label: "Schedule a meeting", - description: "Allow respondents to schedule a meet", + description: "Ask respondents to book a time slot for meetings or calls", icon: PhoneIcon, preset: { headline: { default: "Schedule a call with me" }, @@ -219,7 +219,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.Address, label: "Address", - description: "Allow respondents to provide their address", + description: "Ask for a mailing address", icon: HomeIcon, preset: { headline: { default: "Where do you live?" }, @@ -234,7 +234,7 @@ export const questionTypes: TQuestion[] = [ { id: QuestionId.ContactInfo, label: "Contact Info", - description: "Allow respondents to provide their contact info", + description: "Ask for name, surname, email, phone number and company jointly", icon: ContactIcon, preset: { headline: { default: "Contact Info" },