Changing Cloze answer block size

Changing Cloze answer block size

by Al Henneberger -
Number of replies: 11

I am writing a passel of Cloze questions to test students on an equipment setup screen.  Each question has between 30 and 90, usually single character, numerical and short answer blocks.  This is over a background image instead of using z-index.

I have two potentially related issues/questions--modifying block size and adjusting the line spacing between blocks.

  1. The default block length for single characters is acceptable.  It also appears to be of adequate size for 4 to 5 characters.  A few of these blocks may require longer inputs.  As it sits now, as the answer lengthens, the block also lengthens (see docs for Cloze for details).  I want to fix the block length so those blocks that require longer entries are not given away due to the change in block length (see first image below center block).  Is this possible?  I found this post and tried Douglas' code.  It changes the available space but not the actual block size.  In the second image below, I changed the code for the first row 1 block to  <span style="display: inline-block; height: 155px; width: 80px;">{:SA:=N}</span>.  However, as you can see the actual block size did not change.  I would like blocks smaller than default size.


  2. The second issue is most likely related to the first.  I want to adjust the spacing between the rows of blocks.  In the image below the spacing between the first and second rows is different than the spacing between rows 2 & 3.  The spacing between rows 1 & 2 is the same as the spacing between rows 3 & 4.  The first spacing is the standard p-element with no inline style applied.  The spacing between rows 2 & 3 uses the br-element.  The spacing between rows 3 & 4 is the p-element with inline line-height style of 0.8.  I have adjusted padding and line-height to no avail.  I need to fit a fixed grid over the background-image.

  3. Third, again possibly related, is that in the documentation the blocks appear about the same height proportional to the text (first image below) whilst it does not look like that in my version (second image below).  This implies the block height can be changed.  How, without altering font-size?


Any assistance on this is greatly appreciated.  Thanks in advance.  (oh, I run 3.5.3)

Average of ratings: -
In reply to Al Henneberger

Re: Changing Cloze answer block size

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

Hello Al,

I imagine you only have one or a few quizzes like the one you describe. If so, it is not really necessary to write a plugin or even to hack the Cloze question. Just insert the following small Java script into the HTML of the question text: 

<script>
    function BlockFunction() {
        var x = document.getElementsByClassName('form-control');
        var i;
        for (i = 0; i < 17; i++) {
            x[i].size = "18";
            x[i].style.padding = "19px 12px";
        }
    }
    window.onload = BlockFunction;
</script>

In response to your questions:

  1. The script above will make all blocks have the same width. Adjust the value 17 to match the total number of blocks. Adjust the value 18 for the desired width of the blocks.
  2. (I am not sure I understand your question). Just use the same elements for each row of blocks and you will get the same spacing for all rows.
  3. The above script allows you to adjust the height of the blocks. Adjust the value 19 for the desired height of the blocks.
Average of ratings: Useful (1)
In reply to Dominique Bauer

Re: Changing Cloze answer block size

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

On point 2., especially if you want to arrange all the blocks in a regular way as in an array of m rows by n columns, you could put all the blocks in a <table> element. This way, it will be easier for you to position the table, adjust its width and the width of the columns and adjust the height of the rows.

Average of ratings: Useful (1)
In reply to Dominique Bauer

Re: Changing Cloze answer block size

by Al Henneberger -
Thank your for your reply.
I had not considered using a table in this situation--though I should have with all the other places I used tables.
What I was getting at with point 2 was that neither the p-element nor the br-element exactly fit the background image I am trying to fit the blocks to. I have pretty much fixed that issue by altering the image to fit using GIMP.
Average of ratings: -
In reply to Al Henneberger

Re: Changing Cloze answer block size

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

There are many style properties that will influence the vertical position of an element: margin-top, padding-top, border-top, vertical-align, line-height, and so on.

For a custom and accurate positioning of an element, you can use the position property. (An interesting trick is to use position:absolute inside position:relative.)

GIMP looks impressive.
Average of ratings: -
In reply to Dominique Bauer

Re: Changing Cloze answer block size

by Al Henneberger -

I have used the style properties you mentioned in various locations.  They can sometimes be tricky, but very useful.  I have used the position:absolute and relative but had never considered using one nested within the other.  I can visualize how that might work.  I will have to try it some time.

I do all my image editing using GIMP, though I readily admit I am far from being an expert.

Average of ratings: -
In reply to Dominique Bauer

Re: Changing Cloze answer block size

by Al Henneberger -
Thank you for your reply.
I shall test out the script you provided in my quizzes.
As for writing a plugin or hacking the question, that is not an option. I do not have access to the required file locations, let alone the files themselves. Support from IT for changes or even upgrades is sparse.
Again, thank you for the code and how to make adjustments.
Average of ratings: -
In reply to Al Henneberger

Re: Changing Cloze answer block size

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

Hello Al,

Thank you for mentioning the conditions that make JavaScript a real lifeline:

  • Access to the site administration not available to the teacher.
  • IT support not available.
  • No time or not enough knowledge to hack the question or to write a plugin.
  • A solution is sought for a few questions only, which means that you would not want to hack the question or write a plugin anyway.
  • The java script is relatively simple and easy to implement. The teacher has only to insert it into the HTML of the text of the question.
  • The java script is executed once the page is loaded. This allows you to control the display of the page, unlike CSS that is overwritten by the question..

That said, I will try to learn how to edit the Formulas plugin, which I hear is very complex, because it does not work exactly as it should and no one seems willing to fix it. Which means that I will now have to learn PHP, MySQL, etc. 😢

Average of ratings: Useful (1)
In reply to Dominique Bauer

Re: Changing Cloze answer block size

by Al Henneberger -
I was in a similar boat in learning html, css, and JavaScript when I wanted to do something either in a lesson or question that was not readily available from the toolbar. I still have to go back to references for them as I am still learning. I plan on adding PHP and Ruby in the near future.
Average of ratings: -
In reply to Dominique Bauer

Re: Changing Cloze answer block size

by Al Henneberger -

I have been playing around with various settings with your code.

I changed 17 to x.length.  That way when I change the number of blocks and forget to change this parameter I do not get an error or just not working issue.

I noticed height is purely due to 19 and width is a combination of 18 and 12.  I noticed 18 cannot have units such as px or pt, thus it must be a preset in the question plugin.  

For me, settings of 18=3, 19=5, & 12=1 seems to give me the results I am looking for.  I may expand out the padding for finer control.

It seems to be working, thanks.

Average of ratings: Useful (1)
In reply to Al Henneberger

Re: Changing Cloze answer block size

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

I changed 17 to x.length. Excellent idea!

I noticed 18 cannot have units... The 'size' attribute specifies the visible width, in characters, of an <input> element. See https://www.w3schools.com/tags/att_input_size.asp.

Cheers!

Average of ratings: -
In reply to Dominique Bauer

Re: Changing Cloze answer block size

by Al Henneberger -
I have been going through the lessons for html, JavaScript, and CSS in w3schools. I must have forgotten that minor (ha!) tidbit.
Average of ratings: -