Different box sizes for algebraic formulas within the same problem (Qtype: Moodle Formulas)

Different box sizes for algebraic formulas within the same problem (Qtype: Moodle Formulas)

by Ton Boerkoel -
Number of replies: 6

Is it possible to have different box sizes for algebraic formulas within the same problem?

It often happens that I need a couple of box sizes. But if I reset a box size (with a script) then all box sizes of the same type change in all parts of the same problem.

It would be great if box sizes were not linked to type ... but I can only dream. 

Right now I would like to know if it is possible (using scripts?) to have different box sizes for algebraic formula type boxes in the same question?

For example, I am working on the following problem (over the finite field F4). All entry fields are algebraic formulas type. But most of them should be small since they only ask for the entries 0,1,a or b.

But one part (e)  I ask for linear combinations of the type:  a*x+b*y+z  etc.  

Here is the problem:




But as soon as I set all other fields as algebraic formulas all box sizes become big, which is awkward for the nice matrices that require smaller entry fields.

Is there a way to set box sizes differently for the same box type in different parts of the same problem?

I want to avoid getting:


instead I would like to keep:


Average of ratings: -
In reply to Ton Boerkoel

Re: Different box sizes for algebraic formulas within the same problem (Qtype: Moodle Formulas)

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
This is not only possible but also quite simple.

I'm paraphrasing here Tim Hunt in a recent discussion: “Use the developer tools built into your web browser. Right click on any of the choices and choose “Inspect” or similar. This will let you see the HTML and CSS, and even if you don't know much about those things, you can easily figure out what to do."

You can select an answer box by using its "class". The class of a "Number" answer box is "formulas_number", that of a "Numeric" answer box is "formulas_numeric", that of a "Numerical formula" answer box is "formulas_numerical_formula", and that of an "Algebraic formula" answer box is "formulas_algebraic_formula". There are also other classes when using units.

To change the format of an answer box, you can use CSS or jQuery. CSS is the most formal way, but sometimes jQuery is easier to use (in my opinion). These days, I would say it's a matter of personal preference.

On any given page, you can select a single answer box, all answer boxes, or any desired boxes using the appropriate selector. Just google "CSS selectors" or "jQuery selectors". W3Schools is a fairly comprehensive and easy to understand reference.
Average of ratings: -
In reply to Dominique Bauer

Re: Different box sizes for algebraic formulas within the same problem (Qtype: Moodle Formulas)

by Ton Boerkoel -

Cool ... it can be done.  Of course I don't understand what you just sent me.   (Daszo dudelik as moddr)

So I can insert selectors in some parts, and change the box sizes for those parts?

So for example can I just label a  <table> element for small boxes as follows

    < table title="smallbox" >

and then somehow alter the script (how?) to apply to that table type?

This is the script I use:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>

        $(document).ready(function() {

            /* FORMAT THE INPUT BOX */

            $(".formulas_algebraic_formula").css("width", "25px");

            $(".formulas_algebraic_formula").css("height", "25px");

            $(".formulas_algebraic_formula").css("padding", "0");

            $(".formulas_algebraic_formula").css("background-color", "#FFF");

            $(".formulas_algebraic_formula").css("border", "1px solid #AAA");

            $(".formulas_algebraic_formula").css("border-radius", "2px");

            $(".formulas_algebraic_formula").css("outline", "none");

            $(".formulas_algebraic_formula").css("text-align", "center");

        });

    </script>

Where do I indicate that this script should only apply the boxes with  title="smallbox"



Average of ratings: -
In reply to Ton Boerkoel

Re: Different box sizes for algebraic formulas within the same problem (Qtype: Moodle Formulas)

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
Daszo dudelik as moddr
In what language is this? Did you just say my explanations are as clear as mud? sad

What you are showing is jQuery. You can find a nice list of jQuery selectors here: https://www.w3schools.com/jquery/jquery_ref_selectors.asp ↗

".formulas_algebraic_formula" selects all the elements on a page with class="formulas_algebraic_formula", that is to say all the answer boxes of the Algebraic Formula type. (The "." in ".formulas_algebraic_formula" denotes a class). 

