code.js

var questions = [
  <div class="question-content">
    <p>
      <img alt="" src="https://c1.staticflickr.com/9/8594/16054902599_6966b2db21_h.jpg" />
    </p>
    <p>
      <img alt="" src="https://c1.staticflickr.com/9/8569/16646420366_6e0a53ac28_b.jpg" />
    </p>
  </div>,
  <div class="question-content">
    <p>
      <img alt="" src="https://c1.staticflickr.com/7/6130/6031622173_0717f60364_b.jpg" />
    </p>
    <p>
      <img alt="" src="https://c2.staticflickr.com/8/7591/16927383470_fae1e64a36_b.jpg" />
    </p>
  </div>,
  <div class="question-content">
    <p>
      <img alt="" src="https://c2.staticflickr.com/6/5224/13958381985_3a99313e37_b.jpg" />
    </p>
  </div>,
  <div class="question-content">
    <p>
      <img alt="" src="https://c2.staticflickr.com/4/3759/13246576093_924da6c4c8_b.jpg" />
    </p>
    <p>
      <img alt="" src="https://c1.staticflickr.com/7/6031/6318915136_8b986accdd_b.jpg" />
    </p>
  </div>
];

while (questions.length > 0) {
  var page = read("sample.html")
  page = page.replace("<!-- QUESTIONS_HERE -->", questions.join(""))
  var webpage = createWebpageFromTemplate(page);

  var hitId = mturk.createHIT({
    title : "Improve Text",
    desc : "Improve a small paragraph toward a goal.",
    url: webpage,
    height : 800,
    reward : 0.01
  })
  var hit = mturk.waitForHIT(hitId)
  var newText = hit.assignments[0].answer['answer-text']
  var questionNumber = hit.assignments[0].answer['selected-question']
  print("-------------------")
  print(newText)
  print(questionNumber)
  print("-------------------")

  questions.splice(+questionNumber, 1);
}

sample.html

<!-- original: https://www.mturk.com/mturk/preview?groupId=3NRDOESS8P88R5H1Y0XJHZKBLYHWQB -->
<script>
$(function() {
  var pos = 0;
  var maxPos = $(".question-content").length - 1;
  var selectQuestion = function(pos) {
    $(".question-content").hide().eq(pos).show();
    $("#selected-question").val(pos);
  };
  var createMoveButton = function(newPos) {
    var button = $("<button>");
    button.click(function() {
      pos = newPos(pos);
      selectQuestion(pos);
      return false;
    });
    return button;
  };
  selectQuestion(pos);

  var backButton = createMoveButton(function(pos) {
    return pos <= 0 ? maxPos : pos - 1;
  });
  backButton.text("Back");

  var nextButton = createMoveButton(function(pos) {
    return pos >= maxPos ? 0 : pos + 1;
  });
  nextButton.text("Next");

  $(".questions").append(backButton);
  $(".questions").append(nextButton);
});
</script>
<style type="text/css">
.questions {
  border: 1px solid #aaa;
  border-radius: 5px;
  width: 700px;
  text-align: center;
}
.questions .question-content {
  display: none;
}
.questions .question-content img {
  max-height: 320px;
  max-width: 640px;
}
.answer-wrapper {
  margin: 10px 0 0 0;
}
</style>

<div id="hit-wrapper">
  <div class="overview-wrapper">
    <p class="overview title">Generate event image descriptions</p>
  </div>
  <div class="question-wrapper">
    <div class="question-content-wrapper">
      <div class="text">
        <p>Workers should look carefully at the provided image. Then they should answer the following questions about the image:</p>
        <p>1) What objects do you see in the image (people, children, food, etc?)</p>
        <p>2) What scenes do you see in the image (beach, indoor, outdoor, highway, church, etc) / Where is this event taking place?</p>
        <p>3) What actions do you see in the image (hugging, shaking hands, clapping, cheering, etc?)</p>
        <p>4) What social event do you think is depicted in this image? (birthday, party, etc?)</p>
        <br/>
        <p>The answers must be clear and must describe the image as fully as possible.</p>
      </div>

      <p>Choose the photos that you describe by using "next" and "back" button.</p>

      <div class="questions">
        <!-- QUESTIONS_HERE -->
      </div>
    </div>

    <div class="answer-wrapper">
      <input value="" name="selected-question" id="selected-question" type="hidden" />
      <textarea cols="80" name="answer-text" rows="10"></textarea>
      <input type="submit" value="submit" />
    </div>
  </div>
</div>