如何重写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

这个例子可能会有所帮助。

它更新onSubmit函数以执行一些预提交验证。

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

希望这能有所帮助。如果没有，请让我们知道。

谢谢,

Amazon Mechanical Turk

Answer 2

您的自定义UI由Ground Truth放在沙盒iFrame中。它只适用于实际作业，而不适用于预览(您的代码可能会在从AWS控制台预览UI时工作)。iFrame上的沙盒属性如下所示

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

有关说明，请参阅https://www.w3schools.com/tags/att_iframe_sandbox.asp。Ajax调用被阻塞，不管是否存在allow-same-origin (不是说您可以以任何方式更改它)。有关详细说明，请参阅IFRAME sandbox attribute is blocking AJAX calls