API Documentation

Trail Making Test Configuration

Learn how to customize the Trail Making Test experience using URL parameters for research, clinical, or educational purposes.

Basic Parameters Appearance Behavior Results Advanced

The Trail Making Test (TMT) API allows you to customize the test experience through URL parameters. These parameters control everything from test length and appearance to behavior and result display.

Basic Parameters

Core parameters that define the test structure and content.

trailLength

Number

Sets the total number of items in the trail. For numbers-letters mode, this should be an even number.

?trailLength=12
Default: 10

Examples:

/?trailLength=8

/?trailLength=16

symbolType

String

Defines the type and sequence of symbols. Options: numbers, letters, numbers-letters, letters-numbers.

?symbolType=letters-numbers
Default: numbers

Examples:

/?symbolType=letters

/?symbolType=numbers-letters

reverseOrder

Boolean

When set to true, reverses the order of the symbols.

?reverseOrder=true
Default: false

Examples:

/?reverseOrder=true

/?symbolType=numbers&reverseOrder=true

Appearance

Parameters that control the visual presentation of the test.

numberRadius

Number

Controls the size of the clickable circles in pixels.

?numberRadius=35
Default: 30

Examples:

/?numberRadius=25

/?numberRadius=40

textSize

Number

Controls the size of the text inside circles in pixels.

?textSize=20
Default: 18

Examples:

/?textSize=16

/?textSize=24

showTimer

Boolean

Shows or hides the timer display during the test.

?showTimer=false
Default: true

Examples:

/?showTimer=false

linesUnderDots

Boolean

Controls whether connection lines appear under (true) or over (false) the dots.

?linesUnderDots=false
Default: true

Examples:

/?linesUnderDots=false

Background Controls

Controls background images, colors, and positioning for the canvas.

bgImage

URL-encoded image URL

Sets a background image URL for the canvas. The image will be scaled to cover the entire canvas.

?bgImage=https://example.com/image.jpg
Default: None

isColoringBookImage

Boolean (true/false)

When set to true, processes the background image to create a coloring book effect. Converts white background to transparent and keeps black lines for coloring.

?isColoringBookImage=true
Default: false

Examples:

/?bgImage=...&isColoringBookImage=true

bgOpacity

Number (0-100)

Controls the opacity of both the background color AND background image. Works with both bgColor and bgImage parameters.

?bgOpacity=75
Default: 100

Examples:

/?bgImage=...&bgOpacity=30

bgImageSize

Number (10-200)

Controls the size of the background image as a percentage of the canvas.

?bgImageSize=75
Default: 100 (full size)

Examples:

/?bgImageSize=150

bgImagePosX

Number (0-100)

Horizontal position of the background image (0-100%). 0% = left, 50% = center, 100% = right.

?bgImagePosX=75
Default: 50

Examples:

/?bgImage=...&bgImagePosX=25

bgImagePosY

Number (0-100)

Vertical position of the background image (0-100%). 0% = top, 50% = center, 100% = bottom.

?bgImagePosY=25
Default: 50

Examples:

/?bgImage=...&bgImagePosY=75

bgColor

URL-encoded hex color

Sets the background color of the canvas. Use URL-encoded hex value.

?bgColor=%23000000
Default: #ffffff

Grid Controls

Adds a customizable grid overlay to the canvas.

gridEnabled

Boolean (true/false)

Enables or disables the grid overlay.

?gridEnabled=true
Default: false

Examples:

/?gridEnabled=true

gridColor

URL-encoded hex color

Sets the grid color (URL-encoded hex value).

?gridColor=%23ff0000
Default: #cccccc

gridOpacity

Number (0-100)

Sets the grid opacity (0-100).

?gridOpacity=50
Default: 30

gridStyle

String (solid, dotted, dashed, sparse)

Sets the grid line style.

?gridStyle=dotted
Default: solid

gridSize

Number (10-100)

Sets the grid cell size in pixels (10-100).

?gridSize=30
Default: 20

Behavior

Parameters that control how the test responds to user interactions.

allowWrongSelections

Boolean

When true, wrong selections are recorded and visualized but the test continues. When false, wrong selections are counted as errors but not selected.

?allowWrongSelections=true
Default: false

Examples:

/?allowWrongSelections=true

showWrongSelections

Boolean

When true, wrong selections are visually shown as red in canvas. When false, wrong selections are visually shown as correct (still counts wrong in results data) in canvas.

?showWrongSelections=true
Default: true

Examples:

/?showWrongSelections=true

Results Display

Parameters that control what information is shown after test completion.

hidePopupButtons

Boolean

Hides the restart and menu buttons in the results popup.

?hidePopupButtons=true
Default: false

Examples:

/?hidePopupButtons=true

hidePopupResults

Boolean

Hides the time and errors display in the results popup.

?hidePopupResults=true
Default: false

Examples:

/?hidePopupResults=true

hidePopupAll

Boolean

When set to true, completely hides the results popup after test completion.

?hidePopupAll=true
Default: false

Examples:

/?hidePopupAll=true

Advanced Configuration

Advanced parameters for custom positioning and complex configurations.

customPositions

URL-encoded JSON

Sets custom positions for dots as percentage coordinates (0-100). Uses URL-encoded JSON array of {x, y} objects.

?customPositions=%5B%7B%22x%22%3A10%2C%22y%22%3A20%7D%2C%7B%22x%22%3A30%2C%22y%22%3A40%7D%5D
Default: None

Custom Positions Format

Custom positions use percentage-based coordinates (0.00-100.00) to ensure consistent placement across different screen sizes. Decimal values are supported for precise positioning. 

[
  {"x": 10.2, "y": 20.5},  // 10.2% from left, 20.5% from top
  {"x": 30, "y": 40},  // 30% from left, 40% from top
  {"x": 50, "y": 60},  // 50% from left, 60% from top
  {"x": 70, "y": 30},  // 70% from left, 30% from top
  {"x": 90, "y": 80}   // 90% from left, 80% from top
]

The number of positions should match the trail length. If fewer positions are provided, the remaining dots will be placed randomly. Decimal values up to 2 decimal places are recommended.

Complete Example

A full TMT configuration example with custom positions:

/tmt?trailLength=5&numberRadius=35&symbolType=numbers&reverseOrder=false&showTimer=true&customPositions=%5B%7B%22x%22%3A10%2C%22y%22%3A20%7D%2C%7B%22x%22%3A30%2C%22y%22%3A40%7D%2C%7B%22x%22%3A50%2C%22y%22%3A60%7D%2C%7B%22x%22%3A70%2C%22y%22%3A30%7D%2C%7B%22x%22%3A90%2C%22y%22%3A80%7D%5D