".formulas_algebraic_formula:eq(0)" select the first element with class="formulas_algebraic_formula", i.e. the first answer box. Note that indexes always start at zero. ".formulas_algebraic_formula:eq(1)" selects the second answer box, and so on.

".formulas_algebraic_formula:gt(3)" selects the elements with an index greater than 3, that is to say the fifth answer box and the following ones.

It is a good idea to use a title for your table. In this case, to select the answer boxes in the table, you can use:
"table[title='smallbox'] .formulas_algebraic_formula", that is to say all the answer boxes found in all tables whose "title" attribute is "smallbox". Note that the space between ] and . is important.

Average of ratings: -
In reply to Dominique Bauer

Re: Different box sizes for algebraic formulas within the same problem (Qtype: Moodle Formulas)

by Ton Boerkoel -

Hi Dominique,

So I tried several things ... "inspect element"


and indeed I can change sizes (temporarily) as you can see above, but I don't know how to save it so that it becomes part of the source file. (After I save the Moodle problem it it is back to where it was originally).

Where does one "inspect an element"?  In the source code when I am writing the problem?  Or in the display mode when I look at the problem?  I tried both, and tried changing px sizes in both cases but after I go back, it changes back to what it was. i have no idea what I am supposed to do to 'save' it.

I tried also labeling my tables with <table title="smallbox">

and changed that script  (that I showed you)  to 

            $("table[title='smallbox'] .formulas_algebraic_formula").css("width", "25px");

            $("table[title='smallbox'] .formulas_algebraic_formula").css("height", "25px");

            $("table[title='smallbox'] .formulas_algebraic_formula").css("padding", "0");  etc.

I tried both 'smallbox' and "smallbox".  This didn't work. The fields just became as big as the field in the next part (where the table doesn't have the attribute "smallbox".)

For someone who is familiar with these things, it may be clear and easy, for someone who is not familiar with this stuff  (like me) it is not.  

I do appreciate all the help I have gotten along the way while trying to master bits of Moodle Formulas  (from you in particular) !

But I really need some guidance as to how to adapt the script and what and how to label things to get different box sizes. I don't know the syntax of jquery and css.

I have included a boiled down XML file  and if you have time maybe you can alter it so that it works with bigger box sizes in part (b) ?



Average of ratings: -
In reply to Ton Boerkoel

Re: Different box sizes for algebraic formulas within the same problem (Qtype: Moodle Formulas)

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
I can change sizes (temporarily)
This is perfect for testing.

I don't know how to save it so that it becomes part of the source file
You are looking at the Document Object Model (DOM) of the page, which is created by the browser when the page is loaded. You can modify the DOM temporarily for testing or debugging, but usually you don't save it.

Where does one "inspect an element"?  In the source code when I am writing the problem?  Or in the display mode when I look at the problem?
You can inspect an element anywhere. For the case at hand, it is relevant to inspect elements in the display mode when you look at the problem.

i have no idea what I am supposed to do to 'save' it.
Again, saving the DOM is not the way to do this.

I tried both 'smallbox' and "smallbox".
You have to use single quotes when they appear inside double quotes (and vice versa).

This didn't work.
It should have worked.

For someone who is familiar with these things, it may be clear and easy...
It would not be difficult to familiarize yourself with these things.

I do appreciate all the help...
You're welcome.

But I really need some guidance...
It would definitely be worth reviewing the HTML, CSS, JavaScript, and jQuery tutorials on W3Schools. You will become an expert in no time.

I have included a boiled down XML file
It is always a good idea. It helps a lot to help you.

maybe you can alter it
Here are the changes:
In the script,
        $("table[title='boxwidth25px'] .formulas_algebraic_formula").css("width", "25px");
        $("table[title='boxwidth75px'] .formulas_algebraic_formula").css("width", "75px");
In Part1,
        <table title="boxwidth25px" style="font-family:'Times New Roman';font-size: 17px;">
In Part 2,
        <table title="boxwidth75px" style="font-family:'Times New Roman';font-size: 17px;">

The XML file is attached.


Average of ratings: -
In reply to Dominique Bauer

Re: Different box sizes for algebraic formulas within the same problem (Qtype: Moodle Formulas)

by Ton Boerkoel -
Thank you, Dominique! Brilliant. That works great. Thanks!
Average of ratings: -