Drawing (drawing)

The drawing Question is referenced by its Question type in the code, which is drawing. This Question allows freeform drawing, where students draw directly into the screen viewport with lines, arcs, gestures, or text.

Read the authoring documentation for a description of what this Question does.
Read the developer reference documentation to see configuration options for this Question type.
See this Question type in action in this demo.

Examples

{
    "response_id": "60011",
    "type": "drawing",
    "img_src": "https://www.nayuki.io/res/triangle-solver-javascript/labelled-triangle-diagram.png",
    "drawing_tools": ["scribble", "straightedge", "compass", "text", "|", "clear", "undo", "redo"],
    "line_color": ["rgba(255, 0, 0, 0.8)"],
    "image": {
        "source": "https://www.nayuki.io/res/triangle-solver-javascript/labelled-triangle-diagram.png",
        "width": 500,
        "height": 250
    }
}

Attributes

is_math boolean

Set to true to have LaTeX or MathML contents to be rendered with mathjax.

Default: false
metadata object

Object containing additional information about the question.
metadata.distractor_rationale string

Used to display individual response feedback/rationale to the student.
metadata.rubric_reference string

A unique identifier for the rubric to be used with the question - defaults to course rubric if assigned in activity
metadata.sample_answer string

A sample answer to be displayed on the Learnosity Reports API. HTML is supported.
metadata.acknowledgements string

References for any text passages, documents, images etc. used in the question.
metadata.distractor_rationale_response_level array

Used to store the distractor rationales that map to responses in the same order for use/rendering by the host environment.
stimulus string

The question stimulus. This can include text, tables, images, resources and LaTeX entered via the Math Editor.
stimulus_review string

HTML/Text content displayed only in review state rendered above the response area. Supports embedded Feature <span> tags. Will override stimulus in review state.
instructor_stimulus string

HTML/Text content displayed when showInstructorStimulus is set to true on the activity. Supports embedded Feature <span> tags.
type string

Type of question being asked, e.g. 'association'

Default: "drawing"
ui_style object

Object used to control different aspects of the UI
ui_style.fontsize string

Controls the size of base font for this question. Options are among 'small', 'normal', 'large', 'xlarge' and 'xxlarge'.

Default: "normal"
validation object

In this section, configure the correct answer(s) for the question.
validation.max_score number

The highest score a marker can award to this question response.
validation.min_score_if_attempted number

Positive value indicating the minimum score if a student attempted the question.

Default: 0
validation.unscored boolean

When enabled, this option will remove all scoring from the question. This is useful for creating practice questions.

Default: false
character_map array

The character map will display the default set of special characters.
If an Array, the character map button will show and display only the array of characters.
IMPORTANTThe HTML document will require a charset of utf-8: <meta charset="utf-8">

Default: false
image imageObject

The absolute URL of the background image.
image.source string

The image that should be displayed.
image.alt textarea

Alternative text that appears when the image cannot be rendered, and is used for accessibility purposes such as screen readers.

Default: ""
image.width number

Enter a numeric value for the width of the image. This value should be a pixel (px) value, but you do not need to type px into the field.
image.height number

Enter a numeric value for the height of the image. This value should be a pixel (px) value, but you do not need to type px into the field.
image.preview hidden

Preview of the chosen image, or of the selected background
drawing_tools array

Select tools to toggle them on or off. Drag them to rearrange toolbar order

Default: ["scribble","straightedge","compass","|","eraser","clear","undo","redo"]
text_formatting_options array

Select Text formating tools under the Text tool.

Default: []
line_color array

Defines the color and opacity of the drawn line.
line_width number

Width of the painted line, in pixels.

Default: 5
spellcheck boolean

Enable or disable browser spellcheck, autocapitalize, autocomplete and autocorrect attributes on the user response area.

Default: true

Response format

The data returned in the response format for this Question is an array of objects, each of which holds the data for one visual element that the student has drawn on the page. These can be lines, arcs, gestures, or text.

Response format examples

{
                "value": [
                    {
                        "type": "gesture",
                        "line_color": "rgba(255, 0, 0, 0.8)",
                        "line_width": 5,
                        "id": "4fabab13-4a13-4395-a190-4333d7f611d2",
                        "points": [
                            [
                                238,
                                167
                            ],
                            [
                                232,
                                168
                            ],
                            [
                                230,
                                169
                            ],
                            [
                                228,
                                170
                            ],
                                ...
                ]
            },
                    {
                        "type": "line",
                        "line_color": "rgba(255, 0, 0, 0.8)",
                        "line_width": 5,
                        "id": "65a3e41d-b8b8-4117-94d0-63d20734daee",
                        "points": "M112.44979858398438,226.02911376953125L415.6666564941406,167.80020141601562"
                    },
                    {
                        "type": "text",
                        "action": "modify",
                        "textValue": "Something",
                        "id": "f01053a3-6546-41c9-9790-d99797421693",
                        "x": 141,
                        "y": 71,
                        "fontSize": 14,
                        "color": "rgba(0, 116, 217, 1)",
                        "textAnchor": "left"
                    }
            ],
            "type": "array",
                    "apiVersion": "v2.153.0",
                    "revision": 1
            }

Response attributes

value array

The configuration and coordinates of each element drawn onto the page. Within the array held in value, there are a number of properties:
value.type string

Shows the type of visual element that has been drawn. This can be one of the following:
- gesture - a freehand drawing.
- line - a straight line.
- arc - a curving arc made with the compass tool.
- text - a text annotation.
value.line_color string

Shows the line color of the element that has been drawn, as an RGBA value.
value.line_width numeric

Shows the line width of the element that has been drawn, in pixels.
value.id string

Shows the unique of the element that has been drawn.
value.points string

Shows the pixel coordinates of the recorded points in the element that has been drawn. The format for each point is:
[x_coordinate, y_coordinate].
value.action string

Shows the action that was performed, altering the status of the element. This can be one of the following:
- modify - for text annotations, indicates that the text content or position was changed.
- remove - indicates that the element was deleted.
value.textValue string

For a text annotation, shows the text content that was displayed.
value.x numeric

For a text annotation, shows the horizontal pixel coordinate value.
value.y numeric

For a text annotation, shows the vertical pixel coordinate value.
value.fontSize numeric

For a text annotation, shows the size setting for the text that was displayed.
value.color string

For a text annotation, shows the text color of the element that was drawn, as an RGBA value.
value.textAnchor string

For a text annotation, shows the alignment setting of the text, which will always be set to left. At the present time, only left alignment is supported.
type string

Informs the scoring engine about what kind of data to expect in the values entered by the student. For this Question type, you must always supply a string for this attribute with the value "array".
apiVersion string

The version of the Questions API that returned this response.
revision numeric

Keeps track of the number of Question attempt submissions, i.e. how many times the student answered the Question and submitted it.