如何覆盖 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

您的自定义 UI 放置在 Ground Truth 的沙盒 iFrame 中。它仅用于实际工作，而不用于预览（您的代码可能在从 AWS 控制台预览 UI 时工作）。 iFrame 上的沙盒属性是这样的

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

有关说明，请参阅 https://www.w3schools.com/tags/att_iframe_sandbox.asp。无论是否存在 allow-same-origin（不是您可以以任何方式更改它），都会阻止 Ajax 调用。详细解释见IFRAME sandbox attribute is blocking AJAX calls

Answer 2

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

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

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

希望这会有所帮助。如果没有，请告诉我们。

谢谢，

亚马逊机械土耳其人