Dynamic Sizing and Responsiveness for Learnosity Questions

Questions adapt to their containers or to the screen size they are viewed from. However there are 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 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  
Math 340px 130px  
Label image with math 340px 230px  
Cloze math  340px 130px  
Math formula (Deprecated) 340px 80px  
File Upload Draft 300px 250px  
Formula Essay 340px 120px  
Graphing 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.

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.

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