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 (codename) | Min-Width | Min-Height |
|---|---|---|
| Audio recorder (audio) | 320px | 100px |
| Chart (simplechart) | 600px | 570px |
| Chemistry essay with rich text (chemistry essayV2) | 320px | 190px |
| Chemistry formula (clozechemistry) | 320px | 150px |
| Cloze math (clozeformula) | 340px | 130px |
| Cloze math with image (imageclozeformula) | 340px | 230px |
| Cloze with drag & drop (clozeassociation) | 320px | 320px |
| Cloze text (clozetext) | 320px | 50px |
| Drawing (drawing) | 320px | 320px |
| Essay with rich text (longtextV2) | 320px | 150px |
| Essay with plain text (plaintext) | 400px | 130px |
| File upload (fileupload) | 430px | 250px |
| Graph plotting (graphplotting) | 605px | 640px |
| Hotspot (hotspot) | 320px | 320px |
| Image annotation upload (imageupload) | 500px | 330px |
| Label image with drag & drop (imageclozeassociationV2) | 320px | 320px |
| Label image with text (imageclozetext) | 340px | 150px |
| Match list (association) | 320px | 300px |
| Math (clozeformulaV2) | 340px | 130px |
| Math essay with rich text (formulaessayV2) | 340px | 120px |
| Multi-step math | 320px | 320px |
|
Multiple choice (mcq) - standard
|
320px | 110px |
| Number line plot (numberlineplot) | 550px | 155px |
| Order list (orderlist) | 320px | 90px |
| Rating (rating) | 500px | 150px |
| Shading (simpleshading) | 320px | 120px |
| Short text (shorttext) | 320px | 30px |
| Sort list (sortlist) | 550px | 150px |
| Token highlight (tokenhighlight) | 320px | 50px |
| Video recorder (video) | 320px | 230px |
| Feature Type | Min-Width | Min-Height |
|---|---|---|
| Audio player (audioplayer) - default | 470px | 165px |
| Calculator (calculator) | 240px | 340px |
| Counter (counter) | 300px | 50px |
| Formula input (formulainput) (deprecated) | 340px | 80px |
| Image tool (imagetool) AKA ruler, protractor, URI to image, etc. | 500px | 50px |
| Line reader (linereader) | 300px | 115px |
| Passage (sharedpassage) | 320px | 50px |
| Scrollable passage (scrollablepassage) | 320px | 300px |
| Video player (videoplayer) | 500px | 300px |
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.