How to override the crowd-html submit button to include additional data

Question

I'm working on a fairly simple form using crowd-html elements, which makes everything very simple. As part of our study, we want to see how workers interact with the form, so we have a bunch of basic JS logging. That is all prepared as a JSON and the idea is to log it using AWS API Gateway and AWS Lambda. The code all seems to work in unit tests, but not in the real form. I am trying to do this:

document.querySelector('crowd-form').onsubmit = function (e) {
  if (!validateForm()) {
    window.alert("Please check the form carefully, it isn't filled out completely!");
    e.preventDefault();
  } else {
    let event_data = {
      'specific_scroll_auditor': auditor_scrolled_pixels_specific.submit_callable(),
      'specific_clicks_auditor': auditor_clicks_specific.submit_callable(),
      'mouse_movements_total': auditor_mouse_movement_total.submit_callable(),
      'on_focus_time': auditor_on_focus_time.submit_callable(),
      'total_task_time': auditor_total_task_time.submit_callable(),
      'focus_changes': auditor_focus_changes.submit_callable()
    };
    log_client_event('auditors', event_data);
    post_event_log()
  }
}

Note that the validation bit works, but the logging does not. I've tested post_event_log() on it's own, and that works just fine, so it seems like either 1) for some reason I never get to that else clause, or 2) the submission happens more quickly than I can call the logging functions. (but why, since the validation works?)

I also tried this, borrowed from the turkey code (https://github.com/CuriousG102/turkey) which was our inspiration.

$(window).ready(function () {
  window.onbeforeunload = function () {
    let event_data = {
      'specific_scroll_auditor': auditor_scrolled_pixels_specific.submit_callable(),
      'specific_clicks_auditor': auditor_clicks_specific.submit_callable(),
      'mouse_movements_total': auditor_mouse_movement_total.submit_callable(),
      'on_focus_time': auditor_on_focus_time.submit_callable(),
      'total_task_time': auditor_total_task_time.submit_callable(),
      'focus_changes': auditor_focus_changes.submit_callable()
    };
    log_client_event('auditors', event_data);
    post_event_log()
  }
});

That also doesn't work. I would prefer to do this in some simple way like what I have above, rather than completely rewrite the submit function, but maybe I have to?

score 0 · Answer 1 · edited Aug 28 '21 at 03:45

0

This example might help.

It updates the onSubmit function to do some pre-submit validations.

https://github.com/aws-samples/amazon-sagemaker-ground-truth-task-uis/blob/master/images/keypoint-additional-answer-validation.liquid.html

Hope this helps. Let us know if not.

Thank you,

Amazon Mechanical Turk

edited Aug 28 '21 at 03:45

FabiDann

5
3

answered Jul 01 '19 at 16:09

Amazon Mechanical Turk

369
1
3

Sorry, that did not work. I'm not even exactly sure how it is different than what I'm doing already... – Marcus Collins Jul 02 '19 at 19:20

score 0 · Answer 2 · answered Jul 19 '19 at 12:09

0

your custom UI is placed inside a sandboxed iFrame by Ground Truth. It does that only for the real job, and not for previews (you're code might work while previewing the UI from AWS Console). The sandbox attribute on the iFrame goes like this

sandbox="allow-scripts allow-same-origin allow-forms"

Refer https://www.w3schools.com/tags/att_iframe_sandbox.asp for descriptions. Ajax calls are blocked regardless of the presence of allow-same-origin (not that you could change it in any way). See for a thorough explanation IFRAME sandbox attribute is blocking AJAX calls

answered Jul 19 '19 at 12:09

Radu Simionescu

4,518
1
35
34

That's helpful to understand, but I've set it up to use CORS anyway. I can make calls to my API to log various things before the user clicks Submit, just not with the submit button/action. – Marcus Collins Aug 02 '19 at 20:27
@MarcusCollins surprised that it works, because your ajax calls run inside the sandboxed iFrame and according to https://stackoverflow.com/questions/14486461/iframe-sandbox-attribute-is-blocking-ajax-calls, it wouldn't work. Are you saying that simply by enabling CORS on your API you can call it from inside the sandboxed iFrame? Note that your custom UI template runs in a sandboxed iFrame only in the "real-life" scenarios (when previewing the UI, it is not rendered in a sandboxed iFrame) – Radu Simionescu Aug 04 '19 at 14:38

How to override the crowd-html submit button to include additional data

2 Answers2