Как переопределить кнопку отправки crowd-html, чтобы включить дополнительные данные

Question

Я работаю над довольно простой формой, используя элементы crowd-html, что делает все очень простым. В рамках нашего исследования мы хотим увидеть, как работники взаимодействуют с формой, поэтому у нас есть несколько базовых журналов JS. Все это подготовлено в формате JSON, и идея состоит в том, чтобы зарегистрировать его с помощью AWS API Gateway и AWS Lambda. Кажется, что код работает в модульных тестах, но не в реальной форме. Я пытаюсь сделать это:

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()
  }
}

Обратите внимание, что бит проверки работает, а запись - нет. Я протестировал post_event_log () сам по себе, и он работает просто отлично, поэтому мне кажется, что либо 1) по какой-то причине я никогда не дохожу до этого условия else, либо 2) отправка происходит быстрее, чем я могу вызвать функции ведения журнала , (но почему, так как проверка работает?)

Я тоже попробовал это, позаимствовал у кода Турции (https://github.com/CuriousG102/turkey), который был нашим вдохновением.

$(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()
  }
});

Это тоже не работает. Я бы предпочел сделать это каким-то простым способом, подобным тому, что я описал выше, а не полностью переписать функцию отправки, но, может быть, мне придется?

Answer 1

Ваш пользовательский интерфейс помещен внутри изолированного iFrame от Ground Truth. Это делается только для реальной работы, а не для предварительного просмотра (ваш код может работать при предварительном просмотре пользовательского интерфейса из консоли AWS). Атрибут песочницы в iFrame выглядит следующим образом

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

См. https://www.w3schools.com/tags/att_iframe_sandbox.asp для описания. Ajax-вызовы блокируются независимо от наличия allow-same-origin (не то, чтобы вы могли изменить его каким-либо образом). См. Подробное объяснение Атрибут песочницы IFRAME блокирует вызовы AJAX

Answer 2

Этот пример может помочь.

Обновляет функцию onSubmit для выполнения некоторых предварительных проверок.

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

Надеюсь, это поможет. Дайте нам знать, если нет.

Спасибо,

Амазонский механический турок