Drawing Interaction

Palette Orientation

The default palette orientation is on the right of the drawing interaction, as seen below.
By adding class="toolbar-orientation-left", the palette will appear to the left of the drawing interaction.

Palette Color Controls

The default palette contains four color selectors: black, tan, blue, and green. To limit the drawing colors to black only, set the class attribute to class="toolbar-palette-none".

Line Thickness

The line thickness defaults to the thinnest line. If a different thickness is desired, a line thickness attribute can be placed in the interaction's class attribute; <drawingInteraction class="line-thickness-2"...>. There are six different line thickness settings available. The attributes are line-thickness-1 (thinnest), line-thickness-2, line-thickness-3, line-thickness-4, line-thickness-5, or line-thickness-6 (thickest).

Compass

A Compass tool can be added to any palette by adding the "toolbar-compass" class to the class definition of the drawingInteraction; e.g., class="toolbar-compass". By default, the Compass tool displays a "guide" to assist users with visualizing where the Compass arcs are drawn. The guide can be turned off by specifying "compassHideGuide" in the class definition; e.g., class="toolbar-compass compassHideGuide". Furthermore, the default Compass tool displays an arrow at the end of the radius to better-indicate the scaling/rotation handle of the Compass. The arrow can be hidden by specifying "compassHideArrow" in the class definition; e.g., class="toolbar-compass compassHideArrow".

Reverse Handles for Compass

There is also an option if you would like to reverse the handle on the compass that control the diameter of the circle with the handle that draws the circle. By adding the class compassReverseHandles to the class definition of the drawingInteraction, the handle that previosly controlled the size of the circle of the compass will now control drawing the circle and vise versa. Below is an example.
<drawingInteraction class="toolbar-compass compassReverseHandles" ...>

TN8 Client Test Overview "answeredness"

There are scenarios - e.g., where the drawing interaction is used more like a drawing tool - where you want the TestNav 8 Client to ignore the Drawing interaction in a composite item w/respect to item "answered-ness" on the Client's Test Overview page. To specify this, authors should place "ignore-answered" in the interaction's class attribute; e.g., <drawingInteraction class="ignore-answered" ...>

Get Responses:[ Click Get Responses ]
<?xml version="1.0" encoding="utf-8"?>
<assessmentItem xmlns="http://www.imsglobal.org/xsd/imsqti_v2p1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.imsglobal.org/xsd/imsqti_v2p1 http://www.imsglobal.org/xsd/imsqti_v2p1.xsd"
identifier="Drawing-1" title="Drawing interaction 1" adaptive="false" timeDependent="false">
  <responseDeclaration identifier="RESPONSE" cardinality="single" baseType="file" />
  <outcomeDeclaration identifier="SCORE" cardinality="single" baseType="integer" />
  <itemBody>
    <p>Read the following description of Giovanni's house and then
    colour the picture accordingly.</p>
    <drawingInteraction responseIdentifier="RESPONSE">
      <prompt xml:lang="it">Il tetto è rosso e i muri sono gialli.</prompt>
      <object type="image/png" data="assets/house.png" width="144" height="260" />
    </drawingInteraction>
  </itemBody>
</assessmentItem>

Read the following description of Giovanni's house and then color the picture accordingly.

The house of Giovanni has a tan roof and blue walls.