complexqa copy.html

<crowd-form answer-format="flatten-objects">
  <section class="container-fluid" id="Relevancy">
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <div class="panel panel-primary">
          <a class="panel-heading" href="javascript:void(0);" id="collapseTrigger">
            <strong>Annotation Instructions</strong>
            <span class="collapse-text">(Click to expand)</span>
          </a>
          <div class="panel-body" id="instructionBody">
            {{INSTRUCTIONS}}
            {{LINK}}
          </div>
        </div>
      </div>
    </div>

    <h3>Document</h3>
    <div id="document-text" class="ann well well-sm">
      ACCORDING TO MILITARY SOURCES
      AND PEOPLE WHO ARRIVED TODAY IN AYACUCHO FROM THE LA MAR AREA, 44
      PEASANTS HAVE BEEN KILLED IN TWO TOWNSHIPS OF LA MAR PROVINCE,
      AYACUCHO DEPARTMENT.
      
         YESTERDAY A [[COLUMN OF [[SHINING PATH]1]2 TERRORISTS]1]2 ARRIVED IN THE
      VILLAGE OF CHINCHIPE, IN THE JUNGLE PROVINCE OF LA MAR, AND SHOT 16
      PEASANTS WHO WERE MEMBERS OF THE PEASANT PATROLS THAT OPPOSE THE
      TERRORISTS.
      
         THE [[[[SHINING PATH]1]2 GUERRILLAS]1]2, WHO BURNED MURDERED PEASANTS' [HOUSES]2,
      CHARGED THEM WITH COLLABORATING WITH THE ARMY.  THE TOWN OF CHINCHIPE
      IS 220 KM NORTH OF AYACUCHO.
      
         TRAVELLERS ARRIVING FROM LA MAR PROVINCE SAID THAT ON 23 SEPTEMBER
      28 BODIES OF ALLEGED PEASANTS WERE FOUND NEAR THE TOWN OF CHULLAS.
      
         THE BODIES SHOWED SIGNS OF [TORTURE]3 AND BULLET WOUNDS BUT THE
      IDENTITY OF THE [MURDERERS]3 APPARENTLY COULD NOT BE DETERMINED.
    </div>

    <div id='raw-data' hidden>
      [
      {
        "text": "attack",
        "template": "",
        "role_text_map": {
          "incident_instrument": "",
          "perp_individual": [
            "COLUMN OF SHINING PATH TERRORISTS",
            "SHINING PATH GUERRILLAS"
          ],
          "perp_organization": [
            "SHINING PATH"
          ],
          "phys_tgt": "",
          "hum_tgt_name": "-"
        }
      },
      {
        "text": "arson",
        "template": "",
        "role_text_map": {
          "incident_instrument": "*",
          "perp_individual": [
            "COLUMN OF SHINING PATH TERRORISTS",
            "SHINING PATH GUERRILLAS"
          ],
          "perp_organization": [
            "SHINING PATH"
          ],
          "phys_tgt": [
            "HOUSES"
          ],
          "hum_tgt_name": "-"
        }
      },
      {
        "text": "attack",
        "template": "",
        "role_text_map": {
          "incident_instrument": [
            "TORTURE"
          ],
          "perp_individual": [
            "MURDERERS"
          ],
          "perp_organization": "-",
          "phys_tgt": "-",
          "hum_tgt_name": "-"
        }
      }
    ]
    </div>

    <p>
      You can navigate all of the triggers by clicking the following buttons. <br>
      You have to finish all the triggers before submitting. (Remember that you can't refresh the page otherwise
      the progress will be gone, <br>
      to prevent this from happening, we suggest that you write the QA pairs in the google doc and copy paste them
      here)
    </p>
    <!-- Tabs for each trigger -->
    <div class="btn-toolbar" id="button-bar">
    </div>

    <section>
      <div style="margin-top:10px;">
        <em>
          These are bootstrap question answer pairs generated by GPT. Not all QA
          pairs are correct or relevant, but feel free to copy/paste the samples that are accurate
          enough, and make edits on top.
        </em>
        <div id='bootstrap-area' class='ann well well-sm'>
        </div>
      </div>

      <div style="margin-top:10px;">
        <em>
          These are KAIROS event arguments for the trigger. You can use them to help you write QA pairs.
          The underlying meaning of such pairs should be "Q: What is arg X of the event? A: arg X is Y".
          But the formatting of the QA pairs must be as in the instructions.
        </em>
        <div id='template-area' class='ann well well-sm'>
        </div>
      </div>

      <div class="btn-container">
        <button id="addbtn" class="btn btn-success" type="button" onclick="add_qa_input()">+</button>
        <label for="addbtn">Add a QA pair</label>
      </div>
      <div class="btn-container">
        <button id="rmbtn" class="btn btn-danger" type="button" onclick="remove_qa_input()">-</button>
        <label for="rmbtn">Remove a QA pair</label>
      </div>

      <div id="input-area">

      </div>
    </section>

    <div title="Highlight all fields before submitting">
      <button id="save" class="btn btn-default" type="button">Save</button>
      <button id="submitButton" class="btn btn-default" type="button">Submit</button>
    </div>
  </section>


  <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"
    integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

  <style>
    trigger {
      display: inline;
    }

    .container-fluid {
      max-width: 1800px;
      margin: 30px;
    }

    .btn-container {
      display: inline-block;
      margin: 10px;
    }

    #collapseTrigger {
      color: #fff;
      display: block;
      text-decoration: none;
    }

    #submitButton {
      white-space: normal;
    }

    #input-area {
      display: block;
      margin: 10px;
    }

    #input-area>div {
      margin: 10px;
      background-color: #ffe3e3;
    }

    #bootstrap-area {
      background-color: #f7dec5;
    }

    #template-area {
      background-color: #75c3e7;
    }

    .btn-container>button {
      min-width: 3em;
    }

    .highlight_green {
      background: #65f37d;
    }

    .btn-group {
      vertical-align: middle;
    }

    .content {
      margin-bottom: 15px;
    }

    .ann {
      font-size: 16px;
    }

    .disp {
      font-size: 20px;
    }

    .ann>span.token {
      cursor: pointer;
    }

    .ann>span.token:hover {
      text-decoration: underline;
    }

    .ann>strong.annotation:hover {
      text-decoration: line-through;
    }

    input[disabled] {
      color: #000
    }
  </style>

  <script>
    // ---------------------------------------------------------
    // Global
    // ---------------------------------------------------------

    var page_num = 0;

    // ---------------------------------------------------------
    // Create jQuery elements
    // ---------------------------------------------------------

    var submit = $('#submitButton');

    // list of text/offset objects 
    var triggers_list = JSON.parse($('#raw-data').text().trim());

    const empty_template_area = function () {
      return $('<div id="template-area">');
    }

    let save_record = [];
    let template_record = [];
    triggers_list.forEach(function (_, idx) {
      template_record[idx] = empty_template_area();
    });

    // implementation of string formatting
    if (!String.prototype.format) {
      String.prototype.format = function () {
        var args = arguments;
        return this.replace(/{(\d+)}/g, function (match, number) {
          return typeof args[number] != 'undefined'
            ? args[number]
            : match
            ;
        });
      };
    }

    // ---------------------------------------------------------
    // Create elements
    // ---------------------------------------------------------

    var makeDom = function (page_count) {
      make_trigger(page_count);
      recoverUserInput(page_count);
    };

    var make_trigger = function (question_num) {
      /* highlight trigger within document */

      // const trigger = triggers_list[question_num];
      // // remove previous highlights
      // $('trigger').removeClass('highlight_green');
      // // highlight trigger
      // $('#trigger-' + question_num).addClass('highlight_green');

      // /* update bootstrap questions */
      // $('#bootstrap-area').html(trigger.bootstrap ?? 'no bootstrap available');

    }

    // restore input from other trigger
    var recoverUserInput = function (claim_num) {
      // simply swap out the input area DOM element!
      $('#template-area').replaceWith(template_record[claim_num]);
    };

    // ensure something is in the input box
    var canSubmit = function () {
      return true;
    };

    // template role fields
    const make_role_mapping_element = function (role, text) {
      const role_text = $('<label>').html('<b>' + role + '</b>:');
      const role_field = $('<textarea>')
        .addClass('role-field')
        .attr({
          role: role,
          rows: 1,
        })
        .text(text)

      const role_div = $('<div>')
        .addClass('role-container')
        .append(role_text)
        .append(role_field);

      return role_div;
    }

    // number of QA pairs at the moment
    var input_count = 0;

    const add_qa_input = function () {
      const current_idx = input_count;
      let question_text = $('<label>').text('question:');
      let question_input = $('<textarea>')
        .addClass('question-input')
        .attr({
          id: 'input-question' + input_count,
          name: 'input-question' + input_count,
          placeholder: 'write down your question',
          rows: 1
        });
      question_input.on("input", function () {
        // if (is_wh_question(question_input.val())) {
        //     window.alert("It seems you are not writing a yes/no question, make sure " +
        //         "you are writing questions of which the answer is yes or no!")
        // }
        show();
      });
      let answer_text = $('<label>').text('answer:');
      let answer_input = $('<textarea>')
        .addClass('answer-input')
        .attr({
          id: 'input-answer' + input_count,
          name: 'input-answer' + input_count,
          placeholder: 'write down your answer',
          rows: 1
        });
      answer_input.on("input", function () {
        show();
      });

      let input_fields = $(
        '<div>').addClass('input-fields')
        .append(question_text)
        .append(question_input)
        .append(answer_text)
        .append(answer_input)
      $('#input-area').append(input_fields);

      input_count += 1;
      show();
    };

    const remove_qa_input = function () {
      if (input_count <= 0) {
        return;
      }
      $('#input-area').children().last().remove();
      input_count -= 1;
      show();
    };

    var enable_button = function (button) {
      button.removeAttr("disabled");
      button.removeClass("btn-default");
      button.addClass("btn-success");
    };

    var disable_button = function (button) {
      button.attr("disabled", "disabled");
      button.removeClass("btn-success");
      button.addClass("btn-default");
    };

    var select_button = function (button) {
      button.removeClass("btn-default");
      button.addClass("btn-primary");
    };

    var deselect_button = function (button) {
      button.removeClass("btn-primary");
      button.addClass("btn-default");
    };

    var show = function () {
      for (button of document.getElementById('button-bar').getElementsByTagName('*')) {
        if (page_num == button.getAttribute('page-no'))
          select_button($(button));
        else
          deselect_button($(button));
      }

      if (canSubmit()) {
        enable_button(submit);
        // enable_button($('#next-btn'));
      } else {
        disable_button(submit);
        // disable_button($('#next-btn'));
      }
    };

    // dynamically create buttons for each SRL arg
    triggers_list.forEach(function (trigger, i) {
      if (trigger.text.trim()) {
        console.log(trigger);
        var button = document.createElement("button");
        button.setAttribute("type", "button");
        button.setAttribute("id", "button-page-" + i);
        button.setAttribute("page-no", i);
        button.setAttribute("class", "btn btn-default");
        button.innerHTML = trigger.text;
        button.onclick = function () {
          page_num = parseInt(this.getAttribute("page-no"));
          makeDom(page_num);
          let instruction = $('#instructionBody');
          if (instruction.is(':visible')) {
            instruction.toggle();
          }
          //window.scrollTo(0, 0); // scroll to top
          show();
        }
        document.getElementById('button-bar').appendChild(button);
      }

      // format template area with role mappings
      if (trigger.template !== null) {
        const template_area = template_record[i];
        const template = $('<p>').text(trigger.template);
        template_area.append(template);
        Object.entries(trigger.role_text_map).forEach(function ([role, text]) {
          template_area.append(make_role_mapping_element(role, JSON.stringify(text)));
        });
      }
    })

    // ---------------------------------------------------------
    // Initialize
    // ---------------------------------------------------------

    makeDom(0);

    var save_all = function () {
      save_record.qapairs = [];
      save_record.triggers = [];
      // save all input
      triggers_list.forEach(function (trigger, idx) {
        // initialize record
        save_record.triggers[idx] = {
          event_id: trigger.event_id,
          trigger: {
            text: trigger.text,
            offset: trigger.offset
          },
          template: trigger.template,
          role_map: {},
        };

        // get input elements
        const template_input_area = template_record[idx];
        const template_inputs = template_input_area.children();

        // traverse over elements to get role mappings
        template_inputs.each(function (_, input) {
          const role = $(input).children('.role-field').attr('role');
          const text = $(input).children('.role-field').val();

          save_record.triggers[idx].role_map[role] = text;
        });
      });

      const trigger_input_area = $('#input-area');
      const trigger_inputs = trigger_input_area.children();

      // traverse over elements to get QA pairs
      trigger_inputs.each(function (_, input) {
        // save qa pairs
        const question = $(input).children('.question-input').val();
        const answer = $(input).children('.answer-input').val();
        save_record.qapairs.push({
          'question': question,
          'answer': answer
        });
      });

      console.log(save_record);
    };

    var submit_form = function () {
      save_all();

      const urlParams = new URLSearchParams(window.location.search)

      // create the form element and point it to the correct endpoint
      const form = document.createElement('form')
      form.action = (new URL('mturk/externalSubmit', urlParams.get('turkSubmitTo'))).href
      form.method = 'post'

      // attach the assignmentId
      const inputAssignmentId = document.createElement('input')
      inputAssignmentId.name = 'assignmentId'
      inputAssignmentId.value = urlParams.get('assignmentId')
      inputAssignmentId.hidden = true
      form.appendChild(inputAssignmentId)

      // attach data I want to send back
      const inputResults = document.createElement('input')
      inputResults.name = 'results'
      inputResults.value = JSON.stringify(save_record)
      inputResults.hidden = true
      form.appendChild(inputResults)

      // attach the form to the HTML document and trigger submission
      document.body.appendChild(form)
      form.submit()
    }

    $('#save').on('click', save_all);
    submit.on('click', submit_form);

    var popup_alert = function (alert_box, text) {
      alert_box.html(text);
      alert_box.css({
        'background-color': 'fec5bb',
        'padding': '5px',
        'border': '1px solid lightgray',
        'border-radius': '10px',
        'margin-top': '10px',
        'margin-bottom': '10px'
      });
      displaying = true;
      setTimeout(function () {
        alert_box.html('');
        alert_box.css({
          'padding': '0px',
          'border': '0px'
        });
        displaying = false;
      }, 7000);
    };

    // Instructions expand/collapse
    var content = $('#instructionBody');
    var instructions_trigger = $('#collapseTrigger');
    // content.hide();
    $('.collapse-text').text('(Click to collapse)');
    instructions_trigger.click(function () {
      content.toggle();
      var isVisible = content.is(':visible');
      if (isVisible) {
        $('.collapse-text').text('(Click to collapse)');
      } else {
        $('.collapse-text').text('(Click to expand)');
      }
    });

    show();

  </script>
</crowd-form>