HIT.html

<!-- You must include this JavaScript file -->
<script src="https://assets.crowd.aws/crowd-html-elements.js" async></script>

<!-- For the full list of available Crowd HTML Elements and their input/output documentation,
      please refer to https://docs.aws.amazon.com/sagemaker/latest/dg/sms-ui-template-reference.html -->

<style>
  div {
    margin: 1rem;
  }

  input[type="radio"],
  input[type="checkbox"] {
    height: 1rem;
    width: 1rem;
    margin-left: 1rem;
  }

  label {
    display: inline-flex;
    font-weight: 300;
  }

  img {
    width: 50%;
  }
</style>

<div>
  <!-- You must include crowd-form so that your task submits answers to MTurk -->
  <crowd-form answer-format="flatten-objects">
    <h2>
      Read about ${taskName} and answer questions below.
    </h2>
    <p>
      Your answers will be compared to other workers. <strong>If your answers align
        with most other workers', you will receive a bonus of up to $1.</strong>
    </p>
    <p>
      If a question is unclear, <strong>answer it, then mark it as unclear</strong>, and provide some suggestions about
      how we might make
      it more clear in the future.
    </p>

    <h2>Read the instructions for ${taskName}</h2>
    <p>${taskDescription}</p>
    <h2>Answer questions about ${taskName}</h2>
  </crowd-form>
</div>
<script async>
  let questions = [
    {
      id: "q1",
      question:
        "Can the task - at least theoretically - be done by one individual?",
      type: "tf"
    },
    {
      id: "q2",
      question:
        "Can the task difficulty or complexity be varied systematically?",
      type: "complexity"
    },
    {
      id: "q3",
      question: "There is more than one correct solution",
      type: "l5pt"
    },
    {
      id: "q4",
      question: "Correctness of a solution can be demonstrated",
      type: "l5pt"
    },
    {
      id: "q5",
      question: "Integrated actions of group members is required",
      type: "l5pt"
    },
    {
      id: "q6",
      question: "The task is commonly encountered by members of the society",
      type: "l5pt"
    },
    { id: "q7", question: "Task is interesting and attractive", type: "l5pt" },
    {
      id: "q8",
      question:
        "Task requires equal participation or effort from group members",
      type: "l5pt"
    },
    {
      id: "q9",
      question:
        "Tasks involve conflict as opposed to cooperation among group members",
      type: "l5pt"
    },
    {
      id: "q10",
      question:
        "The goal of the task is to perform as much or as quickly as possible?",
      type: "l5pt"
    },
    {
      id: "q11",
      question:
        "The goal of the task is to produce a specific desired outcome?",
      type: "l5pt"
    },
    {
      id: "q12",
      question: "What is the ratio of mental to motor effort in this task",
      type: "mentalMotor"
    },
    { id: "q13", question: "Categorize this task", type: "intellective" },
    {
      id: "q14",
      question: "Does the task require generating an action-oriented plan?",
      type: "tf"
    },
    {
      id: "q15",
      question: "Does the task require generating novel ideas?",
      type: "tf"
    },
    {
      id: "q16",
      question: "Is there an objectively correct answer?",
      type: "tf"
    },
    {
      id: "q17",
      question:
        "Does this task require resolving differences in viewpoint or opinion?",
      type: "tf"
    },
    {
      id: "q18",
      question:
        "Does this task induce a conflict of interest between the members?",
      type: "tf"
    },
    {
      id: "q19",
      question: "Is it against an opponent or adversary group?",
      type: "tf"
    },
    {
      id: "q20",
      question:
        "Can the task be divided into two or more easily separated parts?",
      type: "tf"
    },
    {
      id: "q21",
      question: "Does the task require various skills or abilities?",
      type: "tf"
    },
    {
      id: "q22",
      question: "Can the group just sum the product of the members' efforts?",
      type: "tf"
    },
    {
      id: "q23",
      question:
        "Does the task require group members to contribute identically to the group's product?",
      type: "tf"
    },
    {
      id: "q24",
      question: "Can one member's contribution determine the group's product?",
      type: "tf"
    },
    {
      id: "q25",
      question:
        "Does it permit the group members to weight contributions in any way they want?",
      type: "tf"
    }
  ];

  let crowdForm = document.querySelector("crowd-form");

  function toggleInput(name, enabled) {
    document.getElementsByName(name + "-input")[0].style.display = enabled
      ? "inline"
      : "none";
  }

  inputs = {
    tf: id => {
      return "" + inputs.tfOnly(id) + inputs.unclearQ(id);
    },
    tfOnly: id => {
      return (
        '<label><input type="radio" name="' +
        id +
        '" value="true" required />True</label> <label><input type="radio" name="' +
        id +
        '" value="false" required />False</label>'
      );
    },
    l5pt: id => {
      return (
        '<label><input type="radio" name="' +
        id +
        '" value="0">Definitely false</label> <label><input type="radio" name="' +
        id +
        '" value="1">Probably false</label> <label><input type="radio" name="' +
        id +
        '" value="2">Neither true nor false</label> <label><input type="radio" name="' +
        id +
        '" value="3">Probably true</label> <label><input type="radio" name="' +
        id +
        '" value="4">Definitely true</label>' +
        inputs.unclearQ(id)
      );
    },
    mentalMotor: id => {
      return (
        '<label><input type="radio" name="' +
        id +
        '" value="eMental">Entirely mental effort</label> <label><input type="radio" name="' +
        id +
        '" value="mMental">Moderately mental effort</label> <label><input type="radio" name="' +
        id +
        '" value="even">About 50:50</label> <label><input type="radio" name="' +
        id +
        '" value="mmotor">Moderately motor effort</label> <label><input type="radio" name="' +
        id +
        '" value="emotor">Entirely motor effort</label>' +
        inputs.unclearQ(id)
      );
    },
    intellective: id => {
      return (
        '<label><input type="radio" name="' +
        id +
        '" value="intellective">Purely intellective: correctness of a proposed solution can be readily demonstrated</label> <label><input type="radio" name="' +
        id +
        '" value="intermediate">Intermediate: correctness of a proposed solution is more difficult, but not impossible</label> <label><input type="radio" name="' +
        id +
        '" value="judgmental">Purely judgmental: no demonstrably correct answer</label> <label><input type="radio" name="' +
        id +
        '" value="both">Simultaneous: both intellective and judgmental</label>' +
        inputs.unclearQ(id)
      );
    },
    complexity: id => {
      return (
        "" +
        inputs.tfOnly(id) +
        '<crowd-input name="' +
        id +
        '-complexity-details" label="If so, how could the complexity be systematically adjusted?"></crowd-input>' +
        inputs.unclearQ(id)
      );
    },
    unclearQ: id => {
      return (
        '<span style="margin-left:3rem; "> <label><input type="checkbox" tabindex="-1" name="' +
        id +
        '-unclear" value="unclear" onchange="toggleInput(this.name,this.checked)">This question is unclear</label></span><crowd-input style="display:none;" name="' +
        id +
        '-unclear-input" label="How could it be made more clear?"></crowd-input>'
      );
    }
  };

  function fillQuestions() {
    questions.forEach(q => {
      crowdForm.innerHTML +=
        "<p>" + q.question + "</p>" + inputs[q.type](q.id) + "<br><br>";
    });
  }

  fillQuestions();
</script>