Graphical answer

The graphic answer type aims to allow questions with an answer requiring the student to draw something on a canvas instead of selecting an option or writing an algebraic expression. With this feature, students will be able to draw points, lines, circles, conic sections, and more, and the new evaluation criteria will do the rest!

Wiris Quizzes 4 feature

This feature is only available for Wiris Quizzes 4. You can see all the changes the tool undergoes here.

When the Graphic option is selected, the equation editor gets replaced by the drawing tool. You may readily draw the correct answer to the question using the upper toolbar.

Image shows the interface for the Graphic answer.

Bear in mind students will use the same toolbar (or a reduced version) to answer the question. They will be also able to use the handwriting to do so, you can see more details here.

Image shows correct answer as instructor has entered it.

Initial content

It's also possible to include initial content for the students. It can be very useful when, for instance, we want them to indicate some elements of a given object.

Graphic answer area shows initial content already displayed.

As a brand new option of Wiris Quizzes, it's also possible to import information from the initial content to the correct answer or vice-versa. Thus, you can build the corresponding graph once and it will appear automatically on the correct answer, ready to be edited.

Copy initial content option.

In the Input options screen you can control how toolbar provided to the students is displayed and the offered auxiliary input.

Customize toolbar

Sometimes we may be interested in not providing the student with all the graph resources. In the Customize toolbar section, you can define which of them will be shown in the student's graph by simply checking or unchecking the corresponding box. They are all selected by default.

Choose between toolbar, menu, floating, contextual elements, contextual labels to have available to the student on the graphic answer space.

The graph resources are divided into five sections explained below: toolbar, menu, floating, contextual (elements), and contextual (labels).


The Toolbar is at the core of many of the graph's possibilities. You can hide some icons to facilitate the research of those which the students need or to make the problem's resolution a little bit more complicated.

Graphic shows the toolbar, described below.
Element Description Icon
Select To select objects and see its algebraic expression and modify its properties ""
Handwriting To handwrite any of the existing objects. See how here ""
Point To draw a single point ""
Lines Line: To draw a line passing through two given points ""
Segment: To draw a segment between two given points ""
Ray: To draw a ray given a starting point and a direction ""
Vector: To draw a vector given a starting point and a direction ""
Parallelogram: To draw a parallelogram given a starting point and two different directions ""
Polyline: To draw a polyline given an ordered set of points ""
Polygon: To draw a polygon given a closed ordered set of points ""
Conic sections Circle by center and point: To draw a circle given its center and a belonging point ""
Circle by three points: To draw a circle passing through three given points ""
Arc: To draw an arc of circumference ""
Parabola: To draw a parabola given a directrix line and its center ""
Ellipse: To draw an ellipse given an axis and a belonging point ""
Hyperbola: To draw an hyperbola given ""
Conic: To draw a general conic section given five belonging points ""
Measures Area: To fill an enclosed region and calculate its area ""
Angle: To calculate the counterclockwise angle between two given elements ""
Length: To calculate the length of a bounded unidimensional element ""
Label To include any label within the plotter ""
Expression To include the graphic representation of any mathematical expression ""
Undo To undo the last performed action ""
Redo To redo the last erased action ""

The Menu options allow the students to configure the main plotter settings.

Graphic shows the menu, described below.
Element Description Icon
Delete all To delete everything drawn in the graph (included the initial content)
Settings To modify the plotter configuration. See all the available options here


The Floating elements are thought to facilitate the students' view of the plotter and to make the content creation more comfortable.

Graphic shows the floating elements, described below.
Element Description Icon
Zoom in To zoom in the plotter ""
Zoom out To zoom out the plotter ""
Anima To make the elements apparition dynamic. The different objects of the answer will appear one by one in its creation order. ""
Maximize To maximize (or minimize) the plotter ""

Contextual (elements)

The Contextual (elements) options enable the capability of modifying a plotted object appearance.

Graphic shows the contextual elements, described below.
Element Description Icon
Fix label To fix the algebraic expression of the represented object ""
Line width To modify the line width of the represented object ""
Line style To modify the line style of the represented object ""
Line color To modify the line color of the represented object ""
Delete To delete the represented object ""

Contextual (labels)

The Contextual (labels) enables the capability of representing a function by giving its algebraic expression or to include any text in the plotter. The labels in grey are only available if we are introducing a mathematical expression.

Graphic shows the contextual labels, described below.
Element Description Icon
Bold To write text in bold ""
Italic To write text in italics ""
Color To write text in any of the available colors ""
Big fraction To add a fraction ""
Superscript To add a superscript ""
Square root To add a square root ""
Root To add a generic root ""
Number To add the irrational numbers straight pi</html> or straight e</html> ""
Functions To add any of the available functions (sin</html>, tan</html>, log</html>, …) ""
Delete To delete the written text or formulas ""

Answer input method

Here, you can choose what kind of auxiliary entry you want to offer to the students.

There are four options:

  • Display auxiliary CalcMe: You can supply your students with our online calculator while answering the question, and set initial content for the calculator if desired. Keep in mind that the calculator can do a lot more than numerical computations!
  • Replace answer input with auxiliary CalcMe: You can replace the answer input field with an auxiliary CalcMe calculator for the student answer.
  • Display auxiliary text field: You can provide your students with a text editor to make them include the reasoning they have followed to answer the question. For more details see this page: Auxiliary input.
  • Don't show auxiliary input: Don't show the auxiliary CalcMe calculator nor the auxiliary text editor in the input field for the student's answer.

The validation options field allows to define us how we want to evaluate the student's answer. This section is divided into two sections explained below.

Image shows area where question author can define answer validation criteria.


The Elements subsection is thought to select the elements in the answer to be evaluated. By default, all the elements will be taken into account and they will have to match the student answer to be graded correctly.

Image shows the author of this question has specified 3 elements with which to verify an answer is correct for the question.

On the other hand, it's also possible to distribute the grade among those selected elements in case we want to consider partial grading.

Image shows question author has specified partial credit be given for 2 of the 3 validation criteria for the question.


The Criteria subsection is thought to set the amount of error allowed between the student answer and the correct answer. Moreover, it's also possible to consider some additional properties explained below.

Image shows an author can specify criteria with which to evaluate the answer.
  • Prohibit superfluous elements in the student answer: There can't be more elements in the student answer than in the correct answer.
  • Match color: The elements in the student answer must have the same color as in the correct answer.
  • Match line type: The elements in the student answer must have the same line type as in the correct answer.

Imagine we want to create a question asking to draw, given the line y equals 2 x plus 1, its perpendicular line through the point left parenthesis 4 comma 0 right parenthesis. To do so, we have to start defining the initial content. You can use the line icon or introduce its algebraic expression.

Animation shows author drawing the line y equals 2x plus 1, for initial content to the question.

Once we have defined the initial content, we have to move on to the Correct answer field and define the perpendicular line.

Image shows author defining the correct answer by drawing the perpendicular line.

Then, we need to define which elements do we want the students to use to provide an answer. As they have to draw a line, we may be only interested in keeping the line icons and the expression option.

Animation shows author defining which elements of the toolbar and other visible elements of the graphical interface to present to the students to answer the question.

Finally, we have to define the validation properties which we want to take into account to grade the students answer correctly. We will only validate the answer if it matches the perpendicular line.

Image shows author specifying validation criteria for the question.

We can preview the question by clicking the Test the question. Thus, we can verify if it's working as we expected.

Animation shows author testing the question to make sure it's defined properly.