Answer boxes

Answer boxes

by Agustín Sánchiz -
Number of replies: 5

Hello,

I have used the following script that I found in the forum to adjust the box of the algebraic answers in question type formula:

<script>

    $(window).on("load", function() {

        /* Format the answer boxes */

        /* Width */

        $("div .formulas_algebraic_formula:eq(0)").css("width", "40px");

        $("div .formulas_algebraic_formula:eq(1)").css("width", "40px");

        $("div .formulas_algebraic_formula:eq(2)").css("width", "40px");

        $("div .formulas_algebraic_formula:eq(3)").css("width", "40px");

        $("div .formulas_algebraic_formula:eq(4)").css("width", "40px");

        $("div .formulas_algebraic_formula:eq(5)").css("width", "70px");

        $("div .formulas_algebraic_formula:eq(6)").css("width", "70px"); /* Border */

        $("div .formulas_algebraic_formula").css("border", "none");

        $("div .formulas_algebraic_formula").css("border-bottom", "1px solid #CCC");


        /* Center text in the answer box (looks nicer) */

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

        /* Prevent the info title and interpretation from appearing under the answer box, otherwise it may confuse students */

        $("div .formulas_algebraic_formula").focusin(function() {

            $(".formulas_input_info").css("display", "none");

            $(".formulas_input_info_interpretation").css("display", "none");

            $(".formulas_input_info_title").css("display", "none");

            $(".formulas_input_warning_outer").css("display", "none");

            $(".formulas_input_info_outer").css("display", "none");

        });

        $("div .formulas_algebraic_formula").keyup(function() {

            $("div.formulas_input_info").css("display", "none");

            $("div.formulas_input_info_interpretation").css("display", "none");

            $("div.formulas_input_info_title").css("display", "none");

        });

    });

</script>

The problem is that my question has two parts, and the second is a numerical answer. I can't find a way to change answer box i this part.

I would also like to know how I can change the thickness of the horizontal line that makes fraction.

The question is:


Could you help me?


Agustín. 

Average of ratings: -
In reply to Agustín Sánchiz

Re: Answer boxes

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
Hello Agustin,

With a little CSS or JavaScript, you can easily adjust the size, position and other attributes of input boxes. I prefer jQuery which I often find superior to plain JavaScript and which is not completely erased by the Atto editor, although it sometimes gets a bit messed up, in which case you have to use the Plain text area editor.

jQuery is pretty straightforward. See for example W3Schools ↗. It might be easier for me to help you if you attach the XML file of your question.
In reply to Dominique Bauer

Re: Answer boxes

by Agustín Sánchiz -
In reply to Agustín Sánchiz

Re: Answer boxes

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
In reply to Dominique Bauer

Re: Answer boxes

by Agustín Sánchiz -

Hello Dominique,

Thank you very much for your help. I'm learning a lot from reading to you, and my students are improving their learning with these activities.

I repeat, thank you very much !!

In reply to Dominique Bauer

Re: Answer boxes

by Agustín Sánchiz -

Hello Dominique,

I attach another example. A simple conversion factor to go from meters to kilometers. I have used one of the examples where the authors construct the fraction with a table. I have also added a script that I saw on these forums to adjust the boxes for the algebraic variables.

My doubts are:

How can I increase the thickness of the blue line that makes the fraction?

How can I enlarge the numeric answer box so that the complete answer fits and is visible?

Greetings.