To take the quizzes, you must log in.

*Username:***student***Password:***Formulas.1**You can view this site in

the language of your choice.

- Answer boxes
### Answer boxes

With the Formulas question, there are four types of answers:

**number****numeric****numerical formula****algebraic formula**

The discussion below deals with the

**number**answer, but also applies to the other three types of answers. See section Answers and marking for more details on the other types of answers.## Answer box placeholders

Answer box placeholders provide a simple way to arrange the answer boxes in the Part's text. This is particularly useful when the Part requires more than one answer. This flexibility allows you to arrange the answer boxes in the form of a matrix, coordinates, embedding into the question text or in any other way.

The

**number**type answer allows students to input quantities. « The value of a quantity is generally expressed as the product of a number and a unit. » Ref. The International System of Units (SI), 8th edition, clause 1.1 ↗. Therefore, the**number**type answer has two answer boxes: the*number box*and the*unit box*. If the quantity is dimensionless, the**number**type answer has only the*number box*.Placeholder names are _0 for the first number box, _1 for the second number box, etc., and _u for the unit box. The number of placeholders that can be used is the same as the number of elements specified in the answer field, plus one if the unit is specified.

### Example

A Part that has two number boxes and a unit box.

## Settings

General Question name! Two number and one unit answer boxes Main question Question text! Point*A*is at the position*x*= 100 mm and*y*= 200 mm. What are the coordinates of point*A*? Part 1 Part's mark* 1 Answer type Number Answer* [100,200] Grading criteria* Absolute error == 0 Unit mm Part's text*A*(*x*,*y*) = ({_0},{_1}) {_u}The Formulas question should look like this:

Each answer box placeholder can only be used once in a Part. For example, none of the following will be accepted:

Part's text {_0}{_0} # {_0} can not be used twice Part's text {_0}{_1}{_1} # {_1} can not be used twice Part's text {_0}{_u}{_1}{_u} # {_u} can not be used twice Part's text {_3}{_3} # {_3} can not be used twicePlaceholders do not have to appear in any particular order such as the ascending order {_0}{_1}{_2}...{_u}. The order of the number boxes and the unit box correspond to the order of the placeholders in the Part's text. For example, the following:

- Part 1 Answer* [0, 100, 200, 300] Unit mm Part's text {_2}{_0}{_3}{_u}{_1}
gives:

The numerical answers do not have to be in ascending order either, and we would get exactly the same as above with the following:

- Part 1 Answer* [200, 0, 300, 100] Unit mm Part's text {_0}{_1}{_2}{_u}{_3}
By default, all missing placeholders are automatically added at the end. For example, {_0}{_u} for a single-answer part and {_0}{_1}{_u} for a two-answer part.

The box {_0} corresponds to the special variable _0 in the Grading variables.

## Separate or merged number and unit boxes

When a placeholder for a number box {_0} and the placeholder for the unit box {_u} are directly side by side, like {_0}{_u}, the number box and the unit box merge into a longer single answer box in which both the number and the unit must be entered.

When the number placeholder and the unit placeholder are not directly side by side, i.e. when they are separated by a space or any other string of characters, the answer boxes do not merge and hence they are displayed separately.

### Example

Separate or merged number and unit boxes.

Main question Question text! What is 2 mm + 3 mm? Part 1 Part's mark* 1 Answer type Number Answer* 5 Grading criteria* Absolute error == 0 Unit mm Part's text {_0} {_u} Part 2 Part's mark* 1 Answer type Number Answer* 5 Grading criteria* Absolute error == 0 Unit mm Part's text {_0}{_u}

The Formulas question should look like this:

Note that the unit box can only be merged with the

number box of a Part. For example, {_0}{u} {_1} is not valid.**last**## Width of answer boxes

The default width of the answer boxes is set as follows:

**Type of box****Width of box****Example**Number (separate box) 40px Unit (separate box) 40px Number and unit (combined boxes) 80px Numeric 100px Numeric and unit (combined boxes) 200px Numerical formula 200px Numerical formula and unit (combined boxes) 300px Algebraic formula 200px Algebraic formula and unit (combined boxes) 300px You can change the width of answer boxes by editing the

**styles.css**file located in the**.../question/type/formulas**directory.For example, the following part of the styles.css file changes the width of the number box to 80px, that of the unit box to 70px, and that of the combined number and unit box to 140px:

