File to change fill in the blanks field width

Hello! I need to change width for the fill in the blanks field on the Drupal7 site.

How can I find the file to change it?

I see with F12 

<input type="text" class="h5p-text-input" autocomplete="off" autocapitalize="off" aria-label="Blank input 1 of 1" style="width: 56px;">

.h5p-blanks .h5p-text-input {
  1. font-family: H5PDroidSans, sans-serif;
  2. font-size: 1em;
  3. border-radius: 0.25em;
  4. border: 1px solid #a0a0a0;
  5. padding: 0.1875em 1em 0.1875em 0.5em;
  6. text-overflow: ellipsis;
  7. overflow: hidden;
  8. white-space: nowrap;
  9. width: 6em;

Printscreen is attached.

 

 

Are you sure that I can do it just with css in this case? Cause a programmer told me I need a js file.

I think I need to change the script in the blanks file?

What should I do to make th efiled shorter?

var self = this;
    var fontSize = parseInt($input.css('font-size'), 10);
    var minEm = 3;
    var minPx = fontSize * minEm;
    var rightPadEm = 3.25;
    var rightPadPx = fontSize * rightPadEm;
    var static_min_pad = 0.5 * fontSize;
// Adjust width of text input field to match value
      self.autoGrowTextField($this);

      var $inputs, isLastInput;
      var enterPressed = (event.keyCode === 13);
      var tabPressedAutoCheck = (event.keyCode === 9 && self.params.behaviour.autoCheck);

      if (enterPressed || tabPressedAutoCheck) {
        // Figure out which inputs are left to answer
        $inputs = self.$questions.find('.h5p-input-wrapper:not(.h5p-correct) .h5p-text-input');

        // Figure out if this is the last input
        isLastInput = $this.is($inputs[$inputs.length - 1]);
      }

      if ((tabPressedAutoCheck && isLastInput && !self.shiftPressed) ||
          (enterPressed && isLastInput)) {
        // Focus first button on next tick
        setTimeout(function () {
          self.focusButton();
        }, 10);
      }

      if (enterPressed) {
        if (isLastInput) {
          // Check answers
          $this.trigger('blur');
        }
        else {
          // Find next input to focus
          $inputs.eq($inputs.index($this) + 1).focus();
        }

        return false; // Prevent form submission on enter key
      }
    }).on('change', function () {
      self.answered = true;
      self.triggerXAPI('interacted');
    });

    self.on('resize', function () {
      self.resetGrowTextField();
    });

    return this.$questions;
  };

  /**
   *
   */
  Blanks.prototype.autoGrowTextField = function ($input) {
    // Do not set text field size when separate lines is enabled
    if (this.params.behaviour.separateLines) {
      return;
    }

    var self = this;
    var fontSize = parseInt($input.css('font-size'), 10);
    var minEm = 3;
    var minPx = fontSize * minEm;
    var rightPadEm = 3.25;
    var rightPadPx = fontSize * rightPadEm;
    var static_min_pad = 0.5 * fontSize;

    setTimeout(function(){
      var tmp = $('<div>', {
        'html': $input.val()
      });
      tmp.css({
        'position': 'absolute',
        'white-space': 'nowrap',
        'font-size': $input.css('font-size'),
        'font-family': $input.css('font-family'),
        'padding': $input.css('padding'),
        'width': 'initial'
      });
      $input.parent().append(tmp);
      var width = tmp.width();
      var parentWidth = self.$questions.width();
      tmp.remove();
      if (width <= minPx) {
        // Apply min width
        $input.width(minPx + static_min_pad);
      }
      else if (width + rightPadPx >= parentWidth) {
        // Apply max width of parent
        $input.width(parentWidth - rightPadPx);
      }
      else {
        // Apply width that wraps input
        $input.width(width + static_min_pad);
      }
    }, 1);
  };

  /**
   * Resize all text field growth to current size.
   */
  Blanks.prototype.resetGrowTextField = function () {
    var self = this;

    this.$questions.find('input').each(function () {
      self.autoGrowTextField($(this));
    });
  };

  /**
   * Toggle buttons dependent of state.
   *
   * Using CSS-rules to conditionally show/hide using the data-attribute [data-state]
   */
  Blanks.prototype.toggleButtonVisibility = function (state) {
    // The show solutions button is hidden if all answers are correct
    var allCorrect = (this.getScore() === this.getMaxScore());
    if (this.params.behaviour.autoCheck && allCorrect) {
      // We are viewing the solutions
      state = STATE_FINISHED;
    }

    if (this.params.behaviour.enableSolutionsButton) {
      if (state === STATE_CHECKING && !allCorrect) {
        this.showButton('show-solution');
      }
      else {
        this.hideButton('show-solution');
      }
    }

    if (this.params.behaviour.enableRetry) {
      if ((state === STATE_CHECKING && !allCorrect) || state === STATE_SHOWING_SOLUTION) {
        this.showButton('try-again');
      }
      else {
        this.hideButton('try-again');
      }
    }

    if (state === STATE_ONGOING) {
      this.showButton('check-answer');
    }
    else {
      this.hideButton('check-answer');
    }

    this.trigger('resize');
  };
otacke's picture

Hi ksen-pol!

In the case of "Fill in the blanks": yes. The width of the blanks is computed dynamically, and you seem to have found the correct functions that do so. Without knowing what "rule" you have in mind for the width, it's impossible to tell what you should do.

Best,
Oliver

The rule is for the width to be very short just for 2-3 letters in the begining (e.g. for questions where student needs to add just one letter) and it can become longer in the process of typing (as it is working now).

Or second way it would be very usefull is to have an opportunity to set up the minimal starting width in the process of creation (very short one couple letters answers and longer for long words answers)

otacke's picture

Hi ksen-pol!

You'll probably want to change the minimum width set to 3em which may already be enough to suit your needs. Otherwise, you'd also have to modify the computation of the width.

Cheers,
Oliver

I have edited files in both

sites/default/files/h5p/libraries/H5P.Blanks-1.10/js

and

sites/default/files/h5p/libraries/H5P.Blanks-1.11/js

the width became 2 times shorter (screenshoot) after I had edited 1 instead of 3 in

var self = this;
    var fontSize = parseInt($input.css('font-size'), 10);
    var minEm = 1;
    var minPx = fontSize * minEm;
    var rightPadEm = 1;
    var rightPadPx = fontSize * rightPadEm;
    var static_min_pad = 0.5 * fontSize;

 

when I tried to make it shorter by changing to 0.5 it did not work 

var self = this;
    var fontSize = parseInt($input.css('font-size'), 10);
    var minEm = 0.5;
    var minPx = fontSize * minEm;
    var rightPadEm = 0.5;
    var rightPadPx = fontSize * rightPadEm;
    var static_min_pad = 0.1 * fontSize;

Thank you

otacke's picture

You're welcome!