Text model variables not being saved after setting up new run in facilitator settings

#1

Hi Support Team,

We’ve been encountering an issue with accessing text variables (that were set from the facilitator interface) in the player interface.

Specifically, we want the facilitator to be able to set the name of a location (e.g. Chicago) and make that location name appear in the user interface of the students/players.

On further investigation, I noticed that when I click the ‘Save & Apply settings’ button on the class_settings.html page of the facilitator interface, the run that is created sets the location name to null (as shown in the screenshot from the browser dev tools below)

image

We’re using Excel as the modelling language.

Any guidance on how we can resolve this issue would be appreciated.

Kind regards
Wesley Barreto

#2

Hi Wesley – can you let us know the URL for the simulation? You can email this to support@forio.com if you prefer.

WILL

#3

Hi Westley,

We’ve confirmed that the interface builder only supports (out of the box) numbers for the class settings.

However, you can modify this behavior with custom javascript.

Here’s the handler in the interface builder code which listens for click events on “Save Settings” and then stores the settings. It’s part of the file “common.min.js” served from forio.com.

$('#btn-save-settings').off('click.settings').on('click.settings', ()=> {
  const toSave = {
    runLimit: $('#run-limit-input').val()
  };
  $('.settings-section [data-f-bind]').each((index, el)=> {
    const $el = $(el);
    const key = $el.attr('data-f-bind');
    const numberFormat = $el.attr('data-f-convert') || '#';
    const rawValue = Flow.dom.converters.parse($el.val(), numberFormat);

    const isSelectable = $el.is(':radio, :checkbox');
    const shouldSave = !isSelectable || $el.is(':checked');
    if (shouldSave) {
      toSave[key] = rawValue;
    }
  });
  settingsManager.settings.saveAndActivate(toSave).then((settings)=> {
    notifySuccess('Settings have been applied to current runs.');
    checkAndDisableUI(settings);
  });
});

Note that it adds an event listener to the button with jQuery. This listener loops through the inputs, sanitizes them ensure they are a number, then saves the setting.

While you can’t replace this code directly, you can write your own handler for this button that does something similar. Make a function that does the same behavior, but remove the code that forces it to be numerical. (Or better yet, allow only specific inputs to be non-numerical). Install it by using jQuery to remove the old event listener and replace it with your own.

We encourage you to add custom Javascript such as this to your own file “scripts.js” (or something similar), linked in from index.html.

Let us know if this is enough to move forward or if you’d like a more detailed walkthrough.

WILL

1 Like
#4

Hi Will,

Based on your suggestion, I created a separate file called scripts.js containing the function below:

function saveSettings() {
  const toSave = {
    runLimit: $("#run-limit-input").val(),
  };
  $(".settings-section [data-f-bind]").each((index, el) => {
    const $el = $(el);
    const key = $el.attr("data-f-bind");
    if (key == "CustomLocationName[0,0]") {
      toSave[key] = $el.val();
    } else {
      const numberFormat = $el.attr("data-f-convert") || "#";
      const rawValue = Flow.dom.converters.parse($el.val(), numberFormat);

      const isSelectable = $el.is(":radio, :checkbox");
      const shouldSave = !isSelectable || $el.is(":checked");
      if (shouldSave) {
        toSave[key] = rawValue;
      }
    }
  });
  settingsManager.settings.saveAndActivate(toSave).then((settings) => {
    notifySuccess("Settings have been applied to current runs.");
    checkAndDisableUI(settings);
  });
}

This function works similar to the default handler except that it doesn’t force the input element that is bound to the CustomLocationName cell to be numerical.

I’ve linked this file at the bottom of the facilitator.html file and also added the following code at the bottom of class_settings.html in order to override the default handler.

    <script>
        $(function () {
            $("#btn-save-settings")
                .off("click.settings")
                .on("click.settings", saveSettings());
        });
    </script>

When I run the project and navigate to the class_settings.html page after logging in as facilitator, I get the following error which says settingsManager is not defined.:

image
image.png710×229 17.6 KB

While investigating the issue via the dev tools, I found that the original handler is part of the facilitator.min.js file which is a minified version of the class-settings-controller.js file.

class-settings-controller.js also contains an instance of settingsManager.

Is there a way I can access the settingsManager variable that is used in the facilitator.min.js file?

Kind regards
Wesley

#5

Hi,

We’re going to update the Interface Builder end of this week with a fix that allows non-numerical inputs in the class settings.

We’re researching how to easily make the SettingManager and other managers available from your own JavaScript. You can of course construct a new one as shown in the SettingManager documentation, but I don’t think it will be properly linked to the existing RunManager.

#6

Following up, I think you can just instantiate a new settings manager and it will work. (But again, if you wait a couple of days this won’t be necessary as we are adding the feature you need).

var settingsManager = new F.manager.Settings({
    "run":{ "model": $('body').attr('data-f-model') }
});
1 Like
#7

Hi Wesley,

We have issued an update to the Forio interface builder which allows text model variables in class settings.

When setting up the class settings page, if the input has a number format specified, it will force it to be a number. If the input does not have a number format, you may enter a text value instead.

Let us know if this helps!

WILL

1 Like