Dynamic Sizing and Responsiveness for Learnosity Questions

Generally speaking, Learnosity Questions adapt to their containers or to the screen size they are viewed from. However there are some constraints, as outlined below.
 

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

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.

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.

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.

Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity.