The Label image with math Question allows students to easily enter complex math formula as a response on top of an image, with advanced auto-scoring capabilities using our revamped engine. This Question is supported on Long Term Support versions v2023.3.LTS and onward.

Figure 1: Label Image with Math Question example.

Create a question

Enter the question stem into the Compose question field. In this field you have access to the Rich Text Editor and therefore various formatting options, as well as the ability to add images, simple features, and math. To insert mathematical expressions within the question stem you can use the math editor, denoted by the uppercase sigma symbol (Σ). Within the editor, you have the option to use keypad symbols, LaTex, or MathML to create expressions.

For a detailed overview of all of the options, see related article on the Rich Text Editor.

Figure 2: Math editor button in the rich text toolbar.

Upload an Image

Upload the image to be used for the question using the Edit button in the Image preview field. A pop up box will appear, where you can upload an image to Learnosity. A URL for an image that exists elsewhere online can be pasted into the Source URL field in the More options section of the pop up box.

You have the option to configure Text on hover, the text that appears on the image when the cursor hovers over it, the Image alternative text, as well as overriding the image dimensions by setting a new width or height. In order to preserve the original aspect ratio, only adjust either the width or height.

When the prevent image scale option is enabled, the image size will not be scaled when the screen size has changed.

Figure 3: Options for uploading background image.

Adding Response Containers

In the Response positions section, click on the +ADD button to add a new response container on top of the image. Drag and position the response containers on the image as desired.

Figure 4: Positioning response containers on the image.

Modifying Response Containers

Any modifications made in the Response container (global) section will affect every response container in the question. This makes it possible to universally change the width and height of the response containers using the width and height fields in this section.

It is possible to only modify specific response containers using the Response containers (individual) section. You will notice in the Response positions section that each response box on the image is numbered; this means that the 'Container 1' area in the Response containers (individual) section will modify the response container labelled with number 1.

If you wish to add some extra formatting to the response containers, you can do so in the Template fields in both the Response containers (global) and Response containers (individual) sections. Note that the same rules apply as setting the width and height; modifying the template in the global section will affect all response containers on the question, if you want to add extra formatting to specific containers, do so using the individual section. 

The Vertical top setting in both sections ensures that the position of the response boxes stays at the position set by the author, regardless of changes to the font size or container's size, i.e. it ensures that the position of the responses stays at top: 0, left: 0 of the container.

Note that the settings in the Response containers (individual) section will override settings in the Response containers (global) section.

Setting the correct answer

Insert a value in the Point(s) box to define the score for the question. The default value is 1. The maximum score for the question will depend on the number of response containers and the scoring type set.

Underneath the Point(s) area, you will see a Response sub-menu. The number of sub-menus will match the number of response containers in the formula template. Each sub-menu will be named after its relevant response box; Response 1, Response 2 , etc. depending on the number of containers. You will set the validation for each response container individually. Even if the response container has been modified to contain multiple response boxes, the correct answer is still set for the entire response container.

In the value field provide a sample correct answer for each response and from the drop-down select how the learner's answer should be scored.

Figure 5: Setting the correct answer.

The default method is "Literally equal to (equivLiteral)", meaning the learner's answer must be written in the same form as the value to receive points, but from the drop-down you can select different scoring methods as shown in Figure 6. Each method has additional options that allow you to define notation, like the decimal and thousands separator, or further customize the scoring behavior. Additionally you can edit the aria label associated with the sample correct answer.

By selecting "+ ADD CONDITION" you can apply a secondary condition that the learner's answer must also meet in order to receive points. To set an alternate correct answer, select the "+" button above the Points box.

More options: Scoring

• Unscored/Practice usage - Removes all scoring from the question.
• Penalty point(s) - The value entered here will be deducted from the student for an incorrect answer.
• Check answer button - Show or hide the check answer button from the student. The check answer button allows students to check if their answer is correct/incorrect. Clicking this button does not tell the student what the correct answer is.
• Check answer attempts - The value entered here refers to how many times the student can use the Check answer button, before it is automatically disabled.
• Scoring type - When multiple response containers are present, choose between three scoring methods: Exact match, Partial match per response, or Partial match. The default value is Exact match meaning the learner must get the entire question correct to receive credit.
• Minimum score if attempted - Set attempt marks for the question, which will be awarded to the student even if their response is incorrect.

For more details, see article on scoring types. 

Layout

• Stem numeration (review only)- Define numeration characters displayed to the left of the response container when displaying correct/incorrect validation and correct answers. Only visible in review state. Choose between Numerical, Uppercase alphabet, or Lowercase alphabet.
• Response minimum width (px) - Enter, in pixels, the minimum width of the response area.
• Template font scale - This is referring to the content in the Template field only. It is set to Boosted by default. This way any math input will be the same size although text will appear slightly larger. You can change it to Normal, if you would like the text to match the size of the rest of the question text.

Keypad

• Type - Select from a Floating keypad, a Block keypad, a Block on focus keypad, or no keypad.
• Show keypad hints - Enable or disable hints on the keypad, such as keyboard shortcuts and symbol group titles that are shown on the top left corner of the keypad when hovering over a symbol group key. 
• Enable horizontal keypad - this changes the keypad layout to a rectangular, 2 row, keypad. You can then customize this keypad by selecting a button and either replacing it with another symbol or leaving it empty.
• Number pad - Customize the number pad in this section. Select a button to either change the order of the buttons or remove some buttons.
• Symbols - Select what symbol groups will be shown to the learner, or create custom symbol groups.

For more information, see article on customizing the keypad. 

Text blocks

Use this option when you want to define specific words or a list of custom units (such as g, kg, cm, oz, etc.) that will not be rendered as LaTeX math but rather LaTex text when entered by a learner. When used in combination with the "Ignore LaTex text" option, this can be useful if you do not want to require the learner to enter a unit of measurement next to a value. See the dedicated Text Blocks article.

Additional information

This question type is an asynchronously scoring question type. See article on asynchronous scoring for details.