Quiz

Hello Marc Bernat,

Bravo! Your idea is great!

Here is a modified version that takes into account the exact width of the input, regardless of its length, font size and family used:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<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 w/ px, e.g. '14 px'
               note that the size of the font can be defined in any units,
               e.g. small, medium, xx-large, 150%, 1.25cm, 22px
               since it is always transformed into px units
sizeN          size of the font w/o 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('');
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>

Note that these scripts can be used with all question types, not just the formulas question. They are available at https://moodleformulas.org/course/view.php?id=22§ion=17&lang=en#id201909061055 ↗

Marc Bernat, you did a excellent job!