- .que.formulas .formulas_unit { margin: 0 0 0 0; width: 70px; } .que.formulas .formulas_number { margin: 0 0 0 0; width: 80px; } .que.formulas .formulas_number_unit { margin: 0 0 0 0; width: 140px; }
**Note:**When you edit the styles.css file, you must purge the caches for the changes to take effect. Go to Site Administration -> Development -> Development / Purge all caches.**Note:**Several examples in this site have been made with modified answer box widths.### Workaround (not recommended)

If the width of the answer box for numbers is too narrow and

*you do not have access to the styles.css file*, set the Answer type to**Numeric**(100px) instead of**Number**(40px). Note, however, that the Numeric answer type includes, in addition to numbers, the arithmetic operations + - * / ^ and ( ) as well as the constant , for example 5+1/2, 2^9, 3pi.## Auto resizing answer boxes

Moodle forum discussion: 2019-09-05.

Marc Bernat Martínez developed the following javascript function to resize the answer boxes while typing. The script can be placed in formatcheck.js since this file is always loaded with formulas questions:

## Script

<script> function formulas_textbox_resize() { var input_1 = document.getElementsByClassName('formulas_number'); var input_2 = document.getElementsByClassName('formulas_algebraic_formula'); var i; for (i = 0; i < input_1.length; i++) { var charLength = input_1[i].value.length; var input_width = charLength*12; if(charLength > 4){ input_1[i].style.width = input_width+"px"; }else{ input_1[i].style.width = "40px"; } input_1[i].onkeyup = function(){ var charLength = this.value.length; var input_width = charLength*12; if(charLength > 4){ this.style.width = input_width+"px"; }else{ this.style.width = "40px"; } }; } for (i = 0; i < input_2.length; i++) { var charLength = input_2[i].value.length; var input_width = charLength*12; if(charLength > 24){ input_2[i].style.width = input_width+"px"; }else{ input_2[i].style.width = "200px"; } input_2[i].onkeyup = function(){ var charLength = this.value.length; var input_width = charLength*12; if(charLength > 24){ this.style.width = input_width+"px"; }else{ this.style.width = "200px"; } }; } } </script>The above script can be modified as follows to take into account the exact width of the input, regardless of its length, font size and family used:

## Script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> /* actualWidth width of the input checkWidth width at which the box becomes wider defaultWidth default width of the box c, ctx see https://www.w3schools.com/tags/canvas_measuretext.asp size size of the font with px, e.g. '14 px' note that the size of the font can be defined in any unit, e.g. small, medium, xx-large, 150%, 1.25cm, 22px since it is always transformed into px unit sizeN size of the font without px, e.g. '14' family family of the font, eg. "Times New Roman", Times, serif txt text of the input, e.g. '123456' */ var defaultWidth = 100; document.write('<canvas id="canvas_1" style="display: none;"></canvas>'); function newWidth() { var txt = $(".formulas_number").val(); var size = $(".formulas_number").css('font-size'); var sizeN = Number(size.substring(0, size.length-2)); var family= $(".formulas_number").css('font-family'); var c = document.getElementById("canvas_1"); var ctx = c.getContext("2d"); ctx.font = size + " " + family; var actualWidth = ctx.measureText(txt).width; var checkWidth = defaultWidth - sizeN; if (actualWidth >= checkWidth) { $(".formulas_number").width(actualWidth + sizeN); } else { $(".formulas_number").width(defaultWidth); } } $(document).ready(function(){ $(".formulas_number").css("padding-left","10px"); newWidth(); $(".formulas_number").keyup(function() { newWidth(); }); }); </script>

By modifying it slightly, the above script can be used for the four types of answer, that is, number, numeric, numerical formula and algebraic formula. Answer boxes with a unit can be treated in a similar way.

The script can be easily placed in the HTML of the text of a formulas question. It can also be used in other types of questions.

### Example

## Right-align the content in answer boxes

### Example

Reference: Moodle forum discussion

In some cases, it is best to right-align the contents of the answer boxes. For example, numbers in the vertical columns of accounting statements are usually right-aligned.

The CSS text-align property (center, left, right, justify) can not be applied to the contents of an answer box, which is left-aligned by default. However, if it is set to rtl (from right to left), the CSS direction property will have the effect of right-aligning the contents.

### Example

Right-align numbers in the answer boxes of an Accounts Receivable Ledger.

## Quiz settings

## Question settings

The Formulas question should look like this: