Question Types

This document describes all question types supported by the registration workflow, including their backend implementation, frontend rendering, validation rules, and example use cases.

1. Overview

The registration workflow presents a series of questions to users during the membership or event registration process. Each question is rendered based on its type, which determines the UI component used and the validation rules applied.

1.1. Layer 3 Component Architecture

Questions are displayed using a Layer 3 Question Panel component that sits within the existing page structure:

  • Layer 1: Site frame (navbar + page container)

  • Layer 2: Functional area template (membership/event details panel)

  • Layer 3: Question panel (question header + person-answer table + navigation)

The question panel follows a consistent layout:

question-panel-layout

1.2. StepCode vs UI_CODE Mapping

The backend uses StepCode to define question logic, while the frontend uses UI_CODE to determine rendering. Multiple StepCodes can map to the same UI_CODE when they share the same visual presentation but differ in business logic.

StepCode UI_CODE Description

TXT

TXT

Free text input

SEL

SEL

Dropdown selection

RBO

RAD

Radio button options (not currently implemented in frontend)

BCB

BCB

Binary checkbox (yes/no)

ONE

ONE

Radio button single selection (pick one person)

ITC

ITC

Terms & conditions acceptance

MFA

BCB

Family adult selection (renders as checkbox)

MFC

BCB

Family child selection (renders as checkbox)

MFM

ONE

Family main member selection (renders as radio)

2. Core Question Types

2.1. TXT - Text Input

Purpose: Capture free text responses from each person.

Backend:

  • Class: FreeTextFormField.java

  • StepCode: TXT

  • UI_CODE: TXT

Frontend Rendering:

  • Component: Text input field per person

  • Layout: Person name on left, text input on right

Validation:

  • Required check (if configured)

  • Minimum/maximum length (valueMin, valueMax)

  • Regex pattern matching (valuePattern)

Example Use Cases:

  • Emergency contact number

  • Medical notes

  • Special dietary requirements

DTO Example:

{
  "title": "Emergency Contact Number",
  "questionType": "TXT",
  "required": true,
  "people": [
    { "id": 1, "firstName": "Sarah", "lastName": "Smith", "answer": null },
    { "id": 2, "firstName": "Billy", "lastName": "Smith", "answer": null }
  ]
}

Mockup: View Text Input Mockup

2.2. SEL - Dropdown Selection

Purpose: Allow users to select one option from a predefined list per person.

Backend:

  • Class: DropDownOptionFormField.java

  • StepCode: SEL

  • UI_CODE: SEL

Frontend Rendering:

  • Component: Dropdown/select element per person

  • Layout: Person name on left, dropdown on right

  • Options populated from person.options array

Validation:

  • Required check (if configured)

  • Answer must match one of the available options

Example Use Cases:

  • T-shirt size selection

  • School selection

  • Experience level

  • Communication preference

DTO Example:

{
  "title": "T-Shirt Size",
  "questionType": "SEL",
  "required": true,
  "people": [
    {
      "id": 1,
      "firstName": "Sarah",
      "lastName": "Smith",
      "answer": null,
      "options": [
        { "id": "XS", "value": "XS (Extra Small)" },
        { "id": "S", "value": "S (Small)" },
        { "id": "M", "value": "M (Medium)" },
        { "id": "L", "value": "L (Large)" },
        { "id": "XL", "value": "XL (Extra Large)" }
      ]
    }
  ]
}

Mockups:

2.3. BCB - Binary Checkbox

Purpose: Capture a yes/no response per person.

Backend:

  • Class: CheckBoxBooleanFormField.java

  • StepCode: BCB

  • UI_CODE: BCB

Frontend Rendering:

  • Component: Single checkbox per person

  • Layout: Checkbox with person name as label

  • Answer values: "0" (unchecked) or "1" (checked)

Validation:

  • Boolean validation (answer must be "0" or "1")

  • Does NOT enforce required flag

Example Use Cases:

  • Medical conditions declaration

  • Photo consent

  • Newsletter subscription

DTO Example:

{
  "title": "Medical Conditions",
  "description": "Does anyone have any medical conditions we should be aware of?",
  "questionType": "BCB",
  "required": false,
  "people": [
    {
      "id": 1,
      "firstName": "Sarah",
      "lastName": "Smith",
      "answer": "0",
      "options": [{ "id": "1", "value": "Yes, I have medical conditions" }]
    }
  ]
}

Mockup: View Checkbox Mockup

2.4. ONE - Radio Single Selection

Purpose: Allow selection of exactly one person from the group.

Backend:

  • Class: RadioButtonPickOneFormField.java

  • StepCode: ONE

  • UI_CODE: ONE

Frontend Rendering:

  • Component: Radio button group (all share same name attribute)

  • Layout: Radio button with person name as label

  • Only one person can have answer "1" at a time

Validation:

  • At least one person must have answer "1" (if required)

  • All other persons automatically set to "0"

Example Use Cases:

  • Primary contact selection

  • Main account holder

  • Team captain selection

DTO Example:

{
  "title": "Primary Contact Person",
  "description": "Who will be the primary contact person for this membership?",
  "questionType": "ONE",
  "required": true,
  "people": [
    { "id": 1, "firstName": "Sarah", "lastName": "Smith", "answer": "1" },
    { "id": 2, "firstName": "Billy", "lastName": "Smith", "answer": "0" }
  ]
}

