Skip to content

T0.2.Create the web page

Jump to bottom Edit New page
esseti edited this page Oct 7, 2014 · 8 revisions

#Create the task web page. Task webpages are the pages where workers perform the task. This page has to be created by the crowdsourcer.

To help in the process, we created a JS library that sends an retrieves the data from/to the crowd computer when the task is executed.

##Sending data (Task Page -> CC) To send data from a task page to CC we use POST method using a form. JS library we create automatically binds the submit button to a new function that:

  • sends the data to the crowdsourcer server via ajax
  • sends the data to the crowd computer via POST

The JS library and a small tutorial on how to use it here

###Example If we want to create a page that sends a url (as string) to crowdcomputer we have to create a form like this:

<form>
<type="text" name="url_pic"></input></br>
<input type='submit' class='btn btn-primary' value='Save URL'>
</form>

with the tag <type="text" name="url_pic"></input> the page sends the value of the field as url_pic parameter. This data will be stored in the CC.

To make the integration working, the page has to contains also these two scripts

<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://static.crowdcomputer.org/CC-JS-Generator/?type=send_all_to_crowdcomputer" type="text/javascript"></script>

##Reading data (CC->Task Page) Crowdcomputer sends (POST) data to the task page when a worker opens the execution page. To receive data in the page the crowdsourcer has to parse the POST parameters (GET parameter length is too short to send large data). Since for the time being we use POST data, the web page of the task has to be written in any server-side code to be able to read those data.

###Example In our example we use PHP. To read a parameter that is POST we have to use this tag "<?=$_POST["paramname"][0] ?> where param_name is the parameter name that we want to read. The [0] is due to the fact that it's seen as an array, so we take the first element only.

If we want to read the pic_url and display it inside an img tag, the code will look like this:

<img src="<?=$_POST["url_pic"][0] ?>" width="300px" height="300px"/>

##Full example This pages is used to send the url of the image upload.php

  <html>
  <head>
    <title>Translation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap3.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class='container'>
      <form>
        <h1>Upload an image url</h1>
        <small>This is a demo purpose page, so it will not check if the string is a real URL. Please behave then!</small>
          
          
          <br/>
          <input type="text" name="url_pic"></input></br>
          <input type='submit' class='btn btn-primary' value='Save URL'>
      </form>
    </div>
    <!-- JavaScript plugins (requires jQuery) -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap3.0/js/bootstrap.min.js"></script>
    <!-- On form submit - sends all the form data to the CrowdComputer via postMessage (cross window interaction) -->
    <script src="http://static.crowdcomputer.org/CC-JS-Generator/?type=send_all_to_crowdcomputer" type="text/javascript"></script>
  </body>
  </html>

this page shows the picture and sends the description written by the worker to the server describe.php

  <!DOCTYPE html>
  <html>
  <head>
    <title>Translation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap3.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class='container'>
      <h1>Write description for this picture</h1>
      <img src="" width="300px" height="300px"/>
      <form>
              <h5>Description:</h5>
              <input type="text" name="description"></input><br/>
              <input type='submit' class='btn btn-primary' value='Save Description'>
      </form>
    </div>
    <!-- JavaScript plugins (requires jQuery) -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap3.0/js/bootstrap.min.js"></script>
    <!-- On form submit - sends all the form data to the CrowdComputer via postMessage (cross window interaction) -->
    <script src="http://static.crowdcomputer.org/CC-JS-Generator/?type=send_all_to_crowdcomputer" type="text/javascript"></script>
  </body>
  </html>

Extra example of some pages can be found here

PRE: Setup - NEXT: Create the process

CC

Add a custom sidebar
Clone this wiki locally