Dynamic sizing
Each Question/response/Feature will respond to the size of its container.
The tables below show the optimal minimum widths for each Question type. Should it be less than the minimum, the UI will perform the best that it can. The Questions will scale to fit any large container width, with the exception of image cloze Question types, which only scale to the original width of the set image.
| Question Type | Min-Width | Min-Height | Max-Height |
|---|---|---|---|
| Match List | 300px | 300px | |
| Multiple Choice Question - Standard | 100px | 110px | |
| Multiple Choice Question - Block UI | 100px | 130px | |
| Multiple Choice Question - Horizontal Two Columns | 100px | 130px | |
| Simple Chart | 600px | 570px | |
| Simple Shading | 125px | 120px | |
| Choice Matrix - Table | 170px | 110px | |
| Choice Matrix - Inline | 200px | 110px | |
| Choice Matrix - Label | 230px | 120px | |
| Classification - One Row | 240px | 250px | |
| Classification - Two Rows | 320px | 380px | |
| Cloze - Text | 160px | 50px | |
| Cloze - Association | 150px | 200px | |
| Cloze - Dropdown | 150px | 100px | |
| Cloze - Inline Text | 150px | 50px | |
| Cloze - Math | 340px | 130px | |
| Math - Formula V2 (Deprecated) | 340px | 80px | |
| Math - Matrices (Deprecated) | 340px | 110px | |
| File Upload Draft | 300px | 250px | |
| Formula Essay | 340px | 120px | |
| Graph Plotting | 605px | 640px | |
| Image - Highlight (Deprecated) | 320px | 200px | |
| Image - Association | 320px | 200px | |
| Image - Dropdown | 320px | 150px | |
| Image - Cloze Math Formula | 340px | 230px | |
| Image - Upload | 500px | 330px | |
| Add Text to Image | 340px | 150px | |
| Number Line - Association | 550px | 250px | |
| Number Line - Plot | 550px | 155px | |
| Number Line - Stacked | 550px | 190px | |
| Order - List | 100px | 90px | |
| Order - Paragraph | 150px | 90px | |
| Order - Sentences | 120px | 90px | |
| Text - Plain | 400px | 130px | |
| Text - Short | 100px | 30px | |
| Text - Long (*) | 588px | 130px | |
| Sort List | 550px | 150px | |
| Token Highlight | 230px | 50px | |
| Rating | 500px | 150px |
Note: * Long Text Questions also have dynamic height, matching the height of a container div you specify.
The max-height specified is for the long text input only and does not include the toolbar or description.
| Feature Type | Min-Width | Min-Height | Max-Height |
|---|---|---|---|
| Audio - Player (Default) | 470px | 165px | 165px |
| Audio - Player (Responsive) | 150px | 50px | |
| Audio - Bar Player (Default) (**) | 470px | 50px | 50px |
| Audio - Bar Player (Responsive) | 150px | 50px | 50px |
| Audio - Button Player | 150px | 50px | 50px |
| Audio - Minimal Player | 110px | 45px | 45px |
| Video Player | 500px | 300px | |
| Calculator | 120px | 45px | |
| Counter | 300px | 50px | |
| Math Formula Input | 340px | 80px | |
| Protractor | 400px | 200px | |
| Ruler | 500px | 50px |
Note: ** By default, Audio Player feature type has fixed width and height. By enabling the Responsive flag, the Audio Player's width and height can be changed based on the size of its container.
Multi-column Item layouts
Items using multi-column layouts will also respond to the size of its container, stacking content vertically when the space available is below a certain minimum width. If the width available for any column is less than 250px, content will be stacked. If all columns have 250px available, content will continue to render side-by-side in multi-column layout.
Note: responsive column layout is only supported in assess mode, not for the embedded inline mode.
Responsive design
The API has been tested on mobile devices. Taking advantage of CSS3 media queries, Questions and Features adapt to different screen sizes.
Behaviour of the assessment player
To find out how the assessment player behaves, visit this page: Customizing the Assessment Player experience with User Interface Regions.