Resize text boxes while user is typing

Resize text boxes while user is typing

由Marc Bernat Martínez發表於
Number of replies: 11

Has been a lot of complain about numbers not fitting in text boxes in Formulas question type,

We have developed a new javascript function that resizes text boxes while users are typing. The script is located in formatcheck.js because that file always load in formulas questions.

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";
}
};
    }
}

評比平均分數：Useful (3)
In reply to Marc Bernat Martínez

Re: Resize text boxes while user is typing

由Dominique Bauer發表於
Documentation writers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

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!

評比平均分數：Useful (2)
In reply to Dominique Bauer

Re: Resize text boxes while user is typing

由Germán Valero發表於
Documentation writers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片 Testers的相片 Translators的相片

@Dominique:

Can you please see the new Moodle Docs paragraph about this and add/remove/change as necessary?

評比平均分數： -
In reply to Germán Valero

Re: Resize text boxes while user is typing

由Dominique Bauer發表於
Documentation writers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

@Germán,

Thank you for placing the script in MoodleDocs ↗. I fixed my typos in the script 微笑. I also added an example in moodleformulas.org ↗.

評比平均分數：Useful (2)
In reply to Dominique Bauer

Re: Resize text boxes while user is typing

由Marcus Green發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片 Testers的相片

I was looking at moodleformulas.org recently and it is very impressive. Anyone teaching Maths should be aware of it.

評比平均分數： -
In reply to Dominique Bauer

Re: Resize text boxes while user is typing

由Germán Valero發表於
Documentation writers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片 Testers的相片 Translators的相片

@Dominique,

I looked at you great site at https://moodleformulas.org and I noticed that you have French and International Spanish languages installed.

Could you please also install the Mexican Spanish language pack. It has a greater translation coverage but it uses a decimal point separator (as English), unlike internatinal Spanish which uses a decimal comma (as Frech does). Thanks in advance 微笑

評比平均分數：Useful (1)
In reply to Germán Valero

Re: Resize text boxes while user is typing

由Dominique Bauer發表於
Documentation writers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

@Germán,

Thank you for telling me the importance of the Mexican Spanish language. Of course, the site will also be translated into this language.

For now, I'm doing the translation. As my knowledge of Spanish is very limited, any comments will be appreciated. 微笑

評比平均分數：Useful (1)
In reply to Dominique Bauer

Re: Resize text boxes while user is typing

由Germán Valero發表於
Documentation writers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片 Testers的相片 Translators的相片
I have seen that many academics who learn a second or third language usually have a very good grammar 微笑. If I were to find a non-trivial Spanish language issue in your site (or your contributions to Spanish Moodle Docs) I would be quick to tell you 鬼臉

Moodle documentation is the same for international and mexican Spanish users (with some differences written as {{notadeltraductor}}. For Spanish documentation involving real numbers, I usually put a highly visible note reminding them that International Spanish uses a decimal comma while mexican Spanish uses a decimal point, as that has been the cause of many, many errors posted in the Spanish Moodle forum.
評比平均分數： -
In reply to Germán Valero

Re: Resize text boxes while user is typing

由Joseph Rézeau發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片 Testers的相片 Translators的相片

Hi Germán & Dominique,

I wish we would use the decimal point rather than the comma in French! I use it all the time.

Here's a link to an interesting map of the world showing the distribution of the decimal separators in use.

https://en.wikipedia.org/wiki/Decimal_separator#/media/File:DecimalSeparator.svg

 

評比平均分數： -
In reply to Joseph Rézeau

Re: Resize text boxes while user is typing

由Germán Valero發表於
Documentation writers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片 Testers的相片 Translators的相片
Hi Joseph,

I have read too many Moodle posts in Spanish about mistakes caused by the decimal separator.

Do you know if handheld calculators in Europe currently have a decimal point or a decimal comma?

I do not think that people in Spain will (in my lifetime) ever agree to use a decimal point intead of a comma. Old habits die hard 傷心

The wikipedia you quoted has a very interesting article about the origin and evolution of the decimal separator character.

Interestingly, "The 22nd General Conference on Weights and Measures declared in 2003 that "the symbol for the decimal marker shall be either the point on the line or the comma on the line". It further reaffirmed that "numbers may be divided in groups of three in order to facilitate reading; neither dots nor commas are ever inserted in the spaces between groups"( e.g. 1 000 000 000). This usage has therefore been recommended by technical organizations, such as the United States' National Institute of Standards and Technology."

But I do not think that we have widely discussed whether all Moodles should use a non-breaking space as the thousands separator, in order to prevent some very common errors  in calculations. I think that this one issue should be easier to agree upon by Moodle users than the decimal separator.

Maybe this post has diverged a little bit too much from the original topic and a wise moderator can split it into a new topic about decimal separators 微笑
評比平均分數：Useful (1)
In reply to Germán Valero

Re: Resize text boxes while user is typing

由Dominique Bauer發表於
Documentation writers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Hello Germán,

Handheld calculators: TI-Nspire™ CX CAS Reference Guide ↗ in 14 languages. I did not checked them all, but French, Spanish, Chinese, etc. all use the decimal point.

Thousands separator: Wikipedia ↗ Some programming languages... use the underscore (_), the apostrophe (') or a whitespace.


評比平均分數：Useful (1)
In reply to Dominique Bauer

Re: Resize text boxes while user is typing

由Marcus Green發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片 Testers的相片
I expect the UK will start to use something entirely different again in the near future sad
I am old enough to remember pounds shillings and pence, one pound was 20 shillings and a shilling was 12 pence WTF.
評比平均分數： -