The BoundingBox question type allows users to draw, move, and resize rectangular bounding boxes on an image. It’s useful for tasks such as object detection, image annotation, or any scenario where you need users to identify specific regions in an image.

​
Basic Usage

const animalIdentificationQuestion = new BoundingBox({
    id: 'animal_identification',
    text: 'Draw boxes around all the animals in this image.',
    imageUrl: 'https://example.com/path/to/image.jpg',
    boxColor: '#FF0000',
    boxOpacity: 0.3,
    maxBoxes: 5,
    required: true
});

​
Parameters

​
id
string
required

Unique identifier for the question.

​
text
string
required

The main question text.

​
subText
string
default: ""

Additional text to display below the main question text.

​
imageUrl
string
required

URL of the image on which boxes will be drawn.

​
boxColor
string
default: "#FF0000"

Color of the bounding boxes.

​
boxOpacity
number
default: "0.3"

Opacity of the bounding boxes (0 to 1).

​
maxBoxes
number
default: "Infinity"

Maximum number of boxes that can be drawn.

​
required
boolean
default: "true"

Whether the question is required.

​
customValidation
function

A custom validation function that takes the response as input and returns true if valid, or an error message string if invalid.

​
styles
object

Custom styles to apply to the question. Available keys are:

  • root
  • innerContainer
  • textContainer
  • text
  • subText
  • canvas
  • controls
  • controlPoint
  • button
  • errorMessage

​
Data

Response Format

The BoundingBox question type returns an array of objects representing the drawn boxes:

[
  {
    x: 0.1,
    y: 0.2,
    width: 0.3,
    height: 0.4
  },
  {
    x: 0.5,
    y: 0.6,
    width: 0.2,
    height: 0.1
  }
]

Each box’s coordinates and dimensions are represented as percentages of the image’s width and height.

Validation

The BoundingBox question validates that:

  1. At least one box is drawn when required is true.
  2. Any custom validation provided in the customValidation function passes.

If validation fails, it displays an error message.

​
Advanced

​
Methods

The BoundingBox question type inherits methods from the base Element class and adds some specific methods:

​
clearBoxes
function

Removes all drawn boxes.

boundingBoxQuestion.clearBoxes();
​
removeActiveBox
function

Removes the currently active (selected) box.

boundingBoxQuestion.removeActiveBox();
​
undoAction
function

Undoes the last action (drawing, moving, or resizing a box).

boundingBoxQuestion.undoAction();
​
validate
function

Validate the current response against the question’s rules.

Returns:

  • An object with isValid (boolean) and errorMessage (string) properties.
const { isValid, errorMessage } = boundingBoxQuestion.validate();

​
Example

Here’s an example of how to create a customized bounding box question:

const customizedQuestion = new BoundingBox({
    id: 'face_detection',
    text: 'Draw boxes around all faces in this image.',
    subText: 'Be sure to include all visible faces, including those in the background.',
    imageUrl: 'https://example.com/group-photo.jpg',
    boxColor: '#00FF00',
    boxOpacity: 0.5,
    maxBoxes: 10,
    required: true,
    customValidation: (response) => {
        if (response.length < 2) {
            return 'Please identify at least two faces in the image.';
        }
        return true;
    },
    styles: {
        root: { 
            backgroundColor: '#f0f8ff',
            padding: '15px',
            borderRadius: '8px',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        },
        text: { 
            color: '#2c3e50',
            fontSize: '1.2em',
            fontWeight: 'bold'
        },
        subText: {
            color: '#7f8c8d',
            fontSize: '0.9em',
            marginTop: '5px'
        },
        canvas: {
            border: '1px solid #3498db'
        },
        button: {
            backgroundColor: '#3498db',
            color: 'white',
            padding: '10px 20px',
            borderRadius: '5px',
            '&:hover': {
                backgroundColor: '#2980b9'
            }
        },
        errorMessage: {
            color: '#e74c3c',
            fontWeight: 'bold',
            marginTop: '5px'
        }
    }
});

This example creates a face detection question with custom styling, a maximum of 10 boxes, and custom validation to ensure at least two faces are identified.

OverviewCheck Box