Mockup: View Radio Selection Mockup

2.5. ITC - Terms & Conditions

Purpose: Require acceptance of terms and conditions from all members.

Backend:

  • Class: IndemnityTermsConditionsFormField.java

  • StepCode: ITC

  • UI_CODE: ITC

Frontend Rendering:

  • Component: Master checkbox + individual checkboxes

  • Layout: Scrollable terms content, master "Accept for all", individual acceptance per person

  • Master checkbox propagates to all individual checkboxes

Validation:

  • All persons must have answer "1" to proceed

  • Does NOT enforce required flag (validation is always applied)

Special Behavior:

  • Terms text displayed in scrollable container

  • Master checkbox toggles all individual checkboxes

  • Individual checkboxes update master state

  • Not included in summary data collection

DTO Example:

{
  "title": "Terms and Conditions",
  "description": "Please read and accept the terms and conditions.",
  "questionType": "ITC",
  "required": true,
  "infoURL": "https://example.com/terms",
  "people": [
    { "id": 1, "firstName": "Sarah", "lastName": "Smith", "answer": "1" },
    { "id": 2, "firstName": "Billy", "lastName": "Smith", "answer": "1" }
  ]
}

Mockup: View Terms & Conditions Mockup

3. Membership-Specific Question Types

These question types are used specifically for family membership workflows. They render using standard UI components but have custom business logic.

3.1. MFA - Family Adult Selection

Purpose: Select which adults will be included in a family membership.

Backend:

  • Class: MembershipAdultSelectFormField.java

  • StepCode: MFA

  • UI_CODE: BCB (renders as checkbox)

Visibility Rules:

  • Only shown for adults (18+)

  • Only shown when family membership is possible

Validation:

  • Ensures exactly 2 adults are selected for family membership

  • Not included in summary data

Example Context:

When registering multiple people and family membership pricing applies, this question allows users to select which 2 adults will be part of the family unit.

Mockup: View Family Adult Selection Mockup

3.2. MFC - Family Child Selection

Purpose: Select which children will be included in a family membership.

Backend:

  • Class: MembershipChildSelectFormField.java

  • StepCode: MFC

  • UI_CODE: BCB (renders as checkbox)

Visibility Rules:

  • Only shown for children (under 18)

  • Only shown when family membership is possible

Validation:

  • Children selection is optional

  • Not included in summary data

Example Context:

After selecting family adults, users can choose which children to include in the family membership at no additional cost.

Mockup: View Family Child Selection Mockup

3.3. MFM - Family Main Member

Purpose: Select the primary adult for the family membership.

Backend:

  • Class: MembershipMainSelectFormField.java

  • StepCode: MFM

  • UI_CODE: ONE (renders as radio button)

Visibility Rules:

  • Only shown for selected family adults

  • Only shown after MFA step completes

Validation:

  • Exactly one main member must be selected

  • Not included in summary data

Example Context:

After selecting family adults, users must designate one as the primary member who will receive the main membership number and communications.

Mockup: View Family Main Member Mockup

4. Interactive UI Prototypes

The following interactive HTML prototypes demonstrate the visual design and interaction patterns for question screens.

Screen StepCode UI_CODE Prototype

Text Input

TXT

TXT

View

Binary Checkbox

BCB

BCB

View

Dropdown Selection

SEL

SEL

View

Dropdown (T-Shirt)

SEL

SEL

View

Dropdown (School)

SEL

SEL

View

Radio Single Select

ONE

ONE

View

Terms & Conditions

ITC

ITC

View

Family Adult Selection

MFA

BCB

View

Family Child Selection

MFC

BCB

View

Family Main Member

MFM

ONE

View
These prototypes are interactive HTML files that demonstrate the intended user experience. Navigate between screens using the Back/Next buttons.

5. Backend Implementation Reference

5.1. FormField Class Hierarchy

formfield-hierarchy

5.2. Source Files

File Path

FormField (Base)

admin-service/src/main/java/za/co/idealogic/event/admin/form/FormField.java

FreeTextFormField

admin-service/src/main/java/za/co/idealogic/event/admin/form/FreeTextFormField.java

DropDownOptionFormField

admin-service/src/main/java/za/co/idealogic/event/admin/form/DropDownOptionFormField.java

CheckBoxBooleanFormField

admin-service/src/main/java/za/co/idealogic/event/admin/form/CheckBoxBooleanFormField.java

RadioButtonPickOneFormField

admin-service/src/main/java/za/co/idealogic/event/admin/form/RadioButtonPickOneFormField.java

IndemnityTermsConditionsFormField

admin-service/src/main/java/za/co/idealogic/event/admin/form/IndemnityTermsConditionsFormField.java

MembershipAdultSelectFormField

admin-service/src/main/java/za/co/idealogic/event/admin/form/MembershipAdultSelectFormField.java

MembershipChildSelectFormField

admin-service/src/main/java/za/co/idealogic/event/admin/form/MembershipChildSelectFormField.java

MembershipMainSelectFormField

admin-service/src/main/java/za/co/idealogic/event/admin/form/MembershipMainSelectFormField.java

6. Related Documentation