[{"id": 16, "created": "2014-03-20T07:36:46.978284", "updated": "2015-02-25T08:42:32.204164", "name": "Photo Masking of British Museum Bronze Age Objects", "short_name": "photomasking", "description": "Masking photos of British Museum Bronze Age objects to support creation of 3D models", "long_description": "This application will help a variety of research projects to create high\nquality 3d models of archaeological artefacts. There has been a revolution in\n3d modelling in recent years and it is now relatively easy to construct such\nmodels from ordinary digital photographs. Isolating the objects depicted in\nthese photographs, and masking out the background, is an important first step\nto achieving high quality results. The final 3d models will be made publicly\navailable and are useful not only for basic documentation purposes, but also\nfor graphical displays in museums, for inclusion in gaming and virtual reality\nenvironments, or for identifing different sub-styles in otherwise similar\ntypes of artefact (that might tell us about the date of the artefact, where it\nwas made, or by whom). The photos that you could be assigned here might come\nfrom any number of different projects, and for now are assigned completely at\nrandom, although we are looking into allowing regular contributors to choose\nwhich projects they prefer to work on.\n\nWe would like people to draw one or more polygons around the object that they\nsee in each photograph in order to identify the outline of the object and\nexclude the image background. This allows the 3d modelling process to\nconcentrate on the object itself and ignore irrelevant information.\n\n[A Bronze Age Palstave from Goudhurst, Kent](https://sketchfab.com/models/aa8a\n590f378c4ef381588c658ff761eb?utm_source=oembed&utm_medium=embed&utm_campaign=a\na8a590f378c4ef381588c658ff761eb) by [MicroPasts](https://sketchfab.com/micropa\nsts?utm_source=oembed&utm_medium=embed&utm_campaign=aa8a590f378c4ef381588c658f\nf761eb) on [Sketchfab](https://sketchfab.com?utm_source=oembed&utm_medium=embe\nd&utm_campaign=aa8a590f378c4ef381588c658ff761eb)\n\n### **Thank you!**\n\nLucy Ellis, exiledfrommaine, vtri, Valeria, stacytg, Enrico Crema, Suzanne\nbrown, Brenna Hassett, Michele Massa, Francois Grey, Nestor Santos, Hallvard\nIndgjerd, Chloe Roberts, Joe Roe, Hugh Fiske, Germaine V. Hein, Amelia Dall,\nHelen Dawson, Alyson Moore, Andrew Wood, Ahmed Fasih, Rachael, Emily Harwood,\nDenitsa Nenova, Georgina Ascroft, Alessio, Eva Jobbova, Christina Vona, Riadh\nAbbassi, Helen Daniel, Philipp Schmidt, Siobhan Matthews, Vald Svekis,\nJeremiah, Ed Salo, Michael, mumkin, Aradia Farmer, Nils Zschiegner, Freddy\nMacKee, Bruce Kelland, liz lake, Dominic Eastridge, Matthew Huber, Ernst\nSchnell, Cori Lynn Arnold, Jdgr, Richard Zu, Melissa Benson, Claudia Fabia\nLosty, Michael Houghton, Wendy Michael, Aaron Macks, Jared Obermeyer, \u03bd\u03c4\u03ad\u03c3\u03c3\u03b7\n\u03b1\u03bd\u03c4\u03c9\u03bd\u03af\u03bf\u03c5, Alison Shepherd, Will M, Neville Stanley, Joeri Cornille, Nicky\nGarland, Katie Evans, Jerry Glover, Dawn Cranie, Cheryl Ellsworth, Charles\nButcher, Athanasia Mavroudi, Michelle R Headley, Thelma Dawson, Caroline\nChestnutt, Alain Kettaneh, Arya Chatrnoor, Alexandra, Alejandro Crespo, Maria\nT\u00f6rm\u00e4, Arya Ch, Derek Palmer, Christopher Mosera, Matthew Lange, Andrew\nWakefield, Justin Allen H, Geert Verhoeven, Sean Austin, Victoria McDonough,\nScott Noyes, Elaine Dale, Bessie Nesseler, Maggie Wong, Alex Gaw, AJ Noyce,\nShaun Murphy, Scott Daniel Abraham, Jeff Okazaki, Rachel Kasbohm, Melissa\nVette Wobig, Tom Bombadil, Eugenio Piasini, Amy McDermott, Liz D, Emily Coll,\nTracey Logan, skip kekewich, Monk Duro-Landry, Arthur Clancy, Dana Taylor,\nJohn Maddin, Justin Operable, Eric Verspoor, Tonn Holst, Richard Moyer, Tracy\nMurray, Melissa Ginzburg, Tommy H, Ay\u015fe Nur Kara, Michael Rogers, Mona Petre,\nGiannakopoulou Iro-Ioanna, zingara_della_B, Martina Kori\u0107, James Harrison,\nKaylee Michelle Gentry, Stephen Karver, Brittany Caswell, Emma Jane Milgate,\nDaniel Barker, Linz Miller, Eric Crawford, Elizabeth Kidera, Alanna Simone,\nHeather McLane, AD Glazier, Aaron Theis, Gwennael Guignard, Angela Beddows,\nErin Chapman, Detectorbloke, Paul Jolley, Sarah Overstreet, Stuart Cowan,\nAmanda, Bob Nebrig, Jarret Hollands, True Burns, Daniel Beringer, Silke\nJuppenlatz, Ross Blau, Jessica McClean, ProgHead777, Stephanie Bird, Julia\nBax, Kaitlin Lindsay, David Levinson, Esther, Emily Monteith, Deborah Grech,\nJessica Byler, Joshua Byron Maxson, Joseph Koivisto, Leland Sorenson,\ncraigsitt, Sara Carter, taphovenatrix, Mantas Daubaras, stergios gitopoulos,\nJan Taylor, Elizabeth Foulds, Sophia Helen, stephanie vickers, rachel beth\nrichey funderburk, Helen Miles, Latifa Walker, Lexa Rainier, Mike Bruns, Tuula\nP, Lauren Van Zandt, Heather G, Philippa, Joellen mcGann, Dan McCarthy,\nMiranda DeLong, Anne-Marie Davies, Holden, Craig Horton, Hmj, Quentin Mazars-\nSimon, Ad\u00e9la Vedralov\u00e1, Xavier Font Erruz, John Hine, Valeria Vitale, Dina\nFathalla, Crystal Lynn Hilbert, Helen Mallinson, Robert Hunter, C. P., James\nG, Rob Backhouse, Vicky Rees, William Stevenson, Frida Kl\u00e6bo Vonstad, Scott,\nIgor Shirtovski, Alex Block, Nina Sharman, Simon Wyatt-Spratt, Jane Fellows,\nAnthony Bradshaw, Mathew Chambers, Swantje Dogunke, Kathleen Gransalke,\nSonsoles Garc\u00eda Gonz\u00e1lez, Henrik Aslagsen, Denis Antoine, Victoria, Jundi\nAbdul Mawla, \u039a\u03cc\u03c3\u03bc\u03bf\u03c2 \u03c4\u03b7\u03c2 \u03a7\u03b1\u03c1\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1\u03c2, Maria Volioti, ornella maria mosxeta,\nParaskevi Makridou, Vicky Zapatina, Foteini Drakou, Les Heasman, John\nStrangfeld, Tsavdaroglou Charalampos, Luke Miller, Mary Mansfield Blackman,\nGeorge Vergos, Philip Gray, Tim Matteson, Vicky Coombes, James Babbage,\nHeather Bidzinski, Jodie Bee, Melanie Ryan, Doina Bucur, Hanne Madsen, Sandra\n, Raest Wylde, Marina Piperi, Avellana Teresa Ross, nick, Eleni Papaioannou,\nMaruta Purvina, Louise Panton, Maragkaki Froso, Maria Christakou, Rebecca\nBirkbeck, Kimberly Harrell, Wilhelmina Bunn, Bret Pearson, Danielle Haigh-\nWood, Rachael Sparks and many other anonymous contributors for completing this\napplication!\n\nAn example of one of these models has now been produced and can be [seen\nhere](http://micropasts.org/3D).\n\n### This project is on behalf of\n\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\nBritish Museum logo](/static/img/bmBlackWhite.png)\n\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"sched": "default", "tutorial": "<div id=\"modal\" class=\"modal fade\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h3>Photo-masking tutorial for 3D modelling </h3>\r\n            </div>\r\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                    This application is very simple (but does\r\n  not yet work on mobile devices). When you participate, the platform\r\n  will load a photograph of an archaeological artefact.Once the image\r\n  has been loaded, you will be asked to click around the edge of the artefact in order to define a\r\n  polygon outline. Click once every time you wish to add a point along\r\n  the edge of the polygon and your final point will snap back onto the\r\n  one you started with. You can draw one polygon around the entire\r\n  object or instead draw a series of overlapping\r\n  polygons if you prefer. In general, we would like you to draw your polygon(s)\r\n  very slightly inside the actual edge of the artefact. This is\r\n  because we don't want background pixels near this edge to create a\r\n  fuzzy border, and we don't need to worry so much about losing a bit\r\n  of the artefact edge, as the missing few pixels are very likely to\r\n  appear in one of the other photographs (at least 40 overlapping photographs are\r\n  likely to exist for each object to support the construction of the\r\n  3d model). An example of a successful outline is shown below:\r\n                </p>\r\n                <img src=\"https://farm4.staticflickr.com/3796/13464348955_a06ecab512.jpg\" width=\"500\" height=\"308\" class=\"img-polaroid\"\r\n                     alt=\"An example of an artefact photograph whose outline has been defined \" />\r\n            </div>\r\n\r\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                In a few cases, there might be one or more holes\r\n                in the object shown in the photograph (e.g. inside the loop\r\n                of a handle), and you can\r\n                click on the \"Holes\" button to be given an opportunity\r\n                to draw these in, as a second step, after you have created the initial outline\r\n                around the object. During the task, you can always return to this tutorial via the \"Help\" button. \r\n                </p>\r\n            \t<p>\r\n                To find out how the project is progressing, to suggest\r\n                changes to this application or to propose new research\r\n\t      ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n            </div>\r\n\r\n            <div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <a id=\"startContrib\" href=\"../photomasking/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n      </div>\r\n</div>\r\n</div>\r\n\r\n\r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 1 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n", "container": "user_12", "thumbnail": "app_16_thumbnail_1424853752.png", "task_presenter": "<link rel=\"stylesheet\" href=\"/static/css/ol.css\" type=\"text/css\">\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<style>\r\n.ol-zoom a,\r\n.ol-zoom-extent a,\r\n.ol-full-screen a{\r\n  display: block;\r\n  margin: 1px;\r\n  padding: 0;\r\n  color: white;\r\n  font-size: 1.14em;\r\n  font-weight: bold;\r\n  text-decoration: none;\r\n  text-align: center;\r\n  height: 1.375em;\r\n  width: 1.375em;\r\n  line-height: 1.4em;\r\n  background-color: #7b98bc;\r\n  background-color: rgba(0,60,136,0.5);\r\n  border: none;\r\n}\r\n.ol-zoom a::-moz-focus-inner,\r\n.ol-zoom-extent a::-moz-focus-inner,\r\n.ol-full-screen a::-moz-focus-inner {\r\n  border: none;\r\n  padding: 0;\r\n}\r\n.ol-zoom-extent a {\r\n  line-height: 1.4em;\r\n}\r\n.ol-touch .ol-zoom a,\r\n.ol-touch .ol-full-screen a,\r\n.ol-touch .ol-zoom-extent a{\r\n  font-size: 1.5em;\r\n}\r\n.ol-touch .ol-zoom-extent {\r\n  top: 5.5em;\r\n}\r\n.ol-zoom a:hover,\r\n.ol-zoom a:focus,\r\n.ol-zoom-extent a:hover,\r\n.ol-zoom-extent a:focus,\r\n.ol-full-screen a:hover,\r\n.ol-full-screen a:focus {\r\n  text-decoration: none;\r\n  background-color: #4c6079;\r\n  background-color: rgba(0,60,136,0.7);\r\n}\r\n.ol-zoom-extent a:after {\r\n    content: \"E\";\r\n}\r\n.ol-zoom-in {\r\n  border-radius: 2px 2px 0 0;\r\n}\r\n.ol-zoom-out {\r\n  border-radius: 0 0 2px 2px;\r\n}\r\na.ol-full-screen-false:after {\r\n  content: \"\\2194\";\r\n}\r\na.ol-full-screen-true:after {\r\n  content: \"\\00d7\";\r\n}\r\n\r\n.ol-zoom-extent a,\r\n.ol-attribution,\r\n.ol-full-screen a,\r\n.ol-scale-line-inner,\r\n.ol-zoom a,\r\n.ol-has-tooltip [role=tooltip] {\r\n  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;\r\n}\r\n</style>\r\n<script src=\"/static/js/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/ol3photomask.js\" type=\"text/javascript\"></script>\r\n<style>\r\n    .map {\r\n        height: 500px;\r\n        width: 100%;\r\n    }\r\n  #map {\r\n    background-color: grey;\r\n  }\r\n\r\n</style>\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n<div class=\"row skeleton\"> \r\n    <div class=\"span12\">\r\n    \r\n        <div class=\"btn-group pull-right\">\r\n        \t\t<button class=\"btn btn-info btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</button>\r\n        \t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n        \t\t<a class=\"btn btn-info btn-sm\" id=\"newTask\" href=\"../newtask\"><i class=\"glyphicon glyphicon-picture\"></i> Different photomask?</a>\r\n        </div>\r\n        \r\n        <h1 id=\"step1\">Draw the outline and/or holes of the main object shown in the picture</h1>\r\n        <div class=\"btn-group\">\r\n            <button id=\"status\" type=\"button\" class=\"btn btn-default btn-type disabled\" name=\"loading\" value=\"loading\">Loading photo</button>\r\n            <button id=\"outline\" type=\"button\" class=\"btn btn-default btn-type active\" name=\"outline\" value=\"outline\">Outline</button>\r\n            <button id=\"holes\" type=\"button\" class=\"btn btn-default btn-type\" name=\"holes\" value=\"holes\">Holes</button>\r\n        </div>\r\n        <div class=\"btn-group\">\r\n            <button id=\"draw\" type=\"button\" class=\"btn btn-default btn-draw active\" name=\"draw\" value=\"draw\">Draw</button>\r\n            <button id=\"edit\" type=\"button\" class=\"btn btn-default btn-draw\" name=\"edit\" value=\"edit\">Edit</button>\r\n            <button id=\"delete\" type=\"button\" class=\"btn btn-default btn-draw\" name=\"delete\" value=\"delete\">Remove all polygons</button>\r\n        </div>\r\n        <div class=\"btn-group\">\r\n\r\n            <button id=\"btn-save\" class=\"btn btn-success btn-answer\" value='save'><i class=\"icon icon-white icon-save\"></i> Save the drawings</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"row\">\r\n    <!-- Success and Error Messages for the user --> \r\n    <div class=\"col-md-6 col-md-offset-2\" style=\"height:50px\">\r\n        <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n            <a class=\"close\">\u00d7</a>\r\n            <strong>Well done!</strong> Your answer has been saved\r\n        </div>\r\n        <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n            <a class=\"close\">\u00d7</a>\r\n            Loading next task...\r\n        </div>\r\n        <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n            <strong>The task has been completed!</strong> Thanks a lot!\r\n        </div>\r\n        <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n            <strong>Congratulations!</strong> You have participated in all available tasks!\r\n            <br/>\r\n            <div class=\"alert-actions\">\r\n                <a class=\"btn small\" href=\"/\">Go back</a>\r\n                <a class=\"btn small\" href=\"/app\">or, Check other applications</a>\r\n            </div>\r\n        </div>\r\n        <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n            <a class=\"close\">\u00d7</a>\r\n            <strong>Error!</strong> Something went wrong, please contact the site administrators\r\n        </div>\r\n    </div> <!-- End Success and Error Messages for the user -->\r\n</div> <!-- End of Row -->\r\n\r\n<div class=\"row skeleton\"> <!-- Start Skeleton Row-->\r\n    <div class=\"span8\"><!-- Start of Photo DIV (column) -->\r\n        <div id=\"map\" class=\"img-polaroid\"></div>\r\n    </div><!-- End of Photo DIV (columnt) -->\r\n    <div class=\"span4\"><!-- Start of Question and Submission DIV (column) -->\r\n        <!-- Feedback items for the user -->\r\n        <p>You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span></p>\r\n        <p>You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\r\n        <div id=\"answer\"> <!-- Start DIV for the submission buttons -->\r\n        </div><!-- End of DIV for the submission buttons -->\r\n       \r\n\r\n    </div><!-- End of Question and Submission DIV (column) -->\r\n\r\n</div><!-- End of Skeleton Row -->\r\n\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Hey there! Do you want to help us?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        Thanks for contributing one task for the project. We are interested in knowing how you found out about us. <strong>Could you please answer two questions in a short survey?</strong>\r\n       \r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\" width=\"100%\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Kgw8cvcufm-77PC2t_PL_b4y1_Tb9wJseimmb3cQIn4/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n<!-- Added the survey for 25 tasks -->\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Congrats for completing 25 tasks!</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        Thanks for contributing 25 tasks for the project. Now that you have been using MicroPasts for a while, we would like to know how you found it. <strong>Could you please answer a few questions in a short survey?</strong>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1uczUGGYbrQ2FQfTtM8j4vfGr2qwcCMW6PLwzfvZZ6kI/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n<!-- End of new survey -->\r\n\r\n\r\n\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n               <h3>Photo-masking tutorial for 3D modelling </h3>\r\n            </div>\r\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                    This application is very simple (but it does not yet work on mobile devices). When you participate,\r\n                    the platform will load a photograph of an archaeological artefact.\r\n                    Once the image has been loaded, you will be asked\r\n                    to click or tap around the edge of the artefact in order to define a\r\n                    polygon outline. Click once every time you wish to add a point along\r\n                    the edge of the polygon and your final point will snap back onto the\r\n                    one you started with. You can draw one polygon around the entire\r\n                    object or instead draw a series of overlapping\r\n                    polygons if you prefer. In general, we would like you to draw your polygon(s)\r\n                    very slightly inside the actual edge of the artefact. This is\r\n                    because we don't want background pixels near this edge to create a\r\n                    fuzzy border, and we don't need to worry so much about losing a bit\r\n                    of the artefact edge, as the missing few pixels are very likely to\r\n                    appear in one of the other photographs (at least 40 overlapping photographs are\r\n                    likely to exist for each object to support the construction of the\r\n                    3d model). An example of a successful outline is shown below:\r\n                </p>\r\n                <img src=\"https://farm4.staticflickr.com/3796/13464348955_a06ecab512.jpg\" width=\"500\" height=\"308\" class=\"img-polaroid\"\r\n                     alt=\"An example of an artefact photograph whose outline has been defined \" />\r\n            </div>\r\n\r\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                In a few cases, there might be one or more holes\r\n                in the object shown in the photograph (e.g. inside the loop\r\n                of a handle), and you can\r\n                click on the \"Holes\" button to be given an opportunity\r\n                to draw these in, as a second step, after you have created the initial outline\r\n                around the object. During the task, you can always return to this tutorial via the \"Help\" button. \r\n                </p>\r\n                \r\n                <p>\r\n                \tAn example of a finished <a href=\"http://micropasts.org/3D\">3D model</a> has now been completed.\t\r\n                </p>\r\n            \t<p>\r\n                To find out how the project is progressing, to suggest\r\n                changes to this application or to propose new research\r\n\t      ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n            </div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n<script type=\"text/javascript\">\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 1 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<script>\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('photomasking').done(function(data){\r\n    \tconsole.log('Number of tasks completed ' + data.done);\r\n        if ((data.done == 1) && ($.cookie('surveyPhotoMask') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('surveyPhotoMask', 'shown', { path: '/'});\r\n        }\r\n        if ((data.done == 25) && ($.cookie('survey25PhotoMask') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25photoMask', 'shown', { path: '/'});\r\n        }\r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'}); \r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        div_map.css(\"height\", \"500px\");\r\n        div_map.css(\"width\", \"100%\");\r\n        $(\"#draw\").addClass(\"disabled\");\r\n        $(\"#edit\").addClass(\"disabled\");\r\n        $(\"#delete\").addClass(\"disabled\");\r\n        $(\"#outline\").addClass(\"disabled\");\r\n        $(\"#holes\").addClass(\"disabled\");\r\n        $(\"#map\").append(div_map);\r\n        div_map.attr(\"id\", \"map_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n            $(\"#draw\").removeClass(\"disabled\");\r\n            $(\"#edit\").removeClass(\"disabled\");\r\n            $(\"#delete\").removeClass(\"disabled\");\r\n            $(\"#outline\").removeClass(\"disabled\");\r\n            $(\"#holes\").removeClass(\"disabled\");\r\n            $(\"#status\").text(\"Photo loaded!\");\r\n        });\r\n        img.attr('src', task.info.url_b).css('height', 460);\r\n        console.log(task.info.url_b);\r\n        img.addClass('img-polaroid');\r\n        task.info.image = img;\r\n\r\n        // Maps always need a projection, but the static image is not geo-referenced,\r\n        // and are only measured in pixels.  So, we create a fake projection that the\r\n        // map can use to properly display the layer.\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 5184, 3456]\r\n        });\r\n\r\n        task.styleArray = [new ol.style.Style({\r\n          fill: new ol.style.Fill({\r\n            color: 'rgba(255, 255, 255, 0.2)'\r\n          }),\r\n          stroke: new ol.style.Stroke({\r\n            color: '#ffcc33',\r\n            width: 2\r\n          }),\r\n          image: new ol.style.Circle({\r\n            radius: 7,\r\n            fill: new ol.style.Fill({\r\n              color: '#ffcc33'\r\n            })\r\n          })\r\n        })];\r\n        \r\n        task.source = new ol.source.Vector();\r\n        task.source_holes = new ol.source.Vector();\r\n        \r\n        task.vector = new ol.layer.Vector({\r\n          source: task.source,\r\n          //styleFunction: function(feature, resolution) {\r\n          //  return task.styleArray;\r\n          //}\r\n          style: new ol.style.Style({\r\n                fill: new ol.style.Fill({\r\n                      color: 'rgba(255, 255, 255, 0.2)'\r\n                    }),\r\n                    stroke: new ol.style.Stroke({\r\n                      color: '#ffcc33',\r\n                      width: 2\r\n                    }),\r\n                    image: new ol.style.Circle({\r\n                      radius: 7,\r\n                      fill: new ol.style.Fill({\r\n                        color: '#ffcc33'\r\n                        })\r\n                      })\r\n                    })\r\n          });\r\n\r\n        task.holes = new ol.layer.Vector({\r\n          source: task.source_holes,\r\n          //styleFunction: function(feature, resolution) {\r\n          //  return task.styleArray;\r\n          //}\r\n          style: new ol.style.Style({\r\n                fill: new ol.style.Fill({\r\n                      color: 'rgba(255, 255, 255, 0.2)'\r\n                    }),\r\n                    stroke: new ol.style.Stroke({\r\n                      color: '#00CC99',\r\n                      width: 2\r\n                    }),\r\n                    image: new ol.style.Circle({\r\n                      radius: 7,\r\n                      fill: new ol.style.Fill({\r\n                        color: '#00CC99'\r\n                        })\r\n                      })\r\n                    })\r\n          });\r\n\r\n        task.overlay = new ol.FeatureOverlay({\r\n            style: new ol.style.Style({\r\n                  fill: new ol.style.Fill({\r\n                        color: 'rgba(255, 255, 255, 0.2)'\r\n                      }),\r\n                      stroke: new ol.style.Stroke({\r\n                        color: [0, 153, 255, 1],\r\n                        width: 2\r\n                      }),\r\n                      image: new ol.style.Circle({\r\n                        radius: 7,\r\n                        fill: new ol.style.Fill({\r\n                          color: [0, 153, 255, 1]\r\n                          })\r\n                        })\r\n                      })\r\n        });\r\n\r\n        // Modifiers for vector outline\r\n        task.modify = new ol.interaction.Modify({ \r\n                                                layer: task.vector,\r\n                                                featureOverlay: task.overlay });\r\n        task.select = new ol.interaction.Select({ \r\n                                                layer: task.vector,\r\n                                                featureOverlay: task.overlay });\r\n\r\n        // Modifiers for vector holes\r\n        task.modify_holes = new ol.interaction.Modify({ \r\n                                                layer: task.holes,\r\n                                                featureOverlay: task.overlay });\r\n        task.select_holes = new ol.interaction.Select({ \r\n                                                layer: task.holes,\r\n                                                featureOverlay: task.overlay });\r\n\r\n        task.map = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify, task.select_holes, task.modify_holes]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: '&copy; <a href=\"http://micropasts.org\">Micropasts</a>'\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [5184, 3456],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          , \r\n          task.vector,\r\n          task.holes,\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'map_' + task.id,\r\n          view: new ol.View2D({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 2.25\r\n          })\r\n        });\r\n            \r\n        var zoomslider;\r\n        zoomslider = new ol.control.ZoomSlider();\r\n\r\n        task.map.addControl(zoomslider);\r\n\r\n        div_map.css(\"display\", \"none\");\r\n\r\n        var typeSelect = document.getElementById('type');\r\n        \r\n        //task.draw; // global so we can remove it later\r\n        task.draw = new ol.interaction.Draw({\r\n          source: task.source,\r\n          type: 'Polygon',\r\n        });\r\n\r\n        task.draw_holes = new ol.interaction.Draw({\r\n          source: task.source_holes,\r\n          type: 'Polygon',\r\n        });\r\n\r\n        // When the first polygon is completed, remove the drawInteraction\r\n        task.draw.on('drawend', function(evt) {\r\n                task.polygon = true;\r\n                $(\"#btn-save\").removeClass(\"disabled\");\r\n                });\r\n\r\n        // When the first hole is completed, remove the drawInteraction\r\n        task.draw_holes.on('drawend', function(evt) {\r\n                task.holes = true;\r\n                $(\"#btn-save\").removeClass(\"disabled\");\r\n                });\r\n\r\n        task.map.addInteraction(task.draw);\r\n\r\n        task.answer = {\r\n                 'task_id': task.id,\r\n                 'outline': [],\r\n                 'holes': [],\r\n                 'img': task.info.url_b};\r\n        task.polygon = false;\r\n        task.holes = false;\r\n        }\r\n    else {\r\n        deferred.resolve(task);\r\n    }\r\n});\r\n\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(\"#btn-save\").addClass(\"disabled\");\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n\r\n        // Code for drawing outlines or holes\r\n        $('.btn-type').off('click').on('click', function(evt) {\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined'){\r\n                if (answer == 'holes') {\r\n                    $(\"#outline\").removeClass('active');\r\n                    $(\"#holes\").addClass('active');\r\n                    task.map.removeInteraction(task.draw);\r\n                    task.map.addInteraction(task.draw_holes);\r\n                }\r\n                else {\r\n                    $(\"#holes\").removeClass('active');\r\n                    $(\"#outline\").addClass('active');\r\n                    task.map.addInteraction(task.draw);\r\n                    task.map.removeInteraction(task.draw_holes);\r\n                }\r\n            }\r\n        });\r\n\r\n        // Code for editing/drawing polygons\r\n        $('.btn-draw').off('click').on('click', function(evt) {\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined'){\r\n                if (answer == 'draw') {\r\n                    $(\"#edit\").removeClass(\"active\");\r\n                    $(\"#draw\").addClass(\"active\");\r\n                    if ($(\"#outline\").hasClass(\"active\")) {\r\n                        task.map.removeInteraction(task.modify);\r\n                        task.map.removeInteraction(task.select);\r\n                        task.map.addInteraction(task.draw);\r\n                    }\r\n                    else {\r\n                        task.map.removeInteraction(task.modify_holes);\r\n                        task.map.removeInteraction(task.select_holes);\r\n                        task.map.addInteraction(task.draw_holes);\r\n                    }\r\n                }\r\n                if (answer == 'edit') {\r\n                    $(\"#draw\").removeClass(\"active\");\r\n                    $(\"#edit\").addClass(\"active\");\r\n                    if ($(\"#outline\").hasClass(\"active\")) {\r\n                        task.map.removeInteraction(task.draw);\r\n                        task.map.addInteraction(task.select);\r\n                        task.map.addInteraction(task.modify);\r\n                    }\r\n                    else {\r\n                        task.map.removeInteraction(task.draw_holes);\r\n                        task.map.addInteraction(task.select_holes);\r\n                        task.map.addInteraction(task.modify_holes);\r\n                    }\r\n                }\r\n\r\n                if (answer == 'delete') {\r\n                    if ($(\"#outline\").hasClass(\"active\")) {\r\n                        $(\"#draw\").removeClass(\"active\");\r\n                        $(\"#edit\").removeClass(\"active\");\r\n                        $(\"#delete\").addClass(\"active\");\r\n                        var features = task.source.getAllFeatures();\r\n                        for(i=0;i<features.length;i++) {\r\n                            task.source.removeFeature(features[i]);\r\n                        }\r\n                        task.polygon = false;\r\n                        $(\"#draw\").addClass(\"active\");\r\n                        $(\"#delete\").removeClass(\"active\");\r\n                    }\r\n                    else {\r\n                        $(\"#draw\").removeClass(\"active\");\r\n                        $(\"#edit\").removeClass(\"active\");\r\n                        $(\"#delete\").addClass(\"active\");\r\n                        var features = task.source_holes.getAllFeatures();\r\n                        for(i=0;i<features.length;i++) {\r\n                            task.source_holes.removeFeature(features[i]);\r\n                        }\r\n                        task.holes = false;\r\n                        $(\"#draw\").addClass(\"active\");\r\n                        $(\"#delete\").removeClass(\"active\");\r\n                    }\r\n                }\r\n\r\n                }});\r\n\r\n\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined'){\r\n                //console.log(answer);\r\n                //console.log(task.map.source.features);\r\n                console.log(task.source.features);\r\n\r\n                if (task.polygon) {\r\n                    var features = task.source.getAllFeatures();\r\n                    var polygons = [];\r\n                    for(i=0;i<features.length;i++) {\r\n                        var g = features[i].getGeometry();\r\n                        polygons.push(g.getCoordinates());\r\n                    }\r\n                    //task.answer = {\r\n                    //    'task_id': task.id,\r\n                    //    'polygon': polygons,\r\n                    //    'img': task.info.url_b};\r\n                    task.answer.outline = polygons;\r\n\r\n                    if (task.holes) {\r\n                        var features = task.source_holes.getAllFeatures();\r\n                        var polygons = [];\r\n                        for(i=0;i<features.length;i++) {\r\n                            var g = features[i].getGeometry();\r\n                            polygons.push(g.getCoordinates());\r\n                        }\r\n\r\n                        task.answer.holes = polygons;\r\n                    }\r\n\r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                    \t$(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        \r\n                        deferred.resolve();\r\n                        $(\"#map_\" + task.id).remove();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                } // end if task.polygon\r\n            }\r\n            else {\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n    $('#imgLink').tooltip();\r\n\r\n        \r\n});\r\n\r\npybossa.run('photomasking');\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/16'/>"}, {"id": 17, "created": "2014-03-21T14:09:00.563567", "updated": "2015-02-25T08:42:34.085487", "name": "British Museum Bronze Age Index Drawer B16", "short_name": "drawB16", "description": "British Museum Bronze Age Card Index transcription for drawer B16", "long_description": "This application will help the [British\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\nNeil Wilkin, to make available a huge card catalog of British prehistoric\nmetal artefacts discovered in the 19th and 20th century. This information has\nlong been known to be an extremely important untapped resource. Metal finds\nare not only crucial forms of evidence for dating Britain's prehistoric past,\nbut also tell us a great deal about prehistoric society and economy.\nDigitising the thousands of objects in this catalog will make these records\npublicly available via their incorporation into the [Portable Antiquities\nScheme website](http://finds.org.uk). The result will be the largest national\ndatabase of prehistoric metal finds anywhere in the world and a near\ncomprehensive view of what we currently know about such finds in the UK.\n\nThe cards have been scanned and uploaded to\n[Flickr](https://www.flickr.com/photos/micropasts/sets/72157642679582423/),\nand it is from there that the current application will retrieve and manipulate\nthe scans. These cards contain some fairly standardised kinds of information:\nabout where the artefact was discovered, its dimensions, a longer description\nof what it looks like, etc.\n\nWhat the research team would like people to do, is to transcribe the details\nfrom each section on the card into some pre-determined fields, and also to\nattempt to geo-reference the object via its place of discovery.\n\n### Thank you!\n\nLucy Ellis, exiledfrommaine, stacytg, Angela Love, Margarita Nazou, Nestor\nSantos, Hallvard Indgjerd, Hugh Fiske, Germaine V. Hein, MrsAudiac, Melissa A.\nCrossley Trease, Siobhan Matthews, Thorrin Jonsson, Jeremiah, Michael, Ben\nPaites, Michael Babin, Fred'k A. Stresen-Reuter II, Johnathan Farris, Michael\nHoughton, Jared Obermeyer, Nicky Garland, Kate Dougherty, Cheryl Ellsworth,\nGill Berryman, Athanasia Mavroudi, Caroline, Mary Thomson, Teddy Julius,\nAlejandro Crespo, Shalom Leaf, Elaine Dale, Bessie Nesseler, Gwen Takagawa,\nKCS, Katy Emslie, Jeff Okazaki, Ione Karney, Melissa Vette Wobig, Lily\nGoodman, Tom Bombadil, Michael Rosenberger, Amy McDermott, Liz D, Ay\u015fe Nur\nKara, Mona Petre, Giannakopoulou Iro-Ioanna, Jeffrey J. Sparks, Martina Kori\u0107,\nElizabeth Ann Fitzgerald, Dominic E. Lacasse, Karin Vermooten, Alex Fraga, Dan\nRay, Angela Beddows, Loni Nelson, Hillary Ryde-Collins, Bob Nebrig, Jarret\nHollands, Ross Blau, Matthew Bendert, Merit Glover, Jessica Byler, Joseph\nKoivisto, Melissa Clements, Alistair Bingham, Jennifer Kindick, M.K. Carroll,\nDavid Dawson, Drew Pearson, Bianca Cabrera, Latifa Walker, Valeska Becker,\nRebecca Gunnill, Joellen mcGann, Dan McCarthy, Anne-Marie Davies, Holden,\nyaremis, Craig Horton, Dina, Miles Deverson, Chris Brussat, scruffyarcher,\nMaria van Duinhoven, Daxi Bradley, monica butcher, Emily Cowan, Wim Lewis,\nJennifer Butler, Glenda Robinson and other anonymous contributors.\n\n### This project is on behalf of\n\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\nBritish Museum logo](/static/img/bmBlackWhite.png)\n\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"sched": "default", "tutorial": "<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\n            <div class=\"modal-header\">\n                <h3 class=\"lead\">BM Bronze Age Index Drawer B16 transcription tutorial</h3>\n            </div>\n\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    This application is very simple, but does require you to use your own judgment in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalog\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the\n                    index card and the line drawing of the object from the reverse side.\n                    An example of the front side of a card is shown below.\n                </p>\n\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n\n                <p>\n                    Each index card contains similar information and we are asking you to enter this information\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\n                    will hint that this information can be found \"Top of card\").\n                </p>\n\n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\n                        both entries that should be entered in the the Collection box, so you could simply enter\n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n\n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and\n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n\n            </div>\n\n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or\n                propose new research ideas based what you have transcribed, please have a look at\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../drawB16/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_17_thumbnail_1424853754.png", "task_presenter": "<link rel=\"stylesheet\" href=\"http://ol3js.org/en/master/css/ol.css\" type=\"text/css\">\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n\r\n<script src=\"http://ol3js.org/en/master/build/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\r\n<script src=\"http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n\r\n\r\n<style type=\"text/css\">\r\n    label {\r\n        font-size:16px;\r\n    }\r\n    #map_canvas label {\r\n        width: auto;\r\n        display: inline;\r\n    }\r\n    #map_canvas img {\r\n        max-width: none;\r\n    }\r\n    .affix {\r\n        width: inherit;\r\n        height: 0px;\r\n    }\r\n  \r\n    .affix-bottom {\r\n        top: auto !important;\r\n        position: fixed;\r\n        bottom: 240px;\r\n    }\r\n    \r\n    #imgContainer {\r\n        height: 390px;\r\n        width: 600px;\r\n    }\r\n\r\n</style>\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Hey there! Do you want to help us?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          Thanks for contributing one task for the project. We are interested in knowing how you found out about us. <strong>Could you please answer two questions in a short survey?</strong>\r\n\r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\" width=\"100%\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Congrats for completing 25 tasks!</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          Thanks for contributing 25 tasks for the project. Now that you have been using MicroPasts for a while, we would like to know how you found it. <strong>Could you please answer a few questions in a short survey?</strong>\r\n\r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\r\n    <!-- Success and Error Messages for the user -->\r\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\r\n        <strong>Sorry, but your browser does not support the current application. If you want to contribute, please, upgrade to a modern web browser like the open source and free alternative <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a></strong>.\r\n    </div>\r\n</div> <!-- End of Row -->\r\n\r\n<div style=\"margin-top:15px;\">\r\n            <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n            </div>\r\n            <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <img src=\"/static/img/loading.gif\">Loading next task...\r\n            </div>\r\n            <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <strong>The task has been completed!</strong> Thanks a lot!\r\n            </div>\r\n            <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Congratulations!</strong> You have participated in all available tasks!\r\n                <br/>\r\n              <img src=\"https://crowdfunded.micropasts.org/assets/logo-head.png\" />\r\n                <div class=\"alert-actions\">\r\n                    <a class=\"btn-default btn\" href=\"/\">Go back</a>\r\n                    <a class=\"btn-default btn\" href=\"/app\">or, Check other applications</a>\r\n                </div>\r\n            </div>\r\n            <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n                <a class=\"close\">\u00d7</a>\r\n                <strong>Error!</strong> Something went wrong, please contact the site administrators\r\n            </div>\r\n        </div> <!-- End Success and Error Messages for the user -->\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n<div class=\"row skeleton\"> <!-- Start Skeleton Row-->\r\n\r\n        <h1 id=\"start\">Please transcribe this index card</h1> <!-- The question will be loaded here -->\r\n        <span class=\"label label-info\">Note</span> You can use your mouse wheel trackpad to zoom in/out the picture, as well as drag & drop to navigate in the document.\r\n\r\n</div>\r\n\r\n<div class=\"row skeleton\">\r\n\r\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\r\n\r\n            <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\r\n\r\n            <form id=\"transcription\" role=\"form\">\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"objectType\">Object Type</label>\r\n                        <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\r\n                    <div class=\"controls\">\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\r\n                        </div>\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\r\n                        </div>\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\r\n                        </div>\r\n                   </div>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\r\n                        <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"site\">Site</label>\r\n                        <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\r\n                        <div class=\"input-append\">\r\n                        <label class=\"control-label\" for=\"site\">Georeference the site</label>\r\n                            <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site in a map\"></input>\r\n                            <button id=\"searchBtn\" class=\"btn btn-answer\" value=\"search\" type=\"button\"><i class=\"icon-search\"></i> Search</button>\r\n                        </div>\r\n                        <div style=\"display:none;margin-top:15px;\" id=\"searching\" class=\"alert alert-info\"><img src=\"/static/img/loading.gif\"> Searching...</div>\r\n                    <div style=\"display:none;margin-top:15px;\" id=\"searchingError\" class=\"alert alert-warning\"><strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> in the map.</div>\r\n                    <div id=\"searchingTip\" class=\"alert alert-info\" style=\"display:none; margin-top:10px;\">Drag & drop the <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> to improve the location</div>\r\n                    <div id=\"map\" style=\"margin-top:15px;\"></div>\r\n\r\n                     <div style=\"font-size:12px;\">Marker Icon by <a href=\"http://mapicons.nicolasmollet.com/\">Nicolas Mollet</a></div>\r\n                </div>\r\n\r\n                <p style=\"font-size:16px\">I believe the location I have given on the map is accurate to within:</p>\r\n                <div class=\"form-group\">\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy100\" value=\"100\" checked>\r\n                    100 metres\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy1000\" value=\"1000\">\r\n                    1 kilometre\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy10000\" value=\"10000\">\r\n                    10 kilometres\r\n                    </label>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\r\n                        <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\"></textarea>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"collection\">Collection</label>\r\n                        <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"publications\">Publications</label>\r\n                        <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"length\">Length</label>\r\n                        <input class=\"form-control\" type=\"number\" min=\"0\" name=\"length\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"width\">Width</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"width\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"edge\">Edge</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"edge\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"thickness\">Thickness</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"thickness\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"weight\">Weight</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"weight\" placeholder=\"In grammes\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"composition\">Composition</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"description\">Description</label>\r\n                        <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\"></textarea>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"surface\">Surface</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"patina\">Patina</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"associations\">Associations</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\r\n                </div>\r\n\r\n                <hr>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"remarks\">Remarks</label>\r\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\r\n                </div>\r\n\r\n                <hr>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\r\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if any.\"></textarea>\r\n                </div>\r\n\r\n            </form>\r\n\r\n            <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\r\n            \r\n            \r\n\t<!-- Feedback items for the user -->\r\n        <p>You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span></p>\r\n        <p>You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\t<!-- End of feedback row -->\r\n\r\n    </div><!-- End of Question and Submission DIV (column) -->\r\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\"><!-- Start of Photo DIV (column) -->\r\n        \r\n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"550\">\r\n                <div class=\"btn-group\">\r\n\t\t<a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\r\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n\t        <a id=\"newTask\" href=\"../newtask\" class=\"btn btn-sm btn-info\"><i class=\"glyphicon glyphicon-picture\"></i> Different card?</a>\r\n        \t<a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\r\n        \t<a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\r\n\t</div>\r\n        <div id=\"imgContainer\" >\r\n        \t\r\n           <!-- <img src=\"http://i.imgur.com/GeHxzb7.png\" style=\"max-width=100%\">-->\r\n        </div>\r\n        <div id=\"taskImg\"></div>\r\n    </div><!-- End of Photo DIV (columnt) -->\r\n\t</div>\r\n</div><!-- End of Skeleton Row -->\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n                <h3 class=\"lead\">BM Bronze Age Index Drawer B16 transcription tutorial</h3>\r\n            </div>\r\n\t<!-- stepped modal body -->\r\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n\r\n                <p>\r\n                    This application is very simple, but does require you to use your own judgment in reading hand-written documents. When you participate,\r\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalog\r\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\r\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\r\n                    card. Most scanned images combine the written details from the one side of the\r\n                    index card and the line drawing of the object from the reverse side.\r\n                    An example of the front side of a card is shown below.\r\n                </p>\r\n\r\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\r\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\r\n\r\n                <p>\r\n                    Each index card contains similar information and we are asking you to enter this information\r\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\r\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\r\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\r\n                    will hint that this information can be found \"Top of card\").\r\n                </p>\r\n\r\n            </div>\r\n\r\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n\t\t     <p>\r\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\r\n                    Here are some further issues to watch out for:\r\n                    </p>\r\n\r\n\t\t<ol>\r\n\t\t\r\n                    <li>\r\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\r\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\r\n                    This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\r\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    When entering information in the fields, please respect the case of words as seen on the card.\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\r\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\r\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\r\n                    you are fairly confident but not certain.\r\n                    </li>\r\n\r\n                    <li>\r\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\r\n                    into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\r\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\r\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\r\n                    </li>\r\n\r\n                    <li>\r\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\r\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\r\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\r\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\r\n                    </li>\r\n\r\n                    <li>\r\n                    If there is additional information on the card that you do not feel fits in one of our pre-specified\r\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\r\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\r\n                    </li>\r\n                    \r\n                </ol>\r\n\r\n\r\n\t\t</div>\r\n\r\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\r\n\t\t\t<p>\r\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\r\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\r\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\r\n\t            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\r\n\t            \tinput fields in response to your suggestions.\r\n\t            \t</p>\r\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\r\n\t\t</div>\r\n\t\t\r\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\r\n\t\t<p>\r\n                To find out how the project is progressing, suggest changes to this application or\r\n                propose new research ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n\t\t</div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n\r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 3 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<script>\r\n// Quick fix for IE8\r\nModernizr.load({\r\n  test: window.JSON,\r\n  nope: '/static/js/vendor/json2.min.js'\r\n});\r\n\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('drawB16').done(function(data){\r\n            console.log(\"Total answers done for user: \" + data.done);\r\n\tif ((data.done == 1) && ($.cookie('surveyB16') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('survey', 'shown', { path: '/'});\r\n        }\r\n\r\n    if ((data.done >= 25) && ($.cookie('survey25B16') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25B16', 'shown', { path: '/'});\r\n        }\r\n        \r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'});\r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n\r\n\r\n// If user presses enter do the search\r\n// $(\"#locationRef\").bind('keypress', function(e){\r\n//     var code = (e.keyCode ? e.keyCode : e.which);\r\n//     if(code == 13) { //Enter keycode\r\n//         search();\r\n//     }\r\n// });\r\n\r\n// This function will load the marker of the city, and center the map on it\r\nfunction search(task, city, zoom) {\r\n    zoom = (typeof zoom === \"undefined\") ? 4 : zoom;\r\n    city = city.replace(/\\n/g,' ');\r\n    console.log(city);\r\n    if (city) {\r\n        var place = city;\r\n        $(\"#searchingError\").hide();\r\n    }\r\n    else {\r\n        $(\"#searching\").show();\r\n        $(\"#searchingError\").hide();\r\n        if ($('#toSearch').val()) {\r\n            var place = $(\"#toSearch\").val();\r\n        }\r\n        else {\r\n            $(\"#searching\").hide();\r\n            alert(\"Please, add a location in the Site section to search in the map\");\r\n            return\r\n        }\r\n    }\r\n\r\n    // Geocode the place using Nominatim OSM service\r\n    $.getJSON('http://nominatim.openstreetmap.org/search/' + place + '?format=json', function(output) {\r\n        if (output.length >= 1) {\r\n            //console.log(\"Lon: \"+ output[0].lon + \" Lat: \" + output[0].lat);\r\n            // Clean previous markers\r\n            $(\"#navigate\").addClass(\"active\");\r\n            $(\"#point\").removeClass(\"disabled\");\r\n            $(\"#point\").removeClass(\"active\");\r\n            task.objectLayer.removeAllFeatures();\r\n            //$(\"#answerbtn\").addClass(\"disabled\");\r\n            //$(\"#answerbtn\").unbind('click',submitTask);\r\n            //console.log(\"Map cleaned!\");\r\n            // Create a LonLat object to load the place marker\r\n            var lonLat = new OpenLayers.LonLat(output[0].lon, output[0].lat)\r\n                .transform(\r\n                    new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\r\n                    task.map.getProjectionObject() // to Spherical Mercator Projection\r\n                );\r\n            // Set the marker position\r\n            point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);\r\n            task.longitude = lonLat.lon;\r\n            task.latitude = lonLat.lat;\r\n            task.objectLayer.addFeatures([new OpenLayers.Feature.Vector(point)]);\r\n            // Center the map\r\n            task.map.setCenter(lonLat, zoom);\r\n            //lonLat.transform(\r\n            //        map.getProjectionObject(), // from Spherical Mercator Projection\r\n            //        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n            //);\r\n            // Reset the lon & lat span objects\r\n            $(\"#lon\").text(\"-\");\r\n            $(\"#lat\").text(\"-\");\r\n\r\n            if (zoom !=4 ) {\r\n                $(\"#searchingTip\").show();\r\n            }\r\n\r\n            // Only show the messages when looking for user input\r\n            if ($('#toSearch').val()) {\r\n                $(\"#searching\").hide().fadeOut();\r\n                $(\"#searchingDone\").show().fadeIn().delay(2000).fadeOut();\r\n            }\r\n        }\r\n        else {\r\n            // Location not found, sorry\r\n            // Warn the user and try with another place\r\n            $(\"#searching\").hide().fadeOut();\r\n            $(\"#searchingError\").show();\r\n        }\r\n    });\r\n}\r\n\r\n\r\n\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        div_map.css(\"height\", \"390px\");\r\n        div_map.css(\"width\", \"600px\");\r\n        div_map.css(\"background\", \"#000\");\r\n\r\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\r\n\r\n        var extent = new OpenLayers.Bounds();\r\n        extent.extend(new OpenLayers.LonLat(1.758939,58.672231).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n    new OpenLayers.Projection('EPSG:900913')));\r\n        extent.extend(new OpenLayers.LonLat(-6.99745,49.96112).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n    new OpenLayers.Projection('EPSG:900913')));\r\n\r\n\r\n        $(\"#imgContainer\").append(div_map);\r\n        div_map.attr(\"id\", \"img_\" + task.id);\r\n\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 1024, 720]\r\n        });\r\n\r\n        task.map_img = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: copyright\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [1024, 720],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'img_' + task.id,\r\n          view: new ol.View({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 1.0\r\n          })\r\n        });\r\n        div_map.css(\"display\", \"none\");\r\n\r\n\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        img.attr(\"id\", \"img_task_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n        });\r\n        img.attr('src', task.info.url_b);\r\n        img.attr('width', '600px');\r\n        img.attr('height', '390px');\r\n        img.addClass('img-polaroid');\r\n        img.css(\"cursor\", \"zoom-in\");\r\n        task.info.image = img;\r\n\r\n        // MAP\r\n        var div_map = $(\"<div/>\", {'id': \"map_\" + task.id, 'class': 'map_canvas col-md-12'});\r\n        div_map.css(\"width\", \"360px\");\r\n        div_map.css(\"height\", \"500px\");\r\n        div_map.css(\"display\", \"none\");\r\n\r\n        // We need to append the div element asap otherwise OpenLayers will fail\r\n        $(\"#map\").append(div_map);\r\n\r\n        var map = new OpenLayers.Map('map_' + task.id, {\r\n            controls: [\r\n                new OpenLayers.Control.Navigation(),\r\n                new OpenLayers.Control.PanZoom(),\r\n                new OpenLayers.Control.LayerSwitcher(),\r\n                new OpenLayers.Control.MousePosition({displayProjection: new OpenLayers.Projection(\"EPSG:4326\")}),\r\n               // new OpenLayers.Control.ScaleLine(),\r\n                new OpenLayers.Control.Attribution()\r\n                ]\r\n        });\r\n\r\n        // Layers\r\n        // Open Street Map (default layer)\r\n        map.addLayer(new OpenLayers.Layer.OSM(\"Open Street Map\"));\r\n\r\n        // Google Maps Satellite layer\r\n        map.addLayer(new OpenLayers.Layer.Google(\r\n            \"Google Satellite\",\r\n            {type: google.maps.MapTypeId.SATELLITE}\r\n        ));\r\n\r\n        // Google Maps Physical layer\r\n        map.addLayer(new OpenLayers.Layer.Google(\r\n            \"Google Physical\",\r\n            {type: google.maps.MapTypeId.TERRAIN}\r\n        ));\r\n\r\n       \r\n\r\n        // Icon for the Urban Park Marker\r\n        var styleMapObject = new OpenLayers.StyleMap({\r\n            pointRadius: 15,\r\n            externalGraphic: 'http://img225.imageshack.us/img225/5237/youarehere2.png'\r\n        });\r\n\r\n        \r\n        // Layer for placing the urban park marker\r\n        var objectLayer = new OpenLayers.Layer.Vector(\"Find spot marker\", {\r\n            styleMap: styleMapObject,\r\n        });\r\n        map.addLayer(objectLayer);\r\n        task.objectLayer = objectLayer;\r\n\r\n        // Function to allow only the addition of one urban park per city\r\n        // The function gets the feature (point) and gets its location, transforms it to the right projection\r\n        // loads the lon and at into the HTML skeleton and disables the toolbar, so no more points can be added\r\n        disablePoint = function(feature) {\r\n            if ($(\"#answerbtn\").hasClass(\"disabled\")) {\r\n                $(\"#answerbtn\").removeClass('disabled');\r\n            }\r\n\r\n            $(\"#lat\").text(feature.geometry.y);\r\n            var tmp = feature.geometry.clone();\r\n            tmp.transform(\r\n                    task.map.getProjectionObject(), // from Spherical Mercator Projection\r\n                    new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n            );\r\n            $(\"#lon\").text(tmp.x);\r\n            $(\"#lat\").text(tmp.y);\r\n            task.lon = tmp.x;\r\n            task.lat = tmp.y;\r\n            task.drawControls['point'].deactivate();\r\n        }\r\n\r\n        // Default location to load the map\r\n        var lonLat = new OpenLayers.LonLat(-0.1279688 ,51.5077286 )\r\n            .transform(\r\n                new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\r\n                new OpenLayers.Projection(\"EPSG:900913\") // to Spherical Mercator Projection\r\n            );\r\n\r\n        // Enable drag & drop in the urban park Layer\r\n        var drag = new OpenLayers.Control.DragFeature(objectLayer, {\r\n            onComplete: function() {\r\n                var urbanParkPoint = task.objectLayer.features[0].geometry\r\n                var tmp = urbanParkPoint.clone();\r\n                tmp.transform(\r\n                        task.map.getProjectionObject(), // from Spherical Mercator Projection\r\n                        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n                );\r\n                // When the marker has been dropped, update the lon & lat of the urban park\r\n            }\r\n\r\n        });\r\n        // Add the drag & drop control into the map\r\n        map.addControl(drag);\r\n        // Activate drag & drop\r\n        drag.activate();\r\n\r\n        var drawControls = {\r\n            point:      new OpenLayers.Control.DrawFeature(objectLayer, OpenLayers.Handler.Point,\r\n                        { 'featureAdded': disablePoint})\r\n        }\r\n\r\n        // Add them to the map\r\n        for (var key in drawControls) {\r\n            map.addControl(drawControls[key]);\r\n        }\r\n        task.drawControls = drawControls;\r\n\r\n        task.map = map;\r\n        task.map.setOptions({restrictedExtent: extent});\r\n        task.lon = 0;\r\n        task.lat = 0;\r\n\r\n        search(task, \"united kingdom\");\r\n        } // End if task empty\r\n    else {\r\n        deferred.resolve(task);\r\n        }\r\n\r\n});\r\n\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(':input','#transcription')\r\n           .not(':button, :submit, :reset, :hidden, :radio')\r\n           .val('')\r\n           .removeAttr('checked')\r\n           .removeAttr('selected');\r\n      \r\n      \t$(\"a#raw\").attr(\"href\", task.info.url_b);\r\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n\t$(\"a#down\").attr(\"download\", task.id);\r\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\r\n\t\r\n        \r\n        $(\".fancybox\").fancybox();\r\n        $('#imgLink').tooltip();\r\n        $(\"[rel=tooltip]\").tooltip();\r\n        $(\"#searchingTip\").hide();\r\n        $(\"#question\").html(task.info.question);\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n        $(\"#img_\" + task.id).show();\r\n\r\n        // Clean\r\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\r\n        for (i = 1700; i < 2000; i++)\r\n        {\r\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\r\n        for (i = 1; i <= 12; i++)\r\n        {\r\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\r\n        for (i = 1; i <= 31; i++)\r\n        {\r\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        //var $input = $(\".pickadate\").pickadate({\r\n        //                 format: 'yyyy-mm-dd',\r\n        //                 selectYears: true,\r\n        //                 selectMonths: true,\r\n        //                 //min: new Date(1800,1,1),\r\n        //                 //max: new Date(2000,1,1),\r\n        //                 selectYears: 200,\r\n        //                 //formatSubmit: 'yyyy/mm/dd',\r\n        //                 });\r\n        // Use the picker object directly.\r\n        //var picker = $input.pickadate('picker')\r\n        //picker.set('select', [1900,1,1]);\r\n        //picker.clear();\r\n\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            evt.preventDefault();\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined') {\r\n                console.log(answer);\r\n                if (answer == 'search') {\r\n                    $(\"#searching\").show();\r\n                    search(task, $(\"#toSearch\").val(), 15);\r\n                }\r\n                else {\r\n                    task.answer = $(\"#transcription\").serializeJSON();\r\n                    console.log(task.answer);\r\n                    // Remove unwanted names\r\n                    for (var key in task.answer) {\r\n                        if ((key == 'City marker') || (key == 'Urban park marker') || (key.indexOf('OpenLayers_') == 0)) {\r\n                            delete task.answer[key];\r\n                        }\r\n                    }\r\n                    task.answer.optionsAccuracy = $('input[name=optionsAccuracy]:checked', '#transcription').val();\r\n                    console.log(task.answer.optionsAccuracy);\r\n                    // Convert the feature location into the GeoJSON format\r\n                    var geojson = new OpenLayers.Format.GeoJSON({\r\n                        'internalProjection': task.map.baseLayer.projection,\r\n                        'externalProjection': new OpenLayers.Projection(\"EPSG:4326\")\r\n                        });\r\n\r\n                    task.answer.geojson = JSON.parse(geojson.write(task.objectLayer.features[0]));\r\n\r\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ').toLowerCase();\r\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ').toLowerCase();\r\n                    console.log(task.answer);\r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"#map_\" + task.id).hide();\r\n                        $(\"#img_\" + task.id).hide();\r\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\r\n                        deferred.resolve();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                }\r\n            }\r\n            else {\r\n                console.log(answer);\r\n                console.log(typeof(answer));\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n});\r\n\r\nif(Modernizr.borderradius) {\r\n    pybossa.run('drawB16');\r\n}\r\nelse {\r\n    $(\".skeleton\").hide();\r\n    $(\"#oldbrowser\").show();\r\n}\r\n$(window).off('.affix');\r\n$(\"#imgHolder\")\r\n    .removeClass(\"affix affix-top affix-bottom\")\r\n    .removeData(\"bs.affix\");\r\n\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/17'/>"}, {"id": 18, "created": "2014-03-24T19:01:01.611804", "updated": "2015-02-25T08:42:36.777875", "name": "British Museum Bronze Age Index Drawer B8", "short_name": "drawB8", "description": "British Museum Bronze Age Card Index transcription for drawer B8", "long_description": "This application will help the [British\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\nNeil Wilkin, to make available a huge card catalog of British prehistoric\nmetal artefacts discovered in the 19th and 20th century. This information has\nlong been known to be an extremely important untapped resource. Metal finds\nare not only crucial forms of evidence for dating Britain's prehistoric past,\nbut also tell us a great deal about prehistoric society and economy.\nDigitising the thousands of objects in this catalog will make these records\npublicly available via their incorporation into the [Portable Antiquities\nScheme website](http://finds.org.uk). The result will be the largest national\ndatabase of prehistoric metal finds anywhere in the world and a near\ncomprehensive view of what we currently know about such finds in the UK.\n\nThe cards have been scanned and uploaded to\n[Flickr](https://www.flickr.com/photos/micropasts/sets/72157642683688484/),\nand it is from there that the current application will retrieve and manipulate\nthe scans. These cards contain some fairly standardised kinds of information:\nabout where the artefact was discovered, its dimensions, a longer description\nof what it looks like, etc.\n\nWhat the research team would like people to do, is to transcribe the details\nfrom each section on the card into some pre-determined fields, and also to\nattempt to geo-reference the object via its place of discovery.\n\n## Thank you!\n\nLucy Ellis, Jos Kleijne, stacytg, Angelina Lawrence, Steve Markofsky, Francois\nGrey, Nestor Santos, Helen Bowen, Joe Roe, Hugh Fiske, Germaine V. Hein, James\nKirton, Helen Dawson, Kayt Armstrong, Emily Harwood, Anne Carey, Tansy\nBranscombe, Melissa A. Crossley Trease, Helen Daniel, Siobhan Matthews, Megan\nSteady, Thorrin Jonsson, Michael, Susanne Jaillet, mumkin, Simon Kidner,\nlivius drusus, Penny Doulgeris, Ernst Schnell, Annie Delyth Stratton, Deoksu\nKim, Johnathan Farris, Jenny Millar, Michael Houghton, Joseph Orlando\n(Einstein), Jared Obermeyer, Christopher Carpenter, Megan Koepke, Nicky\nGarland, Jerry Glover, Joanne Mallia, Kate Dougherty, Cheryl Ellsworth, Camila\nPaglione, Caroline, Caroline Chestnutt, Peter Helliwell, Kris Lindquist, Mary\nThomson, Anne Dobriko, Walter Butler, Teddy Julius, Alexandra, Alejandro\nCrespo, Maria T\u00f6rm\u00e4, Kerstin Michaels, Justin Allen H, Chelsea McMullan, Geert\nVerhoeven, Christopher Marchand, Scott Noyes, Shawn Bursey, Elaine Dale, Leah\nMacFarlane, Ksenia Broda-Milian, Katy Emslie, Jeff Okazaki, Evon V Jacobsen,\nEugenio Piasini, Tracey Logan, Laura B, Jennifer Roberts, Margaret McMillan,\nAy\u015fe Nur Kara, Mona Petre, matt stanford, Dominic E. Lacasse, Mandolin, Karin\nVermooten, Elizabeth Kidera, Heather McLane, Angela Beddows, Sarah Majors,\nCaroline Clavell, Hillary Ryde-Collins, Bob Nebrig, Andrew Garrison, Silke\nJuppenlatz, Ross Blau, Carrie Benjamin, David Levinson, Corene Linville, Merit\nGlover, Sylvia Bates, Joseph Koivisto, Rosemary Hooker, taphovenatrix, Andrew\nMurphy, Jan Taylor, David Dawson, Terry Jackson-Baker, Sophia Helen, stephanie\nvickers, Bianca Cabrera, Louise, Latifa Walker, Valeska Becker, Teresa Silva,\nRebecca Gunnill, Joellen mcGann, Holden, Craig Horton, Jeanette Goben, Dennis\nWilliams, Janice Parr, Dina, Miles Deverson and other anonymous contributors.\n\nThis project is on behalf of:\n\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\nBritish Museum logo](/static/img/bmBlackWhite.png)\n\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"sched": "breadth_first", "tutorial": "<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n            \n            <div class=\"modal-header\">\n                <h3 class=\"lead\">British Museum Bronze Age Index Drawer B8 transcription tutorial</h3>\n            </div>\n            \n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n               \n                <p>\n                    This application is very simple, but does require you to use your own judgment in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalog\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the \n                    index card and the line drawing of the object from the reverse side.  \n                    An example of the front side of a card is shown below.\n                </p>\n               \n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n               \n                <p>\n                    Each index card contains similar information and we are asking you to enter this information \n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also \n                    find further hints inside the data entry boxes about where on the card the relevant information might be found \n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box \n                    will hint that this information can be found \"Top of card\").\n                </p>\n            \n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n            \n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button. \n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code \n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter. \n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\", \n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where \n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go \n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the \n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are \n                        both entries that should be entered in the the Collection box, so you could simply enter \n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box \n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place \n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified \n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our \n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n            \n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n            \t\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and \n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best \n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that \n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the \n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n            \n            </div>\n            \n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or \n                propose new research ideas based what you have transcribed, please have a look at \n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n            \t\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../drawB8/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_18_thumbnail_1424853756.png", "task_presenter": "<link rel=\"stylesheet\" href=\"http://ol3js.org/en/master/css/ol.css\" type=\"text/css\">\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n\r\n<script src=\"http://ol3js.org/en/master/build/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\r\n<script src=\"http://maps.google.com/maps/api/js?v=3.14&amp;sensor=false\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n\r\n\r\n<style type=\"text/css\">\r\n    label {\r\n        font-size:16px;\r\n    }\r\n    \r\n\r\n    .affix {\r\n        width: inherit;\r\n        height: 0px;\r\n    }\r\n  \r\n    .affix-bottom {\r\n        top: auto !important;\r\n        position: fixed;\r\n        bottom: 240px;\r\n    }\r\n    \r\n    #imgContainer {\r\n        height: 390px;\r\n        width: 600px;\r\n    }\r\n    #map {\r\n    \twidth:100%;\r\n    \theight:100%;\r\n    }\r\n\r\n</style>\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Hey there! Do you want to help us?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          Thanks for contributing one task for the project. We are interested in knowing how you found out about us. <strong>Could you please answer two questions in a short survey?</strong>\r\n\r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\" width=\"100%\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Congrats for completing 25 tasks!</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          Thanks for contributing 25 tasks for the project. Now that you have been using MicroPasts for a while, we would like to know how you found it. <strong>Could you please answer a few questions in a short survey?</strong>\r\n\r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\r\n    <!-- Success and Error Messages for the user -->\r\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\r\n        <strong>Sorry, but your browser does not support the current application. If you want to contribute, please, upgrade to a modern web browser like the open source and free alternative <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a></strong>.\r\n    </div>\r\n</div> <!-- End of Row -->\r\n<div style=\"margin-top:15px;\">\r\n            <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n            </div>\r\n            <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <img src=\"/static/img/loading.gif\">Loading next task...\r\n            </div>\r\n            <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <strong>The task has been completed!</strong> Thanks a lot!\r\n            </div>\r\n            <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Congratulations!</strong> You have participated in all available tasks!\r\n                <br/>\r\n                <div class=\"alert-actions\">\r\n                    <a class=\"btn-default btn\" href=\"/\">Go back</a>\r\n                    <a class=\"btn-default btn\" href=\"/app\">or, Check other applications</a>\r\n                </div>\r\n            </div>\r\n            <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n                <a class=\"close\">\u00d7</a>\r\n                <strong>Error!</strong> Something went wrong, please contact the site administrators\r\n            </div>\r\n        </div> <!-- End Success and Error Messages for the user -->\r\n\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n<div class=\"row skeleton\"> <!-- Start Skeleton Row-->\r\n\r\n        <h1 id=\"start\">Please transcribe this index card</h1> <!-- The question will be loaded here -->\r\n        <span class=\"label label-info\">Note</span> You can use your mouse wheel trackpad to zoom in/out the picture, as well as drag & drop to navigate in the document.\r\n\r\n</div>\r\n\r\n<div class=\"row skeleton\">\r\n\r\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\r\n\r\n            <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\r\n\r\n            <form id=\"transcription\" role=\"form\">\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"objectType\">Object Type</label>\r\n                        <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\r\n                    <div class=\"controls\">\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\r\n                        </div>\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\r\n                        </div>\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\r\n                        </div>\r\n                   </div>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\r\n                        <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"site\">Site</label>\r\n                        <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\r\n                        <div class=\"input-append\">\r\n                        <label class=\"control-label\" for=\"site\">Georeference the site</label>\r\n                            <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site in a map\"></input>\r\n                            <button id=\"searchBtn\" class=\"btn btn-answer\" value=\"search\" type=\"button\"><i class=\"icon-search\"></i> Search</button>\r\n                        </div>\r\n                        <div style=\"display:none;margin-top:15px;\" id=\"searching\" class=\"alert alert-info\"><img src=\"/static/img/loading.gif\"> Searching...</div>\r\n                    <div style=\"display:none;margin-top:15px;\" id=\"searchingError\" class=\"alert alert-warning\"><strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> in the map.</div>\r\n                    <div id=\"searchingTip\" class=\"alert alert-info\" style=\"display:none; margin-top:10px;\">Drag & drop the <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> to improve the location</div>\r\n                    <div id=\"map\" style=\"margin-top:15px;\"></div>\r\n\r\n                     <div style=\"font-size:12px;\">Marker Icon by <a href=\"http://mapicons.nicolasmollet.com/\">Nicolas Mollet</a></div>\r\n                </div>\r\n\r\n                <p style=\"font-size:16px\">I believe the location I have given on the map is accurate to within:</p>\r\n                <div class=\"form-group\">\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy100\" value=\"100\" checked>\r\n                    100 metres\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy1000\" value=\"1000\">\r\n                    1 kilometre\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy10000\" value=\"10000\">\r\n                    10 kilometres\r\n                    </label>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\r\n                        <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\"></textarea>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"collection\">Collection</label>\r\n                        <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"publications\">Publications</label>\r\n                        <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"length\">Length</label>\r\n                        <input class=\"form-control\" type=\"number\" min=\"0\" name=\"length\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"width\">Width</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"width\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"edge\">Edge</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"edge\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"thickness\">Thickness</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"thickness\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"weight\">Weight</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"weight\" placeholder=\"In grammes\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"composition\">Composition</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"description\">Description</label>\r\n                        <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\"></textarea>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"surface\">Surface</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"patina\">Patina</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"associations\">Associations</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\r\n                </div>\r\n\r\n                <hr>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"remarks\">Remarks</label>\r\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\r\n                </div>\r\n\r\n                <hr>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\r\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if any.\"></textarea>\r\n                </div>\r\n\r\n            </form>\r\n\r\n            <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\r\n            \r\n            \r\n             <!-- Feedback items for the user -->\r\n        <p>You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span></p>\r\n        <p>You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n<!-- End of feedback row -->\r\n            \r\n\r\n    </div><!-- End of Question and Submission DIV (column) -->\r\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\"><!-- Start of Photo DIV (column) -->\r\n        <div style=\"margin-top:15px;\">\r\n            <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n            </div>\r\n            <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <img src=\"/static/img/loading.gif\">Loading next task...\r\n            </div>\r\n            <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <strong>The task has been completed!</strong> Thanks a lot!\r\n            </div>\r\n            <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Congratulations!</strong> You have participated in all available tasks!\r\n                <br/>\r\n                <div class=\"alert-actions\">\r\n                    <a class=\"btn-sm\" href=\"/\">Go back</a>\r\n                    <a class=\"btn-sm\" href=\"/app\">or, Check other applications</a>\r\n                </div>\r\n            </div>\r\n            <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n                <a class=\"close\">\u00d7</a>\r\n                <strong>Error!</strong> Something went wrong, please contact the site administrators\r\n            </div>\r\n        </div> <!-- End Success and Error Messages for the user -->\r\n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"530\">\r\n                <div class=\"btn-group\">\r\n\t\t<a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\r\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n\t        <a id=\"newTask\" href=\"../newtask\" class=\"btn btn-sm btn-info\"><i class=\"glyphicon glyphicon-picture\"></i> Different card?</a>\r\n        \t<a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\r\n        \t<a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\r\n\t\t\r\n\t</div>\r\n        <div id=\"imgContainer\" >\r\n        \t\r\n           <!-- <img src=\"http://i.imgur.com/GeHxzb7.png\" style=\"max-width=100%\">-->\r\n        </div>\r\n        <div id=\"taskImg\"></div>\r\n    </div><!-- End of Photo DIV (columnt) -->\r\n\t</div>\r\n</div><!-- End of Skeleton Row -->\r\n\r\n\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n                <h3 class=\"lead\">BM Bronze Age Index Drawer B8 transcription tutorial</h3>\r\n            </div>\r\n\t<!-- stepped modal body -->\r\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n\r\n                <p>\r\n                    This application is very simple, but does require you to use your own judgment in reading hand-written documents. When you participate,\r\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalog\r\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\r\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\r\n                    card. Most scanned images combine the written details from the one side of the\r\n                    index card and the line drawing of the object from the reverse side.\r\n                    An example of the front side of a card is shown below.\r\n                </p>\r\n\r\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\r\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\r\n\r\n                <p>\r\n                    Each index card contains similar information and we are asking you to enter this information\r\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\r\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\r\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\r\n                    will hint that this information can be found \"Top of card\").\r\n                </p>\r\n\r\n            </div>\r\n\r\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n\t\t     <p>\r\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\r\n                    Here are some further issues to watch out for:\r\n                    </p>\r\n\r\n\t\t<ol>\r\n\t\t\r\n                    <li>\r\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\r\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\r\n                    This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\r\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    When entering information in the fields, please respect the case of words as seen on the card.\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\r\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\r\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\r\n                    you are fairly confident but not certain.\r\n                    </li>\r\n\r\n                    <li>\r\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\r\n                    into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\r\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\r\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\r\n                    </li>\r\n\r\n                    <li>\r\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\r\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\r\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\r\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\r\n                    </li>\r\n\r\n                    <li>\r\n                    If there is additional information on the card that you do not feel fits in one of our pre-specified\r\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\r\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\r\n                    </li>\r\n                    \r\n                </ol>\r\n\r\n\r\n\t\t</div>\r\n\r\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\r\n\t\t\t<p>\r\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\r\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\r\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\r\n\t            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\r\n\t            \tinput fields in response to your suggestions.\r\n\t            \t</p>\r\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\r\n\t\t</div>\r\n\t\t\r\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\r\n\t\t<p>\r\n                To find out how the project is progressing, suggest changes to this application or\r\n                propose new research ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n\t\t</div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n\r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 3 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<script>\r\n// Quick fix for IE8\r\nModernizr.load({\r\n  test: window.JSON,\r\n  nope: '/static/js/vendor/json2.min.js'\r\n});\r\n\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('drawB8').done(function(data){\r\n            \r\n        console.log(\"Total answers done for user: \" + data.done);\r\n\tif ((data.done == 1) && ($.cookie('surveyB8') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('survey', 'shown', { path: '/'});\r\n        }\r\n\r\n    if ((data.done >= 25) && ($.cookie('survey25B8') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25B8', 'shown', { path: '/'});\r\n        }\r\n\r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'});\r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n\r\n\r\n// If user presses enter do the search\r\n// $(\"#locationRef\").bind('keypress', function(e){\r\n//     var code = (e.keyCode ? e.keyCode : e.which);\r\n//     if(code == 13) { //Enter keycode\r\n//         search();\r\n//     }\r\n// });\r\n\r\n// This function will load the marker of the city, and center the map on it\r\nfunction search(task, city, zoom) {\r\n    zoom = (typeof zoom === \"undefined\") ? 4 : 7;\r\n    city = city.replace(/\\n/g,' ');\r\n    console.log(city);\r\n    if (city) {\r\n        var place = city;\r\n        $(\"#searchingError\").hide();\r\n    }\r\n    else {\r\n        $(\"#searching\").show();\r\n        $(\"#searchingError\").hide();\r\n        if ($('#toSearch').val()) {\r\n            var place = $(\"#toSearch\").val();\r\n        }\r\n        else {\r\n            $(\"#searching\").hide();\r\n            alert(\"Please, add a location in the Site section to search in the map\");\r\n            return\r\n        }\r\n    }\r\n\r\n    // Geocode the place using Nominatim OSM service\r\n    $.getJSON('http://nominatim.openstreetmap.org/search/' + place + '?format=json', function(output) {\r\n        if (output.length >= 1) {\r\n            //console.log(\"Lon: \"+ output[0].lon + \" Lat: \" + output[0].lat);\r\n            // Clean previous markers\r\n            $(\"#navigate\").addClass(\"active\");\r\n            $(\"#point\").removeClass(\"disabled\");\r\n            $(\"#point\").removeClass(\"active\");\r\n            task.objectLayer.removeAllFeatures();\r\n            //$(\"#answerbtn\").addClass(\"disabled\");\r\n            //$(\"#answerbtn\").unbind('click',submitTask);\r\n            //console.log(\"Map cleaned!\");\r\n            // Create a LonLat object to load the place marker\r\n            var lonLat = new OpenLayers.LonLat(output[0].lon, output[0].lat)\r\n                .transform(\r\n                    new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\r\n                    task.map.getProjectionObject() // to Spherical Mercator Projection\r\n                );\r\n            // Set the marker position\r\n            point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);\r\n            task.longitude = lonLat.lon;\r\n            task.latitude = lonLat.lat;\r\n            task.objectLayer.addFeatures([new OpenLayers.Feature.Vector(point)]);\r\n            // Center the map\r\n            task.map.setCenter(lonLat, zoom);\r\n            //lonLat.transform(\r\n            //        map.getProjectionObject(), // from Spherical Mercator Projection\r\n            //        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n            //);\r\n            // Reset the lon & lat span objects\r\n            $(\"#lon\").text(\"-\");\r\n            $(\"#lat\").text(\"-\");\r\n\r\n            if (zoom !=4 ) {\r\n                $(\"#searchingTip\").show();\r\n            }\r\n\r\n            // Only show the messages when looking for user input\r\n            if ($('#toSearch').val()) {\r\n                $(\"#searching\").hide().fadeOut();\r\n                $(\"#searchingDone\").show().fadeIn().delay(2000).fadeOut();\r\n            }\r\n        }\r\n        else {\r\n            // Location not found, sorry\r\n            // Warn the user and try with another place\r\n            $(\"#searching\").hide().fadeOut();\r\n            $(\"#searchingError\").show();\r\n        }\r\n    });\r\n}\r\n\r\n\r\n\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        div_map.css(\"height\", \"390px\");\r\n        div_map.css(\"width\", \"600px\");\r\n        div_map.css(\"background\", \"#000\");\r\n\r\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\r\n\r\n\tvar extent = new OpenLayers.Bounds();\r\n        extent.extend(new OpenLayers.LonLat(72.235514,76.184692).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n    new OpenLayers.Projection('EPSG:900913')));\r\n        extent.extend(new OpenLayers.LonLat(14.093957,-24.362183).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n    new OpenLayers.Projection('EPSG:900913')));\r\n\r\n\r\n\r\n        $(\"#imgContainer\").append(div_map);\r\n        div_map.attr(\"id\", \"img_\" + task.id);\r\n\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 1024, 720]\r\n        });\r\n\r\n        task.map_img = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: copyright\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [1024, 720],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'img_' + task.id,\r\n          view: new ol.View({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 1.0\r\n          })\r\n        });\r\n        div_map.css(\"display\", \"none\");\r\n\r\n\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        img.attr(\"id\", \"img_task_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n        });\r\n        img.attr('src', task.info.url_b);\r\n        img.attr('width', '600px');\r\n        img.attr('height', '390px');\r\n        img.addClass('img-polaroid');\r\n        img.css(\"cursor\", \"zoom-in\");\r\n        task.info.image = img;\r\n\r\n        // MAP\r\n        var div_map = $(\"<div/>\", {'id': \"map_\" + task.id, 'class': 'map_canvas'});\r\n        div_map.css(\"width\", \"360px\");\r\n        div_map.css(\"height\", \"500px\");\r\n        div_map.css(\"display\", \"none\");\r\n\r\n        // We need to append the div element asap otherwise OpenLayers will fail\r\n        $(\"#map\").append(div_map);\r\n\r\n        var map = new OpenLayers.Map('map_' + task.id, {\r\n            controls: [\r\n                new OpenLayers.Control.Navigation(),\r\n                new OpenLayers.Control.PanZoom(),\r\n                new OpenLayers.Control.LayerSwitcher(),\r\n                new OpenLayers.Control.MousePosition({displayProjection: new OpenLayers.Projection(\"EPSG:4326\")}),\r\n               // new OpenLayers.Control.ScaleLine(),\r\n                new OpenLayers.Control.Attribution()\r\n                ]\r\n        });\r\n\r\n\r\n        \r\n\r\n        // Layers\r\n        map.addLayer(new OpenLayers.Layer.Google(\r\n            \"Google Roadmap\",\r\n            {type: google.maps.MapTypeId.ROADMAP}\r\n        ));        \r\n               \r\n       \r\n\r\n       \r\n\r\n        // Icon for the Urban Park Marker\r\n        var styleMapObject = new OpenLayers.StyleMap({\r\n            pointRadius: 15,\r\n            externalGraphic: 'http://img225.imageshack.us/img225/5237/youarehere2.png'\r\n        });\r\n\r\n        \r\n        // Layer for placing the urban park marker\r\n        var objectLayer = new OpenLayers.Layer.Vector(\"Find spot marker\", {\r\n            styleMap: styleMapObject,\r\n        });\r\n        map.addLayer(objectLayer);\r\n        task.objectLayer = objectLayer;\r\n\r\n        // Function to allow only the addition of one urban park per city\r\n        // The function gets the feature (point) and gets its location, transforms it to the right projection\r\n        // loads the lon and at into the HTML skeleton and disables the toolbar, so no more points can be added\r\n        disablePoint = function(feature) {\r\n            if ($(\"#answerbtn\").hasClass(\"disabled\")) {\r\n                $(\"#answerbtn\").removeClass('disabled');\r\n            }\r\n\r\n            $(\"#lat\").text(feature.geometry.y);\r\n            var tmp = feature.geometry.clone();\r\n            tmp.transform(\r\n            \t    task.map.getProjectionObject(), // from Spherical Mercator Projection\r\n                    new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n            );\r\n            $(\"#lon\").text(tmp.x);\r\n            $(\"#lat\").text(tmp.y);\r\n            task.lon = tmp.x;\r\n            task.lat = tmp.y;\r\n            task.drawControls['point'].deactivate();\r\n        }\r\n\r\n        // Default location to load the map\r\n        var lonLat = new OpenLayers.LonLat(50.4020376,30.6147429233117)\r\n            .transform(\r\n                'EPSG:4326', 'EPSG:3857'\r\n                //new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\r\n                //new OpenLayers.Projection(\"EPSG:900913\") // to Spherical Mercator Projection\r\n            );\r\n\r\n        // Enable drag & drop in the urban park Layer\r\n        var drag = new OpenLayers.Control.DragFeature(objectLayer, {\r\n            onComplete: function() {\r\n                var urbanParkPoint = task.objectLayer.features[0].geometry\r\n                var tmp = urbanParkPoint.clone();\r\n                tmp.transform(\r\n                        task.map.getProjectionObject(), // from Spherical Mercator Projection\r\n                        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n                );\r\n                // When the marker has been dropped, update the lon & lat of the urban park\r\n            }\r\n\r\n        });\r\n        // Add the drag & drop control into the map\r\n        map.addControl(drag);\r\n        // Activate drag & drop\r\n        drag.activate();\r\n\r\n        var drawControls = {\r\n            point:      new OpenLayers.Control.DrawFeature(objectLayer, OpenLayers.Handler.Point,\r\n                        { 'featureAdded': disablePoint})\r\n        }\r\n\r\n        // Add them to the map\r\n        for (var key in drawControls) {\r\n            map.addControl(drawControls[key]);\r\n        }\r\n        task.drawControls = drawControls;\r\n\r\n        task.map = map;\r\n        //task.map.setOptions({restrictedExtent: extent});\r\n        task.lon = 0;\r\n        task.lat = 0;\r\n\r\n        search(task, \"Milan\");\r\n        } // End if task empty\r\n    else {\r\n        deferred.resolve(task);\r\n        }\r\n\r\n});\r\n\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(':input','#transcription')\r\n           .not(':button, :submit, :reset, :hidden, :radio')\r\n           .val('')\r\n           .removeAttr('checked')\r\n           .removeAttr('selected');\r\n           \r\n\t$(\"a#raw\").attr(\"href\", task.info.url_b);\r\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n\t$(\"a#down\").attr(\"download\", task.id);\r\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\r\n        \r\n        $(\".fancybox\").fancybox();\r\n        $('#imgLink').tooltip();\r\n        $(\"[rel=tooltip]\").tooltip();\r\n        $(\"#searchingTip\").hide();\r\n        $(\"#question\").html(task.info.question);\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n        $(\"#img_\" + task.id).show();\r\n\r\n        // Clean\r\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\r\n        for (i = 1700; i < 2000; i++)\r\n        {\r\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\r\n        for (i = 1; i <= 12; i++)\r\n        {\r\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\r\n        for (i = 1; i <= 31; i++)\r\n        {\r\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        //var $input = $(\".pickadate\").pickadate({\r\n        //                 format: 'yyyy-mm-dd',\r\n        //                 selectYears: true,\r\n        //                 selectMonths: true,\r\n        //                 //min: new Date(1800,1,1),\r\n        //                 //max: new Date(2000,1,1),\r\n        //                 selectYears: 200,\r\n        //                 //formatSubmit: 'yyyy/mm/dd',\r\n        //                 });\r\n        // Use the picker object directly.\r\n        //var picker = $input.pickadate('picker')\r\n        //picker.set('select', [1900,1,1]);\r\n        //picker.clear();\r\n\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            evt.preventDefault();\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined') {\r\n                console.log(answer);\r\n                if (answer == 'search') {\r\n                    $(\"#searching\").show();\r\n                    search(task, $(\"#toSearch\").val(), 15);\r\n                }\r\n                else {\r\n                    task.answer = $(\"#transcription\").serializeJSON();\r\n                    console.log(task.answer);\r\n                    // Remove unwanted names\r\n                    for (var key in task.answer) {\r\n                        if ((key == 'City marker') || (key == 'Urban park marker') || (key.indexOf('OpenLayers_') == 0)) {\r\n                            delete task.answer[key];\r\n                        }\r\n                    }\r\n                    task.answer.optionsAccuracy = $('input[name=optionsAccuracy]:checked', '#transcription').val();\r\n                    console.log(task.answer.optionsAccuracy);\r\n                    // Convert the feature location into the GeoJSON format\r\n                    var geojson = new OpenLayers.Format.GeoJSON({\r\n                        'internalProjection': task.map.baseLayer.projection,\r\n                        'externalProjection': new OpenLayers.Projection(\"EPSG:4326\")\r\n                        });\r\n\r\n                    task.answer.geojson = JSON.parse(geojson.write(task.objectLayer.features[0]));\r\n\r\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ').toLowerCase();\r\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ').toLowerCase();\r\n                    console.log(task.answer);\r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"#map_\" + task.id).hide();\r\n                        $(\"#img_\" + task.id).hide();\r\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\r\n                        deferred.resolve();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                }\r\n            }\r\n            else {\r\n                console.log(answer);\r\n                console.log(typeof(answer));\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n});\r\n\r\nif(Modernizr.borderradius) {\r\n    pybossa.run('drawB8');\r\n}\r\nelse {\r\n    $(\".skeleton\").hide();\r\n    $(\"#oldbrowser\").show();\r\n}\r\n $(window).resize(function () {\r\n      //$('#log').append('<div>Handler for .resize() called.</div>');\r\n         var canvasheight=$('#map').parent().css('height');\r\n         var canvaswidth=$('#map').parent().css('width');\r\n\r\n         $('#map').css(\"height\", canvasheight);\r\n         $('#map').css(\"width\", canvaswidth);\r\n\r\n   });\r\n\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/18'/>"}, {"id": 19, "created": "2014-03-24T23:16:41.220116", "updated": "2015-02-25T08:42:33.002130", "name": "British Museum Bronze Age Index Drawer A9", "short_name": "drawA9", "description": "British Museum Bronze Age Card Index transcription for drawer A9", "long_description": "This application will help the [British\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\nNeil Wilkin, to make available a huge card catalog of British prehistoric\nmetal artefacts discovered in the 19th and 20th century. This information has\nlong been known to be an extremely important untapped resource. Metal finds\nare not only crucial forms of evidence for dating Britain's prehistoric past,\nbut also tell us a great deal about prehistoric society and economy.\nDigitising the thousands of objects in this catalog will make these records\npublicly available via their incorporation into the [Portable Antiquities\nScheme website](http://finds.org.uk). The result will be the largest national\ndatabase of prehistoric metal finds anywhere in the world and a near\ncomprehensive view of what we currently know about such finds in the UK.\n\nThe cards have been scanned and uploaded to\n[Flickr](https://www.flickr.com/photos/micropasts/sets/72157641305131374/),\nand it is from there that the current application will retrieve and manipulate\nthe scans. These cards contain some fairly standardised kinds of information:\nabout where the artefact was discovered, its dimensions, a longer description\nof what it looks like, etc.\n\nWhat the research team would like people to do, is to transcribe the details\nfrom each section on the card into some pre-determined fields, and also to\nattempt to geo-reference the object via its place of discovery.\n\n### **Thank you!**\n\nLucy Ellis, exiledfrommaine, vtri, Nicky Moxey, Pamela Holland, Hugh Fiske,\nThorrin Jonsson, Michael, Susanne Jaillet, Belinda Elizabeth Singe, mumkin,\nJohnathan Farris, Jared Obermeyer, Kimberly Donne Snyder, Katie Evans, Jerry\nGlover, Kate Dougherty, Cheryl Ellsworth, Randall Carruthers, Camila Paglione,\nCaroline, Caroline Chestnutt, Peter Helliwell, Walter Butler, Adam Patnoe,\nAlejandro Crespo, Maria T\u00f6rm\u00e4, Matthew, Elaine Dale, Katy Emslie, Jeff\nOkazaki, Melissa Vette Wobig, Amy McDermott, Nicholas Yarbrough, Tracey Logan,\nLaura B, Jennifer Speer, Sarah Roberts, Karin Vermooten, Eric Crawford, Erin\nChapman, Bob Nebrig, Andrew Garrison, Ross Blau, Carrie Benjamin, Matthew\nBeckett, Matthew Bendert, David Levinson, Jessica Byler, Juan Ysidro Tineo\nAlvarado, Bianca Cabrera, Latifa Walker, Valeska Becker, Rebecca Gunnill,\nJoellen mcGann, Holden, Craig Horton, Sara Gibson, Dina Fathalla,\nscruffyarcher, Maria van Duinhoven, Glenda Robinson, Julia Pope, Margaret\nEllen Joy, Susan Nash, Nina Sharman, Jane Fellows, Luis Kohl, John Marr,\nLouise Amor, Helena Fox, Sonsoles Garc\u00eda Gonz\u00e1lez, Shane Grant, Denis Antoine,\nAnn Silvester, John Strangfeld, Mary Mansfield Blackman, Romilly Collins,\nJames Babbage, Heather Bidzinski, Jodie Bee, Gill Pettitt, Sarah, Raest Wylde,\nJohn Boothby, Avellana Teresa Ross, Charles T. G. Clarke, Louise Panton and\nother anonymous contributors for completing the application.\n\n### This project is on behalf of\n\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\nBritish Museum logo](/static/img/bmBlackWhite.png)\n\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"sched": "default", "tutorial": "<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n            \n            <div class=\"modal-header\">\n                <h3 class=\"lead\">BM Bronze Age Index Draw A9 transcription tutorial</h3>\n            </div>\n            \n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n               \n                <p>\n                    This application is very simple, but does require you to use your own judgment in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalog\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the \n                    index card and the line drawing of the object from the reverse side.  \n                    An example of the front side of a card is shown below.\n                </p>\n               \n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n               \n                <p>\n                    Each index card contains similar information and we are asking you to enter this information \n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also \n                    find further hints inside the data entry boxes about where on the card the relevant information might be found \n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box \n                    will hint that this information can be found \"Top of card\").\n                </p>\n            \n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n            \n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button. \n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code \n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter. \n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\", \n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where \n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go \n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the \n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are \n                        both entries that should be entered in the the Collection box, so you could simply enter \n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box \n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place \n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified \n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our \n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n            \n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n            \t\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and \n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best \n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that \n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the \n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n            \n            </div>\n            \n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or \n                propose new research ideas based what you have transcribed, please have a look at \n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n            \t\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../drawA9/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_19_thumbnail_1424853752.png", "task_presenter": "<link rel=\"stylesheet\" href=\"/static/css/ol.css\" type=\"text/css\">\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n\r\n<script src=\"/static/js/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\r\n<script src=\"http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n<style type=\"text/css\">\r\n    label {\r\n        font-size:16px;\r\n    }\r\n    #map_canvas label {\r\n        width: auto;\r\n        display: inline;\r\n    }\r\n    #map_canvas img {\r\n        max-width: none;\r\n    }\r\n    .affix {\r\n        width: inherit;\r\n        height: 0px;\r\n    }\r\n    .affix-bottom {\r\n        top: auto !important;\r\n        position: fixed;\r\n        bottom: 240px;\r\n    }\r\n    #imgContainer {\r\n        height: 390px;\r\n        width: 600px;\r\n    }\r\n</style>\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Hey there! Do you want to help us?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          Thanks for contributing one task for the project. We are interested in knowing how you found out about us. <strong>Could you please answer two questions in a short survey?</strong>\r\n\r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\" width=\"100%\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Congrats for completing 25 tasks!</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          Thanks for contributing 25 tasks for the project. Now that you have been using MicroPasts for a while, we would like to know how you found it. <strong>Could you please answer a few questions in a short survey?</strong>\r\n\r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\r\n    <!-- Success and Error Messages for the user -->\r\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\r\n        <strong>Sorry, but your browser does not support the current application. If you want to contribute, please, upgrade to a modern web browser like the open source and free alternative <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a></strong>.\r\n    </div>\r\n</div> <!-- End of Row -->\r\n\r\n<div style=\"margin-top:15px;\">\r\n    <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n    </div>\r\n    <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <img src=\"/static/img/loading.gif\">Loading next task...\r\n    </div>\r\n    <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <strong>The task has been completed!</strong> Thanks a lot!\r\n    </div>\r\n    <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <h2>\r\n            Congratulations!\r\n        </h2> \r\n        <p>\r\n            You have participated in <strong>all</strong> available tasks! Thank you for your interest and help.\r\n        </p>\r\n        <br/>\r\n        <img src=\"https://crowdfunded.micropasts.org/assets/logo-head.png\" width=\"200\" height=\"200\"/>\r\n        <div class=\"alert-actions\">\r\n            <a class=\"btn-default btn\" href=\"/\">Go back</a>\r\n            <a class=\"btn-default btn\" href=\"/app\">or, Check other applications</a>\r\n        </div>\r\n    </div>\r\n\r\n    <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n        <a class=\"close\">X.</a>\r\n        <strong>Error!</strong> Something went wrong, please contact the site \r\n        administrators via the forum, Twitter, email or our Facebook page.\r\n    </div>\r\n</div> <!-- End Success and Error Messages for the user -->\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n<div class=\"row skeleton\"> <!-- Start Skeleton Row-->\r\n\r\n        <h1 id=\"start\">Please transcribe this index card</h1> <!-- The question will be loaded here -->\r\n        <span class=\"label label-info\">Note</span> You can use your mouse wheel trackpad to zoom in/out the picture, as well as drag & drop to navigate in the document.\r\n\r\n</div>\r\n\r\n<div class=\"row skeleton\">\r\n\r\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\r\n\r\n            <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\r\n\r\n            <form id=\"transcription\" role=\"form\">\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"objectType\">Object Type</label>\r\n                        <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\r\n                    <div class=\"controls\">\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\r\n                        </div>\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\r\n                        </div>\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\r\n                        </div>\r\n                   </div>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\r\n                        <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"site\">Site</label>\r\n                        <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\r\n                        <div class=\"input-append\">\r\n                        <label class=\"control-label\" for=\"site\">Georeference the site</label>\r\n                            <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site in a map\"></input>\r\n                            <button id=\"searchBtn\" class=\"btn btn-answer\" value=\"search\" type=\"button\"><i class=\"icon-search\"></i> Search</button>\r\n                        </div>\r\n                        <div style=\"display:none;margin-top:15px;\" id=\"searching\" class=\"alert alert-info\"><img src=\"/static/img/loading.gif\"> Searching...</div>\r\n                    <div style=\"display:none;margin-top:15px;\" id=\"searchingError\" class=\"alert alert-warning\"><strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> in the map.</div>\r\n                    <div id=\"searchingTip\" class=\"alert alert-info\" style=\"display:none; margin-top:10px;\">Drag & drop the <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> to improve the location</div>\r\n                    <div id=\"map\" style=\"margin-top:15px;\"></div>\r\n\r\n                     <div style=\"font-size:12px;\">Marker Icon by <a href=\"http://mapicons.nicolasmollet.com/\">Nicolas Mollet</a></div>\r\n                </div>\r\n\r\n                <p style=\"font-size:16px\">I believe the location I have given on the map is accurate to within:</p>\r\n                <div class=\"form-group\">\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy100\" value=\"100\" checked>\r\n                    100 metres\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy1000\" value=\"1000\">\r\n                    1 kilometre\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy10000\" value=\"10000\">\r\n                    10 kilometres\r\n                    </label>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\r\n                        <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\"></textarea>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"collection\">Collection</label>\r\n                        <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"publications\">Publications</label>\r\n                        <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"length\">Length</label>\r\n                        <input class=\"form-control\" type=\"number\" min=\"0\" name=\"length\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"width\">Width</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"width\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"edge\">Edge</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"edge\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"thickness\">Thickness</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"thickness\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"weight\">Weight</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"weight\" placeholder=\"In grammes\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"composition\">Composition</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"description\">Description</label>\r\n                        <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\"></textarea>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"surface\">Surface</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"patina\">Patina</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"associations\">Associations</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\r\n                </div>\r\n\r\n                <hr>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"remarks\">Remarks</label>\r\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\r\n                </div>\r\n\r\n                <hr>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\r\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if any.\"></textarea>\r\n                </div>\r\n\r\n            </form>\r\n\r\n            <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\r\n            \r\n            \r\n\t<!-- Feedback items for the user -->\r\n        <p>You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span></p>\r\n        <p>You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\t<!-- End of feedback row -->\r\n\r\n    </div><!-- End of Question and Submission DIV (column) -->\r\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\"><!-- Start of Photo DIV (column) -->\r\n        <div style=\"margin-top:15px;\">\r\n            <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n            </div>\r\n            <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <img src=\"/static/img/loading.gif\">Loading next task...\r\n            </div>\r\n            <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <strong>The task has been completed!</strong> Thanks a lot!\r\n            </div>\r\n            <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Congratulations!</strong> You have participated in all available tasks!\r\n                <br/>\r\n                <div class=\"alert-actions\">\r\n                    <a class=\"btn-sm\" href=\"/\">Go back</a>\r\n                    <a class=\"btn-sm\" href=\"/app\">or, Check other applications</a>\r\n                </div>\r\n            </div>\r\n            <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n                <a class=\"close\">\u00d7</a>\r\n                <strong>Error!</strong> Something went wrong, please contact the site administrators\r\n            </div>\r\n        </div> <!-- End Success and Error Messages for the user -->\r\n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"550\">\r\n                <div class=\"btn-group\">\r\n\t\t<a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\r\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n\t    <a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\r\n        <a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\r\n\t</div>\r\n        <div id=\"imgContainer\" >\r\n        \t\r\n           <!-- <img src=\"http://i.imgur.com/GeHxzb7.png\" style=\"max-width=100%\">-->\r\n        </div>\r\n        <div id=\"taskImg\"></div>\r\n        </div>\r\n    </div><!-- End of Photo DIV (columnt) -->\r\n\r\n</div><!-- End of Skeleton Row -->\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n                <h3 class=\"lead\">BM Bronze Age Index Drawer A9 transcription tutorial</h3>\r\n            </div>\r\n\t<!-- stepped modal body -->\r\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n\r\n                <p>\r\n                    This application is very simple, but does require you to use your own judgment in reading hand-written documents. When you participate,\r\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalog\r\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\r\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\r\n                    card. Most scanned images combine the written details from the one side of the\r\n                    index card and the line drawing of the object from the reverse side.\r\n                    An example of the front side of a card is shown below.\r\n                </p>\r\n\r\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\r\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\r\n\r\n                <p>\r\n                    Each index card contains similar information and we are asking you to enter this information\r\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\r\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\r\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\r\n                    will hint that this information can be found \"Top of card\").\r\n                </p>\r\n\r\n            </div>\r\n\r\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n\t\t     <p>\r\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\r\n                    Here are some further issues to watch out for:\r\n                    </p>\r\n\r\n\t\t<ol>\r\n\t\t\r\n                    <li>\r\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\r\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\r\n                    This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\r\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    When entering information in the fields, please respect the case of words as seen on the card.\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\r\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\r\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\r\n                    you are fairly confident but not certain.\r\n                    </li>\r\n\r\n                    <li>\r\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\r\n                    into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\r\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\r\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\r\n                    </li>\r\n\r\n                    <li>\r\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\r\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\r\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\r\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\r\n                    </li>\r\n\r\n                    <li>\r\n                    If there is additional information on the card that you don't feel fits in one of our pre-specified\r\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\r\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\r\n                    </li>\r\n                    \r\n                </ol>\r\n\r\n\r\n\t\t</div>\r\n\r\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\r\n\t\t\t<p>\r\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\r\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\r\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\r\n\t            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\r\n\t            \tinput fields in response to your suggestions.\r\n\t            \t</p>\r\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\r\n\t\t</div>\r\n\t\t\r\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\r\n\t\t<p>\r\n                To find out how the project is progressing, suggest changes to this application or\r\n                propose new research ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n\t\t</div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n\r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 3 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<script>\r\n// Quick fix for IE8\r\nModernizr.load({\r\n  test: window.JSON,\r\n  nope: '/static/js/vendor/json2.min.js'\r\n});\r\n\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('drawA9').done(function(data){\r\n            console.log(\"Total answers done for user: \" + data.done);\r\n\tif ((data.done == 1) && ($.cookie('surveyA9') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('surveyA9', 'shown', { path: '/'});\r\n        }\r\n\r\n    if ((data.done == 25) && ($.cookie('survey25A9') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25A9', 'shown', { path: '/'});\r\n        }\r\n\r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'});\r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n\r\n\r\n// If user presses enter do the search\r\n// $(\"#locationRef\").bind('keypress', function(e){\r\n//     var code = (e.keyCode ? e.keyCode : e.which);\r\n//     if(code == 13) { //Enter keycode\r\n//         search();\r\n//     }\r\n// });\r\n\r\n// This function will load the marker of the city, and center the map on it\r\nfunction search(task, city, zoom) {\r\n    zoom = (typeof zoom === \"undefined\") ? 4 : zoom;\r\n    city = city.replace(/\\n/g,' ');\r\n    console.log(city);\r\n    if (city) {\r\n        var place = city;\r\n        $(\"#searchingError\").hide();\r\n    }\r\n    else {\r\n        $(\"#searching\").show();\r\n        $(\"#searchingError\").hide();\r\n        if ($('#toSearch').val()) {\r\n            var place = $(\"#toSearch\").val();\r\n        }\r\n        else {\r\n            $(\"#searching\").hide();\r\n            alert(\"Please, add a location in the Site section to search in the map\");\r\n            return\r\n        }\r\n    }\r\n\r\n    // Geocode the place using Nominatim OSM service\r\n    $.getJSON('http://nominatim.openstreetmap.org/search/' + place + '?format=json', function(output) {\r\n        if (output.length >= 1) {\r\n            //console.log(\"Lon: \"+ output[0].lon + \" Lat: \" + output[0].lat);\r\n            // Clean previous markers\r\n            $(\"#navigate\").addClass(\"active\");\r\n            $(\"#point\").removeClass(\"disabled\");\r\n            $(\"#point\").removeClass(\"active\");\r\n            task.objectLayer.removeAllFeatures();\r\n            task.cityLayer.removeAllFeatures();\r\n            //$(\"#answerbtn\").addClass(\"disabled\");\r\n            //$(\"#answerbtn\").unbind('click',submitTask);\r\n            //console.log(\"Map cleaned!\");\r\n            // Create a LonLat object to load the place marker\r\n            var lonLat = new OpenLayers.LonLat(output[0].lon, output[0].lat)\r\n                .transform(\r\n                    new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\r\n                    task.map.getProjectionObject() // to Spherical Mercator Projection\r\n                );\r\n            // Set the marker position\r\n            point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);\r\n            task.longitude = lonLat.lon;\r\n            task.latitude = lonLat.lat;\r\n            task.objectLayer.addFeatures([new OpenLayers.Feature.Vector(point)]);\r\n            // Center the map\r\n            task.map.setCenter(lonLat, zoom);\r\n            //lonLat.transform(\r\n            //        map.getProjectionObject(), // from Spherical Mercator Projection\r\n            //        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n            //);\r\n            // Reset the lon & lat span objects\r\n            $(\"#lon\").text(\"-\");\r\n            $(\"#lat\").text(\"-\");\r\n\r\n            if (zoom !=4 ) {\r\n                $(\"#searchingTip\").show();\r\n            }\r\n\r\n            // Only show the messages when looking for user input\r\n            if ($('#toSearch').val()) {\r\n                $(\"#searching\").hide().fadeOut();\r\n                $(\"#searchingDone\").show().fadeIn().delay(2000).fadeOut();\r\n            }\r\n        }\r\n        else {\r\n            // Location not found, sorry\r\n            // Warn the user and try with another place\r\n            $(\"#searching\").hide().fadeOut();\r\n            $(\"#searchingError\").show();\r\n        }\r\n    });\r\n}\r\n\r\n\r\n\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        div_map.css(\"height\", \"390px\");\r\n        div_map.css(\"width\", \"600px\");\r\n        div_map.css(\"background\", \"#000\");\r\n\r\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\r\n\r\n        var extent = new OpenLayers.Bounds();\r\n        extent.extend(new OpenLayers.LonLat(1.758939,58.672231).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n    new OpenLayers.Projection('EPSG:900913')));\r\n        extent.extend(new OpenLayers.LonLat(-6.99745,49.96112).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n    new OpenLayers.Projection('EPSG:900913')));\r\n\r\n\r\n        $(\"#imgContainer\").append(div_map);\r\n        div_map.attr(\"id\", \"img_\" + task.id);\r\n\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 1024, 720]\r\n        });\r\n\r\n        task.map_img = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: copyright\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [1024, 720],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'img_' + task.id,\r\n          view: new ol.View({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 1.0\r\n          })\r\n        });\r\n        div_map.css(\"display\", \"none\");\r\n\r\n\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        img.attr(\"id\", \"img_task_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n        });\r\n        img.attr('src', task.info.url_b);\r\n        img.attr('width', '600px');\r\n        img.attr('height', '390px');\r\n        img.addClass('img-polaroid');\r\n        img.css(\"cursor\", \"zoom-in\");\r\n        task.info.image = img;\r\n\r\n        // MAP\r\n        var div_map = $(\"<div/>\", {'id': \"map_\" + task.id, 'class': 'map_canvas col-md-12'});\r\n        div_map.css(\"width\", \"360px\");\r\n        div_map.css(\"height\", \"500px\");\r\n        div_map.css(\"display\", \"none\");\r\n\r\n        // We need to append the div element asap otherwise OpenLayers will fail\r\n        $(\"#map\").append(div_map);\r\n\r\n        var map = new OpenLayers.Map('map_' + task.id, {\r\n            controls: [\r\n                new OpenLayers.Control.Navigation(),\r\n                new OpenLayers.Control.PanZoom(),\r\n                new OpenLayers.Control.LayerSwitcher(),\r\n                new OpenLayers.Control.MousePosition({displayProjection: new OpenLayers.Projection(\"EPSG:4326\")}),\r\n               // new OpenLayers.Control.ScaleLine(),\r\n                new OpenLayers.Control.Attribution()\r\n                ]\r\n        });\r\n\r\n        // Layers\r\n        // Open Street Map (default layer)\r\n        map.addLayer(new OpenLayers.Layer.OSM(\"Open Street Map\"));\r\n\r\n        // Google Maps Satellite layer\r\n        map.addLayer(new OpenLayers.Layer.Google(\r\n            \"Google Satellite\",\r\n            {type: google.maps.MapTypeId.SATELLITE}\r\n        ));\r\n\r\n        // Google Maps Physical layer\r\n        map.addLayer(new OpenLayers.Layer.Google(\r\n            \"Google Physical\",\r\n            {type: google.maps.MapTypeId.TERRAIN}\r\n        ));\r\n\r\n        // Icon for the City Marker\r\n        var styleMapCity = new OpenLayers.StyleMap({\r\n            pointRadius: 15,\r\n            externalGraphic: 'http://img225.imageshack.us/img225/5237/youarehere2.png'\r\n        });\r\n\r\n        // Icon for the Urban Park Marker\r\n        var styleMapObject = new OpenLayers.StyleMap({\r\n            pointRadius: 15,\r\n            externalGraphic: 'http://img225.imageshack.us/img225/5237/youarehere2.png'\r\n        });\r\n\r\n        // Layer for placing the city marker\r\n        var cityLayer = new OpenLayers.Layer.Vector(\"City marker\", {\r\n            styleMap: styleMapCity,\r\n        });\r\n        map.addLayer(cityLayer);\r\n        task.cityLayer = cityLayer;\r\n\r\n        // Layer for placing the urban park marker\r\n        var objectLayer = new OpenLayers.Layer.Vector(\"Urban park marker\", {\r\n            styleMap: styleMapObject,\r\n        });\r\n        map.addLayer(objectLayer);\r\n        task.objectLayer = objectLayer;\r\n\r\n        // Function to allow only the addition of one urban park per city\r\n        // The function gets the feature (point) and gets its location, transforms it to the right projection\r\n        // loads the lon and at into the HTML skeleton and disables the toolbar, so no more points can be added\r\n        disablePoint = function(feature) {\r\n            if ($(\"#answerbtn\").hasClass(\"disabled\")) {\r\n                $(\"#answerbtn\").removeClass('disabled');\r\n            }\r\n\r\n            $(\"#lat\").text(feature.geometry.y);\r\n            var tmp = feature.geometry.clone();\r\n            tmp.transform(\r\n                    task.map.getProjectionObject(), // from Spherical Mercator Projection\r\n                    new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n            );\r\n            $(\"#lon\").text(tmp.x);\r\n            $(\"#lat\").text(tmp.y);\r\n            task.lon = tmp.x;\r\n            task.lat = tmp.y;\r\n            task.drawControls['point'].deactivate();\r\n        }\r\n\r\n        // Default location to load the map\r\n        var lonLat = new OpenLayers.LonLat(-0.1279688 ,51.5077286 )\r\n            .transform(\r\n                new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\r\n                new OpenLayers.Projection(\"EPSG:900913\") // to Spherical Mercator Projection\r\n            );\r\n\r\n        // Enable drag & drop in the urban park Layer\r\n        var drag = new OpenLayers.Control.DragFeature(objectLayer, {\r\n            onComplete: function() {\r\n                var urbanParkPoint = task.objectLayer.features[0].geometry\r\n                var tmp = urbanParkPoint.clone();\r\n                tmp.transform(\r\n                        task.map.getProjectionObject(), // from Spherical Mercator Projection\r\n                        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n                );\r\n                // When the marker has been dropped, update the lon & lat of the urban park\r\n            }\r\n\r\n        });\r\n        // Add the drag & drop control into the map\r\n        map.addControl(drag);\r\n        // Activate drag & drop\r\n        drag.activate();\r\n\r\n        var drawControls = {\r\n            point:      new OpenLayers.Control.DrawFeature(objectLayer, OpenLayers.Handler.Point,\r\n                        { 'featureAdded': disablePoint})\r\n        }\r\n\r\n        // Add them to the map\r\n        for (var key in drawControls) {\r\n            map.addControl(drawControls[key]);\r\n        }\r\n        task.drawControls = drawControls;\r\n\r\n        task.map = map;\r\n        task.map.setOptions({restrictedExtent: extent});\r\n        task.lon = 0;\r\n        task.lat = 0;\r\n\r\n        search(task, \"united kingdom\");\r\n        } // End if task empty\r\n    else {\r\n        deferred.resolve(task);\r\n        }\r\n\r\n});\r\n\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(':input','#transcription')\r\n           .not(':button, :submit, :reset, :hidden, :radio')\r\n           .val('')\r\n           .removeAttr('checked')\r\n           .removeAttr('selected');\r\n        //$('#imgContainer').html('').append(task.info.image);\r\n        //$(\"#photo-link\").attr(\"href\", task.info.link);\r\n        $(\"#searchingTip\").hide();\r\n        $(\"#question\").html(task.info.question);\r\n        $('#task-id').html(task.id);\r\n        \r\n\t$(\"a#raw\").attr(\"href\", task.info.url_b);\r\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n\t$(\"a#down\").attr(\"download\", task.id);\r\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\r\n        \r\n        $(\".fancybox\").fancybox();\r\n        $('#imgLink').tooltip();\r\n        $(\"[rel=tooltip]\").tooltip();\r\n        //$('#img_task_' + task.id).wheelzoom();\r\n        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n        $(\"#map_\" + task.id).show();\r\n        $(\"#img_\" + task.id).show();\r\n\r\n        // Clean\r\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\r\n        for (i = 1700; i < 2000; i++)\r\n        {\r\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\r\n        for (i = 1; i <= 12; i++)\r\n        {\r\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\r\n        for (i = 1; i <= 31; i++)\r\n        {\r\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        //var $input = $(\".pickadate\").pickadate({\r\n        //                 format: 'yyyy-mm-dd',\r\n        //                 selectYears: true,\r\n        //                 selectMonths: true,\r\n        //                 //min: new Date(1800,1,1),\r\n        //                 //max: new Date(2000,1,1),\r\n        //                 selectYears: 200,\r\n        //                 //formatSubmit: 'yyyy/mm/dd',\r\n        //                 });\r\n        // Use the picker object directly.\r\n        //var picker = $input.pickadate('picker')\r\n        //picker.set('select', [1900,1,1]);\r\n        //picker.clear();\r\n\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            evt.preventDefault();\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined') {\r\n                console.log(answer);\r\n                if (answer == 'search') {\r\n                    $(\"#searching\").show();\r\n                    search(task, $(\"#toSearch\").val(), 15);\r\n                }\r\n                else {\r\n                    task.answer = $(\"#transcription\").serializeJSON();\r\n                    console.log(task.answer);\r\n                    // Remove unwanted names\r\n                    for (var key in task.answer) {\r\n                        if ((key == 'City marker') || (key == 'Urban park marker') || (key.indexOf('OpenLayers_') == 0)) {\r\n                            delete task.answer[key];\r\n                        }\r\n                    }\r\n                    task.answer.optionsAccuracy = $('input[name=optionsAccuracy]:checked', '#transcription').val();\r\n                    console.log(task.answer.optionsAccuracy);\r\n                    // Convert the feature location into the GeoJSON format\r\n                    var geojson = new OpenLayers.Format.GeoJSON({\r\n                        'internalProjection': task.map.baseLayer.projection,\r\n                        'externalProjection': new OpenLayers.Projection(\"EPSG:4326\")\r\n                        });\r\n\r\n                    task.answer.geojson = JSON.parse(geojson.write(task.objectLayer.features[0]));\r\n\r\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ').toLowerCase();\r\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ').toLowerCase();\r\n                    console.log(task.answer);\r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"#map_\" + task.id).hide();\r\n                        $(\"#img_\" + task.id).hide();\r\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\r\n                        deferred.resolve();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                }\r\n            }\r\n            else {\r\n                console.log(answer);\r\n                console.log(typeof(answer));\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n});\r\n\r\nif(Modernizr.borderradius) {\r\n    pybossa.run('drawA9');\r\n}\r\nelse {\r\n    $(\".skeleton\").hide();\r\n    $(\"#oldbrowser\").show();\r\n}\r\n$(document).ready(function() {\r\n    var s = $(\"#imgContainer\");\r\n    \r\n\tif ( $(window).width() < 768) {\r\n\ts.removeClass(\"affix-bottom\");\r\n\ts.removeClass(\"affix\");\r\n\ts.removeClass(\"affix-top\");\r\n    \t};\r\n});\r\n\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/19'/>"}, {"id": 22, "created": "2014-05-30T13:34:53.880432", "updated": "2015-02-25T08:42:36.385299", "name": "British Museum Bronze Age Index: The Arreton Hoard", "short_name": "arretonHoard", "description": "British Museum Bronze Age Card Index transcription", "long_description": "This application will help the [British\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\nNeil Wilkin, to make available part of a huge card catalogue of British\nprehistoric metal artefacts discovered in the 19th and 20th century. This\ninformation has long been known to be an extremely important untapped\nresource. Metal finds are not only crucial forms of evidence for dating\nBritain's prehistoric past, but also tell us a great deal about prehistoric\nsociety and economy. Digitising the thousands of objects in this catalog will\nmake these records publicly available via their incorporation into the\n[Portable Antiquities Scheme website](http://finds.org.uk). The result will be\nthe largest national database of prehistoric metal finds anywhere in the world\nand a near comprehensive view of what we currently know about such finds in\nthe UK.\n\nThe cards have been scanned and uploaded to\n[Flickr](https://www.flickr.com/photos/micropasts/sets/72157641305131374/),\nand it is from there that the current application will retrieve and manipulate\nthe scans. These cards contain some fairly standardised kinds of information:\nabout where the artefact was discovered, its dimensions, a longer description\nof what it looks like, etc.\n\nWhat the research team would like people to do, is to transcribe the details\nfrom each section on the card into some pre-determined fields, and also to\nattempt to geo-reference the object via its place of discovery.\n\n## Thank you!\n\nLucy Ellis, Cheryl Ellsworth, Jeff Okazaki, Joellen mcGann, Holden, Kaitlin\nWells and other anonymous contributors.\n\n### This project is on behalf of\n\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\nBritish Museum logo](/static/img/bmBlackWhite.png)\n\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"sched": "depth_first", "tutorial": "<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n            \n            <div class=\"modal-header\">\n                <h3 class=\"lead\">Arreton Hoard transcription tutorial</h3>\n            </div>\n            \n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n               \n                <p>\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the \n                    index card and the line drawing of the object from the reverse side.  \n                    An example of the front side of a card is shown below.\n                </p>\n               \n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n               \n                <p>\n                    Each index card contains similar information and we are asking you to enter this information \n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also \n                    find further hints inside the data entry boxes about where on the card the relevant information might be found \n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box \n                    will hint that this information can be found \"Top of card\").\n                </p>\n            \n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n            \n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button. \n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code \n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter. \n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\", \n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where \n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go \n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the \n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are \n                        both entries that should be entered in the the Collection box, so you could simply enter \n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box \n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place \n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified \n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our \n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n            \n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n            \t\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and \n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best \n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that \n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the \n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n            \n            </div>\n            \n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or \n                propose new research ideas based what you have transcribed, please have a look at \n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n            \t\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../arretonHoard/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_22_thumbnail_1424853756.png", "task_presenter": "<link rel=\"stylesheet\" href=\"http://ol3js.org/en/master/css/ol.css\" type=\"text/css\">\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\n\n<script src=\"http://ol3js.org/en/master/build/ol.js\" type=\"text/javascript\"></script>\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\n<script src=\"http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false\"></script>\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\n<style type=\"text/css\">\n    label {\n        font-size:16px;\n    }\n    #map_canvas label {\n        width: auto;\n        display: inline;\n    }\n    #map_canvas img {\n        max-width: none;\n    }\n    .affix {\n        width: inherit;\n        height: 0px;\n    }\n    .affix-bottom {\n        top: auto !important;\n        position: fixed;\n        bottom: 240px;\n    }\n    #imgContainer {\n        height: 390px;\n        width: 600px;\n    }\n</style>\n\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n        <h4 class=\"modal-title\">Hey there! Do you want to help us?</h4>\n      </div>\n      <div class=\"modal-body\">\n          Thanks for contributing one task for the project. We are interested in knowing how you found out about us. <strong>Could you please answer two questions in a short survey?</strong>\n\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\" width=\"100%\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\n      </div>\n      <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\n      </div>\n    </div><!-- /.modal-content -->\n  </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->\n\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\n    <!-- Success and Error Messages for the user -->\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\n        <strong>Sorry, but your browser does not support the current application. If you want to contribute, please, upgrade to a modern web browser like the open source and free alternative <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a></strong>.\n    </div>\n</div> <!-- End of Row -->\n<div style=\"margin-top:15px;\">\n            <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\n                <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\n            </div>\n            <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\n                <img src=\"/static/img/loading.gif\">Loading next task...\n            </div>\n            <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\n                <strong>The task has been completed!</strong> Thanks a lot!\n            </div>\n            <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\n                <strong>Congratulations!</strong> You have participated in all available tasks!\n                <br/>\n                <div class=\"alert-actions\">\n                    <a class=\"btn-default btn\" href=\"/\">Go back</a>\n                    <a class=\"btn-default btn\" href=\"/app\">or, Check other applications</a>\n                </div>\n            </div>\n            <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\n                <a class=\"close\">\u00d7</a>\n                <strong>Error!</strong> Something went wrong, please contact the site administrators\n            </div>\n        </div> <!-- End Success and Error Messages for the user -->\n<!--\n    Task DOM for loading the Flickr Images\n    It uses the class=\"skeleton\" to identify the elements that belong to the\n    task.\n-->\n<div class=\"row skeleton\"> <!-- Start Skeleton Row-->\n\n        <h1 id=\"start\">Please transcribe this index card</h1> <!-- The question will be loaded here -->\n        <span class=\"label label-info\">Note</span> You can use your mouse wheel trackpad to zoom in/out the picture, as well as drag & drop to navigate in the document.\n\n</div>\n\n<div class=\"row skeleton\">\n\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\n\n            <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\n\n            <form id=\"transcription\" role=\"form\">\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"objectType\">Object Type</label>\n                        <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\n                </div>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\n                    <div class=\"controls\">\n                        <div class=\"col-xs-4\">\n                        \t<select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\n                        </div>\n                        <div class=\"col-xs-4\">\n                        \t<select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\n                        </div>\n                        <div class=\"col-xs-4\">\n                        \t<select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\n                        </div>\n                   </div>\n                </div>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\n                        <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\n                </div>\n\n                <hr />\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"site\">Site</label>\n                        <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\n                        <div class=\"input-append\">\n                        <label class=\"control-label\" for=\"site\">Georeference the site</label>\n                            <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site in a map\"></input>\n                            <button id=\"searchBtn\" class=\"btn btn-answer\" value=\"search\" type=\"button\"><i class=\"icon-search\"></i> Search</button>\n                        </div>\n                        <div style=\"display:none;margin-top:15px;\" id=\"searching\" class=\"alert alert-info\"><img src=\"/static/img/loading.gif\"> Searching...</div>\n                    <div style=\"display:none;margin-top:15px;\" id=\"searchingError\" class=\"alert alert-warning\"><strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> in the map.</div>\n                    <div id=\"searchingTip\" class=\"alert alert-info\" style=\"display:none; margin-top:10px;\">Drag & drop the <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> to improve the location</div>\n                    <div id=\"map\" style=\"margin-top:15px;\"></div>\n\n                     <div style=\"font-size:12px;\">Marker Icon by <a href=\"http://mapicons.nicolasmollet.com/\">Nicolas Mollet</a></div>\n                </div>\n\n                <p style=\"font-size:16px\">I believe the location I have given on the map is accurate to within:</p>\n                <div class=\"form-group\">\n                    <label class=\"radio\">\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy100\" value=\"100\" checked>\n                    100 metres\n                    </label>\n                    <label class=\"radio\">\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy1000\" value=\"1000\">\n                    1 kilometre\n                    </label>\n                    <label class=\"radio\">\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy10000\" value=\"10000\">\n                    10 kilometres\n                    </label>\n                </div>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\n                        <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\"></textarea>\n                </div>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"collection\">Collection</label>\n                        <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\n                </div>\n\n                <hr />\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"publications\">Publications</label>\n                        <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\n                </div>\n\n                <hr />\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"length\">Length</label>\n                        <input class=\"form-control\" type=\"number\" min=\"0\" name=\"length\" placeholder=\"In millimetres\">\n                </div>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"width\">Width</label>\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"width\" placeholder=\"In millimetres\">\n                </div>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"edge\">Edge</label>\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"edge\" placeholder=\"In millimetres\">\n                </div>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"thickness\">Thickness</label>\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"thickness\" placeholder=\"In millimetres\">\n                </div>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"weight\">Weight</label>\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"weight\" placeholder=\"In grammes\">\n                </div>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"composition\">Composition</label>\n                        <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\n                </div>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"description\">Description</label>\n                        <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\"></textarea>\n                </div>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"surface\">Surface</label>\n                        <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\n                </div>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"patina\">Patina</label>\n                        <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\n                </div>\n\n                <hr />\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"associations\">Associations</label>\n                        <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\n                </div>\n\n                <hr>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"remarks\">Remarks</label>\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\n                </div>\n\n                <hr>\n\n                <div class=\"form-group\">\n                    <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if any.\"></textarea>\n                </div>\n\n            </form>\n\n            <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\n\n    </div><!-- End of Question and Submission DIV (column) -->\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\"><!-- Start of Photo DIV (column) -->\n        \n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"550\">\n                <div class=\"btn-group\">\n\t\t<a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\n\t        <a id=\"newTask\" href=\"../newtask\" class=\"btn btn-sm btn-info\"><i class=\"glyphicon glyphicon-picture\"></i> Different card?</a>\n        \t<a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\n        \t<a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\n\t</div>\n        <div id=\"imgContainer\" >\n        \t\n           <!-- <img src=\"http://i.imgur.com/GeHxzb7.png\" style=\"max-width=100%\">-->\n        </div>\n        <div id=\"taskImg\"></div>\n        </div>\n    </div><!-- End of Photo DIV (columnt) -->\n\n</div><!-- End of Skeleton Row -->\n<!-- Modal start -->\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\t<!-- Modal header --> \n\t\t<div class=\"modal-header\">\n                <h3 class=\"lead\">The Arreton Hoard transcription application</h3>\n            </div>\n\t<!-- stepped modal body -->\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the\n                    index card and the line drawing of the object from the reverse side.\n                    An example of the front side of a card is shown below.\n                </p>\n\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n\n                <p>\n                    Each index card contains similar information and we are asking you to enter this information\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\n                    will hint that this information can be found \"Top of card\").\n                </p>\n\n            </div>\n\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\n\t\t     <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\n                    Here are some further issues to watch out for:\n                    </p>\n\n\t\t<ol>\n\t\t\n                    <li>\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\n                    This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\n                    </li>\n                    \n                    <li>\n                    When entering information in the fields, please respect the case of words as seen on the card.\n                    </li>\n                    \n                    <li>\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\n                    you are fairly confident but not certain.\n                    </li>\n\n                    <li>\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\n                    into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\n                    </li>\n\n                    <li>\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\n                    </li>\n\n                    <li>\n                    If there is additional information on the card that you don't feel fits in one of our pre-specified\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\n                    </li>\n                    \n                </ol>\n\n\n\t\t</div>\n\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\n\t\t\t<p>\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\n\t            \tparticular card. As we continue drawer-by-drawer through the catalogue, we will look to modify the\n\t            \tinput fields in response to your suggestions.\n\t            \t</p>\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n\t\t</div>\n\t\t\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\n\t\t<p>\n                To find out how the project is progressing, suggest changes to this application or\n                propose new research ideas based what you have transcribed, please have a look at\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n                </p>\n\t\t</div>\n\n\t<!-- End of stepped modal body -->\n\n\t<!-- Modal footer -->\n\t<div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n\t</div>\n  </div>\n</div>\n<!-- Modal end --> \n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n\n\n<script>\n// Quick fix for IE8\nModernizr.load({\n  test: window.JSON,\n  nope: '/static/js/vendor/json2.min.js'\n});\n\nfunction loadUserProgress() {\n    pybossa.userProgress('arretonHoard').done(function(data){\n            console.log(\"Total answers done for user: \" + data.done);\n\tif ((data.done == 1) && ($.cookie('survey') === undefined)){\n           $(\"#survey\").modal('show');\n           $.cookie('survey', 'shown', { path: '/'});\n        }\n        var pct = Math.round((data.done*100)/data.total);\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\n        $(\"#progress\").tooltip({'placement': 'left'});\n        $(\"#total\").text(data.total);\n        $(\"#done\").text(data.done);\n    });\n}\n\n\n// If user presses enter do the search\n// $(\"#locationRef\").bind('keypress', function(e){\n//     var code = (e.keyCode ? e.keyCode : e.which);\n//     if(code == 13) { //Enter keycode\n//         search();\n//     }\n// });\n\n// This function will load the marker of the city, and center the map on it\nfunction search(task, city, zoom) {\n    zoom = (typeof zoom === \"undefined\") ? 4 : zoom;\n    city = city.replace(/\\n/g,' ');\n    console.log(city);\n    if (city) {\n        var place = city;\n        $(\"#searchingError\").hide();\n    }\n    else {\n        $(\"#searching\").show();\n        $(\"#searchingError\").hide();\n        if ($('#toSearch').val()) {\n            var place = $(\"#toSearch\").val();\n        }\n        else {\n            $(\"#searching\").hide();\n            alert(\"Please, add a location in the Site section to search in the map\");\n            return\n        }\n    }\n\n    // Geocode the place using Nominatim OSM service\n    $.getJSON('http://nominatim.openstreetmap.org/search/' + place + '?format=json', function(output) {\n        if (output.length >= 1) {\n            //console.log(\"Lon: \"+ output[0].lon + \" Lat: \" + output[0].lat);\n            // Clean previous markers\n            $(\"#navigate\").addClass(\"active\");\n            $(\"#point\").removeClass(\"disabled\");\n            $(\"#point\").removeClass(\"active\");\n            task.objectLayer.removeAllFeatures();\n            task.cityLayer.removeAllFeatures();\n            //$(\"#answerbtn\").addClass(\"disabled\");\n            //$(\"#answerbtn\").unbind('click',submitTask);\n            //console.log(\"Map cleaned!\");\n            // Create a LonLat object to load the place marker\n            var lonLat = new OpenLayers.LonLat(output[0].lon, output[0].lat)\n                .transform(\n                    new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\n                    task.map.getProjectionObject() // to Spherical Mercator Projection\n                );\n            // Set the marker position\n            point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);\n            task.longitude = lonLat.lon;\n            task.latitude = lonLat.lat;\n            task.objectLayer.addFeatures([new OpenLayers.Feature.Vector(point)]);\n            // Center the map\n            task.map.setCenter(lonLat, zoom);\n            //lonLat.transform(\n            //        map.getProjectionObject(), // from Spherical Mercator Projection\n            //        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\n            //);\n            // Reset the lon & lat span objects\n            $(\"#lon\").text(\"-\");\n            $(\"#lat\").text(\"-\");\n\n            if (zoom !=4 ) {\n                $(\"#searchingTip\").show();\n            }\n\n            // Only show the messages when looking for user input\n            if ($('#toSearch').val()) {\n                $(\"#searching\").hide().fadeOut();\n                $(\"#searchingDone\").show().fadeIn().delay(2000).fadeOut();\n            }\n        }\n        else {\n            // Location not found, sorry\n            // Warn the user and try with another place\n            $(\"#searching\").hide().fadeOut();\n            $(\"#searchingError\").show();\n        }\n    });\n}\n\n\n\npybossa.taskLoaded(function(task, deferred) {\n    if ( !$.isEmptyObject(task) ) {\n        var img = $('<img />');\n        var div_map = $('<div/>');\n        div_map.css(\"height\", \"390px\");\n        div_map.css(\"width\", \"600px\");\n        div_map.css(\"background\", \"#000\");\n\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\n\n        var extent = new OpenLayers.Bounds();\n        extent.extend(new OpenLayers.LonLat(1.758939,58.672231).transform(new OpenLayers.Projection(\"EPSG:4326\"),\n    new OpenLayers.Projection('EPSG:900913')));\n        extent.extend(new OpenLayers.LonLat(-6.99745,49.96112).transform(new OpenLayers.Projection(\"EPSG:4326\"),\n    new OpenLayers.Projection('EPSG:900913')));\n\n\n        $(\"#imgContainer\").append(div_map);\n        div_map.attr(\"id\", \"img_\" + task.id);\n\n        task.pixelProjection = new ol.proj.Projection({\n          code: 'pixel',\n          units: 'pixels',\n          extent: [0, 0, 1024, 720]\n        });\n\n        task.map_img = new ol.Map({\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\n          layers: [\n            new ol.layer.Image({\n              source: new ol.source.ImageStatic({\n                attributions: [\n                  new ol.Attribution({\n                    html: copyright\n                  })\n                ],\n                url: task.info.url_b,\n                imageSize: [1024, 720],\n                projection: task.pixelProjection,\n                imageExtent: task.pixelProjection.getExtent()\n              })\n            })\n          ],\n          renderer: 'canvas',\n          target: 'img_' + task.id,\n          view: new ol.View2D({\n            projection: task.pixelProjection,\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\n            zoom: 1.0\n          })\n        });\n        div_map.css(\"display\", \"none\");\n\n\n        // load image from flickr\n        var img = $('<img />');\n        img.attr(\"id\", \"img_task_\" + task.id);\n        img.load(function() {\n            // continue as soon as the image is loaded\n            deferred.resolve(task);\n        });\n        img.attr('src', task.info.url_b);\n        img.attr('width', '600px');\n        img.attr('height', '390px');\n        img.addClass('img-polaroid');\n        img.css(\"cursor\", \"zoom-in\");\n        task.info.image = img;\n\n        // MAP\n        var div_map = $(\"<div/>\", {'id': \"map_\" + task.id, 'class': 'map_canvas col-md-12'});\n        div_map.css(\"width\", \"360px\");\n        div_map.css(\"height\", \"500px\");\n        div_map.css(\"display\", \"none\");\n\n        // We need to append the div element asap otherwise OpenLayers will fail\n        $(\"#map\").append(div_map);\n\n        var map = new OpenLayers.Map('map_' + task.id, {\n            controls: [\n                new OpenLayers.Control.Navigation(),\n                new OpenLayers.Control.PanZoom(),\n                new OpenLayers.Control.LayerSwitcher(),\n                new OpenLayers.Control.MousePosition({displayProjection: new OpenLayers.Projection(\"EPSG:4326\")}),\n               // new OpenLayers.Control.ScaleLine(),\n                new OpenLayers.Control.Attribution()\n                ]\n        });\n\n        // Layers\n        // Open Street Map (default layer)\n        map.addLayer(new OpenLayers.Layer.OSM(\"Open Street Map\"));\n\n        // Google Maps Satellite layer\n        map.addLayer(new OpenLayers.Layer.Google(\n            \"Google Satellite\",\n            {type: google.maps.MapTypeId.SATELLITE}\n        ));\n\n        // Google Maps Physical layer\n        map.addLayer(new OpenLayers.Layer.Google(\n            \"Google Physical\",\n            {type: google.maps.MapTypeId.TERRAIN}\n        ));\n\n        // Icon for the City Marker\n        var styleMapCity = new OpenLayers.StyleMap({\n            pointRadius: 15,\n            externalGraphic: 'http://img225.imageshack.us/img225/5237/youarehere2.png'\n        });\n\n        // Icon for the Urban Park Marker\n        var styleMapObject = new OpenLayers.StyleMap({\n            pointRadius: 15,\n            externalGraphic: 'http://img225.imageshack.us/img225/5237/youarehere2.png'\n        });\n\n        // Layer for placing the city marker\n        var cityLayer = new OpenLayers.Layer.Vector(\"City marker\", {\n            styleMap: styleMapCity,\n        });\n        map.addLayer(cityLayer);\n        task.cityLayer = cityLayer;\n\n        // Layer for placing the urban park marker\n        var objectLayer = new OpenLayers.Layer.Vector(\"Urban park marker\", {\n            styleMap: styleMapObject,\n        });\n        map.addLayer(objectLayer);\n        task.objectLayer = objectLayer;\n\n        // Function to allow only the addition of one urban park per city\n        // The function gets the feature (point) and gets its location, transforms it to the right projection\n        // loads the lon and at into the HTML skeleton and disables the toolbar, so no more points can be added\n        disablePoint = function(feature) {\n            if ($(\"#answerbtn\").hasClass(\"disabled\")) {\n                $(\"#answerbtn\").removeClass('disabled');\n            }\n\n            $(\"#lat\").text(feature.geometry.y);\n            var tmp = feature.geometry.clone();\n            tmp.transform(\n                    task.map.getProjectionObject(), // from Spherical Mercator Projection\n                    new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\n            );\n            $(\"#lon\").text(tmp.x);\n            $(\"#lat\").text(tmp.y);\n            task.lon = tmp.x;\n            task.lat = tmp.y;\n            task.drawControls['point'].deactivate();\n        }\n\n        // Default location to load the map\n        var lonLat = new OpenLayers.LonLat(-0.1279688 ,51.5077286 )\n            .transform(\n                new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\n                new OpenLayers.Projection(\"EPSG:900913\") // to Spherical Mercator Projection\n            );\n\n        // Enable drag & drop in the urban park Layer\n        var drag = new OpenLayers.Control.DragFeature(objectLayer, {\n            onComplete: function() {\n                var urbanParkPoint = task.objectLayer.features[0].geometry\n                var tmp = urbanParkPoint.clone();\n                tmp.transform(\n                        task.map.getProjectionObject(), // from Spherical Mercator Projection\n                        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\n                );\n                // When the marker has been dropped, update the lon & lat of the urban park\n            }\n\n        });\n        // Add the drag & drop control into the map\n        map.addControl(drag);\n        // Activate drag & drop\n        drag.activate();\n\n        var drawControls = {\n            point:      new OpenLayers.Control.DrawFeature(objectLayer, OpenLayers.Handler.Point,\n                        { 'featureAdded': disablePoint})\n        }\n\n        // Add them to the map\n        for (var key in drawControls) {\n            map.addControl(drawControls[key]);\n        }\n        task.drawControls = drawControls;\n\n        task.map = map;\n        task.map.setOptions({restrictedExtent: extent});\n        task.lon = 0;\n        task.lat = 0;\n\n        search(task, \"united kingdom\");\n        } // End if task empty\n    else {\n        deferred.resolve(task);\n        }\n\n});\n\npybossa.presentTask(function(task, deferred) {\n    if ( !$.isEmptyObject(task) ) {\n        loadUserProgress();\n        $(':input','#transcription')\n           .not(':button, :submit, :reset, :hidden, :radio')\n           .val('')\n           .removeAttr('checked')\n           .removeAttr('selected');\n        //$('#imgContainer').html('').append(task.info.image);\n        //$(\"#photo-link\").attr(\"href\", task.info.link);\n        $(\"#searchingTip\").hide();\n        $(\"#question\").html(task.info.question);\n        $('#task-id').html(task.id);\n        \n\t$(\"a#raw\").attr(\"href\", task.info.url_b);\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\n\t$(\"a#down\").attr(\"download\", task.id);\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\n        \n        $(\".fancybox\").fancybox();\n        $('#imgLink').tooltip();\n        $(\"[rel=tooltip]\").tooltip();\n        //$('#img_task_' + task.id).wheelzoom();\n        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\n        $(\"#map_\" + task.id).show();\n        $(\"#img_\" + task.id).show();\n\n        // Clean\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\n        for (i = 1700; i < 2000; i++)\n        {\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\n        }\n\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\n        for (i = 1; i <= 12; i++)\n        {\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\n        }\n\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\n        for (i = 1; i <= 31; i++)\n        {\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\n        }\n\n        //var $input = $(\".pickadate\").pickadate({\n        //                 format: 'yyyy-mm-dd',\n        //                 selectYears: true,\n        //                 selectMonths: true,\n        //                 //min: new Date(1800,1,1),\n        //                 //max: new Date(2000,1,1),\n        //                 selectYears: 200,\n        //                 //formatSubmit: 'yyyy/mm/dd',\n        //                 });\n        // Use the picker object directly.\n        //var picker = $input.pickadate('picker')\n        //picker.set('select', [1900,1,1]);\n        //picker.clear();\n\n\n        $('.btn-answer').off('click').on('click', function(evt) {\n            evt.preventDefault();\n            var answer = $(evt.target).attr(\"value\");\n            if (typeof answer != 'undefined') {\n                console.log(answer);\n                if (answer == 'search') {\n                    $(\"#searching\").show();\n                    search(task, $(\"#toSearch\").val(), 15);\n                }\n                else {\n                    task.answer = $(\"#transcription\").serializeJSON();\n                    console.log(task.answer);\n                    // Remove unwanted names\n                    for (var key in task.answer) {\n                        if ((key == 'City marker') || (key == 'Urban park marker') || (key.indexOf('OpenLayers_') == 0)) {\n                            delete task.answer[key];\n                        }\n                    }\n                    task.answer.optionsAccuracy = $('input[name=optionsAccuracy]:checked', '#transcription').val();\n                    console.log(task.answer.optionsAccuracy);\n                    // Convert the feature location into the GeoJSON format\n                    var geojson = new OpenLayers.Format.GeoJSON({\n                        'internalProjection': task.map.baseLayer.projection,\n                        'externalProjection': new OpenLayers.Projection(\"EPSG:4326\")\n                        });\n\n                    task.answer.geojson = JSON.parse(geojson.write(task.objectLayer.features[0]));\n\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ').toLowerCase();\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ').toLowerCase();\n                    console.log(task.answer);\n                    pybossa.saveTask(task.id, task.answer).done(function() {\n                        $(\"#map_\" + task.id).hide();\n                        $(\"#img_\" + task.id).hide();\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\n                        deferred.resolve();\n                    });\n                    $(\"#loading\").fadeIn(500);\n                    \n                }\n            }\n            else {\n                console.log(answer);\n                console.log(typeof(answer));\n                $(\"#error\").show();\n            }\n        });\n        $(\"#loading\").hide();\n    }\n    else {\n        $(\".skeleton\").hide();\n        $(\"#loading\").hide();\n        $(\"#finish\").fadeIn(500);\n    }\n});\n\nif(Modernizr.borderradius) {\n    pybossa.run('arretonHoard');\n}\nelse {\n    $(\".skeleton\").hide();\n    $(\"#oldbrowser\").show();\n}\n$(document).ready(function() {\n    var s = $(\"#imgContainer\");\n    \n\tif ( $(window).width() < 768) {\n\ts.removeClass(\"affix-bottom\");\n\ts.removeClass(\"affix\");\n\ts.removeClass(\"affix-top\");\n    \t};\n});\n\n</script>\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/22'/>"}, {"id": 26, "created": "2014-05-30T15:43:49.969852", "updated": "2015-02-25T08:42:28.481680", "name": "Photo Masking the Arreton Down hoard", "short_name": "photomaskingArreton", "description": "Photo masking application", "long_description": "This application enables the creation of high quality 3d models of\narchaeological artefacts via process known as photo-masking. There has been a\nrevolution in 3d modelling in recent years and it is now relatively easy to\nconstruct such models from ordinary digital photographs. Isolating the objects\ndepicted in these photographs, and masking out the background, is an important\nfirst step to achieving high quality results. The final 3d models will be made\npublicly available and are useful not only for basic documentation purposes,\nbut also for graphical displays in museums, for inclusion in gaming and\nvirtual reality environments, or for identifing different sub-styles in\notherwise similar types of artefact (that might tell us about the date of the\nartefact, where it was made, or by whom).\n\nThis particular photo-masking application is a bit of a 'pop-up shop' because\nwe only mean for it to deal with one Bronze Age British hoard that the British\nMuseum wants to model now rather than later (a hoard is an archaeological term\nfor a group of valuable objects that have been buried in the ground together,\noften seemingly with the intention of later being recovered by its owners).\nThis particular hoard was found on Arreton Down on the Isle of Wight sometime\nbefore 1735. It constitutes a major group of Early Bronze Age spearheads and\naxes (as well as at least one dagger) that was probably placed in the ground\naround 1700-1500 BC.\n\nWe would like people to draw one or more polygons around the artefact that\nthey see in each photograph in order to identify its outline and exclude the\nimage background. This allows the 3d modelling process to concentrate on the\nobject itself and ignore irrelevant background information.\n\n### **Thank you!**\n\nLucy Ellis, Hugh Fiske, Caroline Chestnutt, Alejandro Crespo, Sean Austin,\nJeff Okazaki, Mona Petre, Joseph Koivisto, Leland Sorenson, Latifa Walker,\nJoellen mcGann, Craig Horton, Quentin Mazars-Simon, Ad\u00e9la Vedralov\u00e1, Xavier\nFont Erruz, Dina Fathalla, Glenda Robinson, David Johannes Lange, Vicky Rees,\nNina Sharman, Jane Fellows, Sonsoles Garc\u00eda Gonz\u00e1lez, Denis Antoine, Foteini\nDrakou, Tim Matteson, Paul Simeonidis, Doina Bucur, Hanne Madsen, Sarah,\nRichard Easteal, Raest Wylde, Marina Piperi, Avellana Teresa Ross, Eleni\nPapaioannou, Maruta Purvina, Maragkaki Froso, Johannes, Veron, Maria\nChristakou, Wilhelmina Bunn, Bret Pearson, Danielle Haigh-Wood and other\nanonymous contributors for completing this application.\n\nIf you are interested in what a 3d completed model looks like, please have a\nlook at the example [here](http://micropasts.org/3D).\n\n### This project is on behalf of\n\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\nBritish Museum logo](/static/img/bmBlackWhite.png)\n\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"sched": "default", "tutorial": "<div id=\"modal\" class=\"modal fade\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h3>Photo-masking tutorial for 3D modelling </h3>\r\n            </div>\r\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                    This application is very simple (but unfortantely cannot as yet be done \r\n                    on mobile devices). When you participate, the platform\r\n  will load a photograph of a Bronze Age metal artefact from the Arreton Down Hoard (Isle of Wight). Once the image\r\n  has been loaded, you will be asked to click around the edge of the artefact in order to define a\r\n  polygon outline. Click once every time you wish to add a point along\r\n  the edge of the polygon and your final point will snap back onto the\r\n  one you started with. You can draw one polygon around the entire\r\n  object or instead draw a series of overlapping\r\n  polygons if you prefer. In general, we would like you to draw your polygon(s)\r\n  very slightly inside the actual edge of the artefact. This is\r\n  because we don't want background pixels near this edge to create a\r\n  fuzzy border, and we don't need to worry so much about losing a bit\r\n  of the artefact edge, as the missing few pixels are very likely to\r\n  appear in one of the other photographs (at least 40 overlapping photographs are\r\n  likely to exist for each object to support the construction of the\r\n  3d model). The only situation where we would like you to be a bit more careful \r\n  is when you are going around the border of what looks like a very thin edge (e.g) \r\n  such as the blade of a weapon). In such cases, rather than losing any of \r\n  the artefact edge, please be as precise as possible. An example of \r\n  a successful outline is shown below:\r\n                </p>\r\n                <img src=\"https://farm4.staticflickr.com/3796/13464348955_a06ecab512.jpg\" width=\"500\" height=\"308\" class=\"img-polaroid\"\r\n                     alt=\"An example of an artefact photograph whose outline has been defined \" />\r\n            </div>\r\n\r\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                In a few cases, there might be one or more holes\r\n                in the object shown in the photograph (e.g. inside the loop\r\n                of a handle), and you can\r\n                click on the \"Holes\" button to be given an opportunity\r\n                to draw these in, as a second step, after you have created the initial outline\r\n                around the object. During the task, you can always return to this tutorial via the \"Help\" button. \r\n                </p>\r\n            \t<p>\r\n                To find out how the project is progressing, to suggest\r\n                changes to this application or to propose new research\r\n\t      ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n            </div>\r\n\r\n            <div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <a id=\"startContrib\" href=\"../photomaskingArreton/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n      </div>\r\n</div>\r\n</div>\r\n\r\n\r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 1 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n", "container": "user_12", "thumbnail": "app_26_thumbnail_1424853748.png", "task_presenter": "<link rel=\"stylesheet\" href=\"/static/css/ol.css\" type=\"text/css\">\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<style>\r\n#map {\r\n    background-color: grey;\r\n}\r\n.ol-zoom a,\r\n.ol-zoom-extent a,\r\n.ol-full-screen a{\r\n  display: block;\r\n  margin: 1px;\r\n  padding: 0;\r\n  color: white;\r\n  font-size: 1.14em;\r\n  font-weight: bold;\r\n  text-decoration: none;\r\n  text-align: center;\r\n  height: 1.375em;\r\n  width: 1.375em;\r\n  line-height: 1.4em;\r\n  background-color: #7b98bc;\r\n  background-color: rgba(0,60,136,0.5);\r\n  border: none;\r\n}\r\n.ol-zoom a::-moz-focus-inner,\r\n.ol-zoom-extent a::-moz-focus-inner,\r\n.ol-full-screen a::-moz-focus-inner {\r\n  border: none;\r\n  padding: 0;\r\n}\r\n.ol-zoom-extent a {\r\n  line-height: 1.4em;\r\n}\r\n.ol-touch .ol-zoom a,\r\n.ol-touch .ol-full-screen a,\r\n.ol-touch .ol-zoom-extent a{\r\n  font-size: 1.5em;\r\n}\r\n.ol-touch .ol-zoom-extent {\r\n  top: 5.5em;\r\n}\r\n.ol-zoom a:hover,\r\n.ol-zoom a:focus,\r\n.ol-zoom-extent a:hover,\r\n.ol-zoom-extent a:focus,\r\n.ol-full-screen a:hover,\r\n.ol-full-screen a:focus {\r\n  text-decoration: none;\r\n  background-color: #4c6079;\r\n  background-color: rgba(0,60,136,0.7);\r\n}\r\n.ol-zoom-extent a:after {\r\n    content: \"E\";\r\n}\r\n.ol-zoom-in {\r\n  border-radius: 2px 2px 0 0;\r\n}\r\n.ol-zoom-out {\r\n  border-radius: 0 0 2px 2px;\r\n}\r\na.ol-full-screen-false:after {\r\n  content: \"\\2194\";\r\n}\r\na.ol-full-screen-true:after {\r\n  content: \"\\00d7\";\r\n}\r\n\r\n.ol-zoom-extent a,\r\n.ol-attribution,\r\n.ol-full-screen a,\r\n.ol-scale-line-inner,\r\n.ol-zoom a,\r\n.ol-has-tooltip [role=tooltip] {\r\n  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;\r\n}\r\n</style>\r\n<script src=\"/static/js/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/ol3photomask.js\" type=\"text/javascript\"></script>\r\n<style>\r\n    .map {\r\n        height: 500px;\r\n        width: 100%;\r\n    }\r\n\r\n</style>\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n<div class=\"row skeleton\"> \r\n    <div class=\"span12\">\r\n    \r\n        <div class=\"btn-group pull-right\">\r\n        \t\t<button class=\"btn btn-info btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</button>\r\n        \t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n        \t\t<!-- a class=\"btn btn-info btn-sm\" id=\"newTask\" href=\"../newtask\"><i class=\"glyphicon glyphicon-picture\"></i> Different photomask?</a -->\r\n        </div>\r\n        \r\n        <h1 id=\"step1\">Draw the outline and/or holes of the main object shown in the picture</h1>\r\n        <div class=\"btn-group\">\r\n            <button id=\"status\" type=\"button\" class=\"btn btn-default btn-type disabled\" name=\"loading\" value=\"loading\">Loading photo</button>\r\n            <button id=\"outline\" type=\"button\" class=\"btn btn-default btn-type active\" name=\"outline\" value=\"outline\">Outline</button>\r\n            <button id=\"holes\" type=\"button\" class=\"btn btn-default btn-type\" name=\"holes\" value=\"holes\">Holes</button>\r\n        </div>\r\n        <div class=\"btn-group\">\r\n            <button id=\"draw\" type=\"button\" class=\"btn btn-default btn-draw active\" name=\"draw\" value=\"draw\">Draw</button>\r\n            <button id=\"edit\" type=\"button\" class=\"btn btn-default btn-draw\" name=\"edit\" value=\"edit\">Edit</button>\r\n            <button id=\"delete\" type=\"button\" class=\"btn btn-default btn-draw\" name=\"delete\" value=\"delete\">Remove all polygons</button>\r\n        </div>\r\n        <div class=\"btn-group\">\r\n\r\n            <button id=\"btn-save\" class=\"btn btn-success btn-answer\" value='save'><i class=\"icon icon-white icon-save\"></i> Save the drawings</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"row\">\r\n    <!-- Success and Error Messages for the user --> \r\n    <div class=\"col-md-6 col-md-offset-2\" style=\"height:50px\">\r\n        <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n            <a class=\"close\">\u00d7</a>\r\n            <strong>Well done!</strong> Your answer has been saved\r\n        </div>\r\n        <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n            <a class=\"close\">\u00d7</a>\r\n            Loading next task...\r\n        </div>\r\n        <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n            <strong>The task has been completed!</strong> Thanks a lot!\r\n        </div>\r\n        <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n            <strong>Congratulations!</strong> You have participated in all available tasks!\r\n            <br/>\r\n            <div class=\"alert-actions\">\r\n                <a class=\"btn small\" href=\"/\">Go back</a>\r\n                <a class=\"btn small\" href=\"/app\">or, Check other applications</a>\r\n            </div>\r\n        </div>\r\n        <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n            <a class=\"close\">\u00d7</a>\r\n            <strong>Error!</strong> Something went wrong, please contact the site administrators\r\n        </div>\r\n    </div> <!-- End Success and Error Messages for the user -->\r\n</div> <!-- End of Row -->\r\n\r\n<div class=\"row skeleton\"> <!-- Start Skeleton Row-->\r\n    <div class=\"span8\"><!-- Start of Photo DIV (column) -->\r\n        <div id=\"map\" class=\"img-polaroid\"></div>\r\n    </div><!-- End of Photo DIV (columnt) -->\r\n    <div class=\"span4\"><!-- Start of Question and Submission DIV (column) -->\r\n        <!-- Feedback items for the user -->\r\n        <p>You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span></p>\r\n        <p>You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\r\n        <div id=\"answer\"> <!-- Start DIV for the submission buttons -->\r\n        </div><!-- End of DIV for the submission buttons -->\r\n       \r\n\r\n    </div><!-- End of Question and Submission DIV (column) -->\r\n\r\n</div><!-- End of Skeleton Row -->\r\n\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Hey there! Do you want to help us?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        Thanks for contributing one task for the project. We are interested in knowing how you found out about us. <strong>Could you please answer two questions in a short survey?</strong>\r\n       \r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\" width=\"100%\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Kgw8cvcufm-77PC2t_PL_b4y1_Tb9wJseimmb3cQIn4/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Hey there! Do you want to help us?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        Thanks for contributing 25 tasks for the project. Now that you have been using MicroPasts for a while, we would like to know how you found it. <strong>Could you please answer a few questions in a short survey?</strong>\r\n       \r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1uczUGGYbrQ2FQfTtM8j4vfGr2qwcCMW6PLwzfvZZ6kI/viewform?embedded=true\" width=\"100%\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1uczUGGYbrQ2FQfTtM8j4vfGr2qwcCMW6PLwzfvZZ6kI/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n               <h3>Photo-masking tutorial for 3D modelling </h3>\r\n            </div>\r\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                    This application is very simple (but it does not yet work on mobile devices). When you participate,\r\n                    the platform will load a photograph of an archaeological artefact.\r\n                    Once the image has been loaded, you will be asked\r\n                    to click or tap around the edge of the artefact in order to define a\r\n                    polygon outline. Click once every time you wish to add a point along\r\n                    the edge of the polygon and your final point will snap back onto the\r\n                    one you started with. You can draw one polygon around the entire\r\n                    object or instead draw a series of overlapping\r\n                    polygons if you prefer. In general, we would like you to draw your polygon(s)\r\n                    very slightly inside the actual edge of the artefact. This is\r\n                    because we don't want background pixels near this edge to create a\r\n                    fuzzy border, and we don't need to worry so much about losing a bit\r\n                    of the artefact edge, as the missing few pixels are very likely to\r\n                    appear in one of the other photographs (at least 40 overlapping photographs are\r\n                    likely to exist for each object to support the construction of the\r\n                    3d model). An example of a successful outline is shown below:\r\n                </p>\r\n                <img src=\"https://farm4.staticflickr.com/3796/13464348955_a06ecab512.jpg\" width=\"500\" height=\"308\" class=\"img-polaroid\"\r\n                     alt=\"An example of an artefact photograph whose outline has been defined \" />\r\n            </div>\r\n\r\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                In a few cases, there might be one or more holes\r\n                in the object shown in the photograph (e.g. inside the loop\r\n                of a handle), and you can\r\n                click on the \"Holes\" button to be given an opportunity\r\n                to draw these in, as a second step, after you have created the initial outline\r\n                around the object. During the task, you can always return to this tutorial via the \"Tutorial\" button. \r\n                </p>\r\n                \r\n                <p>\r\n                \tAn example of a finished <a href=\"http://micropasts.org/3D\">3D model</a> has now been completed.\t\r\n                </p>\r\n            \t<p>\r\n                To find out how the project is progressing, to suggest\r\n                changes to this application or to propose new research\r\n\t      ideas based what you have photo-masked, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n            </div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n<script type=\"text/javascript\">\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 1 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<script>\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('photomaskingArreton').done(function(data){\r\n    \tconsole.log('Number of contributed tasks: ' + data.done);\r\n        if ((data.done == 1) && ($.cookie('surveyADH') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('surveyADH', 'shown', { path: '/'});\r\n        }\r\n        if ((data.done == 25) && ($.cookie('survey25ADH') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25ADH', 'shown', { path: '/'});\r\n        }\r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'}); \r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        div_map.css(\"height\", \"500px\");\r\n        div_map.css(\"width\", \"100%\");\r\n        $(\"#draw\").addClass(\"disabled\");\r\n        $(\"#edit\").addClass(\"disabled\");\r\n        $(\"#delete\").addClass(\"disabled\");\r\n        $(\"#outline\").addClass(\"disabled\");\r\n        $(\"#holes\").addClass(\"disabled\");\r\n        $(\"#map\").append(div_map);\r\n        div_map.attr(\"id\", \"map_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n            $(\"#draw\").removeClass(\"disabled\");\r\n            $(\"#edit\").removeClass(\"disabled\");\r\n            $(\"#delete\").removeClass(\"disabled\");\r\n            $(\"#outline\").removeClass(\"disabled\");\r\n            $(\"#holes\").removeClass(\"disabled\");\r\n            $(\"#status\").text(\"Photo loaded!\");\r\n        });\r\n        img.attr('src', task.info.url_b).css('height', 460);\r\n        console.log(task.info.url_b);\r\n        img.addClass('img-polaroid');\r\n        task.info.image = img;\r\n\r\n        // Maps always need a projection, but the static image is not geo-referenced,\r\n        // and are only measured in pixels.  So, we create a fake projection that the\r\n        // map can use to properly display the layer.\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 5184, 3456]\r\n        });\r\n\r\n        task.styleArray = [new ol.style.Style({\r\n          fill: new ol.style.Fill({\r\n            color: 'rgba(255, 255, 255, 0.2)'\r\n          }),\r\n          stroke: new ol.style.Stroke({\r\n            color: '#ffcc33',\r\n            width: 2\r\n          }),\r\n          image: new ol.style.Circle({\r\n            radius: 7,\r\n            fill: new ol.style.Fill({\r\n              color: '#ffcc33'\r\n            })\r\n          })\r\n        })];\r\n        \r\n        task.source = new ol.source.Vector();\r\n        task.source_holes = new ol.source.Vector();\r\n        \r\n        task.vector = new ol.layer.Vector({\r\n          source: task.source,\r\n          //styleFunction: function(feature, resolution) {\r\n          //  return task.styleArray;\r\n          //}\r\n          style: new ol.style.Style({\r\n                fill: new ol.style.Fill({\r\n                      color: 'rgba(255, 255, 255, 0.2)'\r\n                    }),\r\n                    stroke: new ol.style.Stroke({\r\n                      color: '#ffcc33',\r\n                      width: 2\r\n                    }),\r\n                    image: new ol.style.Circle({\r\n                      radius: 7,\r\n                      fill: new ol.style.Fill({\r\n                        color: '#ffcc33'\r\n                        })\r\n                      })\r\n                    })\r\n          });\r\n\r\n        task.holes = new ol.layer.Vector({\r\n          source: task.source_holes,\r\n          //styleFunction: function(feature, resolution) {\r\n          //  return task.styleArray;\r\n          //}\r\n          style: new ol.style.Style({\r\n                fill: new ol.style.Fill({\r\n                      color: 'rgba(255, 255, 255, 0.2)'\r\n                    }),\r\n                    stroke: new ol.style.Stroke({\r\n                      color: '#00CC99',\r\n                      width: 2\r\n                    }),\r\n                    image: new ol.style.Circle({\r\n                      radius: 7,\r\n                      fill: new ol.style.Fill({\r\n                        color: '#00CC99'\r\n                        })\r\n                      })\r\n                    })\r\n          });\r\n\r\n        task.overlay = new ol.FeatureOverlay({\r\n            style: new ol.style.Style({\r\n                  fill: new ol.style.Fill({\r\n                        color: 'rgba(255, 255, 255, 0.2)'\r\n                      }),\r\n                      stroke: new ol.style.Stroke({\r\n                        color: [0, 153, 255, 1],\r\n                        width: 2\r\n                      }),\r\n                      image: new ol.style.Circle({\r\n                        radius: 7,\r\n                        fill: new ol.style.Fill({\r\n                          color: [0, 153, 255, 1]\r\n                          })\r\n                        })\r\n                      })\r\n        });\r\n\r\n        // Modifiers for vector outline\r\n        task.modify = new ol.interaction.Modify({ \r\n                                                layer: task.vector,\r\n                                                featureOverlay: task.overlay });\r\n        task.select = new ol.interaction.Select({ \r\n                                                layer: task.vector,\r\n                                                featureOverlay: task.overlay });\r\n\r\n        // Modifiers for vector holes\r\n        task.modify_holes = new ol.interaction.Modify({ \r\n                                                layer: task.holes,\r\n                                                featureOverlay: task.overlay });\r\n        task.select_holes = new ol.interaction.Select({ \r\n                                                layer: task.holes,\r\n                                                featureOverlay: task.overlay });\r\n\r\n        task.map = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify, task.select_holes, task.modify_holes]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: '&copy; <a href=\"http://micropasts.org\">Micropasts</a>'\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [5184, 3456],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          , \r\n          task.vector,\r\n          task.holes,\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'map_' + task.id,\r\n          view: new ol.View2D({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 2.25\r\n          })\r\n        });\r\n        var zoomslider;\r\n        zoomslider = new ol.control.ZoomSlider();\r\n        task.map.addControl(zoomslider);\r\n        div_map.css(\"display\", \"none\");\r\n\r\n        var typeSelect = document.getElementById('type');\r\n        \r\n        //task.draw; // global so we can remove it later\r\n        task.draw = new ol.interaction.Draw({\r\n          source: task.source,\r\n          type: 'Polygon',\r\n        });\r\n\r\n        task.draw_holes = new ol.interaction.Draw({\r\n          source: task.source_holes,\r\n          type: 'Polygon',\r\n        });\r\n\r\n        // When the first polygon is completed, remove the drawInteraction\r\n        task.draw.on('drawend', function(evt) {\r\n                task.polygon = true;\r\n                $(\"#btn-save\").removeClass(\"disabled\");\r\n                });\r\n\r\n        // When the first hole is completed, remove the drawInteraction\r\n        task.draw_holes.on('drawend', function(evt) {\r\n                task.holes = true;\r\n                $(\"#btn-save\").removeClass(\"disabled\");\r\n                });\r\n\r\n        task.map.addInteraction(task.draw);\r\n\r\n        task.answer = {\r\n                 'task_id': task.id,\r\n                 'outline': [],\r\n                 'holes': [],\r\n                 'img': task.info.url_b};\r\n        task.polygon = false;\r\n        task.holes = false;\r\n        }\r\n    else {\r\n        deferred.resolve(task);\r\n    }\r\n});\r\n\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(\"#btn-save\").addClass(\"disabled\");\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n\r\n        // Code for drawing outlines or holes\r\n        $('.btn-type').off('click').on('click', function(evt) {\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined'){\r\n                if (answer == 'holes') {\r\n                    $(\"#outline\").removeClass('active');\r\n                    $(\"#holes\").addClass('active');\r\n                    task.map.removeInteraction(task.draw);\r\n                    task.map.addInteraction(task.draw_holes);\r\n                }\r\n                else {\r\n                    $(\"#holes\").removeClass('active');\r\n                    $(\"#outline\").addClass('active');\r\n                    task.map.addInteraction(task.draw);\r\n                    task.map.removeInteraction(task.draw_holes);\r\n                }\r\n            }\r\n        });\r\n\r\n        // Code for editing/drawing polygons\r\n        $('.btn-draw').off('click').on('click', function(evt) {\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined'){\r\n                if (answer == 'draw') {\r\n                    $(\"#edit\").removeClass(\"active\");\r\n                    $(\"#draw\").addClass(\"active\");\r\n                    if ($(\"#outline\").hasClass(\"active\")) {\r\n                        task.map.removeInteraction(task.modify);\r\n                        task.map.removeInteraction(task.select);\r\n                        task.map.addInteraction(task.draw);\r\n                    }\r\n                    else {\r\n                        task.map.removeInteraction(task.modify_holes);\r\n                        task.map.removeInteraction(task.select_holes);\r\n                        task.map.addInteraction(task.draw_holes);\r\n                    }\r\n                }\r\n                if (answer == 'edit') {\r\n                    $(\"#draw\").removeClass(\"active\");\r\n                    $(\"#edit\").addClass(\"active\");\r\n                    if ($(\"#outline\").hasClass(\"active\")) {\r\n                        task.map.removeInteraction(task.draw);\r\n                        task.map.addInteraction(task.select);\r\n                        task.map.addInteraction(task.modify);\r\n                    }\r\n                    else {\r\n                        task.map.removeInteraction(task.draw_holes);\r\n                        task.map.addInteraction(task.select_holes);\r\n                        task.map.addInteraction(task.modify_holes);\r\n                    }\r\n                }\r\n\r\n                if (answer == 'delete') {\r\n                    if ($(\"#outline\").hasClass(\"active\")) {\r\n                        $(\"#draw\").removeClass(\"active\");\r\n                        $(\"#edit\").removeClass(\"active\");\r\n                        $(\"#delete\").addClass(\"active\");\r\n                        var features = task.source.getAllFeatures();\r\n                        for(i=0;i<features.length;i++) {\r\n                            task.source.removeFeature(features[i]);\r\n                        }\r\n                        task.polygon = false;\r\n                        $(\"#draw\").addClass(\"active\");\r\n                        $(\"#delete\").removeClass(\"active\");\r\n                    }\r\n                    else {\r\n                        $(\"#draw\").removeClass(\"active\");\r\n                        $(\"#edit\").removeClass(\"active\");\r\n                        $(\"#delete\").addClass(\"active\");\r\n                        var features = task.source_holes.getAllFeatures();\r\n                        for(i=0;i<features.length;i++) {\r\n                            task.source_holes.removeFeature(features[i]);\r\n                        }\r\n                        task.holes = false;\r\n                        $(\"#draw\").addClass(\"active\");\r\n                        $(\"#delete\").removeClass(\"active\");\r\n                    }\r\n                }\r\n\r\n                }});\r\n\r\n\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined'){\r\n                //console.log(answer);\r\n                //console.log(task.map.source.features);\r\n                console.log(task.source.features);\r\n\r\n                if (task.polygon) {\r\n                    var features = task.source.getAllFeatures();\r\n                    var polygons = [];\r\n                    for(i=0;i<features.length;i++) {\r\n                        var g = features[i].getGeometry();\r\n                        polygons.push(g.getCoordinates());\r\n                    }\r\n                    //task.answer = {\r\n                    //    'task_id': task.id,\r\n                    //    'polygon': polygons,\r\n                    //    'img': task.info.url_b};\r\n                    task.answer.outline = polygons;\r\n\r\n                    if (task.holes) {\r\n                        var features = task.source_holes.getAllFeatures();\r\n                        var polygons = [];\r\n                        for(i=0;i<features.length;i++) {\r\n                            var g = features[i].getGeometry();\r\n                            polygons.push(g.getCoordinates());\r\n                        }\r\n\r\n                        task.answer.holes = polygons;\r\n                    }\r\n\r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                    \t$(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        \r\n                        deferred.resolve();\r\n                        $(\"#map_\" + task.id).remove();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                } // end if task.polygon\r\n            }\r\n            else {\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n    $('#imgLink').tooltip();\r\n\r\n        \r\n});\r\n\r\npybossa.run('photomaskingArreton');\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/26'/>"}, {"id": 29, "created": "2014-06-11T09:02:52.311472", "updated": "2015-02-26T09:51:41.264848", "name": "Photo Tagging of UCL Horsfield Archive", "short_name": "phototaggingHorsfield", "description": "What do you see in this photograph?", "long_description": "![](https://farm4.staticflickr.com/3898/14250375607_b7ee73916d_n.jpg)\r\n\r\nGeorge Horsfield standing by a dolmenUCL IOA Collection\r\n\r\nThis application will help [Dr. Rachael\r\nSparks](http://www.ucl.ac.uk/museums/about/our-staff/sparks), Keeper of UCL\r\nInstitute of Archaeology's Collections, to get more information on some\r\nfascinating historical photographs from the Horsfield collection.\r\n\r\n[George](http://en.wikipedia.org/wiki/George_Horsfield) and\r\n[Agnes](http://trowelblazers.com/agnes-conway-horsfield/) Horsfield worked at\r\narchaeological sites mainly in Jordan in the 1920s and 1930s. Their projects\r\nincluded their magnificent Petra excavations, as well as works at the citadel\r\nin Amman and Jerash.\r\n\r\nTheir photographic collection ended up at UCL's Special Collections facility,\r\nand includes thousands of photographs and negatives. Photos included in this\r\napplication are from George and Agnes' travels and represent George\r\nHorsfield's work as Chief Curator of Antiquities in Transjordan, and include\r\nsites in Jordan, Palestine, Israel, and Syria. Many of these were taken by\r\nAgnes, and one of the included photos is of her, taken with her own camera by\r\nGeorge.\r\n\r\nEnhancing this important photographic archive will facilitate the searching of\r\nspecific themes such as people, objects, architectural aspects, archaeological\r\nelements, etc.\r\n\r\nThis application loads a picture from the [Horsfield\r\nArchive](https://www.flickr.com/photos/micropasts/sets/72157644964279123/) and\r\nasks people to tag identified people or elements. You can click on the picture\r\nand drag to draw a rectangle on top of the element. This action will open a\r\nwindow where you will be able to type the name of that element and save it.\r\nYou can then add various keywords, attribute the place to a Pleiades\r\nidentifier and geo-reference the photograph to a map.\r\n\r\n### **Thank you!**\r\n\r\nLucy Ellis, Jos Kleijne, Hugh Fiske, Cheryl Ellsworth, Jeff Okazaki, Joellen\r\nmcGann, Dina Fathalla, Emily Cowan, Margaret Ellen Joy, Nina Sharman, John\r\nMarr, Kathleen Gransalke, Doina Bucur, Raest Wylde, Eleni Papaioannou, Louise\r\nPanton, Maragkaki Froso, Maria Christakou, Christopher Wai, A.L. McMichael,\r\nDanielle Haigh-Wood, John Kavanagh, Peeters Anthony, Helen Wang, Wesley\r\nChurch, Ian MacInnes, Elizabeth Dale, Nate, Gill Byrne, Juliet Taylor, Juliet\r\nCrome, Michael Rank, Lucas Suter, Stephanie Choy, Arielle Richards and other\r\nanonymous contributors for completing this application.\r\n\r\n###  This project is on behalf of:\r\n\r\n![The UCL Institute of Archaeology](http://micropasts.org/wp-content/uploads/2014/09/UCL_logo_sm_blk.png)\r\n\r\n###  Find the code on GitHub\r\n\r\n![](https://crowdfunded.micropasts.org/assets/learn/github-ee049d767e762a0c6626051203a31f6e.png)\r\n\r\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"tutorial": "<div id=\"modal\" class=\"modal fade\">\n   <div class=\"modal-dialog\">\n      <div class=\"modal-content\">\n          <div class=\"modal-header\">\n                 <h1 class=\"lead\">\n                     Photo-tagging Tutorial\n                 </h1>\n             </div><!-- Modal header -->\n             <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n                <p>\n                    The application is really simple. It loads a photo from our <a href=\"http://flickr.com/micropasts\">Flickr feed</a> and asks you to <strong>tag all the elements that you recognise</strong>. These can be anything from a <i>column</i> to a <i>camel</i>, an activity taking place such as <i>agriculture</i> or <i>transport</i>, a certain cultural group of people such as <i>Bedouin</i> or <i>European</i> - or even specific individuals, and/or more general themes such as simply <i>architecture</i>.\n                </p>\n                <p>\n                    You then hover the mouse over the elements that you identify, and then by clicking and dragging you will draw a box. A text box will appear, in which you will be able to type the name of that element and save it.\n                </p>\n                <p>\n                   If you recognise a specific person in the photo, this is great! Please tag their names in this way: <i>Last name, first name</i>; for example: Horsfield, George.\n                </p>\n                <p>\n                    <img src=\"https://farm3.staticflickr.com/2918/14443363844_d99632eb9b.jpg\" width=\"500\" height=\"332\" alt=\"An example of the tagging interface\"/>\n                </p>\n                <p>\n                    You can do this as many times as you want. If you wish to edit a tag or delete it altogether, you can do this by hovering over the relevant box, and then selecting either the pencil tool for editing, or the 'x' for deleting.\n                </p>\n                \n             </div>\n             <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n                <p>\n                    As you can see, you have four buttons representing four categories of suggested keywords: Activity, Things, Theme and People. Clicking on each one of these will bring up a list of suggested keywords to be used in tagging. You can refer to these lists when tagging each photo, but you can also add your own tags. Both annotating elements on the photograph and selecting keywords from these lists are very helpful.\n                </p>\n                <p>\n                    Additional information incldues the photo's ID (starts with P2008, and appears in almost all photos), the photo's orientation (landscape, portrait, or other if it's a square), as well as comments, if you have anything else you want to mention. If the photo has a caption, please try to transcribe it as accurately as possibly into the transcribe label box.\n                </p>\n                <p>\n                    We would also like your help to give the photograph coordinates and a Pleiades Identifier. If you go to the geo-code section on the right hand side and type a place name (refer to mapping hints for help) you can select the place depicted in the photo. Once you have done this, try choosing a Pleiades Identifier from the drop down list below.\n                </p>\n                <img src=\"http://micropasts.org/wp-content/uploads/2014/09/Jerash_Geocoder.png\" width=\"400\" height=\"310\" alt=\"Geocoder view\" />\n                <p>&nbsp;</p>\n                <p>\n                    During the task, you can always return to this tutorial via the <i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial button.\n                </p>\n                <p>\n                    To find out how the project is progressing, to suggest changes to this application or to propose new research ideas based what you have tagged, please have a look at our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n                </p>\n             </div>\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../phototaggingHorsfield/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n        </div>\n    </div>\n</div>\n\n<script>\nvar step = -1;\nfunction showStep(action) {\n   $(\"#\" + step).hide();\n   if (action == 'next') {\n      step = step + 1;\n   }\n   if (action == 'prev') {\n      step = step - 1;\n   }\n   if (step == 0) {\n      $(\"#prevBtn\").hide();\n   }\n   else {\n      $(\"#prevBtn\").show();\n   }\n   if (step == 1) {\n      $(\"#nextBtn\").hide();\n      $(\"#startContrib\").show();\n   }\n   $(\"#\" + step).show();\n}\nshowStep('next');\n$(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_29_thumbnail_1424853758.png", "task_presenter": "<!-- Styles for this task -->\r\n<link type=\"text/css\" rel=\"stylesheet\" href=\"http://annotorious.github.io/latest/themes/dark/annotorious-dark.css\"/>\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n<link rel=\"stylesheet\" href=\"/static/vendor/bootstrap-multiselect/css/bootstrap-multiselect.css\" type=\"text/css\" media=\"screen\" />\r\n<link rel=\"stylesheet\" href=\"/static/vendor/select2-3.5.1/select2.css\" type=\"text/css\" media=\"screen\" />\r\n<link rel=\"stylesheet\" href=\"/static/css/select2-bootstrap.css\" type=\"text/css\" media=\"screen\" />\r\n\r\n<!-- Multi-select scripts -->\r\n<script src=\"/static/vendor/bootstrap-multiselect/js/bootstrap-multiselect.js\" type=\"text/javascript\"></script>\r\n\r\n<!-- Select 2 script -->\r\n<script src=\"/static/vendor/select2-3.5.1/select2.js\" type=\"text/javascript\"></script>\r\n\r\n\r\n<!-- Fancy box script -->\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n\r\n<!-- jQuery cookie -->\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n\r\n<!-- Annotorious -->\r\n<script src=\"http://annotorious.github.io/latest/annotorious.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://annotorious.github.io/latest/anno-fancybox.min.js\" type=\"text/javascript\"></script>\r\n\r\n<!-- jquery form serializer -->\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n\r\n<!-- Maps -->\r\n<script src=\"http://maps.google.com/maps/api/js?sensor=false\"></script>\r\n\r\n<!-- jquery ui -->\r\n<script src=\"https://code.jquery.com/ui/1.8.1/jquery-ui.min.js\" type=\"text/javascript\"></script>\r\n\r\n<!-- Get fancy box selector working --> \r\n\r\n<!-- App specific styles -->\r\n<style>\r\n    .messageMargin {\r\n        margin-top: 15px;\r\n    }\r\n    .loadingIcon {\r\n        max-width:100%;\r\n    }\r\n    .none {\r\n        display:none;\r\n    }\r\n    .ui-autocomplete {\r\n        background-color: white;\r\n        width: 300px;\r\n        border: 1px solid #cfcfcf;\r\n        list-style-type: none;\r\n        padding: 10px;\r\n\r\n    }\r\n    .multiselect-container {\r\n        max-height: 250px;\r\n        overflow-y: auto;\r\n        overflow-x: hidden;\r\n    }\r\n    #map {\r\n        height:400px;\r\n        width:100%;\r\n        margin-top: 15px;\r\n    }\r\n    #keywords .btn-group {\r\n        margin-top: 0px;\r\n        margin-bottom: 0px;\r\n    }\r\n</style>\r\n\r\n<!-- The surveys for Chiara -->\r\n    <!-- Basic 1 task -->\r\n    <div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n      <div class=\"modal-dialog\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header\">\r\n            <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n            <h4 class=\"modal-title\">Hello! Do you want to help us?</h4>\r\n          </div>\r\n          <div class=\"modal-body\">\r\n              <p>Thanks for contributing one task for the project. We are\r\n                  interested in knowing how you found out about us.\r\n                  <strong>Could you please answer two questions in a short survey?</strong>\r\n              </p>\r\n          </div>\r\n          <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n            <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1lNhBvKqPQlaJpWcvbEMfOGlixf7BHC__9w9JYs0Yw_4/viewform\">Of course! Take me to the survey!</a>\r\n          </div>\r\n        </div><!-- /.modal-content -->\r\n      </div><!-- /.modal-dialog -->\r\n    </div><!-- /.modal -->\r\n\r\n    <!-- The complex 25 task -->\r\n    <div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n      <div class=\"modal-dialog\">\r\n        <div class=\"modal-content\">\r\n          <div class=\"modal-header\">\r\n            <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n            <h4 class=\"modal-title\">Hello! Do you want to help us?</h4>\r\n          </div>\r\n          <div class=\"modal-body\">\r\n              <p>\r\n                  Thanks for contributing 25 tasks for the project. We are\r\n                  interested in knowing how you found out about us.\r\n                  <strong>Could you please answer two questions in a short survey?</strong>\r\n              </p>\r\n          </div>\r\n          <div class=\"modal-footer\">\r\n            <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n            <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1fchE1-eZ-ikceVMSEyXt5SW3-7bsFVLaIaPwBBiDnLA/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n          </div>\r\n        </div><!-- /.modal-content -->\r\n      </div><!-- /.modal-dialog -->\r\n    </div><!-- /.modal -->\r\n\r\n    <!-- Success and Error Messages for the user -->\r\n\r\n    <div class=\"messageMargin\">\r\n       <div id=\"success\" class=\"alert alert-success none\">\r\n          <h2>Well done!</h2>\r\n          <p>\r\n              You have successfully submitted your tags. Here is another\r\n              photograph to try if you wish!\r\n          </p>\r\n       </div>\r\n      <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n          <img src=\"/static/img/loading.gif\">Loading next task...\r\n       </div>\r\n      <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n          <h2>The task has been completed!</h2>\r\n          <p>\r\n              Thank you for participating!\r\n          </p>\r\n       </div>\r\n      <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n          <h2>Congratulations!</h2>\r\n          <p>\r\n              You have participated in all available tasks!\r\n          </p>\r\n          <img src=\"https://crowdfunded.micropasts.org/assets/logo-head.png\"\r\n               height=\"200\" width=\"200\" alt=\"The MicroPasts Square Logo\"/>\r\n          <div class=\"alert-actions\">\r\n             <a class=\"btn-default btn\" href=\"/\">Go back to the home page</a>\r\n             <a class=\"btn-default btn\" href=\"/app\">or, have a look at our\r\n                 other applications</a>\r\n          </div>\r\n       </div>\r\n      <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n          <a class=\"close\">\u00d7</a>\r\n          <h2>Error!</h2>\r\n          <p>\r\n              Something went wrong, please contact the site administrators via the\r\n              <a href=\"http://community.micropasts.org\">forum</a>,\r\n              <a href=\"https://facebook.com/micropasts\">Facebook</a>,\r\n              <a href=\"mailto:info@finds.org.uk\">email</a> or\r\n              <a href=\"https://twitter.com/micropasts\">Twitter</a>.\r\n          </p>\r\n       </div>\r\n    </div>\r\n\r\n    <!-- End Success and Error Messages for the user -->\r\n\r\n    <!--\r\n        Task DOM for loading the Flickr Images\r\n        It uses the class=\"skeleton\" to identify the elements that belong to the\r\n        task.\r\n    -->\r\n    <!-- Start Skeleton Row -->\r\n    <div class=\"row skeleton\">\r\n       <!-- Start of Question and Submission DIV -->\r\n       <div class=\"btn-group pull-right\">\r\n          <button class=\"btn btn-info btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</button>\r\n          <a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n          <a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n          <a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on Flickr</a>\r\n          <a id=\"horsfield\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Learn about the Horsfields - opens in a new window\" class=\"btn btn-sm btn-info\" href=\"http://research.micropasts.org/2014/09/08/in-the-lens-george-and-agnes-horsfields-photographs/\">Learn about the Horsfields</a>\r\n          <!-- a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a -->\r\n       </div>\r\n\r\n       <h1 id=\"step1\">\r\n           Please help us tag this photograph\r\n       </h1>\r\n       \r\n       <div class=\"btn-group\">\r\n           <button id=\"status\" type=\"button\" class=\"btn btn-default btn-type disabled\" name=\"loading\" value=\"loading\">Loading photo</button>\r\n           <button id=\"reset\" type=\"button\" class=\"btn btn-default btn-type\">Reset annotator</button>\r\n           <button id=\"skip\" type=\"button\" class=\"btn btn-default btn-type\">Skip to form</button>\r\n       </div>\r\n       <div class=\"col-md-12\"><!-- Start of Photo DIV (column) -->\r\n          <div id=\"imgContainer\" >\r\n             <span id=\"photo-link\">\r\n                <img id=\"photo\" src=\"/static/img/loading.gif\" class=\"loadingIcon\">\r\n             </span>\r\n          </div>\r\n       </div><!-- End of Photo DIV (column) -->\r\n    <form id=\"phototagging\" role=\"form\">\r\n        \r\n        <div class=\"col-md-12 text-center\">\r\n            <h1 id=\"title\">\r\n                Enter some information about the photograph\r\n            </h1>\r\n        </div>\r\n\r\n        <div class=\"col-md-6\">\r\n        <div class=\"form-group\">\r\n           <label class=\"control-label\" for=\"imageID\">Identification number: </label>\r\n           <input type=\"text\" name=\"imageID\" class=\"form-control\" placeholder=\"The ID number is usally in the top right corner\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"Look for a pencil written identifer such as P2008-20\">\r\n       </div>\r\n            <a href=\"#\" class=\"btn btn-default btn-type\" id=\"top\">Go back to top of image</a>\r\n        \r\n            <div class=\"btn-group\" id=\"keywords\">\r\n                \r\n                 <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"imageLabel\">Transcribe the label: </label>\r\n                <textarea class=\"form-control\" rows=\"5\" id=\"imageLabel\" name=\"imageLabel\" placeholder=\"Transcribe the white label from the image above. If you can, try and keep the same case and style.\"></textarea>\r\n             </div>\r\n                \r\n      \r\n                <!-- The activities dropdown -->\r\n                  <h2>\r\n                Choose keywords:\r\n            </h2>\r\n            <p>\r\n                You can choose multiple keywords for each photograph shown above.\r\n                These four dropdowns present different keywords for: activities, \r\n                things, theme of photo, and people displayed. Hold down ctrl and click on the ones you want to use.\r\n            </p>\r\n                <select id=\"activities\" class=\"multiselect\" multiple=\"multiple\">\r\n                    <option value=\"agriculture\">agriculture</option>\r\n                    <option value=\"craft\">craft</option>\r\n                    <option value=\"dance\">dance</option>\r\n                    <option value=\"excavation\">excavation</option>\r\n                    <option value=\"field_camp\">field camp</option>\r\n                    <option value=\"food_preparation\">food preparation</option>\r\n                    <option value=\"food_serving\">food serving</option>\r\n                    <option value=\"horticulture\">horticulture</option>\r\n                    <option value=\"hunting\">hunting</option>\r\n                    <option value=\"initiation\">initiation</option>\r\n                    <option value=\"landscape\">landscape</option>\r\n                    <option value=\"mining\">mining</option>\r\n                    <option value=\"procession\">procession</option>\r\n                    <option value=\"reconstruction\">reconstruction</option>\r\n                    <option value=\"recreation\">recreation</option>\r\n                    <option value=\"religion\">religion</option>\r\n                    <option value=\"site_view\">site view</option>\r\n                    <option value=\"slavery\">slavery</option>\r\n                    <option value=\"sport\">sport</option>\r\n                    <option value=\"surveying\">surveying</option>\r\n                    <option value=\"time_keeping\">time keeping</option>\r\n                    <option value=\"trade\">trade</option>\r\n                    <option value=\"transport\">transport</option>\r\n                    <option value=\"warfare\">warfare</option>\r\n                    <option value=\"wedding\">wedding</option>\r\n                </select>\r\n\r\n                <!-- The things type dropdown --> \r\n                <select id=\"things\" class=\"multiselect\" multiple=\"multiple\">\r\n                    <option value=\"aeroplane\">aeroplane</option>\r\n                    <option value=\"altar\">altar</option>\r\n                    <option value=\"animal\">animal</option>\r\n                    <option value=\"ape\">ape</option>\r\n                    <option value=\"apse\">apse</option>\r\n                    <option value=\"aqueduct\">aqueduct</option>\r\n                    <option value=\"arch\">arch</option>\r\n                    <option value=\"architrave\">architrave</option>\r\n                    <option value=\"axe\">axe</option>\r\n                    <option value=\"bailey\">bailey</option>\r\n                    <option value=\"basin\">basin</option>\r\n                    <option value=\"basket\">basket</option>\r\n                    <option value=\"bell\">bell</option>\r\n                    <option value=\"bicycle\">bicycle</option>\r\n                    <option value=\"bird\">bird</option>\r\n                    <option value=\"boat\">boat</option>\r\n                    <option value=\"bookcase\">bookcase</option>\r\n                    <option value=\"bow\">bow</option>\r\n                    <option value=\"branch\">branch</option>\r\n                    <option value=\"bridge\">bridge</option>\r\n                    <option value=\"building\">building</option>\r\n                    <option value=\"camel\">camel</option>\r\n                    <option value=\"car\">car</option>\r\n                    <option value=\"carrying_chair\">carrying-chair</option>\r\n                    <option value=\"cart\">cart</option>\r\n                    <option value=\"castle\">castle</option>\r\n                    <option value=\"cemetery\">cemetery</option>\r\n                    <option value=\"chair\">chair</option>\r\n                    <option value=\"chicken\">chicken</option>\r\n                    <option value=\"church\">church</option>\r\n                    <option value=\"cistern\">cistern</option>\r\n                    <option value=\"coffin\">coffin</option>\r\n                    <option value=\"columbarium\">columbarium</option>\r\n                    <option value=\"column\">column</option>\r\n                    <option value=\"column_capital\">column capital</option>\r\n                    <option value=\"cornice\">cornice</option>\r\n                    <option value=\"courtyard\">courtyard</option>\r\n                    <option value=\"cow\">cow</option>\r\n                    <option value=\"crocodile\">crocodile</option>\r\n                    <option value=\"dagger\">dagger</option>\r\n                    <option value=\"dam\">dam</option>\r\n                    <option value=\"dighouse\">dighouse</option>\r\n                    <option value=\"dog\">dog</option>\r\n                    <option value=\"dolmen\">dolmen</option>\r\n                    <option value=\"donkey\">donkey</option>\r\n                    <option value=\"door\">door</option>\r\n                    <option value=\"field\">field</option>\r\n                    <option value=\"fish\">fish</option>\r\n                    <option value=\"flag\">flag</option>\r\n                    <option value=\"fortress\">fortress</option>\r\n                    <option value=\"frieze\">frieze</option>\r\n                    <option value=\"furniture\">furniture</option>\r\n                    <option value=\"garden\">garden</option>\r\n                    <option value=\"gateway\">gateway</option>\r\n                    <option value=\"gun\">gun</option>\r\n                    <option value=\"horse\">horse</option>\r\n                    <option value=\"house\">house</option>\r\n                    <option value=\"hut\">hut</option>\r\n                    <option value=\"inscription\">inscription</option>\r\n                    <option value=\"island\">island</option>\r\n                    <option value=\"jewelry\">jewelry</option>\r\n                    <option value=\"ladder\">ladder</option>\r\n                    <option value=\"latrine\">latrine</option>\r\n                    <option value=\"lion\">lion</option>\r\n                    <option value=\"market\">market</option>\r\n                    <option value=\"milestone\">milestone</option>\r\n                    <option value=\"monastery\">monastery</option>\r\n                    <option value=\"monolith\">monolith</option>\r\n                    <option value=\"mosaic\">mosaic</option>\r\n                    <option value=\"mosque\">mosque</option>\r\n                    <option value=\"mountain\">mountain</option>\r\n                    <option value=\"museum\">museum</option>\r\n                    <option value=\"ostrich\">ostrich</option>\r\n                    <option value=\"ox\">ox</option>\r\n                    <option value=\"palace\">palace</option>\r\n                    <option value=\"pediment\">pediment</option>\r\n                    <option value=\"plant\">plant</option>\r\n                    <option value=\"pulpit\">pulpit</option>\r\n                    <option value=\"quadruped\">quadruped</option>\r\n                    <option value=\"railway\">railway</option>\r\n                    <option value=\"river\">river</option>\r\n                    <option value=\"reed\">reed</option>\r\n                    <option value=\"relief\">relief</option>\r\n                    <option value=\"reservoir\">reservoir</option>\r\n                    <option value=\"road\">road</option>\r\n                    <option value=\"rock\">rock</option>\r\n                    <option value=\"room\">room</option>\r\n                    <option value=\"scaffolding\">scaffolding</option>\r\n                    <option value=\"sceptre\">sceptre</option>\r\n                    <option value=\"school\">school</option>\r\n                    <option value=\"scorpion\">scorpion</option>\r\n                    <option value=\"sea\">sea</option>\r\n                    <option value=\"shrine\">shrine</option>\r\n                    <option value=\"skull\">skull</option>\r\n                    <option value=\"skeleton\">skeleton</option>\r\n                    <option value=\"slag\">slag</option>\r\n                    <option value=\"snake\">snake</option>\r\n                    <option value=\"spear\">spear</option>\r\n                    <option value=\"spring\">spring</option>\r\n                    <option value=\"stairs\">stairs</option>\r\n                    <option value=\"statue\">statue</option>\r\n                    <option value=\"stela\">stela</option>\r\n                    <option value=\"street\">street</option>\r\n                    <option value=\"sundial\">sundial</option>\r\n                    <option value=\"synagogue\">synagogue</option>\r\n                    <option value=\"table\">table</option>\r\n                    <option value=\"temple\">temple</option>\r\n                    <option value=\"tent\">tent</option>\r\n                    <option value=\"tetrapylon\">tetrapylon</option>\r\n                    <option value=\"theatre\">theatre</option>\r\n                    <option value=\"throne\">throne</option>\r\n                    <option value=\"tomb\">tomb</option>\r\n                    <option value=\"tortoise\">tortoise</option>\r\n                    <option value=\"tower\">tower</option>\r\n                    <option value=\"tree\">tree</option>\r\n                    <option value=\"truck\">truck</option>\r\n                    <option value=\"umbrella\">umbrella</option>\r\n                    <option value=\"vault\">vault</option>\r\n                    <option value=\"vessel\">vessel</option>\r\n                    <option value=\"wall\">wall</option>\r\n                    <option value=\"wall_painting\">wall painting</option>\r\n                    <option value=\"water_wheel\">water wheel</option>\r\n                    <option value=\"weaving\">weaving</option>\r\n                    <option value=\"well\">well</option>\r\n                    <option value=\"window\">window</option>\r\n                </select>\r\n\r\n                <!-- The theme type dropdown --> \r\n                <select id=\"theme\" class=\"multiselect\" multiple=\"multiple\">\r\n                    <option value=\"animal\">animal</option>\r\n                    <option value=\"architecture\">architecture</option>\r\n                    <option value=\"armour\">armour</option>\r\n                    <option value=\"container\">container</option>\r\n                    <option value=\"funerary\">funerary</option>\r\n                    <option value=\"furniture\">furniture</option>\r\n                    <option value=\"horology\">horology</option>\r\n                    <option value=\"manufacture\">manufacture</option>\r\n                    <option value=\"musical_instrument\">musical instrument</option>\r\n                    <option value=\"panorama\">panorama</option>\r\n                    <option value=\"personal_accessory\">personal accessory</option>\r\n                    <option value=\"plant\">plant</option>\r\n                    <option value=\"recreation\">recreation</option>\r\n                    <option value=\"sculpture\">sculpture</option>\r\n                    <option value=\"tool\">tool</option>\r\n                    <option value=\"transport\">transport</option>\r\n                    <option value=\"water_management\">water management</option>\r\n                    <option value=\"weapons\">weapons</option>\r\n                    <option value=\"writing\">writing</option>\r\n                </select>\r\n\r\n                <!-- The people dropdown --> \r\n                <select id=\"people\" class=\"multiselect\" multiple=\"multiple\">\r\n                    <option value=\"American\">American</option>\r\n                    <option value=\"Arab\">Arab</option>\r\n                    <option value=\"Bedouin\">Bedouin</option>\r\n                    <option value=\"Egyptian\">Egyptian</option>\r\n                    <option value=\"European\">European</option>\r\n                </select>\r\n            </div>\r\n            \r\n            <hr />\r\n            <!-- Allow other keywords to be generated --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"keywordsUser\">Other keywords:</label>\r\n                <input type=\"text\" name=\"keywordsUser\" class=\"form-control\" placeholder=\"If you can think of other keywords, enter them here separated by commas\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"Our keyword list is not complete, if you think of new ones, just add them here\">\r\n            </div>\r\n            \r\n            <hr />           \r\n           \r\n            \r\n            <p>&nbsp;</p>\r\n            <div>\r\n                <label class=\"control-label\" for=\"orientation\">Image orientation: </label>\r\n                <select class=\"form-control\" id=\"orientation\" name=\"orientation\">\r\n                    <option value=\"\">Please choose image orientation: </option>\r\n                    <option value=\"landscape\" >Landscape</option>\r\n                    <option value=\"portrait\">Portrait</option>\r\n                    <option value=\"other\">Other</option>\r\n                </select>\r\n            </div>\r\n\r\n            <p>&nbsp;</p>\r\n           \r\n\r\n             <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"comments\">Your Comments</label>\r\n                <textarea class=\"form-control\" rows=\"5\" id=\"comments\" name=\"comments\" placeholder=\"Add any comments you may have about the photo or your experience with this task.\"></textarea>\r\n             </div>\r\n\r\n        </div>\r\n\r\n    <div class=\"col-md-6\">\r\n        <!-- Geographical grouping -->\r\n        <div class=\"form-group\" id=\"geo\">\r\n\r\n            <div>\r\n                <label class=\"control-label\" for=\"site\" >Geo-reference the site:</label>\r\n\r\n                <!-- Note: must not be a button or it will submit form --> \r\n                <a href=\"#\" class=\"btn btn-info btn-sm pull-right\" data-toggle=\"modal\" data-target=\"#mapModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Mapping hints</a>\r\n                <p>&nbsp;</p>\r\n                <!-- End of help button --> \r\n\r\n                <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\"\r\n                       placeholder=\"Locate the photograph on the map\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"bottom\" title=\"Type a placename and then select from the suggestions, e.g. Jerash, Amman (Philadelphia) or Petra\">\r\n                <input type=\"hidden\" name=\"lat\" value=\"\" id=\"lat\">\r\n                <input type=\"hidden\" name=\"lon\" value=\"\" id=\"lon\">\r\n            </div>\r\n            \r\n            <!-- The map to show --> \r\n            <div id=\"map\"></div>\r\n            \r\n          <h4>About the map layers</h4>\r\n          <img class=\"img-circle pull-right\" src=\"https://avatars1.githubusercontent.com/u/867158?v=2&s=50\" width=\"50px\" height=\"50px\" />\r\n          \t<p>\r\n                The Imperium base map is used courtesy of the <a href=\"http://pelagios-project.blogspot.co.uk/2012/09/a-digital-map-of-roman-empire.html\">Pelagios project</a>, and the OpenStreetMap layer is \"&copy; OpenStreetMap contributors\".\r\n            </p>\r\n            \r\n            <!-- Look up a Pleiades ID --> \r\n            <p>&nbsp;</p>\r\n            <div>\r\n                <label class=\"control-label\" for=\"pleiadesID\">Attribute a Pleiades Identifier (if possible): </label>\r\n                <select class=\"form-control\" id=\"pleiadesID\" name=\"pleiadesID\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Choose a Pleiades place if you can, not every location is in their system.\">\r\n                    <option value=\"\">Please choose a place</option>\r\n                    <option value=\"697728\">Amman, Jordan - Amman/Philadelpheia</option>\r\n                    <option value=\"697736\">Bayir \u2013 Qasr Bayir</option>\r\n                    <option value=\"687856\">Bethlehem</option>\r\n                    <option value=\"678378\">Beth-Shan - Scythopolis</option>\r\n                    <option value=\"678106\">Damascus, Syria</option>\r\n                    <option value=\"697709\">Dead Sea - Mortuum Mare/Asphaltitis L.</option>\r\n                    <option value=\"697726\">Feinan: Khirbet el Nahas \u2013 Phaino</option>\r\n                    <option value=\"668261\">Homs, Syria - Emesa</option>\r\n                    <option value=\"678158\">Jerash, Jordan - Gerasa/Antiochia ad Chrysorhoam</option>\r\n                    <option value=\"687928\">Jerusalem, Israel - Ierusalem/Hierosolyma/Col. Aelia Capitolina</option>\r\n                    <option value=\"697725\">Petra, Jordan</option>\r\n                    <option value=\"688028\">Shilo, Israel - Shiloh or Silo</option>\r\n                    </select>\r\n\r\n                <p>&nbsp;</p>\r\n                <h4>\r\n                    Why use Pleiades tags\r\n                </h4>\r\n              <img class=\"img-circle pull-right\" src=\"https://pbs.twimg.com/profile_images/378800000226449591/9549b127ba383dde216d8562f1bf9204_bigger.png\" width=\"73px\" height=\"73px\" />\r\n                <p>\r\n                    <a rel=\"tooptip\" data-placement=\"top\" data-toggle=\"tooltip\" title=\"\" data-original-title=\"The Pleiades site - opens in a new window\" href=\"http://pleiades.stoa.org/\" target=\"_blank\">Pleiades</a> is a community-built gazetteer and graph of ancient places. By adding these identifiers, we can assist their efforts as documented in this <a href=\"http://sgillies.net/blog/1103/flickr-support-for-ancient-world-places\">blog post</a> by Sean Gillies. These data can then be fed \r\n                  into the Pelagios Project's RDF ecosystem and for linking these images to similar ones that have been tagged in the same way by other collections.\r\n                </p>\r\n            </div>\r\n            \r\n        </div>\r\n        <!-- End of geo group -->\r\n    </div>\r\n    </form>\r\n\r\n        <!--id=\"btn-save\"-->\r\n        <div class=\"col-md-12\">\r\n            <div class=\"btn-group\">\r\n                <button class=\"btn btn-success btn-answer\" value='Yes'>\r\n                    <i class=\"icon icon-white icon-save\"></i> Submit your answer\r\n                </button>\r\n         \r\n            </div>\r\n\r\n            <!-- Feedback items for the user -->\r\n            <p>\r\n                You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span>\r\n            </p>\r\n          \r\n            <p>\r\n                You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n            <!-- Progress bar for the user -->\r\n            <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n            <div class=\"progress progress-striped\">\r\n                <div id=\"progress\" class=\"progress-bar\" role=\"progressbar\" title=\"#\" style=\"width:0%;\"></div>\r\n            </div>\r\n          \r\n            <div id=\"answer\">\r\n                \r\n            </div>\r\n            <!-- DIV for the submission buttons -->\r\n        \r\n        </div>\r\n       <!-- End of Question and Submission DIV (column) -->\r\n    </div><!-- End of Skeleton Row -->\r\n\r\n     <div class=\"modal fade\" id=\"mapModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n       <div class=\"modal-dialog\">\r\n          <div class=\"modal-content\">\r\n             <div class=\"modal-header\">\r\n                 <h1 class=\"lead\">\r\n                     Mapping hints\r\n                 </h1>\r\n             </div><!-- Modal header -->\r\n             <div class=\"modal-body\">\r\n                 \r\n                 <p>\r\n                     The mapping component of this exercise has three different layers. We are very fortunate to be able to use the fantastic Imperium map layer, produced by Johan \u00c5hfeldt for the <a href=\"http://pelagios-project.blogspot.co.uk\">\r\n                     Pelagios</a> project. This has ancient place names from the Barrington Atlas of the Classical World displayed and is useful for many reasons. If you find this hard to use change to either satellite layer, the OpenStreetMap layer (labels in Arabic) or the map view.                 \r\n                 <p>\r\n                     To use the geo-coder, type a place name, then as it auto-completes, use your mouse or arrow keys to choose the place (double-click). When it has selected the site, a balloon appears on the map. The image below demonstrates what you should see.\r\n                 </p>\r\n                 <img src=\"http://micropasts.org/wp-content/uploads/2014/09/Jerash_Geocoder.png\" width=\"100%\" alt=\"Geocoder view\" />\r\n                 <p>&nbsp;</p>\r\n                 <p>\r\n                     Mapping some of these sites can be hard. Use these tip examples to get the right place:\r\n                 </p>\r\n                 <ul>\r\n                     <li>\r\n                         For Homs - search for Homs, Syria, on the Imperium map layer, the place was known as Emesa in Antiquity.\r\n                     </li>\r\n                     <li>\r\n                         For Shiloh - search for Shilo. \r\n                     </li>\r\n                   <li>\r\n                     For Beth-Shan - search for Beit She'an\r\n                   </li>\r\n                   <li>\r\n                     For Kasr Bshir - search for Qasr Bashir\r\n                 </ul>\r\n                 <h3>\r\n                     Pleiades Identifiers\r\n                 </h3>\r\n                 <p>\r\n                     Not every place has an identifier, so leave blank if need be.\r\n                 </p>\r\n               \r\n             </div>\r\n           <div class=\"modal-footer\">\r\n               <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\r\n           </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Modal start -->\r\n    <div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n       <div class=\"modal-dialog\">\r\n          <div class=\"modal-content\">\r\n             <div class=\"modal-header\">\r\n                 <h1 class=\"lead\">\r\n                     Photo-tagging Tutorial\r\n                 </h1>\r\n             </div><!-- Modal header -->\r\n             <div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                    The application is really simple. It loads a photo from our <a href=\"http://flickr.com/micropasts\">Flickr feed</a> and asks you to <strong>tag all the elements that you recognise</strong>. These can be anything from a <i>column</i> to a <i>camel</i>, an activity taking place such as <i>agriculture</i> or <i>transport</i>, a certain cultural group of people such as <i>Bedouin</i> or <i>European</i> - or even specific individuals, and/or more general themes such as simply <i>architecture</i>.\r\n                </p>\r\n                <p>\r\n                    You then hover the mouse over the elements that you identify, and then by clicking and dragging you will draw a box. A text box will appear, in which you will be able to type the name of that element and save it.\r\n                </p>\r\n                <p>\r\n                   If you recognise a specific person in the photo, this is great! Please tag their names in this way: <i>Last name, first name</i>; for example: Horsfield, George.\r\n                </p>\r\n                <p>\r\n                    <img src=\"https://farm3.staticflickr.com/2918/14443363844_d99632eb9b.jpg\" width=\"100%\" alt=\"An example of the tagging interface\"/>\r\n                </p>\r\n                <p>\r\n                    You can do this as many times as you want. If you wish to edit a tag or delete it altogether, you can do this by hovering over the relevant box, and then selecting either the pencil tool for editing, or the 'x' for deleting.\r\n                </p>\r\n                \r\n             </div>\r\n             <div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                    As you can see, you have four buttons representing four categories of suggested keywords: Activity, Things, Theme and People. Clicking on each one of these will bring up a list of suggested keywords to be used in tagging. You can refer to these lists when tagging each photo, but you can also add your own tags. Both annotating elements on the photograph and selecting keywords from these lists are very helpful.\r\n                </p>\r\n                <p>\r\n                    Additional information incldues the photo's ID (starts with P2008, and appears in almost all photos), the photo's orientation (landscape, portrait, or other if it's a square), as well as comments, if you have anything else you want to mention. If the photo has a caption, please try to transcribe it as accurately as possibly into the transcribe label box.\r\n                </p>\r\n                <p>\r\n                    We would also like your help to give the photograph coordinates and a Pleiades Identifier. If you go to the geo-code section on the right hand side and type a place name (refer to mapping hints for help) you can select the place depicted in the photo. Once you have done this, try choosing a Pleiades Identifier from the drop down list below.\r\n                </p>\r\n                <img src=\"http://micropasts.org/wp-content/uploads/2014/09/Jerash_Geocoder.png\" width=\"100%\" alt=\"Geocoder view\" />\r\n                <p>&nbsp;</p>\r\n                <p>\r\n                    During the task, you can always return to this tutorial via the <i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial button.\r\n                </p>\r\n                <p>\r\n                    To find out how the project is progressing, to suggest changes to this application or to propose new research ideas based what you have tagged, please have a look at our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n             </div>\r\n          <!-- End of stepped modal body -->\r\n\r\n          <!-- Modal footer -->\r\n          <div class=\"modal-footer\">\r\n             <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n             <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n             <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- Modal end -->\r\n    <!-- Enable the multi selects -->\r\n    <script>\r\n        $(document).ready(function() {\r\n            $(\"#acti\").tooltip({\r\n                placement: $(this).data(\"placement\") || 'top'\r\n            });\r\n            $( \"#reset\" ).on( \"click\", function() {\r\n              \tanno.removeAll();\r\n  \t\t\t\tconsole.log('Reset fired');\r\n\t\t\t});\r\n          \t$(\"#pleiadesID\").select2();\r\n            $(\"#orientation\").select2();\r\n          \t$(\"#skip\").click(function() {\r\n    \t\t$('html, body').animate({\r\n        \t\tscrollTop: $(\"#title\").offset().top\r\n    \t\t\t}, 500);\r\n\t\t\t});\r\n                $(\"#top\").click(function() {\r\n    \t\t$('html, body').animate({\r\n        \t\tscrollTop: $(\"#step1\").offset().top\r\n    \t\t\t}, 500);\r\n\t\t\t});\r\n            \r\n//            $('.multiselect').multiselect({\r\n//            numberDisplayed: 2,\r\n//            enableFiltering: true\r\n//            });\r\n        });\r\n    </script>\r\n\r\n    <!-- The modal steps -->\r\n    <script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n       $(\"#\" + step).hide();\r\n       if (action == 'next') {\r\n          step = step + 1;\r\n       }\r\n       if (action == 'prev') {\r\n          step = step - 1;\r\n       }\r\n       if (step == 0) {\r\n          $(\"#prevBtn\").hide();\r\n       }\r\n       else {\r\n          $(\"#prevBtn\").show();\r\n       }\r\n       if (step == 1) {\r\n          $(\"#nextBtn\").hide();\r\n          $(\"#startContrib\").show();\r\n       }\r\n       $(\"#\" + step).show();\r\n    }\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n    </script>\r\n\r\n    <!-- The geocoder -->\r\n    <script>\r\n    var geocoder;\r\n    var map;\r\n    var marker;\r\n\r\n    function initialize(){\r\n    //MAP\r\n      var latlng = new google.maps.LatLng(31.95, 35.94);\r\n     \r\n      var osm = new google.maps.ImageMapType({\r\n        getTileUrl: function (coord, zoom) {\r\n            return \"http://tile.openstreetmap.org/\" +\r\n                zoom + \"/\" + coord.x + \"/\" + coord.y + \".png\";\r\n\r\n        },\r\n        tileSize: new google.maps.Size(256, 256),\r\n        isPng: true,\r\n        alt: \"OpenStreetMap layer\",\r\n        name: \"OSM\",\r\n        maxZoom: 18,\r\n        minZoom: 1\r\n        });\r\n     \r\n      var imperium = new google.maps.ImageMapType({\r\n        getTileUrl: function (coord, zoom) {\r\n            return \"http://finds.org.uk/imperium/\" +\r\n                zoom + \"/\" + coord.x + \"/\" + coord.y + \".png\";\r\n        },\r\n        tileSize: new google.maps.Size(256, 256),\r\n        isPng: true,\r\n        alt: \"Imperium layer\",\r\n        name: \"Imperium\",\r\n        maxZoom: 11,\r\n        minZoom:3\r\n        });\r\n      \r\n      var options = {\r\n        zoom: 9,\r\n        center: latlng,\r\n        mapTypeControlOptions: {\r\n          mapTypeIds: [\r\n          google.maps.MapTypeId.ROADMAP,\r\n          google.maps.MapTypeId.HYBRID,\r\n          google.maps.MapTypeId.TERRAIN,\r\n          google.maps.MapTypeId.SATELLITE,\r\n          'Imperium',\r\n          'OSM'\r\n          ]\r\n    \t  },\r\n    \t  mapTypeControl: true,\r\n    \t  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,\r\n          scaleControl: true,\r\n    \t  zoomControl: true,\r\n          mapTypeId: 'Imperium',\r\n          scrollwheel: false,\r\n        };\r\n      \t\r\n      map = new google.maps.Map(document.getElementById(\"map\"), options);\r\n      map.mapTypes.set('OSM', osm);\r\n      map.mapTypes.set('Imperium',imperium);\r\n\r\n      //GEOCODER\r\n      geocoder = new google.maps.Geocoder();\r\n      \r\n      marker = new google.maps.Marker({\r\n        map: map,\r\n        draggable: true\r\n      });\r\n      \r\n    }\r\n\r\n    $(document).ready(function() {\r\n\r\n      initialize();\r\n      var bounds;\r\n      google.maps.event.addListenerOnce(map, 'idle', function(){\r\n      bounds = map.getBounds();\r\n      console.log('Map bounds: ' +  bounds);\r\n      return bounds;\r\n      });\r\n\r\n      \r\n      $(function() {\r\n          \r\n        $(\"#toSearch\").autocomplete({\r\n          //This bit uses the geocoder to fetch address values\r\n          source: function(request, response) {\r\n            console.log('Map bounds: ' +  bounds);            \r\n            geocoder.geocode( {'address': request.term, 'bounds': bounds, 'region': 'jo'}, function(results, status) {\r\n              response($.map(results, function(item) {\r\n                return {\r\n                  label:  item.formatted_address,\r\n                  value: item.formatted_address,\r\n                  latitude: item.geometry.location.lat(),\r\n                  longitude: item.geometry.location.lng()\r\n                }\r\n              }));\r\n            })\r\n          },\r\n          //This bit is executed upon selection of an address\r\n          select: function(event, ui) {\r\n            $(\"#lat\").val(ui.item.latitude);\r\n            $(\"#lon\").val(ui.item.longitude);\r\n            var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);\r\n            console.log('Latitude: ' + ui.item.latitude);\r\n            console.log('Longitude: ' + ui.item.longitude);\r\n            console.log(location);\r\n            marker.setPosition(location);\r\n            map.setCenter(location);\r\n          }\r\n        });\r\n      });\r\n\r\n      //Add listener to marker for reverse geocoding\r\n      google.maps.event.addListener(marker, 'drag', function() {\r\n        geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {\r\n          if (status == google.maps.GeocoderStatus.OK) {\r\n            if (results[0]) {\r\n              $('#toSearch').val(results[0].formatted_address);\r\n              $('#lat').val(marker.getPosition().lat());\r\n              $('#lon').val(marker.getPosition().lng());\r\n              console.log('Longitude: ' + marker.getPosition().lng());\r\n              console.log('Latitude: ' + marker.getPosition().lat());\r\n            }\r\n          }\r\n        });\r\n      });\r\n\r\n    });\r\n\r\n    </script>\r\n\r\n   \r\n    <!-- Load user progress -->\r\n    <script>\r\n\r\n    function loadUserProgress() {\r\n        pybossa.userProgress('phototaggingHorsfield').done(function(data){\r\n\r\n            console.log(\"Total answers done for user: \" + data.done);\r\n\r\n            if ((data.done == 1) && ($.cookie('surveyHorsfield') == undefined)){\r\n               $(\"#survey\").modal('show');\r\n               $.cookie('surveyHorsfield', 'shown', { path: '/'});\r\n            }\r\n            if ((data.done >= 25) && ($.cookie('survey25Horsfield') == undefined)){\r\n                $(\"#survey25\").modal('show');\r\n                $.cookie('survey25Horsfield', 'shown', { path: '/'});\r\n            }\r\n            var pct = Math.round((data.done*100)/data.total);\r\n            $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n            $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n            $(\"#progress\").tooltip({'placement': 'left'});\r\n            $(\"#total\").text(data.total);\r\n            $(\"#done\").text(data.done);\r\n            $('a[rel]').tooltip({'placement': 'left'});\r\n            $('#pleiadesID').tooltip();\r\n            $('#horsfields').tooltip();\r\n        });\r\n    }\r\n\r\n    pybossa.taskLoaded(function(task, deferred) {\r\n        if ( ! $.isEmptyObject(task) ) {\r\n            loadUserProgress();\r\n            // load image from flickr\r\n          var img = $('<img width=\"100%\" style=\"height:auto;\" />');\r\n            img.load(function() {\r\n                // continue as soon as the image is loaded\r\n                deferred.resolve(task);\r\n                $(\"#status\").text(\"Photo loaded!\");\r\n\r\n            });\r\n            \r\n            img.attr('src', task.info.url_b);\r\n            img.attr('id', 'anno_' + task.id);\r\n            img.addClass('img-polaroid');\r\n            img.addClass('annotable');\r\n            task.info.image = img;\r\n        }\r\n        else {\r\n            deferred.resolve(task);\r\n        }\r\n    });\r\n      $(window).resize(function(){\r\n        console.log('Window resized');\r\n      });\r\n      \r\n\r\n    pybossa.presentTask(function(task, deferred) {\r\n        if ( !$.isEmptyObject(task) ) {\r\n            $('#photo-link').html('').append(task.info.image);\r\n            $('#task-id').html(task.id);\r\n            $(\"a#raw\").attr(\"href\", task.info.url_b);\r\n            $(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n            $(\"a#down\").attr(\"download\", task.id);\r\n            $(\"a#down\").attr(\"href\", task.info.url_b );\r\n            $(\".fancybox\").fancybox();\r\n            $('#imgLink').tooltip();\r\n            $(\"[rel=tooltip]\").tooltip();\r\n            $(\"#btn-submit\").html(\"<i class='icon-repeat'></i> I don't recognise anything, try next one\");\r\n            $(\"#btn-submit\").removeClass(\"btn-success\");\r\n            \r\n            anno.makeAnnotatable(document.getElementById('anno_' + task.id));\r\n\r\n            anno.addHandler('onAnnotationCreated', function(annotation) {\r\n                console.log(annotation.text);\r\n                $(\"#btn-submit\").html(\"<i class='icon icon-save'></i> Save current annotations\");\r\n                $(\"#btn-submit\").addClass(\"btn-success\");\r\n            });\r\n\r\n\r\n            $('.btn-answer').off('click').on('click', function(evt) {\r\n                var answer = $(evt.target).attr(\"value\");\r\n                if (typeof answer != 'undefined') {\r\n                    console.log(answer);\r\n                    task.answer = $(\"#phototagging\").serializeJSON();\r\n                    task.answer.annotations = anno.getAnnotations();\r\n                    task.answer.theme = $('#theme').val();\r\n                    task.answer.people = $('#people').val();\r\n                    task.answer.things = $('#things').val();\r\n                    task.answer.activities = $('#activities').val();\r\n                    var geojson = {\r\n                       \"geometry\": {\r\n                            \"type\": \"Point\",\r\n                            \"coordinates\": [\r\n                                        $('#lon').val(),\r\n                                        $('#lat').val()\r\n                                ]\r\n                        }\r\n                    };\r\n                    console.log(geojson);\r\n                    task.answer.geojson = geojson;\r\n                    console.log(task.answer);\r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(500);\r\n                        deferred.resolve();\r\n                    });\r\n                    \r\n                    $('input').val('');\r\n                    $('select').val('');\r\n\r\n                    $('#pleiadesID').select2(\"val\", \"\");\r\n                    $('#orientation').select2(\"val\", \"\");\r\n                    $('#lat').val('');\r\n                    $('#lon').val('');\r\n                    $('#imageID').val('');\r\n                    $('#keywordsUser').val('');\r\n                    $('#imageLabel').val('');\r\n                    $('#comments').val('');\r\n                  \tmarker.setMap(null);\r\n                  \tmarker = new google.maps.Marker({\r\n        \t\t\t\tmap: map,\r\n        \t\t\t\tdraggable: true\r\n      \t\t\t\t});\r\n                    $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                } else {\r\n                    $(\"#error\").show();\r\n                }\r\n            });\r\n            $(\"#loading\").hide();\r\n        } else {\r\n            $(\".skeleton\").hide();\r\n            $(\"#loading\").hide();\r\n            $(\"#finish\").fadeIn(500);\r\n        }\r\n    });\r\n    pybossa.run('phototaggingHorsfield');\r\n\r\n    </script>"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/29'/>"}, {"id": 30, "created": "2014-06-16T11:36:58.046540", "updated": "2015-02-25T08:42:32.029079", "name": "Photo Masking Petrie Museum Shabti", "short_name": "photomaskingPetrie", "description": "Photo masking application of Petrie Museum Shabti", "long_description": "This application enables the creation of a high quality 3D model of an\narchaeological artefact via process known as photo-masking. There has been a\nrevolution in 3D modelling in recent years and it is now relatively easy to\nconstruct such models from ordinary digital photographs. Isolating the object\ndepicted in these photographs, and masking out the background, is an important\nfirst step to achieving high quality results. The final 3D model will be made\npublicly available and is useful not only for basic documentation purposes,\nbut also for graphical displays in museums, for inclusion in gaming and\nvirtual reality environments, or for identifing different sub-styles in\notherwise similar types of artefact (that might tell us about the date of the\nartefact, where it was made, or by whom).\n\nThis particular photo-masking application is dedicated to one object hosted by\nUCL Petrie Museum - an Egyptian funerary figure, also known as a shabti. This\nsmall mould-made pale green faience shabti is inscribed with the name of the\nowner, Djed-khonsu-iwf-ankh. The standing figure is mummy-like in shape and\nwears a wig with a filet tied in the back. Shabtis like this one were made to\ncarry out any tasks, particularly agricultural chores, that the deceased might\nbe asked to do in the afterlife. For this reason, he carries a hoe in each\nhand and has a basket slung over his shoulder. The figure was probably found\nat Abydos and dates to the 22nd Dynasty (946/45 - about 735 BC). This is one\nof a group of 13 similar shabtis in the museum belonging to this individual\nalthough other examples from this group are also in other museums.\n\nWe would like people to draw a polygon around the shabti that they see in each\nphotograph in order to identify its outline and exclude the image background.\nThis allows the 3D modelling process to concentrate on the object itself and\nignore irrelevant background information.\n\nIf you are interested in what a 3D completed model looks like, please have a\nlook at the example [here](http://micropasts.org/3D) for a MicroPasts palstave\nmodel, or [here](http://www.ucl.ac.uk/3dpetriemuseum/3dobjects/UC29999A) for a\nsimilar shabti model.\n\n### Thank you!\n\nJeff Okazaki, Leland Sorenson, Latifa Walker, Joellen mcGann, Mart\u00ed Blesa,\nHelena Jaeschke, Nicky van de Beek, Valeria Vitale, Dina and other anonymous\ncontributors.\n\n### This project is on behalf of\n\n![UCL Petrie Museum of Egyptian Archaeology](http://adi.micropasts.org/wp-\ncontent/uploads/sites/3/2014/06/Petrie-Logo.jpeg)\n\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"tutorial": "<div id=\"modal\" class=\"modal fade\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h3>Photo-masking tutorial for 3D modelling </h3>\r\n            </div>\r\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                This application is very simple (but it does not yet work on mobile devices). When you participate, the platform will load a photograph of an archaeological artefact. Once the image has been loaded, you will be asked to click or tap around the edge of the artefact in order to define a polygon outline. Click once every time you wish to add a point along the edge of the polygon and your final point will snap back onto the one you started with. You can draw one polygon around the entire object or instead draw a series of overlapping polygons if you prefer. In general, we would like you to draw your polygon(s) very slightly inside the actual edge of the artefact. This is because we don't want background pixels near this edge to create a fuzzy border, and we don't need to worry so much about losing a bit of the artefact edge, as the missing few pixels are very likely to appear in one of the other photographs (at least 40 overlapping photographs are likely to exist for each object to support the construction of the 3D model). An example of a successful outline is shown below:\r\n                </p>\r\n                <img src=\"https://farm6.staticflickr.com/5193/14464187403_05fd8df3b0.jpg\" width=\"500\" height=\"212\" class=\"img-polaroid\" alt=\"An example of an artefact photograph whose outline has been defined\" />\r\n            </div>\r\n\r\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                During the task, you can always return to this tutorial via the \"Tutorial\" button. \r\n                </p>\r\n                <p>\r\n                An example of a finished <a href=\"http://micropasts.org/3D\">3D model</a> has now been completed.    \r\n                </p>\r\n                  <p>\r\n                To find out how the project is progressing, to suggest changes to this application or to propose new research ideas based what you have photo-masked, please have a look at our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n            </div>\r\n\r\n            <div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <a id=\"startContrib\" href=\"../photomaskingPetrie/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n      </div>\r\n</div>\r\n</div>\r\n\r\n\r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 1 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n", "container": "user_12", "thumbnail": "app_30_thumbnail_1424853752.png", "task_presenter": "<link rel=\"stylesheet\" href=\"http://ol3js.org/en/master/css/ol.css\" type=\"text/css\">\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<style>\r\n#map {\r\n    background-color: grey;\r\n}\r\n.ol-zoom a,\r\n.ol-zoom-extent a,\r\n.ol-full-screen a{\r\n  display: block;\r\n  margin: 1px;\r\n  padding: 0;\r\n  color: white;\r\n  font-size: 1.14em;\r\n  font-weight: bold;\r\n  text-decoration: none;\r\n  text-align: center;\r\n  height: 1.375em;\r\n  width: 1.375em;\r\n  line-height: 1.4em;\r\n  background-color: #7b98bc;\r\n  background-color: rgba(0,60,136,0.5);\r\n  border: none;\r\n}\r\n.ol-zoom a::-moz-focus-inner,\r\n.ol-zoom-extent a::-moz-focus-inner,\r\n.ol-full-screen a::-moz-focus-inner {\r\n  border: none;\r\n  padding: 0;\r\n}\r\n.ol-zoom-extent a {\r\n  line-height: 1.4em;\r\n}\r\n.ol-touch .ol-zoom a,\r\n.ol-touch .ol-full-screen a,\r\n.ol-touch .ol-zoom-extent a{\r\n  font-size: 1.5em;\r\n}\r\n.ol-touch .ol-zoom-extent {\r\n  top: 5.5em;\r\n}\r\n.ol-zoom a:hover,\r\n.ol-zoom a:focus,\r\n.ol-zoom-extent a:hover,\r\n.ol-zoom-extent a:focus,\r\n.ol-full-screen a:hover,\r\n.ol-full-screen a:focus {\r\n  text-decoration: none;\r\n  background-color: #4c6079;\r\n  background-color: rgba(0,60,136,0.7);\r\n}\r\n.ol-zoom-extent a:after {\r\n    content: \"E\";\r\n}\r\n.ol-zoom-in {\r\n  border-radius: 2px 2px 0 0;\r\n}\r\n.ol-zoom-out {\r\n  border-radius: 0 0 2px 2px;\r\n}\r\na.ol-full-screen-false:after {\r\n  content: \"\\2194\";\r\n}\r\na.ol-full-screen-true:after {\r\n  content: \"\\00d7\";\r\n}\r\n\r\n.ol-zoom-extent a,\r\n.ol-attribution,\r\n.ol-full-screen a,\r\n.ol-scale-line-inner,\r\n.ol-zoom a,\r\n.ol-has-tooltip [role=tooltip] {\r\n  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;\r\n}\r\n</style>\r\n<script src=\"/static/js/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/ol3photomask.js\" type=\"text/javascript\"></script>\r\n<style>\r\n    .map {\r\n        height: 500px;\r\n        width: 100%;\r\n    }\r\n\r\n</style>\r\n\r\n<!--\r\n    Task DOM for loading the S3 Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n<div class=\"row skeleton\"> \r\n    <div class=\"col-md-12\">\r\n    \r\n        <div class=\"btn-group pull-right\">\r\n        \t\t<button class=\"btn btn-info btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</button>\r\n        \t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n        </div>\r\n        \r\n        <h1 id=\"step1\">Draw the outline of the main object shown in the picture</h1>\r\n        <div class=\"btn-group\">\r\n            <button id=\"status\" type=\"button\" class=\"btn btn-default btn-type disabled\" name=\"loading\" value=\"loading\">Loading photo</button>\r\n            <button id=\"outline\" type=\"button\" class=\"btn btn-default btn-type active\" name=\"outline\" value=\"outline\">Outline</button>\r\n            <!-- button id=\"holes\" type=\"button\" class=\"btn btn-default btn-type\" name=\"holes\" value=\"holes\">Holes</button -->\r\n        </div>\r\n        <div class=\"btn-group\">\r\n            <button id=\"draw\" type=\"button\" class=\"btn btn-default btn-draw active\" name=\"draw\" value=\"draw\">Draw</button>\r\n            <button id=\"edit\" type=\"button\" class=\"btn btn-default btn-draw\" name=\"edit\" value=\"edit\">Edit</button>\r\n            <button id=\"delete\" type=\"button\" class=\"btn btn-default btn-draw\" name=\"delete\" value=\"delete\">Remove all polygons</button>\r\n        </div>\r\n        <div class=\"btn-group\">\r\n\r\n            <button id=\"btn-save\" class=\"btn btn-success btn-answer\" value='save'><i class=\"icon icon-white icon-save\"></i> Save the drawings</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"row\">\r\n    <!-- Success and Error Messages for the user --> \r\n    <div class=\"col-md-6 col-md-offset-2\" style=\"height:50px\">\r\n        <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n            <a class=\"close\">\u00d7</a>\r\n            <strong>Well done!</strong> Your answer has been saved\r\n        </div>\r\n        <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n            <a class=\"close\">\u00d7</a>\r\n            Loading next task...\r\n        </div>\r\n        <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n            <strong>The task has been completed!</strong> Thanks a lot!\r\n        </div>\r\n        <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n            <strong>Congratulations!</strong> You have participated in all available tasks!\r\n            <br/>\r\n            <div class=\"alert-actions\">\r\n                <a class=\"btn small\" href=\"/\">Go back</a>\r\n                <a class=\"btn small\" href=\"/app\">or, Check other applications</a>\r\n            </div>\r\n        </div>\r\n        <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n            <a class=\"close\">\u00d7</a>\r\n            <strong>Error!</strong> Something went wrong, please contact the site administrators\r\n        </div>\r\n    </div> <!-- End Success and Error Messages for the user -->\r\n</div> <!-- End of Row -->\r\n\r\n<div class=\"row skeleton\"> <!-- Start Skeleton Row-->\r\n    <div class=\"span8\"><!-- Start of Photo DIV (column) -->\r\n        <div id=\"map\" class=\"img-polaroid\"></div>\r\n    </div><!-- End of Photo DIV (columnt) -->\r\n    <div class=\"span4\"><!-- Start of Question and Submission DIV (column) -->\r\n        <!-- Feedback items for the user -->\r\n        <p>You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span></p>\r\n        <p>You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" class=\"progress-bar\" role=\"progressbar\" rel=\"tooltip\" title=\"#\" class=\"bar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\r\n        <div id=\"answer\"> <!-- Start DIV for the submission buttons -->\r\n        </div><!-- End of DIV for the submission buttons -->\r\n       \r\n\r\n    </div><!-- End of Question and Submission DIV (column) -->\r\n\r\n</div><!-- End of Skeleton Row -->\r\n\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Hey there! Do you want to help us?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        Thanks for contributing one task for the project. We are interested in knowing how you found out about us. <strong>Could you please answer two questions in a short survey?</strong>\r\n       \r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\" width=\"100%\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1bIAWX6qcDfSgQ0IsD3SY3BIrqy7Z-bwp3W8QA8aw7wU/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Congrats for completing 25 tasks!</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        Thanks for contributing 25 tasks for the project. Now that you have been using MicroPasts for a while, we would like to know how you found it. <strong>Could you please answer a few questions in a short survey?</strong>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1uczUGGYbrQ2FQfTtM8j4vfGr2qwcCMW6PLwzfvZZ6kI/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n               <h3>Photo-masking tutorial for 3D modelling </h3>\r\n            </div>\r\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                This application is very simple (but it does not yet work on mobile devices). When you participate, the platform will load a photograph of an archaeological artefact. Once the image has been loaded, you will be asked to click or tap around the edge of the artefact in order to define a polygon outline. Click once every time you wish to add a point along the edge of the polygon and your final point will snap back onto the one you started with. You can draw one polygon around the entire object or instead draw a series of overlapping polygons if you prefer. In general, we would like you to draw your polygon(s) very slightly inside the actual edge of the artefact. This is because we don't want background pixels near this edge to create a fuzzy border, and we don't need to worry so much about losing a bit of the artefact edge, as the missing few pixels are very likely to appear in one of the other photographs (at least 40 overlapping photographs are likely to exist for each object to support the construction of the 3D model). An example of a successful outline is shown below:\r\n                </p>\r\n                <img src=\"https://farm6.staticflickr.com/5193/14464187403_05fd8df3b0.jpg\" width=\"500\" height=\"212\" class=\"img-polaroid\"\r\n                     alt=\"An example of an artefact photograph whose outline has been defined\" />\r\n            </div>\r\n\r\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                During the task, you can always return to this tutorial via the \"Tutorial\" button. \r\n                </p>\r\n                <p>\r\n                An example of a finished <a href=\"http://micropasts.org/3D\">3D model</a> has now been completed.\t\r\n                </p>\r\n            \t  <p>\r\n                To find out how the project is progressing, to suggest changes to this application or to propose new research ideas based what you have photo-masked, please have a look at our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n            </div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n<script type=\"text/javascript\">\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 1) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<script>\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('photomaskingPetrie').done(function(data){\r\n        if ((data.done == 1) && ($.cookie('survey') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('survey', 'shown', { path: '/'});\r\n        }\r\n        if ((data.done == 25) && ($.cookie('survey25') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25', 'shown', { path: '/'});\r\n        }\r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'}); \r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        div_map.css(\"height\", \"500px\");\r\n        div_map.css(\"width\", \"100%\");\r\n        $(\"#draw\").addClass(\"disabled\");\r\n        $(\"#edit\").addClass(\"disabled\");\r\n        $(\"#delete\").addClass(\"disabled\");\r\n        $(\"#outline\").addClass(\"disabled\");\r\n        $(\"#holes\").addClass(\"disabled\");\r\n        $(\"#map\").append(div_map);\r\n        div_map.attr(\"id\", \"map_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n            $(\"#draw\").removeClass(\"disabled\");\r\n            $(\"#edit\").removeClass(\"disabled\");\r\n            $(\"#delete\").removeClass(\"disabled\");\r\n            $(\"#outline\").removeClass(\"disabled\");\r\n            $(\"#holes\").removeClass(\"disabled\");\r\n            $(\"#status\").text(\"Photo loaded!\");\r\n        });\r\n        img.attr('src', task.info.url_b).css('height', 460);\r\n        console.log(task.info.url_b);\r\n        img.addClass('img-polaroid');\r\n        task.info.image = img;\r\n\r\n        // Maps always need a projection, but the static image is not geo-referenced,\r\n        // and are only measured in pixels.  So, we create a fake projection that the\r\n        // map can use to properly display the layer.\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 5184, 3456]\r\n        });\r\n\r\n        task.styleArray = [new ol.style.Style({\r\n          fill: new ol.style.Fill({\r\n            color: 'rgba(255, 255, 255, 0.2)'\r\n          }),\r\n          stroke: new ol.style.Stroke({\r\n            color: '#ffcc33',\r\n            width: 2\r\n          }),\r\n          image: new ol.style.Circle({\r\n            radius: 7,\r\n            fill: new ol.style.Fill({\r\n              color: '#ffcc33'\r\n            })\r\n          })\r\n        })];\r\n        \r\n        task.source = new ol.source.Vector();\r\n        task.source_holes = new ol.source.Vector();\r\n        \r\n        task.vector = new ol.layer.Vector({\r\n          source: task.source,\r\n          //styleFunction: function(feature, resolution) {\r\n          //  return task.styleArray;\r\n          //}\r\n          style: new ol.style.Style({\r\n                fill: new ol.style.Fill({\r\n                      color: 'rgba(255, 255, 255, 0.2)'\r\n                    }),\r\n                    stroke: new ol.style.Stroke({\r\n                      color: '#ffcc33',\r\n                      width: 2\r\n                    }),\r\n                    image: new ol.style.Circle({\r\n                      radius: 7,\r\n                      fill: new ol.style.Fill({\r\n                        color: '#ffcc33'\r\n                        })\r\n                      })\r\n                    })\r\n          });\r\n\r\n        task.holes = new ol.layer.Vector({\r\n          source: task.source_holes,\r\n          //styleFunction: function(feature, resolution) {\r\n          //  return task.styleArray;\r\n          //}\r\n          style: new ol.style.Style({\r\n                fill: new ol.style.Fill({\r\n                      color: 'rgba(255, 255, 255, 0.2)'\r\n                    }),\r\n                    stroke: new ol.style.Stroke({\r\n                      color: '#00CC99',\r\n                      width: 2\r\n                    }),\r\n                    image: new ol.style.Circle({\r\n                      radius: 7,\r\n                      fill: new ol.style.Fill({\r\n                        color: '#00CC99'\r\n                        })\r\n                      })\r\n                    })\r\n          });\r\n\r\n        task.overlay = new ol.FeatureOverlay({\r\n            style: new ol.style.Style({\r\n                  fill: new ol.style.Fill({\r\n                        color: 'rgba(255, 255, 255, 0.2)'\r\n                      }),\r\n                      stroke: new ol.style.Stroke({\r\n                        color: [0, 153, 255, 1],\r\n                        width: 2\r\n                      }),\r\n                      image: new ol.style.Circle({\r\n                        radius: 7,\r\n                        fill: new ol.style.Fill({\r\n                          color: [0, 153, 255, 1]\r\n                          })\r\n                        })\r\n                      })\r\n        });\r\n\r\n        // Modifiers for vector outline\r\n        task.modify = new ol.interaction.Modify({ \r\n                                                layer: task.vector,\r\n                                                featureOverlay: task.overlay });\r\n        task.select = new ol.interaction.Select({ \r\n                                                layer: task.vector,\r\n                                                featureOverlay: task.overlay });\r\n\r\n        // Modifiers for vector holes\r\n        task.modify_holes = new ol.interaction.Modify({ \r\n                                                layer: task.holes,\r\n                                                featureOverlay: task.overlay });\r\n        task.select_holes = new ol.interaction.Select({ \r\n                                                layer: task.holes,\r\n                                                featureOverlay: task.overlay });\r\n\r\n        task.map = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify, task.select_holes, task.modify_holes]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: '&copy; <a href=\"http://micropasts.org\">Micropasts</a>'\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [5184, 3456],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          , \r\n          task.vector,\r\n          task.holes,\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'map_' + task.id,\r\n          view: new ol.View2D({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 2.25\r\n          })\r\n        });\r\n        var zoomslider;\r\n        zoomslider = new ol.control.ZoomSlider();\r\n        task.map.addControl(zoomslider);\r\n        div_map.css(\"display\", \"none\");\r\n\r\n        var typeSelect = document.getElementById('type');\r\n        \r\n        //task.draw; // global so we can remove it later\r\n        task.draw = new ol.interaction.Draw({\r\n          source: task.source,\r\n          type: 'Polygon',\r\n        });\r\n\r\n        task.draw_holes = new ol.interaction.Draw({\r\n          source: task.source_holes,\r\n          type: 'Polygon',\r\n        });\r\n\r\n        // When the first polygon is completed, remove the drawInteraction\r\n        task.draw.on('drawend', function(evt) {\r\n                task.polygon = true;\r\n                $(\"#btn-save\").removeClass(\"disabled\");\r\n                });\r\n\r\n        // When the first hole is completed, remove the drawInteraction\r\n        task.draw_holes.on('drawend', function(evt) {\r\n                task.holes = true;\r\n                $(\"#btn-save\").removeClass(\"disabled\");\r\n                });\r\n\r\n        task.map.addInteraction(task.draw);\r\n\r\n        task.answer = {\r\n                 'task_id': task.id,\r\n                 'outline': [],\r\n                 'holes': [],\r\n                 'img': task.info.url_b};\r\n        task.polygon = false;\r\n        task.holes = false;\r\n        }\r\n    else {\r\n        deferred.resolve(task);\r\n    }\r\n});\r\n\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(\"#btn-save\").addClass(\"disabled\");\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n\r\n        // Code for drawing outlines or holes\r\n        $('.btn-type').off('click').on('click', function(evt) {\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined'){\r\n                if (answer == 'holes') {\r\n                    $(\"#outline\").removeClass('active');\r\n                    $(\"#holes\").addClass('active');\r\n                    task.map.removeInteraction(task.draw);\r\n                    task.map.addInteraction(task.draw_holes);\r\n                }\r\n                else {\r\n                    $(\"#holes\").removeClass('active');\r\n                    $(\"#outline\").addClass('active');\r\n                    task.map.addInteraction(task.draw);\r\n                    task.map.removeInteraction(task.draw_holes);\r\n                }\r\n            }\r\n        });\r\n\r\n        // Code for editing/drawing polygons\r\n        $('.btn-draw').off('click').on('click', function(evt) {\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined'){\r\n                if (answer == 'draw') {\r\n                    $(\"#edit\").removeClass(\"active\");\r\n                    $(\"#draw\").addClass(\"active\");\r\n                    if ($(\"#outline\").hasClass(\"active\")) {\r\n                        task.map.removeInteraction(task.modify);\r\n                        task.map.removeInteraction(task.select);\r\n                        task.map.addInteraction(task.draw);\r\n                    }\r\n                    else {\r\n                        task.map.removeInteraction(task.modify_holes);\r\n                        task.map.removeInteraction(task.select_holes);\r\n                        task.map.addInteraction(task.draw_holes);\r\n                    }\r\n                }\r\n                if (answer == 'edit') {\r\n                    $(\"#draw\").removeClass(\"active\");\r\n                    $(\"#edit\").addClass(\"active\");\r\n                    if ($(\"#outline\").hasClass(\"active\")) {\r\n                        task.map.removeInteraction(task.draw);\r\n                        task.map.addInteraction(task.select);\r\n                        task.map.addInteraction(task.modify);\r\n                    }\r\n                    else {\r\n                        task.map.removeInteraction(task.draw_holes);\r\n                        task.map.addInteraction(task.select_holes);\r\n                        task.map.addInteraction(task.modify_holes);\r\n                    }\r\n                }\r\n\r\n                if (answer == 'delete') {\r\n                    if ($(\"#outline\").hasClass(\"active\")) {\r\n                        $(\"#draw\").removeClass(\"active\");\r\n                        $(\"#edit\").removeClass(\"active\");\r\n                        $(\"#delete\").addClass(\"active\");\r\n                        var features = task.source.getAllFeatures();\r\n                        for(i=0;i<features.length;i++) {\r\n                            task.source.removeFeature(features[i]);\r\n                        }\r\n                        task.polygon = false;\r\n                        $(\"#draw\").addClass(\"active\");\r\n                        $(\"#delete\").removeClass(\"active\");\r\n                    }\r\n                    else {\r\n                        $(\"#draw\").removeClass(\"active\");\r\n                        $(\"#edit\").removeClass(\"active\");\r\n                        $(\"#delete\").addClass(\"active\");\r\n                        var features = task.source_holes.getAllFeatures();\r\n                        for(i=0;i<features.length;i++) {\r\n                            task.source_holes.removeFeature(features[i]);\r\n                        }\r\n                        task.holes = false;\r\n                        $(\"#draw\").addClass(\"active\");\r\n                        $(\"#delete\").removeClass(\"active\");\r\n                    }\r\n                }\r\n\r\n                }});\r\n\r\n\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined'){\r\n                //console.log(answer);\r\n                //console.log(task.map.source.features);\r\n                console.log(task.source.features);\r\n\r\n                if (task.polygon) {\r\n                    var features = task.source.getAllFeatures();\r\n                    var polygons = [];\r\n                    for(i=0;i<features.length;i++) {\r\n                        var g = features[i].getGeometry();\r\n                        polygons.push(g.getCoordinates());\r\n                    }\r\n                    //task.answer = {\r\n                    //    'task_id': task.id,\r\n                    //    'polygon': polygons,\r\n                    //    'img': task.info.url_b};\r\n                    task.answer.outline = polygons;\r\n\r\n                    if (task.holes) {\r\n                        var features = task.source_holes.getAllFeatures();\r\n                        var polygons = [];\r\n                        for(i=0;i<features.length;i++) {\r\n                            var g = features[i].getGeometry();\r\n                            polygons.push(g.getCoordinates());\r\n                        }\r\n\r\n                        task.answer.holes = polygons;\r\n                    }\r\n\r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                    \t$(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        \r\n                        deferred.resolve();\r\n                        $(\"#map_\" + task.id).remove();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                } // end if task.polygon\r\n            }\r\n            else {\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n    $('#imgLink').tooltip();\r\n\r\n        \r\n});\r\n\r\npybossa.run('photomaskingPetrie');\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/30'/>"}, {"id": 40, "created": "2014-08-15T15:50:31.055132", "updated": "2015-02-25T08:42:31.850283", "name": "British Museum Bronze Age Index: River Thames", "short_name": "riverThames", "description": "British Museum Bronze Age Card Index transcription for implements from the river Thames.", "long_description": "This application will help the [British\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\nNeil Wilkin, to make available a huge card catalog of British prehistoric\nmetal artefacts discovered in the 19th and 20th century. This information has\nlong been known to be an extremely important untapped resource. Metal finds\nare not only crucial forms of evidence for dating Britain's prehistoric past,\nbut also tell us a great deal about prehistoric society and economy.\nDigitising the thousands of objects in this catalog will make these records\npublicly available via their incorporation into the [Portable Antiquities\nScheme website](http://finds.org.uk). The result will be the largest national\ndatabase of prehistoric metal finds anywhere in the world and a near\ncomprehensive view of what we currently know about such finds in the UK.\n\nThe cards have been scanned and uploaded to\n[Flickr](https://www.flickr.com/photos/micropasts/sets/72157642679582423/),\nand it is from there that the current application will retrieve and manipulate\nthe scans. These cards contain some fairly standardised kinds of information:\nabout where the artefact was discovered, its dimensions, a longer description\nof what it looks like, etc.\n\nWhat the research team would like people to do, is to transcribe the details\nfrom each section on the card into some pre-determined fields, and also to\nattempt to geo-reference the object via its place of discovery.\n\n### Thank you!\n\nLucy Ellis, Hugh Fiske, Jared Obermeyer, Cheryl Ellsworth, Mary Thomson,\nElaine Dale, Jeff Okazaki, Terry Jackson-Baker, Latifa Walker, Joellen mcGann,\nPeggy Green, Dina, Miles Deverson, scruffyarcher, Anne Richmond-Patrick,\nMargaret Ellen Joy, Taissa Csaky, Nina Sharman, Tim Mudie, Jane Fellows, Luis\nKohl, Claire_M, Soph Davies, Tom Hill, Rhiannon Davies, Chris Moss, Mandy\nRowan Crawford, Lee Kossin, Mathew Chambers, Swantje Dogunke, Elaine Kelly,\nHelena Fox, Laura, Sonsoles Garc\u00eda Gonz\u00e1lez, Shane Grant, Sarah Read, Denis\nAntoine, \u03a3\u03b5\u03c1\u03b1\u03c6\u03b5\u03af\u03bc \u039c\u03b9\u03c3\u03b9\u03c1\u03bb\u03cc\u03b3\u03bb\u03bf\u03c5, Tom Blackie, Olga Michalaka, David McCutchen,\nLuke Miller and several anonymous contributors.\n\n### This project is on behalf of\n\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\nBritish Museum logo](/static/img/bmBlackWhite.png)\n\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"tutorial": "<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\n            <div class=\"modal-header\">\n                <h3 class=\"lead\">BM Bronze Age Index (River Thames) transcription tutorial</h3>\n            </div>\n\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    This application is very simple, but does require you to use your own judgment in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalog\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the\n                    index card and the line drawing of the object from the reverse side.\n                    An example of the front side of a card is shown below.\n                </p>\n\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n\n                <p>\n                    Each index card contains similar information and we are asking you to enter this information\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\n                    will hint that this information can be found \"Top of card\").\n                </p>\n\n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\n                        both entries that should be entered in the the Collection box, so you could simply enter\n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n\n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and\n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n\n            </div>\n\n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or\n                propose new research ideas based what you have transcribed, please have a look at\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../riverThames/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_40_thumbnail_1424853751.png", "task_presenter": "<link rel=\"stylesheet\" href=\"http://ol3js.org/en/master/css/ol.css\" type=\"text/css\">\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n\r\n<script src=\"http://ol3js.org/en/master/build/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\r\n<script src=\"http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n\r\n\r\n<style type=\"text/css\">\r\n    label {\r\n        font-size:16px;\r\n    }\r\n    #map_canvas label {\r\n        width: auto;\r\n        display: inline;\r\n    }\r\n    #map_canvas img {\r\n        max-width: none;\r\n    }\r\n    .affix {\r\n        width: inherit;\r\n        height: 0px;\r\n    }\r\n  \r\n    .affix-bottom {\r\n        top: auto !important;\r\n        position: fixed;\r\n        bottom: 240px;\r\n    }\r\n    \r\n    #imgContainer {\r\n        height: 390px;\r\n        width: 600px;\r\n    }\r\n\r\n</style>\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Hey there! Do you want to help us?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          Thanks for contributing one task for the project. We are interested in knowing how you found out about us. <strong>Could you please answer two questions in a short survey?</strong>\r\n\r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\" width=\"100%\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Congrats for completing 25 tasks!</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          Thanks for contributing 25 tasks for the project. Now that you have been using MicroPasts for a while, we would like to know how you found it. <strong>Could you please answer a few questions in a short survey?</strong>\r\n\r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\r\n    <!-- Success and Error Messages for the user -->\r\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\r\n        <strong>Sorry, but your browser does not support the current application. If you want to contribute, please, upgrade to a modern web browser like the open source and free alternative <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a></strong>.\r\n    </div>\r\n</div> <!-- End of Row -->\r\n<div style=\"margin-top:15px;\">\r\n            <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n            </div>\r\n            <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <img src=\"/static/img/loading.gif\">Loading next task...\r\n            </div>\r\n            <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <strong>The task has been completed!</strong> Thanks a lot!\r\n            </div>\r\n            <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Congratulations!</strong> You have participated in all available tasks!\r\n                <br/>\r\n                <div class=\"alert-actions\">\r\n                    <a class=\"btn-default btn\" href=\"/\">Go back</a>\r\n                    <a class=\"btn-default btn\" href=\"/app\">or, Check other applications</a>\r\n                </div>\r\n            </div>\r\n            <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n                <a class=\"close\">\u00d7</a>\r\n                <strong>Error!</strong> Something went wrong, please contact the site administrators\r\n            </div>\r\n        </div> <!-- End Success and Error Messages for the user -->\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n<div class=\"row skeleton\"> <!-- Start Skeleton Row-->\r\n\r\n        <h1 id=\"start\">Please transcribe this index card</h1> <!-- The question will be loaded here -->\r\n        <span class=\"label label-info\">Note</span> You can use your mouse wheel trackpad to zoom in/out the picture, as well as drag & drop to navigate in the document.\r\n\r\n</div>\r\n\r\n<div class=\"row skeleton\">\r\n\r\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\r\n\r\n            <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\r\n\r\n            <form id=\"transcription\" role=\"form\">\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"objectType\">Object Type</label>\r\n                        <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\r\n                    <div class=\"controls\">\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\r\n                        </div>\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\r\n                        </div>\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\r\n                        </div>\r\n                   </div>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\r\n                        <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"site\">Site</label>\r\n                        <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\r\n                        <div class=\"input-append\">\r\n                        <label class=\"control-label\" for=\"site\">Georeference the site</label>\r\n                            <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site in a map\"></input>\r\n                            <button id=\"searchBtn\" class=\"btn btn-answer\" value=\"search\" type=\"button\"><i class=\"icon-search\"></i> Search</button>\r\n                        </div>\r\n                        <div style=\"display:none;margin-top:15px;\" id=\"searching\" class=\"alert alert-info\"><img src=\"/static/img/loading.gif\"> Searching...</div>\r\n                    <div style=\"display:none;margin-top:15px;\" id=\"searchingError\" class=\"alert alert-warning\"><strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> in the map.</div>\r\n                    <div id=\"searchingTip\" class=\"alert alert-info\" style=\"display:none; margin-top:10px;\">Drag & drop the <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> to improve the location</div>\r\n                    <div id=\"map\" style=\"margin-top:15px;\"></div>\r\n\r\n                     <div style=\"font-size:12px;\">Marker Icon by <a href=\"http://mapicons.nicolasmollet.com/\">Nicolas Mollet</a></div>\r\n                </div>\r\n\r\n                <p style=\"font-size:16px\">I believe the location I have given on the map is accurate to within:</p>\r\n                <div class=\"form-group\">\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy100\" value=\"100\" checked>\r\n                    100 metres\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy1000\" value=\"1000\">\r\n                    1 kilometre\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy10000\" value=\"10000\">\r\n                    10 kilometres\r\n                    </label>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\r\n                        <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\"></textarea>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"collection\">Collection</label>\r\n                        <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"publications\">Publications</label>\r\n                        <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"length\">Length</label>\r\n                        <input class=\"form-control\" type=\"number\" min=\"0\" name=\"length\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"width\">Width</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"width\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"edge\">Edge</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"edge\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"thickness\">Thickness</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"thickness\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"weight\">Weight</label>\r\n                        <input class=\"form-control\"  type=\"number\" min=\"0\" name=\"weight\" placeholder=\"In grammes\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"composition\">Composition</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"description\">Description</label>\r\n                        <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\"></textarea>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"surface\">Surface</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"patina\">Patina</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"associations\">Associations</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\r\n                </div>\r\n\r\n                <hr>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"remarks\">Remarks</label>\r\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\r\n                </div>\r\n\r\n                <hr>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\r\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if any.\"></textarea>\r\n                </div>\r\n\r\n            </form>\r\n\r\n            <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\r\n            \r\n            \r\n\t<!-- Feedback items for the user -->\r\n        <p>You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span></p>\r\n        <p>You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\t<!-- End of feedback row -->\r\n\r\n    </div><!-- End of Question and Submission DIV (column) -->\r\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\"><!-- Start of Photo DIV (column) -->\r\n        <div style=\"margin-top:15px;\">\r\n            <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n            </div>\r\n            <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <img src=\"/static/img/loading.gif\">Loading next task...\r\n            </div>\r\n            <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <strong>The task has been completed!</strong> Thanks a lot!\r\n            </div>\r\n            <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Congratulations!</strong> You have participated in all available tasks!\r\n                <br/>\r\n                <div class=\"alert-actions\">\r\n                    <a class=\"btn-sm\" href=\"/\">Go back</a>\r\n                    <a class=\"btn-sm\" href=\"/app\">or, Check other applications</a>\r\n                </div>\r\n            </div>\r\n            <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n                <a class=\"close\">\u00d7</a>\r\n                <strong>Error!</strong> Something went wrong, please contact the site administrators\r\n            </div>\r\n        </div> <!-- End Success and Error Messages for the user -->\r\n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"550\">\r\n                <div class=\"btn-group\">\r\n\t\t<a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\r\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n\t        <a id=\"newTask\" href=\"../newtask\" class=\"btn btn-sm btn-info\"><i class=\"glyphicon glyphicon-picture\"></i> Different card?</a>\r\n        \t<a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\r\n        \t<a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\r\n\t</div>\r\n        <div id=\"imgContainer\" >\r\n        \t\r\n           <!-- <img src=\"http://i.imgur.com/GeHxzb7.png\" style=\"max-width=100%\">-->\r\n        </div>\r\n        <div id=\"taskImg\"></div>\r\n    </div><!-- End of Photo DIV (columnt) -->\r\n\t</div>\r\n</div><!-- End of Skeleton Row -->\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n                <h3 class=\"lead\">BM Bronze Age Index (River Thames) transcription tutorial</h3>\r\n            </div>\r\n\t<!-- stepped modal body -->\r\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n\r\n                <p>\r\n                    This application is very simple, but does require you to use your own judgment in reading hand-written documents. When you participate,\r\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalog\r\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\r\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\r\n                    card (if a card does not load, you can still click the \"View on Flickr\" button to see the contents). Most scanned images combine the written details from the one side of the\r\n                    index card and the line drawing of the object from the reverse side.\r\n                    An example of the front side of a card is shown below.\r\n                </p>\r\n\r\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\r\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\r\n\r\n                <p>\r\n                    Each index card contains similar information and we are asking you to enter this information\r\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\r\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\r\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\r\n                    will hint that this information can be found \"Top of card\").\r\n                </p>\r\n\r\n            </div>\r\n\r\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n\t\t     <p>\r\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\r\n                    Here are some further issues to watch out for:\r\n                    </p>\r\n\r\n\t\t<ol>\r\n\t\t\r\n                    <li>\r\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\r\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\r\n                    This is often but not always written in pencil (and by the way, when the last letter is a G it often looks like a 9). The example below would be rendered \"II1A\":<br />\r\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    When entering information in the fields, please respect the case of words as seen on the card.\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\r\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\r\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\r\n                    you are fairly confident but not certain.\r\n                    </li>\r\n\r\n                    <li>\r\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\r\n                    into just one of our pre-specified boxes, then separate it by \"[;]\" (without any paragraph return/hitting the enter key). For example, on the\r\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\r\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\r\n                    </li>\r\n\r\n                    <li>\r\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\r\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\r\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\r\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\r\n                    </li>\r\n\r\n                    <li>\r\n                    If there is additional information on the card that you do not feel fits in one of our pre-specified\r\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\r\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\r\n                    </li>\r\n                    \r\n                </ol>\r\n\r\n\r\n\t\t</div>\r\n\r\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\r\n\t\t\t<p>\r\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\r\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\r\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\r\n\t            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\r\n\t            \tinput fields in response to your suggestions.\r\n\t            \t</p>\r\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\r\n\t\t</div>\r\n\t\t\r\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\r\n\t\t<p>\r\n                To find out how the project is progressing, suggest changes to this application or\r\n                propose new research ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n\t\t</div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n\r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 3 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<script>\r\n// Quick fix for IE8\r\nModernizr.load({\r\n  test: window.JSON,\r\n  nope: '/static/js/vendor/json2.min.js'\r\n});\r\n\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('riverThames').done(function(data){\r\n            console.log(\"Total answers done for user: \" + data.done);\r\n\tif ((data.done == 1) && ($.cookie('surveythames') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('survey', 'shown', { path: '/'});\r\n        }\r\n\r\n    if ((data.done == 25) && ($.cookie('survey25thames') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25thames', 'shown', { path: '/'});\r\n        }\r\n        \r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'});\r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n\r\n\r\n// If user presses enter do the search\r\n// $(\"#locationRef\").bind('keypress', function(e){\r\n//     var code = (e.keyCode ? e.keyCode : e.which);\r\n//     if(code == 13) { //Enter keycode\r\n//         search();\r\n//     }\r\n// });\r\n\r\n// This function will load the marker of the city, and center the map on it\r\nfunction search(task, city, zoom) {\r\n    zoom = (typeof zoom === \"undefined\") ? 4 : zoom;\r\n    city = city.replace(/\\n/g,' ');\r\n    console.log(city);\r\n    if (city) {\r\n        var place = city;\r\n        $(\"#searchingError\").hide();\r\n    }\r\n    else {\r\n        $(\"#searching\").show();\r\n        $(\"#searchingError\").hide();\r\n        if ($('#toSearch').val()) {\r\n            var place = $(\"#toSearch\").val();\r\n        }\r\n        else {\r\n            $(\"#searching\").hide();\r\n            alert(\"Please, add a location in the Site section to search in the map\");\r\n            return\r\n        }\r\n    }\r\n\r\n    // Geocode the place using Nominatim OSM service\r\n    $.getJSON('http://nominatim.openstreetmap.org/search/' + place + '?format=json', function(output) {\r\n        if (output.length >= 1) {\r\n            //console.log(\"Lon: \"+ output[0].lon + \" Lat: \" + output[0].lat);\r\n            // Clean previous markers\r\n            $(\"#navigate\").addClass(\"active\");\r\n            $(\"#point\").removeClass(\"disabled\");\r\n            $(\"#point\").removeClass(\"active\");\r\n            task.objectLayer.removeAllFeatures();\r\n            //$(\"#answerbtn\").addClass(\"disabled\");\r\n            //$(\"#answerbtn\").unbind('click',submitTask);\r\n            //console.log(\"Map cleaned!\");\r\n            // Create a LonLat object to load the place marker\r\n            var lonLat = new OpenLayers.LonLat(output[0].lon, output[0].lat)\r\n                .transform(\r\n                    new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\r\n                    task.map.getProjectionObject() // to Spherical Mercator Projection\r\n                );\r\n            // Set the marker position\r\n            point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);\r\n            task.longitude = lonLat.lon;\r\n            task.latitude = lonLat.lat;\r\n            task.objectLayer.addFeatures([new OpenLayers.Feature.Vector(point)]);\r\n            // Center the map\r\n            task.map.setCenter(lonLat, zoom);\r\n            //lonLat.transform(\r\n            //        map.getProjectionObject(), // from Spherical Mercator Projection\r\n            //        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n            //);\r\n            // Reset the lon & lat span objects\r\n            $(\"#lon\").text(\"-\");\r\n            $(\"#lat\").text(\"-\");\r\n\r\n            if (zoom !=4 ) {\r\n                $(\"#searchingTip\").show();\r\n            }\r\n\r\n            // Only show the messages when looking for user input\r\n            if ($('#toSearch').val()) {\r\n                $(\"#searching\").hide().fadeOut();\r\n                $(\"#searchingDone\").show().fadeIn().delay(2000).fadeOut();\r\n            }\r\n        }\r\n        else {\r\n            // Location not found, sorry\r\n            // Warn the user and try with another place\r\n            $(\"#searching\").hide().fadeOut();\r\n            $(\"#searchingError\").show();\r\n        }\r\n    });\r\n}\r\n\r\n\r\n\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        div_map.css(\"height\", \"390px\");\r\n        div_map.css(\"width\", \"600px\");\r\n        div_map.css(\"background\", \"#000\");\r\n\r\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\r\n\r\n        var extent = new OpenLayers.Bounds();\r\n        extent.extend(new OpenLayers.LonLat(1.758939,58.672231).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n    new OpenLayers.Projection('EPSG:900913')));\r\n        extent.extend(new OpenLayers.LonLat(-6.99745,49.96112).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n    new OpenLayers.Projection('EPSG:900913')));\r\n\r\n\r\n        $(\"#imgContainer\").append(div_map);\r\n        div_map.attr(\"id\", \"img_\" + task.id);\r\n\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 1024, 720]\r\n        });\r\n\r\n        task.map_img = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: copyright\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [1024, 720],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'img_' + task.id,\r\n          view: new ol.View({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 1.0\r\n          })\r\n        });\r\n        div_map.css(\"display\", \"none\");\r\n\r\n\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        img.attr(\"id\", \"img_task_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n        });\r\n        img.attr('src', task.info.url_b);\r\n        img.attr('width', '600px');\r\n        img.attr('height', '390px');\r\n        img.addClass('img-polaroid');\r\n        img.css(\"cursor\", \"zoom-in\");\r\n        task.info.image = img;\r\n\r\n        // MAP\r\n        var div_map = $(\"<div/>\", {'id': \"map_\" + task.id, 'class': 'map_canvas col-md-12'});\r\n        div_map.css(\"width\", \"360px\");\r\n        div_map.css(\"height\", \"500px\");\r\n        div_map.css(\"display\", \"none\");\r\n\r\n        // We need to append the div element asap otherwise OpenLayers will fail\r\n        $(\"#map\").append(div_map);\r\n\r\n        var map = new OpenLayers.Map('map_' + task.id, {\r\n            controls: [\r\n                new OpenLayers.Control.Navigation(),\r\n                new OpenLayers.Control.PanZoom(),\r\n                new OpenLayers.Control.LayerSwitcher(),\r\n                new OpenLayers.Control.MousePosition({displayProjection: new OpenLayers.Projection(\"EPSG:4326\")}),\r\n               // new OpenLayers.Control.ScaleLine(),\r\n                new OpenLayers.Control.Attribution()\r\n                ]\r\n        });\r\n\r\n        // Layers\r\n        // Open Street Map (default layer)\r\n        map.addLayer(new OpenLayers.Layer.OSM(\"Open Street Map\"));\r\n\r\n        // Google Maps Satellite layer\r\n        map.addLayer(new OpenLayers.Layer.Google(\r\n            \"Google Satellite\",\r\n            {type: google.maps.MapTypeId.SATELLITE}\r\n        ));\r\n\r\n        // Google Maps Physical layer\r\n        map.addLayer(new OpenLayers.Layer.Google(\r\n            \"Google Physical\",\r\n            {type: google.maps.MapTypeId.TERRAIN}\r\n        ));\r\n\r\n       \r\n\r\n        // Icon for the Urban Park Marker\r\n        var styleMapObject = new OpenLayers.StyleMap({\r\n            pointRadius: 15,\r\n            externalGraphic: 'http://img225.imageshack.us/img225/5237/youarehere2.png'\r\n        });\r\n\r\n        \r\n        // Layer for placing the urban park marker\r\n        var objectLayer = new OpenLayers.Layer.Vector(\"Find spot marker\", {\r\n            styleMap: styleMapObject,\r\n        });\r\n        map.addLayer(objectLayer);\r\n        task.objectLayer = objectLayer;\r\n\r\n        // Function to allow only the addition of one urban park per city\r\n        // The function gets the feature (point) and gets its location, transforms it to the right projection\r\n        // loads the lon and at into the HTML skeleton and disables the toolbar, so no more points can be added\r\n        disablePoint = function(feature) {\r\n            if ($(\"#answerbtn\").hasClass(\"disabled\")) {\r\n                $(\"#answerbtn\").removeClass('disabled');\r\n            }\r\n\r\n            $(\"#lat\").text(feature.geometry.y);\r\n            var tmp = feature.geometry.clone();\r\n            tmp.transform(\r\n                    task.map.getProjectionObject(), // from Spherical Mercator Projection\r\n                    new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n            );\r\n            $(\"#lon\").text(tmp.x);\r\n            $(\"#lat\").text(tmp.y);\r\n            task.lon = tmp.x;\r\n            task.lat = tmp.y;\r\n            task.drawControls['point'].deactivate();\r\n        }\r\n\r\n        // Default location to load the map\r\n        var lonLat = new OpenLayers.LonLat(-0.1279688 ,51.5077286 )\r\n            .transform(\r\n                new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\r\n                new OpenLayers.Projection(\"EPSG:900913\") // to Spherical Mercator Projection\r\n            );\r\n\r\n        // Enable drag & drop in the urban park Layer\r\n        var drag = new OpenLayers.Control.DragFeature(objectLayer, {\r\n            onComplete: function() {\r\n                var urbanParkPoint = task.objectLayer.features[0].geometry\r\n                var tmp = urbanParkPoint.clone();\r\n                tmp.transform(\r\n                        task.map.getProjectionObject(), // from Spherical Mercator Projection\r\n                        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n                );\r\n                // When the marker has been dropped, update the lon & lat of the urban park\r\n            }\r\n\r\n        });\r\n        // Add the drag & drop control into the map\r\n        map.addControl(drag);\r\n        // Activate drag & drop\r\n        drag.activate();\r\n\r\n        var drawControls = {\r\n            point:      new OpenLayers.Control.DrawFeature(objectLayer, OpenLayers.Handler.Point,\r\n                        { 'featureAdded': disablePoint})\r\n        }\r\n\r\n        // Add them to the map\r\n        for (var key in drawControls) {\r\n            map.addControl(drawControls[key]);\r\n        }\r\n        task.drawControls = drawControls;\r\n\r\n        task.map = map;\r\n        task.map.setOptions({restrictedExtent: extent});\r\n        task.lon = 0;\r\n        task.lat = 0;\r\n\r\n        search(task, \"united kingdom\");\r\n        } // End if task empty\r\n    else {\r\n        deferred.resolve(task);\r\n        }\r\n\r\n});\r\n\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(':input','#transcription')\r\n           .not(':button, :submit, :reset, :hidden, :radio')\r\n           .val('')\r\n           .removeAttr('checked')\r\n           .removeAttr('selected');\r\n      \r\n      \t$(\"a#raw\").attr(\"href\", task.info.url_b);\r\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n\t$(\"a#down\").attr(\"download\", task.id);\r\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\r\n\t\r\n        \r\n        $(\".fancybox\").fancybox();\r\n        $('#imgLink').tooltip();\r\n        $(\"[rel=tooltip]\").tooltip();\r\n        $(\"#searchingTip\").hide();\r\n        $(\"#question\").html(task.info.question);\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n        $(\"#img_\" + task.id).show();\r\n\r\n        // Clean\r\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\r\n        for (i = 1700; i < 2000; i++)\r\n        {\r\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\r\n        for (i = 1; i <= 12; i++)\r\n        {\r\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\r\n        for (i = 1; i <= 31; i++)\r\n        {\r\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        //var $input = $(\".pickadate\").pickadate({\r\n        //                 format: 'yyyy-mm-dd',\r\n        //                 selectYears: true,\r\n        //                 selectMonths: true,\r\n        //                 //min: new Date(1800,1,1),\r\n        //                 //max: new Date(2000,1,1),\r\n        //                 selectYears: 200,\r\n        //                 //formatSubmit: 'yyyy/mm/dd',\r\n        //                 });\r\n        // Use the picker object directly.\r\n        //var picker = $input.pickadate('picker')\r\n        //picker.set('select', [1900,1,1]);\r\n        //picker.clear();\r\n\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            evt.preventDefault();\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined') {\r\n                console.log(answer);\r\n                if (answer == 'search') {\r\n                    $(\"#searching\").show();\r\n                    search(task, $(\"#toSearch\").val(), 15);\r\n                }\r\n                else {\r\n                    task.answer = $(\"#transcription\").serializeJSON();\r\n                    console.log(task.answer);\r\n                    // Remove unwanted names\r\n                    for (var key in task.answer) {\r\n                        if ((key == 'City marker') || (key == 'Urban park marker') || (key.indexOf('OpenLayers_') == 0)) {\r\n                            delete task.answer[key];\r\n                        }\r\n                    }\r\n                    task.answer.optionsAccuracy = $('input[name=optionsAccuracy]:checked', '#transcription').val();\r\n                    console.log(task.answer.optionsAccuracy);\r\n                    // Convert the feature location into the GeoJSON format\r\n                    var geojson = new OpenLayers.Format.GeoJSON({\r\n                        'internalProjection': task.map.baseLayer.projection,\r\n                        'externalProjection': new OpenLayers.Projection(\"EPSG:4326\")\r\n                        });\r\n\r\n                    task.answer.geojson = JSON.parse(geojson.write(task.objectLayer.features[0]));\r\n\r\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ').toLowerCase();\r\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ').toLowerCase();\r\n                    console.log(task.answer);\r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"#map_\" + task.id).hide();\r\n                        $(\"#img_\" + task.id).hide();\r\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\r\n                        deferred.resolve();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                }\r\n            }\r\n            else {\r\n                console.log(answer);\r\n                console.log(typeof(answer));\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n});\r\n\r\nif(Modernizr.borderradius) {\r\n    pybossa.run('riverThames');\r\n}\r\nelse {\r\n    $(\".skeleton\").hide();\r\n    $(\"#oldbrowser\").show();\r\n}\r\n$(window).off('.affix');\r\n$(\"#imgHolder\")\r\n    .removeClass(\"affix affix-top affix-bottom\")\r\n    .removeData(\"bs.affix\");\r\n\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/40'/>"}, {"id": 41, "created": "2014-08-18T15:31:11.589143", "updated": "2015-02-25T08:42:28.873729", "name": "British Museum Bronze Age Index Drawer A1 Flat Axes", "short_name": "drawerA1", "description": "British Museum Bronze Age Card Index transcription for drawer A1 - flat axes.", "long_description": "This application will help the [British\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\nNeil Wilkin, to make available a huge card catalog of British prehistoric\nmetal artefacts discovered in the 19th and 20th century. This information has\nlong been known to be an extremely important untapped resource. Metal finds\nare not only crucial forms of evidence for dating Britain's prehistoric past,\nbut also tell us a great deal about prehistoric society and economy.\nDigitising the thousands of objects in this catalog will make these records\npublicly available via their incorporation into the [Portable Antiquities\nScheme website](http://finds.org.uk). The result will be the largest national\ndatabase of prehistoric metal finds anywhere in the world and a near\ncomprehensive view of what we currently know about such finds in the UK.\n\nThe cards have been scanned and uploaded to\n[Flickr](https://www.flickr.com/photos/micropasts/sets/72157642679582423/),\nand it is from there that the current application will retrieve and manipulate\nthe scans. These cards contain some fairly standardised kinds of information:\nabout where the artefact was discovered, its dimensions, a longer description\nof what it looks like, etc.\n\nWhat the research team would like people to do, is to transcribe the details\nfrom each section on the card into some pre-determined fields, and also to\nattempt to geo-reference the object via its place of discovery.\n\n### ** Thank you!**\n\nHugh Fiske, Jared Obermeyer, Cheryl Ellsworth, Elaine Dale, Jeff Okazaki,\nMatthew Bendert, Joellen mcGann, Dina Fathalla, scruffyarcher, Margaret Ellen\nJoy, Nina Sharman, Tim Mudie, Jane Fellows, Luis Kohl, Lesley Ravenscroft,\nChris Coffey, Emma Morris, Laura, Sonsoles Garc\u00eda Gonz\u00e1lez, Shane Grant, Denis\nAntoine, Andrew Parkinson, Leland, Olga Michalaka, Anna Katsaouni, Maragkaki\nFroso, Ian Jackson and other anonymous contributors for completing this\napplication.\n\n### This project is on behalf of\n\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\nBritish Museum logo](/static/img/bmBlackWhite.png)\n\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"sched": "default", "tutorial": "<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\n            <div class=\"modal-header\">\n                <h3 class=\"lead\">BM Bronze Age Index Drawer A1 transcription tutorial</h3>\n            </div>\n\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    This application is very simple, but does require you to use your own judgment in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalog\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the\n                    index card and the line drawing of the object from the reverse side.\n                    An example of the front side of a card is shown below.\n                </p>\n\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n\n                <p>\n                    Each index card contains similar information and we are asking you to enter this information\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\n                    will hint that this information can be found \"Top of card\").\n                </p>\n\n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\n                        both entries that should be entered in the the Collection box, so you could simply enter\n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n\n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and\n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n\n            </div>\n\n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or\n                propose new research ideas based what you have transcribed, please have a look at\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../drawerA1/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_41_thumbnail_1424853748.png", "task_presenter": "<link rel=\"stylesheet\" href=\"/static/css/ol.css\" type=\"text/css\">\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n\r\n<script src=\"/static/js/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\r\n<script src=\"http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n\r\n\r\n<style type=\"text/css\">\r\n    label {\r\n        font-size:16px;\r\n    }\r\n    #map_canvas label {\r\n        width: auto;\r\n        display: inline;\r\n    }\r\n    #map_canvas img {\r\n        max-width: none;\r\n    }\r\n    .affix {\r\n        width: inherit;\r\n        height: 0px;\r\n    }\r\n  \r\n    .affix-bottom {\r\n        top: auto !important;\r\n        position: fixed;\r\n        bottom: 240px;\r\n    }\r\n    \r\n    #imgContainer {\r\n        height: 390px;\r\n        width: 600px;\r\n    }\r\n\r\n</style>\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Hey there! Do you want to help us?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          Thanks for contributing one task for the project. We are interested in knowing how you found out about us. <strong>Could you please answer two questions in a short survey?</strong>\r\n\r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\" width=\"100%\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Congrats for completing 25 tasks!</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          Thanks for contributing 25 tasks for the project. Now that you have been using MicroPasts for a while, we would like to know how you found it. <strong>Could you please answer a few questions in a short survey?</strong>\r\n\r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\r\n    <!-- Success and Error Messages for the user -->\r\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\r\n        <strong>Sorry, but your browser does not support the current application. If you want to contribute, please, upgrade to a modern web browser like the open source and free alternative <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a></strong>.\r\n    </div>\r\n</div> <!-- End of Row -->\r\n\r\n <div style=\"margin-top:15px;\">\r\n            <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n            </div>\r\n            <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <img src=\"/static/img/loading.gif\">Loading next task...\r\n            </div>\r\n            <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <strong>The task has been completed!</strong> Thanks a lot!\r\n            </div>\r\n            <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Congratulations!</strong> You have participated in all available tasks!\r\n                <br/>\r\n              <img src=\"https://crowdfunded.micropasts.org/assets/logo-head.png\" />\r\n                <div class=\"alert-actions\">\r\n                    <a class=\"btn-sm\" href=\"/\">Go back</a>\r\n                    <a class=\"btn-sm\" href=\"/app\">or, Check other applications</a>\r\n                </div>\r\n            </div>\r\n            <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n                <a class=\"close\">\u00d7</a>\r\n                <strong>Error!</strong> Something went wrong, please contact the site administrators\r\n            </div>\r\n        </div> <!-- End Success and Error Messages for the user -->\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n<div class=\"row skeleton\"> <!-- Start Skeleton Row-->\r\n\r\n        <h1 id=\"start\">Please transcribe this index card</h1> <!-- The question will be loaded here -->\r\n        <span class=\"label label-info\">Note</span> You can use your mouse wheel trackpad to zoom in/out the picture, as well as drag & drop to navigate in the document.\r\n</div>\r\n\r\n<div class=\"row skeleton\">\r\n\r\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\r\n\r\n            <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\r\n\r\n            <form id=\"transcription\" role=\"form\">\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"objectType\">Object Type</label>\r\n                        <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\r\n                    <div class=\"controls\">\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\r\n                        </div>\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\r\n                        </div>\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\r\n                        </div>\r\n                   </div>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\r\n                        <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"site\">Site</label>\r\n                        <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\r\n                        <div class=\"input-append\">\r\n                        <label class=\"control-label\" for=\"site\">Georeference the site</label>\r\n                            <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site in a map\"></input>\r\n                            <button id=\"searchBtn\" class=\"btn btn-answer\" value=\"search\" type=\"button\"><i class=\"icon-search\"></i> Search</button>\r\n                        </div>\r\n                        <div style=\"display:none;margin-top:15px;\" id=\"searching\" class=\"alert alert-info\"><img src=\"/static/img/loading.gif\"> Searching...</div>\r\n                    <div style=\"display:none;margin-top:15px;\" id=\"searchingError\" class=\"alert alert-warning\"><strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> in the map.</div>\r\n                    <div id=\"searchingTip\" class=\"alert alert-info\" style=\"display:none; margin-top:10px;\">Drag & drop the <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> to improve the location</div>\r\n                    <div id=\"map\" style=\"margin-top:15px;\"></div>\r\n\r\n                     <div style=\"font-size:12px;\">Marker Icon by <a href=\"http://mapicons.nicolasmollet.com/\">Nicolas Mollet</a></div>\r\n                </div>\r\n\r\n                <p style=\"font-size:16px\">I believe the location I have given on the map is accurate to within:</p>\r\n                <div class=\"form-group\">\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy100\" value=\"100\" checked>\r\n                    100 metres\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy1000\" value=\"1000\">\r\n                    1 kilometre\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy10000\" value=\"10000\">\r\n                    10 kilometres\r\n                    </label>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\r\n                        <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\"></textarea>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"collection\">Collection</label>\r\n                        <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"publications\">Publications</label>\r\n                        <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"length\">Length</label>\r\n                        <input class=\"form-control\" type=\"text\" name=\"length\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"width\">Width</label>\r\n                        <input class=\"form-control\"  type=\"text\"  name=\"width\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"edge\">Edge</label>\r\n                        <input class=\"form-control\"  type=\"text\"  name=\"edge\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"thickness\">Thickness</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"thickness\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"weight\">Weight</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"weight\" placeholder=\"In grammes\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"composition\">Composition</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"description\">Description</label>\r\n                        <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\"></textarea>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"surface\">Surface</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"patina\">Patina</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"associations\">Associations</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\r\n                </div>\r\n\r\n                <hr>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"remarks\">Remarks</label>\r\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\r\n                </div>\r\n\r\n                <hr>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\r\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if any.\"></textarea>\r\n                </div>\r\n\r\n            </form>\r\n\r\n            <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\r\n            \r\n            \r\n\t<!-- Feedback items for the user -->\r\n        <p>You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span></p>\r\n        <p>You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\t<!-- End of feedback row -->\r\n\r\n    </div><!-- End of Question and Submission DIV (column) -->\r\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\"><!-- Start of Photo DIV (column) -->\r\n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"550\">\r\n                <div class=\"btn-group\">\r\n\t\t<a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\r\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n\t    <a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\r\n        <a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\r\n\t</div>\r\n        <div id=\"imgContainer\" >\r\n        \t\r\n           <!-- <img src=\"http://i.imgur.com/GeHxzb7.png\" style=\"max-width=100%\">-->\r\n        </div>\r\n        <div id=\"taskImg\"></div>\r\n    </div><!-- End of Photo DIV (columnt) -->\r\n\t</div>\r\n</div><!-- End of Skeleton Row -->\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n                <h3 class=\"lead\">BM Bronze Age Index Drawer A1 transcription tutorial</h3>\r\n            </div>\r\n\t<!-- stepped modal body -->\r\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n\r\n                <p>\r\n                    This application is very simple, but does require you to use your own judgment in reading hand-written documents. When you participate,\r\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalog\r\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\r\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\r\n                    card (if a card does not load, you can still click the \"View on Flickr\" button to see the contents). Most scanned images combine the written details from the one side of the\r\n                    index card and the line drawing of the object from the reverse side.\r\n                    An example of the front side of a card is shown below.\r\n                </p>\r\n\r\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\r\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\r\n\r\n                <p>\r\n                    Each index card contains similar information and we are asking you to enter this information\r\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\r\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\r\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\r\n                    will hint that this information can be found \"Top of card\").\r\n                </p>\r\n\r\n            </div>\r\n\r\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n\t\t     <p>\r\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\r\n                    Here are some further issues to watch out for:\r\n                    </p>\r\n\r\n\t\t<ol>\r\n\t\t\r\n                    <li>\r\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\r\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\r\n                    This is often but not always written in pencil (and by the way, when the last letter is a G it often looks like a 9). The example below would be rendered \"II1A\":<br />\r\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    When entering information in the fields, please respect the case of words as seen on the card.\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\r\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\r\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\r\n                    you are fairly confident but not certain.\r\n                    </li>\r\n\r\n                    <li>\r\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\r\n                    into just one of our pre-specified boxes, then separate it by \"[;]\" (without any paragraph return/hitting the enter key). For example, on the\r\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\r\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\r\n                    </li>\r\n\r\n                    <li>\r\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\r\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\r\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\r\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\r\n                    </li>\r\n\r\n                    <li>\r\n                    If there is additional information on the card that you do not feel fits in one of our pre-specified\r\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\r\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\r\n                    </li>\r\n                    \r\n                </ol>\r\n\r\n\r\n\t\t</div>\r\n\r\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\r\n\t\t\t<p>\r\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\r\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\r\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\r\n\t            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\r\n\t            \tinput fields in response to your suggestions.\r\n\t            \t</p>\r\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\r\n\t\t</div>\r\n\t\t\r\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\r\n\t\t<p>\r\n                To find out how the project is progressing, suggest changes to this application or\r\n                propose new research ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n\t\t</div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n\r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 3 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<script>\r\n// Quick fix for IE8\r\nModernizr.load({\r\n  test: window.JSON,\r\n  nope: '/static/js/vendor/json2.min.js'\r\n});\r\n\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('drawerA1').done(function(data){\r\n        console.log(\"Total answers done for user: \" + data.done);\r\n\tconsole.log(\"Total tasks: \" + data.total);\r\n\t\r\n\tif ((data.done == 1) && ($.cookie('surveyA1') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('surveyA1', 'shown', { path: '/'});\r\n        }\r\n\r\n    \tif ((data.done == 25) && ($.cookie('survey25A1') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25A1', 'shown', { path: '/'});\r\n        }\r\n        \r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'});\r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n\t\r\n});\r\n}\r\n\r\n\r\n// If user presses enter do the search\r\n// $(\"#locationRef\").bind('keypress', function(e){\r\n//     var code = (e.keyCode ? e.keyCode : e.which);\r\n//     if(code == 13) { //Enter keycode\r\n//         search();\r\n//     }\r\n// });\r\n\r\n// This function will load the marker of the city, and center the map on it\r\nfunction search(task, city, zoom) {\r\n    zoom = (typeof zoom === \"undefined\") ? 4 : zoom;\r\n    city = city.replace(/\\n/g,' ');\r\n    console.log(city);\r\n    if (city) {\r\n        var place = city;\r\n        $(\"#searchingError\").hide();\r\n    }\r\n    else {\r\n        $(\"#searching\").show();\r\n        $(\"#searchingError\").hide();\r\n        if ($('#toSearch').val()) {\r\n            var place = $(\"#toSearch\").val();\r\n        }\r\n        else {\r\n            $(\"#searching\").hide();\r\n            alert(\"Please, add a location in the Site section to search in the map\");\r\n            return\r\n        }\r\n    }\r\n\r\n    // Geocode the place using Nominatim OSM service\r\n    $.getJSON('http://nominatim.openstreetmap.org/search/' + place + '?format=json', function(output) {\r\n        if (output.length >= 1) {\r\n            //console.log(\"Lon: \"+ output[0].lon + \" Lat: \" + output[0].lat);\r\n            // Clean previous markers\r\n            $(\"#navigate\").addClass(\"active\");\r\n            $(\"#point\").removeClass(\"disabled\");\r\n            $(\"#point\").removeClass(\"active\");\r\n            task.objectLayer.removeAllFeatures();\r\n            //$(\"#answerbtn\").addClass(\"disabled\");\r\n            //$(\"#answerbtn\").unbind('click',submitTask);\r\n            //console.log(\"Map cleaned!\");\r\n            // Create a LonLat object to load the place marker\r\n            var lonLat = new OpenLayers.LonLat(output[0].lon, output[0].lat)\r\n                .transform(\r\n                    new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\r\n                    task.map.getProjectionObject() // to Spherical Mercator Projection\r\n                );\r\n            // Set the marker position\r\n            point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);\r\n            task.longitude = lonLat.lon;\r\n            task.latitude = lonLat.lat;\r\n            task.objectLayer.addFeatures([new OpenLayers.Feature.Vector(point)]);\r\n            // Center the map\r\n            task.map.setCenter(lonLat, zoom);\r\n            //lonLat.transform(\r\n            //        map.getProjectionObject(), // from Spherical Mercator Projection\r\n            //        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n            //);\r\n            // Reset the lon & lat span objects\r\n            $(\"#lon\").text(\"-\");\r\n            $(\"#lat\").text(\"-\");\r\n\r\n            if (zoom !=4 ) {\r\n                $(\"#searchingTip\").show();\r\n            }\r\n\r\n            // Only show the messages when looking for user input\r\n            if ($('#toSearch').val()) {\r\n                $(\"#searching\").hide().fadeOut();\r\n                $(\"#searchingDone\").show().fadeIn().delay(2000).fadeOut();\r\n            }\r\n        }\r\n        else {\r\n            // Location not found, sorry\r\n            // Warn the user and try with another place\r\n            $(\"#searching\").hide().fadeOut();\r\n            $(\"#searchingError\").show();\r\n        }\r\n    });\r\n}\r\n\r\n\r\n\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        div_map.css(\"height\", \"390px\");\r\n        div_map.css(\"width\", \"600px\");\r\n        div_map.css(\"background\", \"#000\");\r\n\r\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\r\n\r\n        var extent = new OpenLayers.Bounds();\r\n        extent.extend(new OpenLayers.LonLat(6.043167,59.844815).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n    new OpenLayers.Projection('EPSG:900913')));\r\n        extent.extend(new OpenLayers.LonLat(-16.720505,48.458352).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n    new OpenLayers.Projection('EPSG:900913')));\r\n\r\n\r\n        $(\"#imgContainer\").append(div_map);\r\n        div_map.attr(\"id\", \"img_\" + task.id);\r\n\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 1024, 720]\r\n        });\r\n\r\n        task.map_img = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: copyright\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [1024, 720],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'img_' + task.id,\r\n          view: new ol.View({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 1.0\r\n          })\r\n        });\r\n        div_map.css(\"display\", \"none\");\r\n\r\n\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        img.attr(\"id\", \"img_task_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n        });\r\n        img.attr('src', task.info.url_b);\r\n        img.attr('width', '600px');\r\n        img.attr('height', '390px');\r\n        img.addClass('img-polaroid');\r\n        img.css(\"cursor\", \"zoom-in\");\r\n        task.info.image = img;\r\n\r\n        // MAP\r\n        var div_map = $(\"<div/>\", {'id': \"map_\" + task.id, 'class': 'map_canvas col-md-12'});\r\n        div_map.css(\"width\", \"360px\");\r\n        div_map.css(\"height\", \"500px\");\r\n        div_map.css(\"display\", \"none\");\r\n\r\n        // We need to append the div element asap otherwise OpenLayers will fail\r\n        $(\"#map\").append(div_map);\r\n\r\n        var map = new OpenLayers.Map('map_' + task.id, {\r\n            controls: [\r\n                new OpenLayers.Control.Navigation(),\r\n                new OpenLayers.Control.PanZoom(),\r\n                new OpenLayers.Control.LayerSwitcher(),\r\n                new OpenLayers.Control.MousePosition({displayProjection: new OpenLayers.Projection(\"EPSG:4326\")}),\r\n               // new OpenLayers.Control.ScaleLine(),\r\n                new OpenLayers.Control.Attribution()\r\n                ]\r\n        });\r\n\r\n        // Layers\r\n        // Open Street Map (default layer)\r\n        map.addLayer(new OpenLayers.Layer.OSM(\"Open Street Map\"));\r\n\r\n        // Google Maps Satellite layer\r\n        map.addLayer(new OpenLayers.Layer.Google(\r\n            \"Google Satellite\",\r\n            {type: google.maps.MapTypeId.SATELLITE}\r\n        ));\r\n\r\n        // Google Maps Physical layer\r\n        map.addLayer(new OpenLayers.Layer.Google(\r\n            \"Google Physical\",\r\n            {type: google.maps.MapTypeId.TERRAIN}\r\n        ));\r\n\r\n       \r\n\r\n        // Icon for the Urban Park Marker\r\n        var styleMapObject = new OpenLayers.StyleMap({\r\n            pointRadius: 15,\r\n            externalGraphic: 'http://img225.imageshack.us/img225/5237/youarehere2.png'\r\n        });\r\n\r\n        \r\n        // Layer for placing the urban park marker\r\n        var objectLayer = new OpenLayers.Layer.Vector(\"Find spot marker\", {\r\n            styleMap: styleMapObject,\r\n        });\r\n        map.addLayer(objectLayer);\r\n        task.objectLayer = objectLayer;\r\n\r\n        // Function to allow only the addition of one urban park per city\r\n        // The function gets the feature (point) and gets its location, transforms it to the right projection\r\n        // loads the lon and at into the HTML skeleton and disables the toolbar, so no more points can be added\r\n        disablePoint = function(feature) {\r\n            if ($(\"#answerbtn\").hasClass(\"disabled\")) {\r\n                $(\"#answerbtn\").removeClass('disabled');\r\n            }\r\n\r\n            $(\"#lat\").text(feature.geometry.y);\r\n            var tmp = feature.geometry.clone();\r\n            tmp.transform(\r\n                    task.map.getProjectionObject(), // from Spherical Mercator Projection\r\n                    new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n            );\r\n            $(\"#lon\").text(tmp.x);\r\n            $(\"#lat\").text(tmp.y);\r\n            task.lon = tmp.x;\r\n            task.lat = tmp.y;\r\n            task.drawControls['point'].deactivate();\r\n        }\r\n\r\n        // Default location to load the map\r\n        var lonLat = new OpenLayers.LonLat(-0.1279688 ,51.5077286 )\r\n            .transform(\r\n                new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\r\n                new OpenLayers.Projection(\"EPSG:900913\") // to Spherical Mercator Projection\r\n            );\r\n\r\n        // Enable drag & drop in the urban park Layer\r\n        var drag = new OpenLayers.Control.DragFeature(objectLayer, {\r\n            onComplete: function() {\r\n                var urbanParkPoint = task.objectLayer.features[0].geometry\r\n                var tmp = urbanParkPoint.clone();\r\n                tmp.transform(\r\n                        task.map.getProjectionObject(), // from Spherical Mercator Projection\r\n                        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n                );\r\n                // When the marker has been dropped, update the lon & lat of the urban park\r\n            }\r\n\r\n        });\r\n        // Add the drag & drop control into the map\r\n        map.addControl(drag);\r\n        // Activate drag & drop\r\n        drag.activate();\r\n\r\n        var drawControls = {\r\n            point:      new OpenLayers.Control.DrawFeature(objectLayer, OpenLayers.Handler.Point,\r\n                        { 'featureAdded': disablePoint})\r\n        }\r\n\r\n        // Add them to the map\r\n        for (var key in drawControls) {\r\n            map.addControl(drawControls[key]);\r\n        }\r\n        task.drawControls = drawControls;\r\n\r\n        task.map = map;\r\n        task.map.setOptions({restrictedExtent: extent});\r\n        task.lon = 0;\r\n        task.lat = 0;\r\n\r\n        search(task, \"united kingdom\");\r\n        } // End if task empty\r\n    else {\r\n        deferred.resolve(task);\r\n        }\r\n\r\n});\r\n\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(':input','#transcription')\r\n           .not(':button, :submit, :reset, :hidden, :radio')\r\n           .val('')\r\n           .removeAttr('checked')\r\n           .removeAttr('selected');\r\n      \r\n      \t$(\"a#raw\").attr(\"href\", task.info.url_b);\r\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n\t$(\"a#down\").attr(\"download\", task.id);\r\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\r\n\t\r\n        \r\n        $(\".fancybox\").fancybox();\r\n        $('#imgLink').tooltip();\r\n        $(\"[rel=tooltip]\").tooltip();\r\n        $(\"#searchingTip\").hide();\r\n        $(\"#question\").html(task.info.question);\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n        $(\"#img_\" + task.id).show();\r\n\r\n        // Clean\r\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\r\n        for (i = 1700; i < 2000; i++)\r\n        {\r\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\r\n        for (i = 1; i <= 12; i++)\r\n        {\r\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\r\n        for (i = 1; i <= 31; i++)\r\n        {\r\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        //var $input = $(\".pickadate\").pickadate({\r\n        //                 format: 'yyyy-mm-dd',\r\n        //                 selectYears: true,\r\n        //                 selectMonths: true,\r\n        //                 //min: new Date(1800,1,1),\r\n        //                 //max: new Date(2000,1,1),\r\n        //                 selectYears: 200,\r\n        //                 //formatSubmit: 'yyyy/mm/dd',\r\n        //                 });\r\n        // Use the picker object directly.\r\n        //var picker = $input.pickadate('picker')\r\n        //picker.set('select', [1900,1,1]);\r\n        //picker.clear();\r\n\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            evt.preventDefault();\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined') {\r\n                console.log(answer);\r\n                if (answer == 'search') {\r\n                    $(\"#searching\").show();\r\n                    search(task, $(\"#toSearch\").val(), 15);\r\n                }\r\n                else {\r\n                    task.answer = $(\"#transcription\").serializeJSON();\r\n                    console.log(task.answer);\r\n                    // Remove unwanted names\r\n                    for (var key in task.answer) {\r\n                        if ((key == 'City marker') || (key == 'Urban park marker') || (key.indexOf('OpenLayers_') == 0)) {\r\n                            delete task.answer[key];\r\n                        }\r\n                    }\r\n                    task.answer.optionsAccuracy = $('input[name=optionsAccuracy]:checked', '#transcription').val();\r\n                    console.log(task.answer.optionsAccuracy);\r\n                    // Convert the feature location into the GeoJSON format\r\n                    var geojson = new OpenLayers.Format.GeoJSON({\r\n                        'internalProjection': task.map.baseLayer.projection,\r\n                        'externalProjection': new OpenLayers.Projection(\"EPSG:4326\")\r\n                        });\r\n\r\n                    task.answer.geojson = JSON.parse(geojson.write(task.objectLayer.features[0]));\r\n\r\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ').toLowerCase();\r\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ').toLowerCase();\r\n                    console.log(task.answer);\r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"#map_\" + task.id).hide();\r\n                        $(\"#img_\" + task.id).hide();\r\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\r\n                        deferred.resolve();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                }\r\n            }\r\n            else {\r\n                console.log(answer);\r\n                console.log(typeof(answer));\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n});\r\n\r\nif(Modernizr.borderradius) {\r\n    pybossa.run('drawerA1');\r\n}\r\nelse {\r\n    $(\".skeleton\").hide();\r\n    $(\"#oldbrowser\").show();\r\n}\r\n$(window).off('.affix');\r\n$(\"#imgHolder\")\r\n    .removeClass(\"affix affix-top affix-bottom\")\r\n    .removeData(\"bs.affix\");\r\n\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/41'/>"}, {"id": 42, "created": "2014-08-21T09:34:50.941200", "updated": "2015-02-26T09:41:35.560874", "name": "British Museum Bronze Age Index Arrowheads", "short_name": "arrowheads", "description": "British Museum Bronze Age Card Index transcription for arrowheads.", "long_description": "This application will help the [British\r\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\r\nNeil Wilkin, to make available a huge card catalogue of British prehistoric\r\nmetal artefacts discovered in the 19th and 20th century. This information has\r\nlong been known to be an extremely important untapped resource. Metal finds\r\nare not only crucial forms of evidence for dating Britain's prehistoric past,\r\nbut also tell us a great deal about prehistoric society and economy.\r\nDigitising the thousands of objects in this catalogue will make these records\r\npublicly available via their incorporation into the [Portable Antiquities\r\nScheme website](http://finds.org.uk). The result will be the largest national\r\ndatabase of prehistoric metal finds anywhere in the world and a near\r\ncomprehensive view of what we currently know about such finds in the UK.\r\n\r\nThe cards have been scanned and uploaded to\r\n[Flickr](https://www.flickr.com/photos/micropasts/), and it is from there that\r\nthe current application will retrieve and manipulate the scans. These cards\r\ncontain some fairly standardised kinds of information: about where the\r\nartefact was discovered, its dimensions, a longer description of what it looks\r\nlike, etc.\r\n\r\nWhat the research team would like people to do, is to transcribe the details\r\nfrom each section on the card into some pre-determined fields, and also to\r\nattempt to geo-reference the object via its place of discovery.\r\n\r\n### **Thank you!\r\n\r\n**\r\n\r\nHugh Fiske, Cheryl Ellsworth, Jeff Okazaki, Terry Jackson-Baker, Dina,\r\nscruffyarcher, Margaret Ellen Joy, Tim Mudie and other anonymous contributors.\r\n\r\n> Opening the treasures of the Bronze Age to the widest public is why I get\r\nup, I would love your help: <http://t.co/q7eWlIrD9j>\r\n\r\n>\r\n\r\n> -- Neil Wilkin (@NWilkinBM) [ April 16,\r\n2014](https://twitter.com/NWilkinBM/statuses/456421634237140992)\r\n\r\n### This project is on behalf of\r\n\r\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\r\nBritish Museum logo](/static/img/bmBlackWhite.png)\r\n\r\n### Find the code on Github\r\n\r\n![](https://crowdfunded.micropasts.org/assets/learn/github-ee049d767e762a0c6626051203a31f6e.png)\r\n\r\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"tutorial": "\n<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\n            <div class=\"modal-header\">\n                <h3 class=\"lead\">BM Bronze Age Index arrowheads transcription tutorial</h3>\n            </div>\n\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the\n                    index card and the line drawing of the object from the reverse side.\n                    An example of the front side of a card is shown below.\n                </p>\n\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n\n                <p>\n                    Each index card contains similar information and we are asking you to enter this information\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\n                    will hint that this information can be found \"Top of card\").\n                </p>\n\n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\n                        both entries that should be entered in the the Collection box, so you could simply enter\n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n\n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and\n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n\n            </div>\n\n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or\n                propose new research ideas based what you have transcribed, please have a look at\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../arrowheads/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_42_thumbnail_1424853753.png", "task_presenter": "<link rel=\"stylesheet\" href=\"http://ol3js.org/en/master/css/ol.css\" type=\"text/css\">\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n\r\n<script src=\"http://ol3js.org/en/master/build/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\r\n<script src=\"http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n\r\n\r\n<style type=\"text/css\">\r\n    label {\r\n        font-size:16px;\r\n    }\r\n    #map_canvas label {\r\n        width: auto;\r\n        display: inline;\r\n    }\r\n    #map_canvas img {\r\n        max-width: none;\r\n    }\r\n    .affix {\r\n        width: inherit;\r\n        height: 0px;\r\n    }\r\n  \r\n    .affix-bottom {\r\n        top: auto !important;\r\n        position: fixed;\r\n        bottom: 240px;\r\n    }\r\n    \r\n    #imgContainer {\r\n        height: 390px;\r\n        width: 600px;\r\n    }\r\n\r\n</style>\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Hey there! Do you want to help us?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          Thanks for contributing one task for the project. We are interested in knowing how you found out about us. <strong>Could you please answer two questions in a short survey?</strong>\r\n\r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\" width=\"100%\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Congrats for completing 25 tasks!</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          Thanks for contributing 25 tasks for the project. Now that you have been using MicroPasts for a while, we would like to know how you found it. <strong>Could you please answer a few questions in a short survey?</strong>\r\n\r\n       <!-- <iframe src=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\r\n    <!-- Success and Error Messages for the user -->\r\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\r\n        <strong>Sorry, but your browser does not support the current application. If you want to contribute, please, upgrade to a modern web browser like the open source and free alternative <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a></strong>.\r\n    </div>\r\n</div> <!-- End of Row -->\r\n<div style=\"margin-top:15px;\">\r\n            <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n            </div>\r\n            <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <img src=\"/static/img/loading.gif\">Loading next task...\r\n            </div>\r\n            <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n                <strong>The task has been completed!</strong> Thanks a lot!\r\n            </div>\r\n            <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n                <strong>Congratulations!</strong> You have participated in all available tasks!\r\n                <br/>\r\n                <div class=\"alert-actions\">\r\n                    <a class=\"btn-default btn\" href=\"/\">Go back</a>\r\n                    <a class=\"btn-default btn\" href=\"/app\">or, Check other applications</a>\r\n                </div>\r\n            </div>\r\n            <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n                <a class=\"close\">\u00d7</a>\r\n                <strong>Error!</strong> Something went wrong, please contact the site administrators\r\n            </div>\r\n        </div> <!-- End Success and Error Messages for the user -->\r\n\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n<div class=\"row skeleton\"> <!-- Start Skeleton Row-->\r\n\r\n        <h1 id=\"start\">Please transcribe this index card</h1> <!-- The question will be loaded here -->\r\n        <span class=\"label label-info\">Note</span> You can use your mouse wheel trackpad to zoom in/out the picture, as well as drag & drop to navigate in the document.\r\n\r\n</div>\r\n\r\n<div class=\"row skeleton\">\r\n\r\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\r\n\r\n            <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\r\n\r\n            <form id=\"transcription\" role=\"form\">\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"objectType\">Object Type</label>\r\n                        <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\r\n                    <div class=\"controls\">\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\r\n                        </div>\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\r\n                        </div>\r\n                        <div class=\"col-xs-4\">\r\n                        \t<select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\r\n                        </div>\r\n                   </div>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\r\n                        <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"site\">Site</label>\r\n                        <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\r\n                        <div class=\"input-append\">\r\n                        <label class=\"control-label\" for=\"site\">Georeference the site</label>\r\n                            <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site in a map\"></input>\r\n                            <button id=\"searchBtn\" class=\"btn btn-answer\" value=\"search\" type=\"button\"><i class=\"icon-search\"></i> Search</button>\r\n                        </div>\r\n                        <div style=\"display:none;margin-top:15px;\" id=\"searching\" class=\"alert alert-info\"><img src=\"/static/img/loading.gif\"> Searching...</div>\r\n                    <div style=\"display:none;margin-top:15px;\" id=\"searchingError\" class=\"alert alert-warning\"><strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> in the map.</div>\r\n                    <div id=\"searchingTip\" class=\"alert alert-info\" style=\"display:none; margin-top:10px;\">Drag & drop the <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> to improve the location</div>\r\n                    <div id=\"map\" style=\"margin-top:15px;\"></div>\r\n\r\n                     <div style=\"font-size:12px;\">Marker Icon by <a href=\"http://mapicons.nicolasmollet.com/\">Nicolas Mollet</a></div>\r\n                </div>\r\n\r\n                <p style=\"font-size:16px\">I believe the location I have given on the map is accurate to within:</p>\r\n                <div class=\"form-group\">\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy100\" value=\"100\" checked>\r\n                    100 metres\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy1000\" value=\"1000\">\r\n                    1 kilometre\r\n                    </label>\r\n                    <label class=\"radio\">\r\n                    <input type=\"radio\" name=\"optionsAccuracy\" id=\"optionsAccuracy10000\" value=\"10000\">\r\n                    10 kilometres\r\n                    </label>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\r\n                        <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\"></textarea>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"collection\">Collection</label>\r\n                        <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"publications\">Publications</label>\r\n                        <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"length\">Length</label>\r\n                        <input class=\"form-control\" type=\"text\" name=\"length\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"width\">Width</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"width\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"edge\">Edge</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"edge\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"thickness\">Thickness</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"thickness\" placeholder=\"In millimetres\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"weight\">Weight</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"weight\" placeholder=\"In grammes\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"composition\">Composition</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"description\">Description</label>\r\n                        <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\"></textarea>\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"surface\">Surface</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"patina\">Patina</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\r\n                </div>\r\n\r\n                <hr />\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"associations\">Associations</label>\r\n                        <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\r\n                </div>\r\n\r\n                <hr>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"remarks\">Remarks</label>\r\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\r\n                </div>\r\n\r\n                <hr>\r\n\r\n                <div class=\"form-group\">\r\n                    <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\r\n                        <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if any.\"></textarea>\r\n                </div>\r\n\r\n            </form>\r\n\r\n            <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\r\n            \r\n            \r\n\t<!-- Feedback items for the user -->\r\n        <p>You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span></p>\r\n        <p>You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\t<!-- End of feedback row -->\r\n\r\n    </div><!-- End of Question and Submission DIV (column) -->\r\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\"><!-- Start of Photo DIV (column) -->\r\n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"550\">\r\n                <div class=\"btn-group\">\r\n\t\t<a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\r\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n\t        <a id=\"newTask\" href=\"../newtask\" class=\"btn btn-sm btn-info\"><i class=\"glyphicon glyphicon-picture\"></i> Different card?</a>\r\n        \t<a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\r\n        \t<a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\r\n\t</div>\r\n        <div id=\"imgContainer\" >\r\n        \t\r\n           <!-- <img src=\"http://i.imgur.com/GeHxzb7.png\" style=\"max-width=100%\">-->\r\n        </div>\r\n        <div id=\"taskImg\"></div>\r\n    </div><!-- End of Photo DIV (columnt) -->\r\n\t</div>\r\n</div><!-- End of Skeleton Row -->\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n                <h3 class=\"lead\">BM Bronze Age Index arrowheads transcription tutorial</h3>\r\n            </div>\r\n\t<!-- stepped modal body -->\r\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n\r\n                <p>\r\n                    This application is very simple, but does require you to use your own judgment in reading hand-written documents. When you participate,\r\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalog\r\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\r\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\r\n                    card (if a card does not load, you can still click the \"View on Flickr\" button to see the contents). Most scanned images combine the written details from the one side of the\r\n                    index card and the line drawing of the object from the reverse side.\r\n                    An example of the front side of a card is shown below.\r\n                </p>\r\n\r\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\r\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\r\n\r\n                <p>\r\n                    Each index card contains similar information and we are asking you to enter this information\r\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\r\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\r\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\r\n                    will hint that this information can be found \"Top of card\").\r\n                </p>\r\n\r\n            </div>\r\n\r\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n\t\t     <p>\r\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\r\n                    Here are some further issues to watch out for:\r\n                    </p>\r\n\r\n\t\t<ol>\r\n\t\t\r\n                    <li>\r\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\r\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\r\n                    This is often but not always written in pencil (and by the way, when the last letter is a G it often looks like a 9). The example below would be rendered \"II1A\":<br />\r\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    When entering information in the fields, please respect the case of words as seen on the card.\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\r\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\r\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\r\n                    you are fairly confident but not certain.\r\n                    </li>\r\n\r\n                    <li>\r\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\r\n                    into just one of our pre-specified boxes, then separate it by \"[;]\" (without any paragraph return/hitting the enter key). For example, on the\r\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\r\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\r\n                    </li>\r\n\r\n                    <li>\r\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\r\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\r\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\r\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\r\n                    </li>\r\n\r\n                    <li>\r\n                    If there is additional information on the card that you do not feel fits in one of our pre-specified\r\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\r\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\r\n                    </li>\r\n                    \r\n                </ol>\r\n\r\n\r\n\t\t</div>\r\n\r\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\r\n\t\t\t<p>\r\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\r\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\r\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\r\n\t            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\r\n\t            \tinput fields in response to your suggestions.\r\n\t            \t</p>\r\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\r\n\t\t</div>\r\n\t\t\r\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\r\n\t\t<p>\r\n                To find out how the project is progressing, suggest changes to this application or\r\n                propose new research ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n\t\t</div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n\r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 3 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<script>\r\n// Quick fix for IE8\r\nModernizr.load({\r\n  test: window.JSON,\r\n  nope: '/static/js/vendor/json2.min.js'\r\n});\r\n\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('arrowheads').done(function(data){\r\n            console.log(\"Total answers done for user: \" + data.done);\r\n\tif ((data.done == 1) && ($.cookie('surveyarrowheads') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('surveyarrowheads', 'shown', { path: '/'});\r\n        }\r\n\r\n    if ((data.done == 25) && ($.cookie('survey25arrowheads') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25arrowheads', 'shown', { path: '/'});\r\n        }\r\n        \r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'});\r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n\r\n\r\n// If user presses enter do the search\r\n// $(\"#locationRef\").bind('keypress', function(e){\r\n//     var code = (e.keyCode ? e.keyCode : e.which);\r\n//     if(code == 13) { //Enter keycode\r\n//         search();\r\n//     }\r\n// });\r\n\r\n// This function will load the marker of the city, and center the map on it\r\nfunction search(task, city, zoom) {\r\n    zoom = (typeof zoom === \"undefined\") ? 4 : zoom;\r\n    city = city.replace(/\\n/g,' ');\r\n    console.log(city);\r\n    if (city) {\r\n        var place = city;\r\n        $(\"#searchingError\").hide();\r\n    }\r\n    else {\r\n        $(\"#searching\").show();\r\n        $(\"#searchingError\").hide();\r\n        if ($('#toSearch').val()) {\r\n            var place = $(\"#toSearch\").val();\r\n        }\r\n        else {\r\n            $(\"#searching\").hide();\r\n            alert(\"Please, add a location in the Site section to search in the map\");\r\n            return\r\n        }\r\n    }\r\n\r\n    // Geocode the place using Nominatim OSM service\r\n    $.getJSON('http://nominatim.openstreetmap.org/search/' + place + '?format=json', function(output) {\r\n        if (output.length >= 1) {\r\n            //console.log(\"Lon: \"+ output[0].lon + \" Lat: \" + output[0].lat);\r\n            // Clean previous markers\r\n            $(\"#navigate\").addClass(\"active\");\r\n            $(\"#point\").removeClass(\"disabled\");\r\n            $(\"#point\").removeClass(\"active\");\r\n            task.objectLayer.removeAllFeatures();\r\n            //$(\"#answerbtn\").addClass(\"disabled\");\r\n            //$(\"#answerbtn\").unbind('click',submitTask);\r\n            //console.log(\"Map cleaned!\");\r\n            // Create a LonLat object to load the place marker\r\n            var lonLat = new OpenLayers.LonLat(output[0].lon, output[0].lat)\r\n                .transform(\r\n                    new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\r\n                    task.map.getProjectionObject() // to Spherical Mercator Projection\r\n                );\r\n            // Set the marker position\r\n            point = new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat);\r\n            task.longitude = lonLat.lon;\r\n            task.latitude = lonLat.lat;\r\n            task.objectLayer.addFeatures([new OpenLayers.Feature.Vector(point)]);\r\n            // Center the map\r\n            task.map.setCenter(lonLat, zoom);\r\n            //lonLat.transform(\r\n            //        map.getProjectionObject(), // from Spherical Mercator Projection\r\n            //        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n            //);\r\n            // Reset the lon & lat span objects\r\n            $(\"#lon\").text(\"-\");\r\n            $(\"#lat\").text(\"-\");\r\n\r\n            if (zoom !=4 ) {\r\n                $(\"#searchingTip\").show();\r\n            }\r\n\r\n            // Only show the messages when looking for user input\r\n            if ($('#toSearch').val()) {\r\n                $(\"#searching\").hide().fadeOut();\r\n                $(\"#searchingDone\").show().fadeIn().delay(2000).fadeOut();\r\n            }\r\n        }\r\n        else {\r\n            // Location not found, sorry\r\n            // Warn the user and try with another place\r\n            $(\"#searching\").hide().fadeOut();\r\n            $(\"#searchingError\").show();\r\n        }\r\n    });\r\n}\r\n\r\n\r\n\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        div_map.css(\"height\", \"390px\");\r\n        div_map.css(\"width\", \"600px\");\r\n        div_map.css(\"background\", \"#000\");\r\n\r\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\r\n\r\n        var extent = new OpenLayers.Bounds();\r\n        extent.extend(new OpenLayers.LonLat(1.758939,58.672231).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n    new OpenLayers.Projection('EPSG:900913')));\r\n        extent.extend(new OpenLayers.LonLat(-6.99745,49.96112).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n    new OpenLayers.Projection('EPSG:900913')));\r\n\r\n\r\n        $(\"#imgContainer\").append(div_map);\r\n        div_map.attr(\"id\", \"img_\" + task.id);\r\n\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 1024, 720]\r\n        });\r\n\r\n        task.map_img = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: copyright\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [1024, 720],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'img_' + task.id,\r\n          view: new ol.View({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 1.0\r\n          })\r\n        });\r\n        div_map.css(\"display\", \"none\");\r\n\r\n\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        img.attr(\"id\", \"img_task_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n        });\r\n        img.attr('src', task.info.url_b);\r\n        img.attr('width', '600px');\r\n        img.attr('height', '390px');\r\n        img.addClass('img-polaroid');\r\n        img.css(\"cursor\", \"zoom-in\");\r\n        task.info.image = img;\r\n\r\n        // MAP\r\n        var div_map = $(\"<div/>\", {'id': \"map_\" + task.id, 'class': 'map_canvas col-md-12'});\r\n        div_map.css(\"width\", \"360px\");\r\n        div_map.css(\"height\", \"500px\");\r\n        div_map.css(\"display\", \"none\");\r\n\r\n        // We need to append the div element asap otherwise OpenLayers will fail\r\n        $(\"#map\").append(div_map);\r\n\r\n        var map = new OpenLayers.Map('map_' + task.id, {\r\n            controls: [\r\n                new OpenLayers.Control.Navigation(),\r\n                new OpenLayers.Control.PanZoom(),\r\n                new OpenLayers.Control.LayerSwitcher(),\r\n                new OpenLayers.Control.MousePosition({displayProjection: new OpenLayers.Projection(\"EPSG:4326\")}),\r\n               // new OpenLayers.Control.ScaleLine(),\r\n                new OpenLayers.Control.Attribution()\r\n                ]\r\n        });\r\n\r\n        // Layers\r\n        // Open Street Map (default layer)\r\n        map.addLayer(new OpenLayers.Layer.OSM(\"Open Street Map\"));\r\n\r\n        // Google Maps Satellite layer\r\n        map.addLayer(new OpenLayers.Layer.Google(\r\n            \"Google Satellite\",\r\n            {type: google.maps.MapTypeId.SATELLITE}\r\n        ));\r\n\r\n        // Google Maps Physical layer\r\n        map.addLayer(new OpenLayers.Layer.Google(\r\n            \"Google Physical\",\r\n            {type: google.maps.MapTypeId.TERRAIN}\r\n        ));\r\n\r\n       \r\n\r\n        // Icon for the Urban Park Marker\r\n        var styleMapObject = new OpenLayers.StyleMap({\r\n            pointRadius: 15,\r\n            externalGraphic: 'http://img225.imageshack.us/img225/5237/youarehere2.png'\r\n        });\r\n\r\n        \r\n        // Layer for placing the urban park marker\r\n        var objectLayer = new OpenLayers.Layer.Vector(\"Find spot marker\", {\r\n            styleMap: styleMapObject,\r\n        });\r\n        map.addLayer(objectLayer);\r\n        task.objectLayer = objectLayer;\r\n\r\n        // Function to allow only the addition of one urban park per city\r\n        // The function gets the feature (point) and gets its location, transforms it to the right projection\r\n        // loads the lon and at into the HTML skeleton and disables the toolbar, so no more points can be added\r\n        disablePoint = function(feature) {\r\n            if ($(\"#answerbtn\").hasClass(\"disabled\")) {\r\n                $(\"#answerbtn\").removeClass('disabled');\r\n            }\r\n\r\n            $(\"#lat\").text(feature.geometry.y);\r\n            var tmp = feature.geometry.clone();\r\n            tmp.transform(\r\n                    task.map.getProjectionObject(), // from Spherical Mercator Projection\r\n                    new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n            );\r\n            $(\"#lon\").text(tmp.x);\r\n            $(\"#lat\").text(tmp.y);\r\n            task.lon = tmp.x;\r\n            task.lat = tmp.y;\r\n            task.drawControls['point'].deactivate();\r\n        }\r\n\r\n        // Default location to load the map\r\n        var lonLat = new OpenLayers.LonLat(-0.1279688 ,51.5077286 )\r\n            .transform(\r\n                new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\r\n                new OpenLayers.Projection(\"EPSG:900913\") // to Spherical Mercator Projection\r\n            );\r\n\r\n        // Enable drag & drop in the urban park Layer\r\n        var drag = new OpenLayers.Control.DragFeature(objectLayer, {\r\n            onComplete: function() {\r\n                var urbanParkPoint = task.objectLayer.features[0].geometry\r\n                var tmp = urbanParkPoint.clone();\r\n                tmp.transform(\r\n                        task.map.getProjectionObject(), // from Spherical Mercator Projection\r\n                        new OpenLayers.Projection(\"EPSG:4326\") // to transform from WGS 1984\r\n                );\r\n                // When the marker has been dropped, update the lon & lat of the urban park\r\n            }\r\n\r\n        });\r\n        // Add the drag & drop control into the map\r\n        map.addControl(drag);\r\n        // Activate drag & drop\r\n        drag.activate();\r\n\r\n        var drawControls = {\r\n            point:      new OpenLayers.Control.DrawFeature(objectLayer, OpenLayers.Handler.Point,\r\n                        { 'featureAdded': disablePoint})\r\n        }\r\n\r\n        // Add them to the map\r\n        for (var key in drawControls) {\r\n            map.addControl(drawControls[key]);\r\n        }\r\n        task.drawControls = drawControls;\r\n\r\n        task.map = map;\r\n        task.map.setOptions({restrictedExtent: extent});\r\n        task.lon = 0;\r\n        task.lat = 0;\r\n\r\n        search(task, \"united kingdom\");\r\n        } // End if task empty\r\n    else {\r\n        deferred.resolve(task);\r\n        }\r\n\r\n});\r\n\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(':input','#transcription')\r\n           .not(':button, :submit, :reset, :hidden, :radio')\r\n           .val('')\r\n           .removeAttr('checked')\r\n           .removeAttr('selected');\r\n      \r\n      \t$(\"a#raw\").attr(\"href\", task.info.url_b);\r\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n\t$(\"a#down\").attr(\"download\", task.id);\r\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\r\n\t\r\n        \r\n        $(\".fancybox\").fancybox();\r\n        $('#imgLink').tooltip();\r\n        $(\"[rel=tooltip]\").tooltip();\r\n        $(\"#searchingTip\").hide();\r\n        $(\"#question\").html(task.info.question);\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n        $(\"#img_\" + task.id).show();\r\n\r\n        // Clean\r\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\r\n        for (i = 1700; i < 2000; i++)\r\n        {\r\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\r\n        for (i = 1; i <= 12; i++)\r\n        {\r\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\r\n        for (i = 1; i <= 31; i++)\r\n        {\r\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        //var $input = $(\".pickadate\").pickadate({\r\n        //                 format: 'yyyy-mm-dd',\r\n        //                 selectYears: true,\r\n        //                 selectMonths: true,\r\n        //                 //min: new Date(1800,1,1),\r\n        //                 //max: new Date(2000,1,1),\r\n        //                 selectYears: 200,\r\n        //                 //formatSubmit: 'yyyy/mm/dd',\r\n        //                 });\r\n        // Use the picker object directly.\r\n        //var picker = $input.pickadate('picker')\r\n        //picker.set('select', [1900,1,1]);\r\n        //picker.clear();\r\n\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            evt.preventDefault();\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer != 'undefined') {\r\n                console.log(answer);\r\n                if (answer == 'search') {\r\n                    $(\"#searching\").show();\r\n                    search(task, $(\"#toSearch\").val(), 15);\r\n                }\r\n                else {\r\n                    task.answer = $(\"#transcription\").serializeJSON();\r\n                    console.log(task.answer);\r\n                    // Remove unwanted names\r\n                    for (var key in task.answer) {\r\n                        if ((key == 'City marker') || (key == 'Urban park marker') || (key.indexOf('OpenLayers_') == 0)) {\r\n                            delete task.answer[key];\r\n                        }\r\n                    }\r\n                    task.answer.optionsAccuracy = $('input[name=optionsAccuracy]:checked', '#transcription').val();\r\n                    console.log(task.answer.optionsAccuracy);\r\n                    // Convert the feature location into the GeoJSON format\r\n                    var geojson = new OpenLayers.Format.GeoJSON({\r\n                        'internalProjection': task.map.baseLayer.projection,\r\n                        'externalProjection': new OpenLayers.Projection(\"EPSG:4326\")\r\n                        });\r\n\r\n                    task.answer.geojson = JSON.parse(geojson.write(task.objectLayer.features[0]));\r\n\r\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ').toLowerCase();\r\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ').toLowerCase();\r\n                    console.log(task.answer);\r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"#map_\" + task.id).hide();\r\n                        $(\"#img_\" + task.id).hide();\r\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\r\n                        deferred.resolve();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                }\r\n            }\r\n            else {\r\n                console.log(answer);\r\n                console.log(typeof(answer));\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n});\r\n\r\nif(Modernizr.borderradius) {\r\n    pybossa.run('arrowheads');\r\n}\r\nelse {\r\n    $(\".skeleton\").hide();\r\n    $(\"#oldbrowser\").show();\r\n}\r\n$(window).off('.affix');\r\n$(\"#imgHolder\")\r\n    .removeClass(\"affix affix-top affix-bottom\")\r\n    .removeData(\"bs.affix\");\r\n\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/42'/>"}, {"id": 52, "created": "2014-08-29T10:16:20.632086", "updated": "2015-02-26T09:45:24.268570", "name": "British Museum Bronze Age Index Drawer A1 Flanged Chisels", "short_name": "flangedchiselsA1", "description": "British Museum Bronze Age Card Index transcription for drawer A1 flanged Chisels.", "long_description": "This application will help the [British\r\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\r\nNeil Wilkin, to make available a huge card catalogue of British prehistoric\r\nmetal artefacts discovered in the 19th and 20th century. This information has\r\nlong been known to be an extremely important untapped resource. Metal finds\r\nare not only crucial forms of evidence for dating Britain's prehistoric past,\r\nbut also tell us a great deal about prehistoric society and economy.\r\nDigitising the thousands of objects in this catalogue will make these records\r\npublicly available via their incorporation into the [Portable Antiquities\r\nScheme website](http://finds.org.uk). The result will be the largest national\r\ndatabase of prehistoric metal finds anywhere in the world and a near\r\ncomprehensive view of what we currently know about such finds in the UK.\r\n\r\nThe cards have been scanned and uploaded to\r\n[Flickr](https://www.flickr.com/photos/micropasts/), and it is from there that\r\nthe current application will retrieve and manipulate the scans. These cards\r\ncontain some fairly standardised kinds of information: about where the\r\nartefact was discovered, its dimensions, a longer description of what it looks\r\nlike, etc.\r\n\r\nWhat the research team would like people to do, is to transcribe the details\r\nfrom each section on the card into some pre-determined fields, and also to\r\nattempt to geo-reference the object via its place of discovery.\r\n\r\n### **Thank you!**\r\n\r\nHugh Fiske, Joellen mcGann, Margaret Ellen Joy, Jane Fellows and other\r\nanonymous contributors for completing the application.\r\n\r\n> Opening the treasures of the Bronze Age to the widest public is why I get\r\nup, I would love your help: <http://t.co/q7eWlIrD9j>\r\n\r\n>\r\n\r\n> -- Neil Wilkin (@NWilkinBM) [ April 16,\r\n2014](https://twitter.com/NWilkinBM/statuses/456421634237140992)\r\n\r\n### This project is on behalf of\r\n\r\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\r\nBritish Museum logo](/static/img/bmBlackWhite.png)\r\n\r\n### Find the code on Github\r\n\r\n![](https://crowdfunded.micropasts.org/assets/learn/github-ee049d767e762a0c6626051203a31f6e.png)\r\n\r\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"tutorial": "<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\n            <div class=\"modal-header\">\n                <h3 class=\"lead\">BM Bronze Age Index Drawer Flanged Chisels from drawer A1 transcription tutorial</h3>\n            </div>\n\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the\n                    index card and the line drawing of the object from the reverse side.\n                    An example of the front side of a card is shown below.\n                </p>\n\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n\n                <p>\n                    Each index card contains similar information and we are asking you to enter this information\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\n                    will hint that this information can be found \"Top of card\").\n                </p>\n\n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\n                        both entries that should be entered in the the Collection box, so you could simply enter\n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n\n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and\n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n\n            </div>\n\n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or\n                propose new research ideas based what you have transcribed, please have a look at\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../flangedchiselsA1/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_52_thumbnail_1424853748.png", "task_presenter": "<link rel=\"stylesheet\" href=\"/static/css/ol.css\" type=\"text/css\">\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n\r\n<script src=\"/static/js/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\r\n<script src=\"http://maps.google.com/maps/api/js?sensor=false\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n<script src=\"https://code.jquery.com/ui/1.8.1/jquery-ui.min.js\" type=\"text/javascript\"></script>\r\n\r\n<style type=\"text/css\">\r\n    .ui-autocomplete {\r\n\tbackground-color: white;\r\n\twidth: 300px;\r\n\tborder: 1px solid #cfcfcf;\r\n\tlist-style-type: none;\r\n\tpadding-left: 0px;\r\n    }\r\n    label {\r\n        font-size:16px;\r\n    }\r\n    #map_canvas label {\r\n        width: auto;\r\n        display: inline;\r\n    }\r\n    #map_canvas img {\r\n        max-width: none;\r\n    }\r\n    .affix {\r\n        width: inherit;\r\n        height: 0px;\r\n    }\r\n  \r\n    .affix-bottom {\r\n        top: auto !important;\r\n        position: fixed;\r\n        bottom: 240px;\r\n    }\r\n    \r\n    #imgContainer {\r\n        height: 390px;\r\n        width: 600px;\r\n    } \r\n#map {\r\nheight:400px;\r\nwidth:100%;\r\n}\r\n\r\n</style>\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Do you want to help us further?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing one task for the project. \r\n              We are interested in knowing how you found out about us.\r\n          </p>\r\n          <p>\r\n              Could you please answer two questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">\r\n            Congratulations! You have completed 25 tasks!\r\n        </h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing 25 tasks for the project. Now that you \r\n              have been using MicroPasts for a while, we would like to know how \r\n              you found it.\r\n          </p>\r\n          <p>\r\n              Could you please answer a few questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\r\n    <!-- Success and Error Messages for the user -->\r\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\r\n        <h2>\r\n            Browser problems!\r\n        </h2>\r\n        <p>\r\n            Sorry, but your browser does not support the current application. \r\n            If you want to contribute, please, upgrade to a modern web browser \r\n            like the open source and free alternative \r\n            <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or \r\n            <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a>.\r\n        </p>\r\n    </div>\r\n</div> \r\n<!-- End of Row -->\r\n\r\n<div style=\"margin-top:15px;\">\r\n    <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n    </div>\r\n    <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <img src=\"/static/img/loading.gif\">Loading next task...\r\n    </div>\r\n    <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <strong>The task has been completed!</strong> Thanks a lot!\r\n    </div>\r\n    <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <h2>\r\n            Congratulations!\r\n        </h2> \r\n        <p>\r\n            You have participated in <strong>all</strong> available tasks! Thank you for your interest and help.\r\n        </p>\r\n        <br/>\r\n        <img src=\"https://crowdfunded.micropasts.org/assets/logo-head.png\" width=\"200\" height=\"200\"/>\r\n        <div class=\"alert-actions\">\r\n            <a class=\"btn-default btn\" href=\"/\">Go back</a>\r\n            <a class=\"btn-default btn\" href=\"/app\">or, Check other applications</a>\r\n        </div>\r\n    </div>\r\n\r\n    <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n        <a class=\"close\">X.</a>\r\n        <strong>Error!</strong> Something went wrong, please contact the site \r\n        administrators via the forum, Twitter, email or our Facebook page.\r\n    </div>\r\n</div> <!-- End Success and Error Messages for the user -->\r\n\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n\r\n<!-- Start Skeleton Row-->\r\n<div class=\"row skeleton\"> \r\n\r\n        <h1 id=\"start\">\r\n            Please transcribe this index card\r\n        </h1> \r\n    \r\n    <!-- The question will be loaded here -->\r\n    \r\n    <span class=\"label label-info\">Note</span> You can use your mouse wheel track-pad to zoom in/out the picture, as well as drag & drop to navigate in the document.\r\n\r\n</div>\r\n\r\n<div class=\"row skeleton\">\r\n\r\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\r\n\r\n        <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\r\n        <form id=\"transcription\" role=\"form\">\r\n            \r\n            <!-- Object type form control --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"objectType\">Object Type</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\r\n            </div>\r\n            <!-- End of object type form control -->\r\n            \r\n            <!-- Date of discovery group -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\r\n                <div class=\"controls\">\r\n                    <!-- Year --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\r\n                    </div>\r\n                    <!-- Month --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\r\n                    </div>\r\n                    <!-- Day --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!-- End of date of discovery group --> \r\n\r\n            <!-- Right corner -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\r\n                <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n            \r\n             <!-- National grid reference -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\r\n                <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\">\r\n            </div>\r\n\r\n            <!-- Geographical grouping --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"site\">Site</label>\r\n                <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\r\n                <div class=\"input-append\">\r\n                    <label class=\"control-label\" for=\"site\">Georeference the site</label>\r\n                    <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site on a map\"></input>\r\n        \r\n\r\n<input type=\"hidden\" name=\"lat\" value=\"\" id=\"lat\">\r\n                <input type=\"hidden\" name=\"lon\" value=\"\" id=\"lon\">\r\n                </div>\r\n                \r\n                <div style=\"display:none;margin-top:15px;\" id=\"searching\" class=\"alert alert-info\">\r\n                    <img src=\"/static/img/loading.gif\"> Searching...\r\n                </div>\r\n                \r\n                <div style=\"display:none;margin-top:15px;\" id=\"searchingError\" class=\"alert alert-warning\">\r\n                    <strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> in the map.\r\n                </div>\r\n                 \r\n                <div id=\"searchingTip\" class=\"alert alert-info\" style=\"display:none; margin-top:10px;\">\r\n                    Drag & drop the <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> to improve the location\r\n                </div>\r\n                \r\n                <div id=\"map\" style=\"margin-top:15px;\">\r\n                    \r\n                </div>\r\n\r\n            </div>\r\n            <!-- End of geo group --> \r\n\r\n           \r\n            \r\n            <!-- The collection --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"collection\">Collection</label>\r\n                <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- The publications cited --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"publications\">Publications</label>\r\n                <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Length in mm --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"length\">Length</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"length\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Width -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"width\">Width</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"width\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Edge --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"edge\">Edge</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"edge\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Thickness --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"thickness\">Thickness</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"thickness\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Weight -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"weight\">Weight</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"weight\" placeholder=\"In grammes\">\r\n            </div>\r\n\r\n            <!-- The composition of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"composition\">Composition</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\r\n            </div>\r\n\r\n            <!-- The description of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"description\">Description</label>\r\n                <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\" ></textarea>\r\n            </div>\r\n\r\n            <!-- The surface of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"surface\">Surface</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\r\n            </div>\r\n\r\n            <!-- The patina of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"patina\">Patina</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Associations for the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"associations\">Associations</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Remarks --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"remarks\">Remarks</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Transcriber's comments --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if you have any.\"></textarea>\r\n            </div>\r\n        \r\n        </form>\r\n\r\n        <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\r\n            \r\n\t<!-- Feedback items for the user -->\r\n        <p>\r\n            You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span>\r\n        </p>\r\n        <p>\r\n            You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\t<!-- End of feedback row -->\r\n\r\n    </div>\r\n    <!-- End of Question and Submission DIV (column) -->\r\n    \r\n    <!-- The column holding the open layers div --> \r\n    \r\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\">\r\n        <!-- Start of Photo DIV (column) -->\r\n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"550\">\r\n            <div class=\"btn-group\">\r\n                <a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\r\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n\t        <a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\r\n        \t<a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\r\n            </div>\r\n            <!-- The container for the zoomer --> \r\n            <div id=\"imgContainer\"></div>\r\n            <div id=\"taskImg\"></div>\r\n        </div><!-- End of Photo DIV (columnt) -->\r\n    </div>\r\n\r\n</div><!-- End of Skeleton Row -->\r\n\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n                <h3 class=\"lead\">BM Bronze Age Index Flanged Chisels from drawer A1 transcription tutorial</h3>\r\n            </div>\r\n\t<!-- stepped modal body -->\r\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n\r\n                <p>\r\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\r\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\r\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\r\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\r\n                    card (if a card does not load, you can still click the \"View on Flickr\" button to see the contents). Most scanned images combine the written details from the one side of the\r\n                    index card and the line drawing of the object from the reverse side.\r\n                    An example of the front side of a card is shown below.\r\n                </p>\r\n\r\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\r\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\r\n\r\n                <p>\r\n                    Each index card contains similar information and we are asking you to enter this information\r\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\r\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\r\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\r\n                    will hint that this information can be found \"Top of card\").\r\n                </p>\r\n\r\n            </div>\r\n\r\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n\t\t     <p>\r\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\r\n                    Here are some further issues to watch out for:\r\n                    </p>\r\n\r\n\t\t<ol>\r\n\t\t\r\n                    <li>\r\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\r\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\r\n                    This is often but not always written in pencil (and by the way, when the last letter is a G it often looks like a 9). The example below would be rendered \"II1A\":<br />\r\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    When entering information in the fields, please respect the case of words as seen on the card.\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\r\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\r\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\r\n                    you are fairly confident but not certain.\r\n                    </li>\r\n\r\n                    <li>\r\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\r\n                    into just one of our pre-specified boxes, then separate it by \"[;]\" (without any paragraph return/hitting the enter key). For example, on the\r\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\r\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\r\n                    </li>\r\n\r\n                    <li>\r\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\r\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\r\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\r\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\r\n                    </li>\r\n\r\n                    <li>\r\n                    If there is additional information on the card that you do not feel fits in one of our pre-specified\r\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\r\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\r\n                    </li>\r\n                    \r\n                </ol>\r\n\r\n\r\n\t\t</div>\r\n\r\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\r\n\t\t\t<p>\r\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\r\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\r\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\r\n\t            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\r\n\t            \tinput fields in response to your suggestions.\r\n\t            \t</p>\r\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\r\n\t\t</div>\r\n\t\t\r\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\r\n\t\t<p>\r\n                To find out how the project is progressing, suggest changes to this application or\r\n                propose new research ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n\t\t</div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 3 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<!-- The modernizer script --> \r\n\r\n<script>\r\n// Quick fix for IE8\r\nModernizr.load({\r\n  test: window.JSON,\r\n  nope: '/static/js/vendor/json2.min.js'\r\n});\r\n</script>\r\n<!-- The main pybossa functions --> \r\n<script>\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('flangedchiselsA1').done(function(data){\r\n        console.log(data);\r\n        console.log(\"Total answers done for user: \" + data.done);\r\n        if ((data.done == 1) && ($.cookie('surveyflangedchiselsA1') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('survey', 'shown', { path: '/'});\r\n        }\r\n        if ((data.done == 25) && ($.cookie('survey25flangedchiselsA1') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25flangedchiselsA1', 'shown', { path: '/'});\r\n        }\r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'});\r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n</script>\r\n\r\n<script>\r\nvar geocoder;\r\nvar map;\r\nvar marker;\r\n    \r\nfunction initialize(){\r\n//MAP\r\n  var latlng = new google.maps.LatLng(54, -2);\r\n  var options = {\r\n    zoom: 4,\r\n    center: latlng,\r\n    mapTypeId: google.maps.MapTypeId.TERRAIN\r\n  };\r\n        \r\n  map = new google.maps.Map(document.getElementById(\"map\"), options);\r\n        \r\n  //GEOCODER\r\n  geocoder = new google.maps.Geocoder();\r\n        \r\n  marker = new google.maps.Marker({\r\n    map: map,\r\n    draggable: true\r\n  });\r\n\t\t\t\t\r\n}\r\n\t\t\r\n$(document).ready(function() { \r\n         \r\n  initialize();\r\n\t\t\t\t  \r\n  $(function() {\r\n    $(\"#toSearch\").autocomplete({\r\n      //This bit uses the geocoder to fetch address values\r\n      source: function(request, response) {\r\n        geocoder.geocode( {'address': request.term }, function(results, status) {\r\n          response($.map(results, function(item) {\r\n            return {\r\n              label:  item.formatted_address,\r\n              value: item.formatted_address,\r\n              latitude: item.geometry.location.lat(),\r\n              longitude: item.geometry.location.lng()\r\n            }\r\n          }));\r\n        })\r\n      },\r\n      //This bit is executed upon selection of an address\r\n      select: function(event, ui) {\r\n        $(\"#lat\").val(ui.item.latitude);\r\n        $(\"#lon\").val(ui.item.longitude);\r\n        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);\r\n        console.log('Latitude: ' + ui.item.latitude);\r\n        console.log('Longitude: ' + ui.item.longitude);\r\n        marker.setPosition(location);\r\n        map.setCenter(location);\r\n      }\r\n    });\r\n  });\r\n\t\r\n  //Add listener to marker for reverse geocoding\r\n  google.maps.event.addListener(marker, 'drag', function() {\r\n    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {\r\n      if (status == google.maps.GeocoderStatus.OK) {\r\n        if (results[0]) {\r\n          $('#toSearch').val(results[0].formatted_address);\r\n          $('#lat').val(marker.getPosition().lat());\r\n          $('#lon').val(marker.getPosition().lng());\r\n          console.log('Longitude: ' + marker.getPosition().lng());\r\n          console.log('Latitude: ' + marker.getPosition().lat());\r\n        }\r\n      }\r\n    });\r\n  });\r\n  \r\n});  \r\n</script>\r\n<script>\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        \r\n        div_map.css(\"height\", \"390px\");\r\n        div_map.css(\"width\", \"600px\");\r\n        div_map.css(\"background\", \"#000\");\r\n\r\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\r\n\r\n        var extent = new OpenLayers.Bounds();\r\n        extent.extend(new OpenLayers.LonLat(1.758939,58.672231).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n        \r\n        extent.extend(new OpenLayers.LonLat(-6.99745,49.96112).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n\r\n\r\n        $(\"#imgContainer\").append(div_map);\r\n        div_map.attr(\"id\", \"img_\" + task.id);\r\n\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 1024, 720]\r\n        });\r\n\r\n        task.map_img = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: copyright\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [1024, 720],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'img_' + task.id,\r\n          view: new ol.View({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 1.0\r\n          })\r\n        });\r\n        div_map.css(\"display\", \"none\");\r\n\r\n\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        img.attr(\"id\", \"img_task_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n        });\r\n        img.attr('src', task.info.url_b);\r\n        img.attr('width', '600px');\r\n        img.attr('height', '390px');\r\n        img.addClass('img-polaroid');\r\n        img.css(\"cursor\", \"zoom-in\");\r\n        task.info.image = img;\r\n\r\n        \r\n        }  else {\r\n            deferred.resolve(task);\r\n        }\r\n\r\n});\r\n</script>\r\n<script>\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(':input','#transcription')\r\n           .not(':button, :submit, :reset, :hidden, :radio')\r\n           .val('')\r\n           .removeAttr('checked')\r\n           .removeAttr('selected');\r\n      \r\n      \t$(\"a#raw\").attr(\"href\", task.info.url_b);\r\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n\t$(\"a#down\").attr(\"download\", task.id);\r\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\r\n        $(\".fancybox\").fancybox();\r\n        $('#imgLink').tooltip();\r\n        $(\"[rel=tooltip]\").tooltip();\r\n        $(\"#searchingTip\").hide();\r\n        $(\"#question\").html(task.info.question);\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n        $(\"#img_\" + task.id).show();\r\n\r\n        // Clean\r\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\r\n        for (i = 1700; i < 2000; i++) {\r\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\r\n        for (i = 1; i <= 12; i++)  {\r\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\r\n        for (i = 1; i <= 31; i++) {\r\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            evt.preventDefault();\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer !== 'undefined') {\r\n                console.log(answer);\r\n                if (answer === 'search') {\r\n                    $(\"#searching\").show();\r\n                    search(task, $(\"#toSearch\").val(), 15);\r\n                } else {\r\n                    task.answer = $(\"#transcription\").serializeJSON();\r\n                    console.log(task.answer);\r\n                   if($('#lon').val()) {\r\n                   var geojson = {\r\n                       \"geometry\": {\r\n                            \"type\": \"Point\",\r\n                            \"coordinates\": [\r\n                                        $('#lon').val(),\r\n                                        $('#lat').val()\r\n                                ]\r\n                        },\r\n                        \"crs\": {\r\n                          \"type\": \"name\",\r\n                          \"properties\": {\r\n                            \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\"\r\n                          }\r\n                        },\r\n                        \"type\": \"Feature\",\r\n                        \"properties\": {\r\n\r\n                        }\r\n                   };\r\n                   console.log(geojson);\r\n                    task.answer.geojson = geojson;\r\n                }\r\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ');\r\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ');\r\n                    console.log(task.answer);\r\n                    \r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"#map_\" + task.id).hide();\r\n                        $(\"#img_\" + task.id).hide();\r\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\r\n                        deferred.resolve();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                }\r\n            } else {\r\n                console.log(answer);\r\n                console.log(typeof(answer));\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n});\r\n\r\nif(Modernizr.borderradius) {\r\n    pybossa.run('flangedchiselsA1');\r\n}\r\nelse {\r\n    $(\".skeleton\").hide();\r\n    $(\"#oldbrowser\").show();\r\n}\r\n$(window).off('.affix');\r\n$(\"#imgHolder\")\r\n    .removeClass(\"affix affix-top affix-bottom\")\r\n    .removeData(\"bs.affix\");\r\n</script>\r\n\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/52'/>"}, {"id": 53, "created": "2014-08-29T14:54:52.111432", "updated": "2015-02-26T09:45:08.145139", "name": "British Museum Bronze Age Index Drawer A1 flanged Axes", "short_name": "flangedAxesA1", "description": "British Museum Bronze Age Card Index transcription for drawer A1 flanged Axes.", "long_description": "This application will help the [British\r\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\r\nNeil Wilkin, to make available a huge card catalogue of British prehistoric\r\nmetal artefacts discovered in the 19th and 20th century. This information has\r\nlong been known to be an extremely important untapped resource. Metal finds\r\nare not only crucial forms of evidence for dating Britain's prehistoric past,\r\nbut also tell us a great deal about prehistoric society and economy.\r\nDigitising the thousands of objects in this catalogue will make these records\r\npublicly available via their incorporation into the [Portable Antiquities\r\nScheme website](http://finds.org.uk). The result will be the largest national\r\ndatabase of prehistoric metal finds anywhere in the world and a near\r\ncomprehensive view of what we currently know about such finds in the UK.\r\n\r\nThe cards have been scanned and uploaded to\r\n[Flickr](https://www.flickr.com/photos/micropasts/), and it is from there that\r\nthe current application will retrieve and manipulate the scans. These cards\r\ncontain some fairly standardised kinds of information: about where the\r\nartefact was discovered, its dimensions, a longer description of what it looks\r\nlike, etc.\r\n\r\nWhat the research team would like people to do, is to transcribe the details\r\nfrom each section on the card into some pre-determined fields, and also to\r\nattempt to geo-reference the object via its place of discovery.\r\n\r\n### **Thank you!**\r\n\r\nLucy Ellis, Jos Kleijne, Hugh Fiske, Cheryl Ellsworth, Mary Thomson, Elaine\r\nDale, Jeff Okazaki, Joseph Koivisto, Bianca Cabrera, Latifa Walker, Valeska\r\nBecker, Joellen mcGann, Dina Fathalla, scruffyarcher, Margaret Ellen Joy, Tim\r\nMudie, Jane Fellows, Swantje Dogunke, John Marr, Denis Antoine, Andrew\r\nParkinson, Heidi Lund, Raest Wylde, Maruta Purvina, Maragkaki Froso, Maria\r\nChristakou, Christopher Wai, Susan Magyarody, Wilhelmina Bunn, Billie Randle,\r\nDanielle Haigh-Wood, Jimena Bordes, Rachael Sparks, Wesley Church, Michael\r\nGeorge Adams, Elizabeth Dale, Dianne Illsley, Lynn Cornelius, Juliet Taylor,\r\nSarah Allana Reynolds, Lucas Suter, Franck Pasqualini, Gillian Barnes,\r\nStephanie Choy, Robert Brockman, Jeff Anderson, Frances Bagnall, Tracey\r\nTomashpol, David Christensen, Patricia Townend, Zack Broderick, Darren\r\nKinsman, Scott Benson, Craig Allen Carr, Jeffrey Vogatts and other anonymous\r\ncontributors for completing this application.\r\n\r\n> Opening the treasures of the Bronze Age to the widest public is why I get\r\nup, I would love your help: <http://t.co/q7eWlIrD9j>\r\n\r\n>\r\n\r\n> -- Neil Wilkin (@NWilkinBM) [ April 16,\r\n2014](https://twitter.com/NWilkinBM/statuses/456421634237140992)\r\n\r\n### This project is on behalf of\r\n\r\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\r\nBritish Museum logo](/static/img/bmBlackWhite.png)\r\n\r\n### Find the code on Github\r\n\r\n![](https://crowdfunded.micropasts.org/assets/learn/github-ee049d767e762a0c6626051203a31f6e.png)\r\n\r\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"tutorial": "<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\n            <div class=\"modal-header\">\n                <h3 class=\"lead\">BM Bronze Age Index Drawer flanged axes from drawer A1 transcription tutorial</h3>\n            </div>\n\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the\n                    index card and the line drawing of the object from the reverse side.\n                    An example of the front side of a card is shown below.\n                </p>\n\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n\n                <p>\n                    Each index card contains similar information and we are asking you to enter this information\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\n                    will hint that this information can be found \"Top of card\").\n                </p>\n\n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\n                        both entries that should be entered in the the Collection box, so you could simply enter\n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n\n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and\n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n\n            </div>\n\n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or\n                propose new research ideas based what you have transcribed, please have a look at\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../flangedAxesA1/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_53_thumbnail_1424853754.png", "task_presenter": "<link rel=\"stylesheet\" href=\"/static/css/ol.css\" type=\"text/css\">\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n\r\n<script src=\"/static/js/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\r\n<script src=\"http://maps.google.com/maps/api/js?sensor=false\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n<script src=\"https://code.jquery.com/ui/1.8.1/jquery-ui.min.js\" type=\"text/javascript\"></script>\r\n\r\n<style type=\"text/css\">\r\n    .ui-autocomplete {\r\n\tbackground-color: white;\r\n\twidth: 300px;\r\n\tborder: 1px solid #cfcfcf;\r\n\tlist-style-type: none;\r\n\tpadding: 10px;\r\n    \r\n    }\r\n    label {\r\n        font-size:16px;\r\n    }\r\n    #map_canvas label {\r\n        width: auto;\r\n        display: inline;\r\n    }\r\n    #map_canvas img {\r\n        max-width: none;\r\n    }\r\n    .affix {\r\n        width: inherit;\r\n        height: 0px;\r\n    }\r\n  \r\n    .affix-bottom {\r\n        top: auto !important;\r\n        position: fixed;\r\n        bottom: 240px;\r\n    }\r\n    \r\n    #imgContainer {\r\n        height: 390px;\r\n        width: 600px;\r\n    } \r\n#map {\r\nheight:400px;\r\nwidth:100%;\r\n}\r\n\r\n</style>\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Do you want to help us further?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing one task for the project. \r\n              We are interested in knowing how you found out about us.\r\n          </p>\r\n          <p>\r\n              Could you please answer two questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">\r\n            Congratulations! You have completed 25 tasks!\r\n        </h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing 25 tasks for the project. Now that you \r\n              have been using MicroPasts for a while, we would like to know how \r\n              you found it.\r\n          </p>\r\n          <p>\r\n              Could you please answer a few questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\r\n    <!-- Success and Error Messages for the user -->\r\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\r\n        <h2>\r\n            Browser problems!\r\n        </h2>\r\n        <p>\r\n            Sorry, but your browser does not support the current application. \r\n            If you want to contribute, please, upgrade to a modern web browser \r\n            like the open source and free alternative \r\n            <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or \r\n            <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a>.\r\n        </p>\r\n    </div>\r\n</div> \r\n<!-- End of Row -->\r\n\r\n<div style=\"margin-top:15px;\">\r\n    <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n    </div>\r\n    <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <img src=\"/static/img/loading.gif\">Loading next task...\r\n    </div>\r\n    <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <strong>The task has been completed!</strong> Thanks a lot!\r\n    </div>\r\n    <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <h2>\r\n            Congratulations!\r\n        </h2> \r\n        <p>\r\n            You have participated in <strong>all</strong> available tasks! Thank you for your interest and help.\r\n        </p>\r\n        <br/>\r\n        <img src=\"https://crowdfunded.micropasts.org/assets/logo-head.png\" width=\"200\" height=\"200\"/>\r\n        <div class=\"alert-actions\">\r\n            <a class=\"btn-default btn\" href=\"/\">Go back</a>\r\n            <a class=\"btn-default btn\" href=\"/app\">or, Check other applications</a>\r\n        </div>\r\n    </div>\r\n\r\n    <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n        <a class=\"close\">X.</a>\r\n        <strong>Error!</strong> Something went wrong, please contact the site \r\n        administrators via the forum, Twitter, email or our Facebook page.\r\n    </div>\r\n</div> <!-- End Success and Error Messages for the user -->\r\n\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n\r\n<!-- Start Skeleton Row-->\r\n<div class=\"row skeleton\"> \r\n\r\n        <h1 id=\"start\">\r\n            Please transcribe this index card\r\n        </h1> \r\n    \r\n    <!-- The question will be loaded here -->\r\n    \r\n    <span class=\"label label-info\">Note</span> You can use your mouse wheel track-pad to zoom in/out the picture, as well as drag & drop to navigate in the document.\r\n\r\n</div>\r\n\r\n<div class=\"row skeleton\">\r\n\r\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\r\n\r\n        <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\r\n        <form id=\"transcription\" role=\"form\">\r\n            \r\n            <!-- Object type form control --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"objectType\">Object Type</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\r\n            </div>\r\n            <!-- End of object type form control -->\r\n            \r\n            <!-- Date of discovery group -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\r\n                <div class=\"controls\">\r\n                    <!-- Year --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\r\n                    </div>\r\n                    <!-- Month --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\r\n                    </div>\r\n                    <!-- Day --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!-- End of date of discovery group --> \r\n\r\n            <!-- Right corner -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\r\n                <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n            \r\n             <!-- National grid reference -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\r\n                <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\">\r\n            </div>\r\n\r\n            <!-- Geographical grouping --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"site\">Site</label>\r\n                <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\r\n                <div class=\"input-append\">\r\n                    <label class=\"control-label\" for=\"site\">Georeference the site</label>\r\n                    <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site on a map\"></input>\r\n\t\t\t\t\t<input type=\"hidden\" name=\"lat\" value=\"\" id=\"lat\">\r\n              \t\t<input type=\"hidden\" name=\"lon\" value=\"\" id=\"lon\">\r\n                </div>\r\n             \r\n                <div id=\"map\" style=\"margin-top:15px;\">\r\n                    \r\n                </div>\r\n\r\n            </div>\r\n            <!-- End of geo group --> \r\n\r\n           \r\n            \r\n            <!-- The collection --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"collection\">Collection</label>\r\n                <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- The publications cited --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"publications\">Publications</label>\r\n                <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Length in mm --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"length\">Length</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"length\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Width -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"width\">Width</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"width\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Edge --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"edge\">Edge</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"edge\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Thickness --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"thickness\">Thickness</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"thickness\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Weight -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"weight\">Weight</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"weight\" placeholder=\"In grammes\">\r\n            </div>\r\n\r\n            <!-- The composition of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"composition\">Composition</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\r\n            </div>\r\n\r\n            <!-- The description of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"description\">Description</label>\r\n                <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\" ></textarea>\r\n            </div>\r\n\r\n            <!-- The surface of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"surface\">Surface</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\r\n            </div>\r\n\r\n            <!-- The patina of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"patina\">Patina</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Associations for the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"associations\">Associations</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Remarks --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"remarks\">Remarks</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Transcriber's comments --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if you have any.\"></textarea>\r\n            </div>\r\n        \r\n        </form>\r\n\r\n        <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\r\n            \r\n\t<!-- Feedback items for the user -->\r\n        <p>\r\n            You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span>\r\n        </p>\r\n        <p>\r\n            You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\t<!-- End of feedback row -->\r\n\r\n    </div>\r\n    <!-- End of Question and Submission DIV (column) -->\r\n    \r\n    <!-- The column holding the open layers div --> \r\n    \r\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\">\r\n        <!-- Start of Photo DIV (column) -->\r\n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"550\">\r\n            <div class=\"btn-group\">\r\n                <a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\r\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n\t        <a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\r\n        \t<a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\r\n            </div>\r\n            <!-- The container for the zoomer --> \r\n            <div id=\"imgContainer\"></div>\r\n            <div id=\"taskImg\"></div>\r\n        </div><!-- End of Photo DIV (columnt) -->\r\n    </div>\r\n\r\n</div><!-- End of Skeleton Row -->\r\n\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n                <h3 class=\"lead\">BM Bronze Age Index flanged axes from drawer A1 transcription tutorial</h3>\r\n            </div>\r\n\t<!-- stepped modal body -->\r\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n\r\n                <p>\r\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\r\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\r\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\r\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\r\n                    card (if a card does not load, you can still click the \"View on Flickr\" button to see the contents). Most scanned images combine the written details from the one side of the\r\n                    index card and the line drawing of the object from the reverse side.\r\n                    An example of the front side of a card is shown below.\r\n                </p>\r\n\r\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\r\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\r\n\r\n                <p>\r\n                    Each index card contains similar information and we are asking you to enter this information\r\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\r\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\r\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\r\n                    will hint that this information can be found \"Top of card\").\r\n                </p>\r\n\r\n            </div>\r\n\r\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n\t\t     <p>\r\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\r\n                    Here are some further issues to watch out for:\r\n                    </p>\r\n\r\n\t\t<ol>\r\n\t\t\r\n                    <li>\r\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\r\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\r\n                    This is often but not always written in pencil (and by the way, when the last letter is a G it often looks like a 9). The example below would be rendered \"II1A\":<br />\r\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    When entering information in the fields, please respect the case of words as seen on the card.\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\r\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\r\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\r\n                    you are fairly confident but not certain.\r\n                    </li>\r\n\r\n                    <li>\r\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\r\n                    into just one of our pre-specified boxes, then separate it by \"[;]\" (without any paragraph return/hitting the enter key). For example, on the\r\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\r\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\r\n                    </li>\r\n\r\n                    <li>\r\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\r\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\r\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\r\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\r\n                    </li>\r\n\r\n                    <li>\r\n                    If there is additional information on the card that you do not feel fits in one of our pre-specified\r\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\r\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\r\n                    </li>\r\n                    \r\n                </ol>\r\n\r\n\r\n\t\t</div>\r\n\r\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\r\n\t\t\t<p>\r\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\r\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\r\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\r\n\t            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\r\n\t            \tinput fields in response to your suggestions.\r\n\t            \t</p>\r\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\r\n\t\t</div>\r\n\t\t\r\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\r\n\t\t<p>\r\n                To find out how the project is progressing, suggest changes to this application or\r\n                propose new research ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n\t\t</div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 3 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<!-- The modernizer script --> \r\n\r\n<script>\r\n// Quick fix for IE8\r\nModernizr.load({\r\n  test: window.JSON,\r\n  nope: '/static/js/vendor/json2.min.js'\r\n});\r\n</script>\r\n<!-- The main pybossa functions --> \r\n<script>\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('flangedAxesA1').done(function(data){\r\n        console.log(data);\r\n        console.log(\"Total answers done for user: \" + data.done);\r\n        if ((data.done == 1) && ($.cookie('surveyflangedAxesA1') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('surveyflangedAxesA1', 'shown', { path: '/'});\r\n        }\r\n        if ((data.done == 25) && ($.cookie('survey25flangedAxesA1') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25flangedAxesA1', 'shown', { path: '/'});\r\n        }\r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'});\r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n</script>\r\n\r\n<script>\r\nvar geocoder;\r\nvar map;\r\nvar marker;\r\n    \r\nfunction initialize(){\r\n//MAP\r\n  var latlng = new google.maps.LatLng(54, -2);\r\n  var options = {\r\n    zoom: 4,\r\n    center: latlng,\r\n    mapTypeId: google.maps.MapTypeId.TERRAIN\r\n  };\r\n        \r\n  map = new google.maps.Map(document.getElementById(\"map\"), options);\r\n        \r\n  //GEOCODER\r\n  geocoder = new google.maps.Geocoder();\r\n        \r\n  marker = new google.maps.Marker({\r\n    map: map,\r\n    draggable: true\r\n  });\r\n\t\t\t\t\r\n}\r\n\t\t\r\n$(document).ready(function() { \r\n         \r\n  initialize();\r\n\t\t\t\t  \r\n  $(function() {\r\n    $(\"#toSearch\").autocomplete({\r\n      //This bit uses the geocoder to fetch address values\r\n      source: function(request, response) {\r\n        geocoder.geocode( {'address': request.term }, function(results, status) {\r\n          response($.map(results, function(item) {\r\n            return {\r\n              label:  item.formatted_address,\r\n              value: item.formatted_address,\r\n              latitude: item.geometry.location.lat(),\r\n              longitude: item.geometry.location.lng()\r\n            }\r\n          }));\r\n        })\r\n      },\r\n      //This bit is executed upon selection of an address\r\n      select: function(event, ui) {\r\n        $(\"#lat\").val(ui.item.latitude);\r\n        $(\"#lon\").val(ui.item.longitude);\r\n        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);\r\n        console.log('Latitude: ' + ui.item.latitude);\r\n        console.log('Longitude: ' + ui.item.longitude);\r\n        marker.setPosition(location);\r\n        map.setCenter(location);\r\n      }\r\n    });\r\n  });\r\n\t\r\n  //Add listener to marker for reverse geocoding\r\n  google.maps.event.addListener(marker, 'drag', function() {\r\n    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {\r\n      if (status == google.maps.GeocoderStatus.OK) {\r\n        if (results[0]) {\r\n          $('#toSearch').val(results[0].formatted_address);\r\n          $('#lat').val(marker.getPosition().lat());\r\n          $('#lon').val(marker.getPosition().lng());\r\n          console.log('Longitude: ' + marker.getPosition().lng());\r\n          console.log('Latitude: ' + marker.getPosition().lat());\r\n        }\r\n      }\r\n    });\r\n  });\r\n  \r\n});  \r\n</script>\r\n<script>\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        \r\n        div_map.css(\"height\", \"390px\");\r\n        div_map.css(\"width\", \"600px\");\r\n        div_map.css(\"background\", \"#000\");\r\n\r\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\r\n\r\n        var extent = new OpenLayers.Bounds();\r\n        extent.extend(new OpenLayers.LonLat(1.758939,58.672231).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n        \r\n        extent.extend(new OpenLayers.LonLat(-6.99745,49.96112).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n\r\n\r\n        $(\"#imgContainer\").append(div_map);\r\n        div_map.attr(\"id\", \"img_\" + task.id);\r\n\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 1024, 720]\r\n        });\r\n\r\n        task.map_img = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: copyright\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [1024, 720],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'img_' + task.id,\r\n          view: new ol.View({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 1.0\r\n          })\r\n        });\r\n        div_map.css(\"display\", \"none\");\r\n\r\n\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        img.attr(\"id\", \"img_task_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n        });\r\n        img.attr('src', task.info.url_b);\r\n        img.attr('width', '600px');\r\n        img.attr('height', '390px');\r\n        img.addClass('img-polaroid');\r\n        img.css(\"cursor\", \"zoom-in\");\r\n        task.info.image = img;\r\n\r\n        \r\n        }  else {\r\n            deferred.resolve(task);\r\n        }\r\n\r\n});\r\n</script>\r\n<script>\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(':input','#transcription')\r\n           .not(':button, :submit, :reset, :hidden, :radio')\r\n           .val('')\r\n           .removeAttr('checked')\r\n           .removeAttr('selected');\r\n      \r\n      \t$(\"a#raw\").attr(\"href\", task.info.url_b);\r\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n\t$(\"a#down\").attr(\"download\", task.id);\r\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\r\n        $(\".fancybox\").fancybox();\r\n        $('#imgLink').tooltip();\r\n        $(\"[rel=tooltip]\").tooltip();\r\n        $(\"#searchingTip\").hide();\r\n        $(\"#question\").html(task.info.question);\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n        $(\"#img_\" + task.id).show();\r\n\r\n        // Clean\r\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\r\n        for (i = 1700; i < 2000; i++) {\r\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\r\n        for (i = 1; i <= 12; i++)  {\r\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\r\n        for (i = 1; i <= 31; i++) {\r\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            evt.preventDefault();\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer !== 'undefined') {\r\n                console.log(answer);\r\n                if (answer === 'search') {\r\n                    $(\"#searching\").show();\r\n                    search(task, $(\"#toSearch\").val(), 15);\r\n                } else {\r\n                    task.answer = $(\"#transcription\").serializeJSON();\r\n                    console.log(task.answer);\r\n                   if($('#lon').val()) {\r\n                   var geojson = {\r\n                       \"geometry\": {\r\n                            \"type\": \"Point\",\r\n                            \"coordinates\": [\r\n                                        $('#lon').val(),\r\n                                        $('#lat').val()\r\n                                ]\r\n                        },\r\n                        \"crs\": {\r\n                          \"type\": \"name\",\r\n                          \"properties\": {\r\n                            \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\"\r\n                          }\r\n                        },\r\n                        \"type\": \"Feature\",\r\n                        \"properties\": {\r\n\r\n                        }\r\n                   };\r\n                   console.log(geojson);\r\n                    task.answer.geojson = geojson;\r\n                }\r\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ');\r\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ');\r\n                    console.log(task.answer);\r\n                    \r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"#map_\" + task.id).hide();\r\n                        $(\"#img_\" + task.id).hide();\r\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\r\n                        deferred.resolve();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                }\r\n            } else {\r\n                console.log(answer);\r\n                console.log(typeof(answer));\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n});\r\n\r\nif(Modernizr.borderradius) {\r\n    pybossa.run('flangedAxesA1');\r\n}\r\nelse {\r\n    $(\".skeleton\").hide();\r\n    $(\"#oldbrowser\").show();\r\n}\r\n$(window).off('.affix');\r\n$(\"#imgHolder\")\r\n    .removeClass(\"affix affix-top affix-bottom\")\r\n    .removeData(\"bs.affix\");\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/53'/>"}, {"id": 60, "created": "2014-09-08T15:25:14.193943", "updated": "2015-02-26T09:48:59.021847", "name": "British Museum Bronze Age Index Slide Fastener Drawer A16", "short_name": "SlideFastenerA16", "description": "British Museum Slide Fastener Drawer A16.", "long_description": "This application will help the [British\r\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\r\nNeil Wilkin, to make available a huge card catalogue of British prehistoric\r\nmetal artefacts discovered in the 19th and 20th century. This information has\r\nlong been known to be an extremely important untapped resource. Metal finds\r\nare not only crucial forms of evidence for dating Britain's prehistoric past,\r\nbut also tell us a great deal about prehistoric society and economy.\r\nDigitising the thousands of objects in this catalogue will make these records\r\npublicly available via their incorporation into the [Portable Antiquities\r\nScheme website](http://finds.org.uk). The result will be the largest national\r\ndatabase of prehistoric metal finds anywhere in the world and a near\r\ncomprehensive view of what we currently know about such finds in the UK.\r\n\r\nThe cards have been scanned and uploaded to\r\n[Flickr](https://www.flickr.com/photos/micropasts/), and it is from there that\r\nthe current application will retrieve and manipulate the scans. These cards\r\ncontain some fairly standardised kinds of information: about where the\r\nartefact was discovered, its dimensions, a longer description of what it looks\r\nlike, etc.\r\n\r\nWhat the research team would like people to do, is to transcribe the details\r\nfrom each section on the card into some pre-determined fields, and also to\r\nattempt to geo-reference the object via its place of discovery.\r\n\r\n### **Thank you!**\r\n\r\nJoellen mcGann, Jane Fellows, Elizabeth Dale and other anonymous contributors\r\nfor completing this application.\r\n\r\n> Opening the treasures of the Bronze Age to the widest public is why I get\r\nup, I would love your help: <http://t.co/q7eWlIrD9j>\r\n\r\n>\r\n\r\n> -- Neil Wilkin (@NWilkinBM) [ April 16,\r\n2014](https://twitter.com/NWilkinBM/statuses/456421634237140992)\r\n\r\n### This project is on behalf of\r\n\r\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\r\nBritish Museum logo](/static/img/bmBlackWhite.png)\r\n\r\n### Find the code on Github\r\n\r\n![](https://crowdfunded.micropasts.org/assets/learn/github-ee049d767e762a0c6626051203a31f6e.png)\r\n\r\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"tutorial": "<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\n            <div class=\"modal-header\">\n                <h3 class=\"lead\">Slide Fastener A16 Drawer transcription tutorial</h3>\n            </div>\n\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the\n                    index card and the line drawing of the object from the reverse side.\n                    An example of the front side of a card is shown below.\n                </p>\n\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n\n                <p>\n                    Each index card contains similar information and we are asking you to enter this information\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\n                    will hint that this information can be found \"Top of card\").\n                </p>\n\n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\n                        both entries that should be entered in the the Collection box, so you could simply enter\n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n\n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and\n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n\n            </div>\n\n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or\n                propose new research ideas based what you have transcribed, please have a look at\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"..//newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_60_thumbnail_1424853753.png", "task_presenter": "<link rel=\"stylesheet\" href=\"/static/css/ol.css\" type=\"text/css\">\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n\r\n<script src=\"/static/js/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\r\n<script src=\"http://maps.google.com/maps/api/js?sensor=false\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n<script src=\"https://code.jquery.com/ui/1.8.1/jquery-ui.min.js\" type=\"text/javascript\"></script>\r\n\r\n<style type=\"text/css\">\r\n    .ui-autocomplete {\r\n\tbackground-color: white;\r\n\twidth: 300px;\r\n\tborder: 1px solid #cfcfcf;\r\n\tlist-style-type: none;\r\n\tpadding-left: 0px;\r\n    }\r\n    label {\r\n        font-size:16px;\r\n    }\r\n    #map_canvas label {\r\n        width: auto;\r\n        display: inline;\r\n    }\r\n    #map_canvas img {\r\n        max-width: none;\r\n    }\r\n    .affix {\r\n        width: inherit;\r\n        height: 0px;\r\n    }\r\n  \r\n    .affix-bottom {\r\n        top: auto !important;\r\n        position: fixed;\r\n        bottom: 240px;\r\n    }\r\n    \r\n    #imgContainer {\r\n        height: 390px;\r\n        width: 600px;\r\n    } \r\n#map {\r\nheight:400px;\r\nwidth:100%;\r\n}\r\n\r\n</style>\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Do you want to help us further?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing one task for the project. \r\n              We are interested in knowing how you found out about us.\r\n          </p>\r\n          <p>\r\n              Could you please answer two questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">\r\n            Congratulations! You have completed 25 tasks!\r\n        </h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing 25 tasks for the project. Now that you \r\n              have been using MicroPasts for a while, we would like to know how \r\n              you found it.\r\n          </p>\r\n          <p>\r\n              Could you please answer a few questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\r\n    <!-- Success and Error Messages for the user -->\r\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\r\n        <h2>\r\n            Browser problems!\r\n        </h2>\r\n        <p>\r\n            Sorry, but your browser does not support the current application. \r\n            If you want to contribute, please, upgrade to a modern web browser \r\n            like the open source and free alternative \r\n            <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or \r\n            <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a>.\r\n        </p>\r\n    </div>\r\n</div> \r\n<!-- End of Row -->\r\n\r\n<div style=\"margin-top:15px;\">\r\n    <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n    </div>\r\n    <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <img src=\"/static/img/loading.gif\">Loading next task...\r\n    </div>\r\n    <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <strong>The task has been completed!</strong> Thanks a lot!\r\n    </div>\r\n    <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <h2>\r\n            Congratulations!\r\n        </h2> \r\n        <p>\r\n            You have participated in <strong>all</strong> available tasks! Thank you for your interest and help.\r\n        </p>\r\n        <br/>\r\n        <img src=\"https://crowdfunded.micropasts.org/assets/logo-head.png\" width=\"200\" height=\"200\"/>\r\n        <div class=\"alert-actions\">\r\n            <a class=\"btn-default btn\" href=\"/\">Go back</a>\r\n            <a class=\"btn-default btn\" href=\"/app\">or, Check other applications</a>\r\n        </div>\r\n    </div>\r\n\r\n    <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n        <a class=\"close\">X.</a>\r\n        <strong>Error!</strong> Something went wrong, please contact the site \r\n        administrators via the forum, Twitter, email or our Facebook page.\r\n    </div>\r\n</div> <!-- End Success and Error Messages for the user -->\r\n\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n\r\n<!-- Start Skeleton Row-->\r\n<div class=\"row skeleton\"> \r\n\r\n        <h1 id=\"start\">\r\n            Please transcribe this index card\r\n        </h1> \r\n    \r\n    <!-- The question will be loaded here -->\r\n    \r\n    <span class=\"label label-info\">Note</span> You can use your mouse wheel track-pad to zoom in/out the picture, as well as drag & drop to navigate in the document.\r\n\r\n</div>\r\n\r\n<div class=\"row skeleton\">\r\n\r\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\r\n\r\n        <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\r\n        <form id=\"transcription\" role=\"form\">\r\n            \r\n            <!-- Object type form control --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"objectType\">Object Type</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\r\n            </div>\r\n            <!-- End of object type form control -->\r\n            \r\n            <!-- Date of discovery group -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\r\n                <div class=\"controls\">\r\n                    <!-- Year --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\r\n                    </div>\r\n                    <!-- Month --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\r\n                    </div>\r\n                    <!-- Day --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!-- End of date of discovery group --> \r\n\r\n            <!-- Right corner -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\r\n                <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n            \r\n             <!-- National grid reference -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\r\n                <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\">\r\n            </div>\r\n\r\n            <!-- Geographical grouping --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"site\">Site</label>\r\n                <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\r\n                <div class=\"input-append\">\r\n                    <label class=\"control-label\" for=\"site\">Georeference the site</label>\r\n                    <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site in a map\"></input>\r\n                    <button id=\"searchBtn\" class=\"btn btn-answer\" value=\"search\" type=\"button\"><i class=\"icon-search\"></i> Search</button>\r\n\r\n<input type=\"hidden\" name=\"lat\" value=\"\" id=\"lat\">\r\n                <input type=\"hidden\" name=\"lon\" value=\"\" id=\"lon\">\r\n                </div>\r\n                \r\n                <div style=\"display:none;margin-top:15px;\" id=\"searching\" class=\"alert alert-info\">\r\n                    <img src=\"/static/img/loading.gif\"> Searching...\r\n                </div>\r\n                \r\n                <div style=\"display:none;margin-top:15px;\" id=\"searchingError\" class=\"alert alert-warning\">\r\n                    <strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> in the map.\r\n                </div>\r\n                 \r\n                <div id=\"searchingTip\" class=\"alert alert-info\" style=\"display:none; margin-top:10px;\">\r\n                    Drag & drop the <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> to improve the location\r\n                </div>\r\n                \r\n                <div id=\"map\" style=\"margin-top:15px;\">\r\n                    \r\n                </div>\r\n\r\n            </div>\r\n            <!-- End of geo group --> \r\n\r\n           \r\n            \r\n            <!-- The collection --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"collection\">Collection</label>\r\n                <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- The publications cited --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"publications\">Publications</label>\r\n                <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Length in mm --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"length\">Length</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"length\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Width -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"width\">Width</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"width\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Edge --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"edge\">Edge</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"edge\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Thickness --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"thickness\">Thickness</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"thickness\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Weight -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"weight\">Weight</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"weight\" placeholder=\"In grammes\">\r\n            </div>\r\n\r\n            <!-- The composition of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"composition\">Composition</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\r\n            </div>\r\n\r\n            <!-- The description of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"description\">Description</label>\r\n                <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\" ></textarea>\r\n            </div>\r\n\r\n            <!-- The surface of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"surface\">Surface</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\r\n            </div>\r\n\r\n            <!-- The patina of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"patina\">Patina</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Associations for the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"associations\">Associations</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Remarks --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"remarks\">Remarks</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Transcriber's comments --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if you have any.\"></textarea>\r\n            </div>\r\n        \r\n        </form>\r\n\r\n        <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\r\n            \r\n\t<!-- Feedback items for the user -->\r\n        <p>\r\n            You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span>\r\n        </p>\r\n        <p>\r\n            You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\t<!-- End of feedback row -->\r\n\r\n    </div>\r\n    <!-- End of Question and Submission DIV (column) -->\r\n    \r\n    <!-- The column holding the open layers div --> \r\n    \r\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\">\r\n        <!-- Start of Photo DIV (column) -->\r\n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"550\">\r\n            <div class=\"btn-group\">\r\n                <a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\r\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n\t        <a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\r\n        \t<a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\r\n            </div>\r\n            <!-- The container for the zoomer --> \r\n            <div id=\"imgContainer\"></div>\r\n            <div id=\"taskImg\"></div>\r\n        </div><!-- End of Photo DIV (columnt) -->\r\n    </div>\r\n\r\n</div><!-- End of Skeleton Row -->\r\n\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n                <h3 class=\"lead\">British Museum Slide Fastener A16 Drawer transcription tutorial</h3>\r\n            </div>\r\n\t<!-- stepped modal body -->\r\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n\r\n                <p>\r\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\r\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\r\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\r\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\r\n                    card (if a card does not load, you can still click the \"View on Flickr\" button to see the contents). Most scanned images combine the written details from the one side of the\r\n                    index card and the line drawing of the object from the reverse side.\r\n                    An example of the front side of a card is shown below.\r\n                </p>\r\n\r\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\r\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\r\n\r\n                <p>\r\n                    Each index card contains similar information and we are asking you to enter this information\r\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\r\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\r\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\r\n                    will hint that this information can be found \"Top of card\").\r\n                </p>\r\n\r\n            </div>\r\n\r\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n\t\t     <p>\r\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\r\n                    Here are some further issues to watch out for:\r\n                    </p>\r\n\r\n\t\t<ol>\r\n\t\t\r\n                    <li>\r\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\r\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\r\n                    This is often but not always written in pencil (and by the way, when the last letter is a G it often looks like a 9). The example below would be rendered \"II1A\":<br />\r\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    When entering information in the fields, please respect the case of words as seen on the card.\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\r\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\r\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\r\n                    you are fairly confident but not certain.\r\n                    </li>\r\n\r\n                    <li>\r\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\r\n                    into just one of our pre-specified boxes, then separate it by \"[;]\" (without any paragraph return/hitting the enter key). For example, on the\r\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\r\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\r\n                    </li>\r\n\r\n                    <li>\r\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\r\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\r\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\r\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\r\n                    </li>\r\n\r\n                    <li>\r\n                    If there is additional information on the card that you do not feel fits in one of our pre-specified\r\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\r\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\r\n                    </li>\r\n                    \r\n                </ol>\r\n\r\n\r\n\t\t</div>\r\n\r\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\r\n\t\t\t<p>\r\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\r\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\r\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\r\n\t            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\r\n\t            \tinput fields in response to your suggestions.\r\n\t            \t</p>\r\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\r\n\t\t</div>\r\n\t\t\r\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\r\n\t\t<p>\r\n                To find out how the project is progressing, suggest changes to this application or\r\n                propose new research ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n\t\t</div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 3 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<!-- The modernizer script --> \r\n\r\n<script>\r\n// Quick fix for IE8\r\nModernizr.load({\r\n  test: window.JSON,\r\n  nope: '/static/js/vendor/json2.min.js'\r\n});\r\n</script>\r\n<!-- The main pybossa functions --> \r\n<script>\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('SlideFastenerA16').done(function(data){\r\n        console.log(data);\r\n        console.log(\"Total answers done for user: \" + data.done);\r\n        if ((data.done == 1) && ($.cookie('surveySlideFastenerA16') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('survey', 'shown', { path: '/'});\r\n        }\r\n        if ((data.done == 25) && ($.cookie('survey25SlideFastenerA16') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25', 'shown', { path: '/'});\r\n        }\r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'});\r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n</script>\r\n\r\n<script>\r\nvar geocoder;\r\nvar map;\r\nvar marker;\r\n    \r\nfunction initialize(){\r\n//MAP\r\n  var latlng = new google.maps.LatLng(54, -2);\r\n  var options = {\r\n    zoom: 4,\r\n    center: latlng,\r\n    mapTypeId: google.maps.MapTypeId.TERRAIN\r\n  };\r\n        \r\n  map = new google.maps.Map(document.getElementById(\"map\"), options);\r\n        \r\n  //GEOCODER\r\n  geocoder = new google.maps.Geocoder();\r\n        \r\n  marker = new google.maps.Marker({\r\n    map: map,\r\n    draggable: true\r\n  });\r\n\t\t\t\t\r\n}\r\n\t\t\r\n$(document).ready(function() { \r\n         \r\n  initialize();\r\n\t\t\t\t  \r\n  $(function() {\r\n    $(\"#toSearch\").autocomplete({\r\n      //This bit uses the geocoder to fetch address values\r\n      source: function(request, response) {\r\n        geocoder.geocode( {'address': request.term }, function(results, status) {\r\n          response($.map(results, function(item) {\r\n            return {\r\n              label:  item.formatted_address,\r\n              value: item.formatted_address,\r\n              latitude: item.geometry.location.lat(),\r\n              longitude: item.geometry.location.lng()\r\n            }\r\n          }));\r\n        })\r\n      },\r\n      //This bit is executed upon selection of an address\r\n      select: function(event, ui) {\r\n        $(\"#lat\").val(ui.item.latitude);\r\n        $(\"#lon\").val(ui.item.longitude);\r\n        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);\r\n        console.log('Latitude: ' + ui.item.latitude);\r\n        console.log('Longitude: ' + ui.item.longitude);\r\n        marker.setPosition(location);\r\n        map.setCenter(location);\r\n      }\r\n    });\r\n  });\r\n\t\r\n  //Add listener to marker for reverse geocoding\r\n  google.maps.event.addListener(marker, 'drag', function() {\r\n    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {\r\n      if (status == google.maps.GeocoderStatus.OK) {\r\n        if (results[0]) {\r\n          $('#toSearch').val(results[0].formatted_address);\r\n          $('#lat').val(marker.getPosition().lat());\r\n          $('#lon').val(marker.getPosition().lng());\r\n          console.log('Longitude: ' + marker.getPosition().lng());\r\n          console.log('Latitude: ' + marker.getPosition().lat());\r\n        }\r\n      }\r\n    });\r\n  });\r\n  \r\n});  \r\n</script>\r\n<script>\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        \r\n        div_map.css(\"height\", \"390px\");\r\n        div_map.css(\"width\", \"600px\");\r\n        div_map.css(\"background\", \"#000\");\r\n\r\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\r\n\r\n        var extent = new OpenLayers.Bounds();\r\n        extent.extend(new OpenLayers.LonLat(1.758939,58.672231).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n        \r\n        extent.extend(new OpenLayers.LonLat(-6.99745,49.96112).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n\r\n\r\n        $(\"#imgContainer\").append(div_map);\r\n        div_map.attr(\"id\", \"img_\" + task.id);\r\n\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 1024, 720]\r\n        });\r\n\r\n        task.map_img = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: copyright\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [1024, 720],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'img_' + task.id,\r\n          view: new ol.View({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 1.0\r\n          })\r\n        });\r\n        div_map.css(\"display\", \"none\");\r\n\r\n\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        img.attr(\"id\", \"img_task_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n        });\r\n        img.attr('src', task.info.url_b);\r\n        img.attr('width', '600px');\r\n        img.attr('height', '390px');\r\n        img.addClass('img-polaroid');\r\n        img.css(\"cursor\", \"zoom-in\");\r\n        task.info.image = img;\r\n\r\n        \r\n        }  else {\r\n            deferred.resolve(task);\r\n        }\r\n\r\n});\r\n</script>\r\n<script>\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(':input','#transcription')\r\n           .not(':button, :submit, :reset, :hidden, :radio')\r\n           .val('')\r\n           .removeAttr('checked')\r\n           .removeAttr('selected');\r\n      \r\n      \t$(\"a#raw\").attr(\"href\", task.info.url_b);\r\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n\t$(\"a#down\").attr(\"download\", task.id);\r\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\r\n        $(\".fancybox\").fancybox();\r\n        $('#imgLink').tooltip();\r\n        $(\"[rel=tooltip]\").tooltip();\r\n        $(\"#searchingTip\").hide();\r\n        $(\"#question\").html(task.info.question);\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n        $(\"#img_\" + task.id).show();\r\n\r\n        // Clean\r\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\r\n        for (i = 1700; i < 2000; i++) {\r\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\r\n        for (i = 1; i <= 12; i++)  {\r\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\r\n        for (i = 1; i <= 31; i++) {\r\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            evt.preventDefault();\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer !== 'undefined') {\r\n                console.log(answer);\r\n                if (answer === 'search') {\r\n                    $(\"#searching\").show();\r\n                    search(task, $(\"#toSearch\").val(), 15);\r\n                } else {\r\n                    task.answer = $(\"#transcription\").serializeJSON();\r\n                    console.log(task.answer);\r\n                   if($('#lon').val()) {\r\n                   var geojson = {\r\n                       \"geometry\": {\r\n                            \"type\": \"Point\",\r\n                            \"coordinates\": [\r\n                                        $('#lon').val(),\r\n                                        $('#lat').val()\r\n                                ]\r\n                        },\r\n                        \"crs\": {\r\n                          \"type\": \"name\",\r\n                          \"properties\": {\r\n                            \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\"\r\n                          }\r\n                        },\r\n                        \"type\": \"Feature\",\r\n                        \"properties\": {\r\n\r\n                        }\r\n                   };\r\n                   console.log(geojson);\r\n                    task.answer.geojson = geojson;\r\n                }\r\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ');\r\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ');\r\n                    console.log(task.answer);\r\n                    \r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"#map_\" + task.id).hide();\r\n                        $(\"#img_\" + task.id).hide();\r\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\r\n                        deferred.resolve();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                }\r\n            } else {\r\n                console.log(answer);\r\n                console.log(typeof(answer));\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n});\r\n\r\nif(Modernizr.borderradius) {\r\n    pybossa.run('SlideFastenerA16');\r\n}\r\nelse {\r\n    $(\".skeleton\").hide();\r\n    $(\"#oldbrowser\").show();\r\n}\r\n$(window).off('.affix');\r\n$(\"#imgHolder\")\r\n    .removeClass(\"affix affix-top affix-bottom\")\r\n    .removeData(\"bs.affix\");\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/60'/>"}, {"id": 64, "created": "2014-09-09T08:06:03.842611", "updated": "2015-02-26T09:43:55.761788", "name": "British Museum Bronze Age Index Drawer A16 - British Museum hoards", "short_name": "DrawerA16", "description": "British Museum Bronze Age Card Index transcription for Drawer A16.", "long_description": "This application will help the [British\r\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\r\nNeil Wilkin, to make available a huge card catalogue of British prehistoric\r\nmetal artefacts discovered in the 19th and 20th century. This information has\r\nlong been known to be an extremely important untapped resource. Metal finds\r\nare not only crucial forms of evidence for dating Britain's prehistoric past,\r\nbut also tell us a great deal about prehistoric society and economy.\r\nDigitising the thousands of objects in this catalogue will make these records\r\npublicly available via their incorporation into the [Portable Antiquities\r\nScheme website](http://finds.org.uk). The result will be the largest national\r\ndatabase of prehistoric metal finds anywhere in the world and a near\r\ncomprehensive view of what we currently know about such finds in the UK.\r\n\r\nThe cards have been scanned and uploaded to\r\n[Flickr](https://www.flickr.com/photos/micropasts/), and it is from there that\r\nthe current application will retrieve and manipulate the scans. These cards\r\ncontain some fairly standardised kinds of information: about where the\r\nartefact was discovered, its dimensions, a longer description of what it looks\r\nlike, etc.\r\n\r\nWhat the research team would like people to do, is to transcribe the details\r\nfrom each section on the card into some pre-determined fields, and also to\r\nattempt to geo-reference the object via its place of discovery.\r\n\r\n### **Thank you!\r\n\r\n** Hugh Fiske, Elaine Dale, Jeff Okazaki, Melissa Vette Wobig, Bianca Cabrera, Valeska Becker, Joellen mcGann, Peggy Green, Dina Fathalla, scruffyarcher, Tim Mudie, Jane Fellows, John Marr, Denis Antoine, Heidi Lund, Raest Wylde, Louise Panton, Maragkaki Froso, Maria Christakou, Susan Magyarody, Michael George Adams, Elizabeth Dale, Nate, Gill Byrne, Lucas Suter, Gillian Barnes, Stephanie Choy, Jeff Anderson, Tracey Tomashpol, mollyringle, David Christensen, Zack Broderick, Van C. Vives, Nicki Vance, Chris Borden, Darren Kinsman, Marla Walcott, Paul Pennington, Janet Levy, Holly Peterson, Marilyn Kohn, Denise Hodgden, Paige, Gemma Lewis, M Todd, Jocelyn C. Olander and other anonymous contributors for completing this application. \r\n\r\n> Opening the treasures of the Bronze Age to the widest public is why I get\r\nup, I would love your help: <http://t.co/q7eWlIrD9j>\r\n\r\n>\r\n\r\n> -- Neil Wilkin (@NWilkinBM) [ April 16,\r\n2014](https://twitter.com/NWilkinBM/statuses/456421634237140992)\r\n\r\n### This project is on behalf of\r\n\r\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\r\nBritish Museum logo](/static/img/bmBlackWhite.png)\r\n\r\n### Find the code on Github\r\n\r\n![](https://crowdfunded.micropasts.org/assets/learn/github-ee049d767e762a0c6626051203a31f6e.png)\r\n\r\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"tutorial": "<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\n            <div class=\"modal-header\">\n                <h3 class=\"lead\">BM Bronze Age Index Drawer A16 transcription tutorial</h3>\n            </div>\n\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the\n                    index card and the line drawing of the object from the reverse side.\n                    An example of the front side of a card is shown below.\n                </p>\n\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n\n                <p>\n                    Each index card contains similar information and we are asking you to enter this information\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\n                    will hint that this information can be found \"Top of card\").\n                </p>\n\n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\n                        both entries that should be entered in the the Collection box, so you could simply enter\n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n\n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and\n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n\n            </div>\n\n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or\n                propose new research ideas based what you have transcribed, please have a look at\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../DrawerA16/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_64_thumbnail_1424853758.png", "task_presenter": "<link rel=\"stylesheet\" href=\"/static/css/ol.css\" type=\"text/css\">\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n\r\n<script src=\"/static/js/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\r\n<script src=\"http://maps.google.com/maps/api/js?sensor=false\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n<script src=\"https://code.jquery.com/ui/1.8.1/jquery-ui.min.js\" type=\"text/javascript\"></script>\r\n\r\n<style type=\"text/css\">\r\n    .ui-autocomplete {\r\n\tbackground-color: white;\r\n\twidth: 300px;\r\n\tborder: 1px solid #cfcfcf;\r\n\tlist-style-type: none;\r\n\tpadding-left: 0px;\r\n    }\r\n    label {\r\n        font-size:16px;\r\n    }\r\n    #map_canvas label {\r\n        width: auto;\r\n        display: inline;\r\n    }\r\n    #map_canvas img {\r\n        max-width: none;\r\n    }\r\n    .affix {\r\n        width: inherit;\r\n        height: 0px;\r\n    }\r\n  \r\n    .affix-bottom {\r\n        top: auto !important;\r\n        position: fixed;\r\n        bottom: 240px;\r\n    }\r\n    \r\n    #imgContainer {\r\n        height: 390px;\r\n        width: 600px;\r\n    } \r\n#map {\r\nheight:400px;\r\nwidth:100%;\r\n}\r\n\r\n</style>\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Do you want to help us further?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing one task for the project. \r\n              We are interested in knowing how you found out about us.\r\n          </p>\r\n          <p>\r\n              Could you please answer two questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">\r\n            Congratulations! You have completed 25 tasks!\r\n        </h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing 25 tasks for the project. Now that you \r\n              have been using MicroPasts for a while, we would like to know how \r\n              you found it.\r\n          </p>\r\n          <p>\r\n              Could you please answer a few questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\r\n    <!-- Success and Error Messages for the user -->\r\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\r\n        <h2>\r\n            Browser problems!\r\n        </h2>\r\n        <p>\r\n            Sorry, but your browser does not support the current application. \r\n            If you want to contribute, please, upgrade to a modern web browser \r\n            like the open source and free alternative \r\n            <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or \r\n            <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a>.\r\n        </p>\r\n    </div>\r\n</div> \r\n<!-- End of Row -->\r\n\r\n<div style=\"margin-top:15px;\">\r\n    <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n    </div>\r\n    <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <img src=\"/static/img/loading.gif\">Loading next task...\r\n    </div>\r\n    <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <strong>The task has been completed!</strong> Thanks a lot!\r\n    </div>\r\n    <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <h2>\r\n            Congratulations!\r\n        </h2> \r\n        <p>\r\n            You have participated in <strong>all</strong> available tasks! Thank you for your interest and help.\r\n        </p>\r\n        <br/>\r\n        <img src=\"https://crowdfunded.micropasts.org/assets/logo-head.png\" width=\"200\" height=\"200\"/>\r\n        <div class=\"alert-actions\">\r\n            <a class=\"btn-default btn\" href=\"/\">Go back</a>\r\n            <a class=\"btn-default btn\" href=\"/app\">or, Check other applications</a>\r\n        </div>\r\n    </div>\r\n\r\n    <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n        <a class=\"close\">X.</a>\r\n        <strong>Error!</strong> Something went wrong, please contact the site \r\n        administrators via the forum, Twitter, email or our Facebook page.\r\n    </div>\r\n</div> <!-- End Success and Error Messages for the user -->\r\n\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n\r\n<!-- Start Skeleton Row-->\r\n<div class=\"row skeleton\"> \r\n\r\n        <h1 id=\"start\">\r\n            Please transcribe this index card\r\n        </h1> \r\n    \r\n    <!-- The question will be loaded here -->\r\n    \r\n    <span class=\"label label-info\">Note</span> You can use your mouse wheel track-pad to zoom in/out the picture, as well as drag & drop to navigate in the document.\r\n\r\n</div>\r\n\r\n<div class=\"row skeleton\">\r\n\r\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\r\n\r\n        <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\r\n        <form id=\"transcription\" role=\"form\">\r\n            \r\n            <!-- Object type form control --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"objectType\">Object Type</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\r\n            </div>\r\n            <!-- End of object type form control -->\r\n            \r\n            <!-- Date of discovery group -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\r\n                <div class=\"controls\">\r\n                    <!-- Year --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\r\n                    </div>\r\n                    <!-- Month --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\r\n                    </div>\r\n                    <!-- Day --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!-- End of date of discovery group --> \r\n\r\n            <!-- Right corner -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\r\n                <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n            \r\n             <!-- National grid reference -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\r\n                <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\">\r\n            </div>\r\n\r\n            <!-- Geographical grouping --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"site\">Site</label>\r\n                <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\r\n                <div class=\"input-append\">\r\n                    <label class=\"control-label\" for=\"site\">Georeference the site</label>\r\n                    <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site in a map\"></input>\r\n                    <button id=\"searchBtn\" class=\"btn btn-answer\" value=\"search\" type=\"button\"><i class=\"icon-search\"></i> Search</button>\r\n\r\n<input type=\"hidden\" name=\"lat\" value=\"\" id=\"lat\">\r\n                <input type=\"hidden\" name=\"lon\" value=\"\" id=\"lon\">\r\n                </div>\r\n                \r\n                <div style=\"display:none;margin-top:15px;\" id=\"searching\" class=\"alert alert-info\">\r\n                    <img src=\"/static/img/loading.gif\"> Searching...\r\n                </div>\r\n                \r\n                <div style=\"display:none;margin-top:15px;\" id=\"searchingError\" class=\"alert alert-warning\">\r\n                    <strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> in the map.\r\n                </div>\r\n                 \r\n                <div id=\"searchingTip\" class=\"alert alert-info\" style=\"display:none; margin-top:10px;\">\r\n                    Drag & drop the <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> to improve the location\r\n                </div>\r\n                \r\n                <div id=\"map\" style=\"margin-top:15px;\">\r\n                    \r\n                </div>\r\n\r\n            </div>\r\n            <!-- End of geo group --> \r\n\r\n           \r\n            \r\n            <!-- The collection --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"collection\">Collection</label>\r\n                <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- The publications cited --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"publications\">Publications</label>\r\n                <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Length in mm --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"length\">Length</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"length\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Width -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"width\">Width</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"width\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Edge --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"edge\">Edge</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"edge\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Thickness --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"thickness\">Thickness</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"thickness\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Weight -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"weight\">Weight</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"weight\" placeholder=\"In grammes\">\r\n            </div>\r\n\r\n            <!-- The composition of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"composition\">Composition</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\r\n            </div>\r\n\r\n            <!-- The description of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"description\">Description</label>\r\n                <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\" ></textarea>\r\n            </div>\r\n\r\n            <!-- The surface of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"surface\">Surface</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\r\n            </div>\r\n\r\n            <!-- The patina of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"patina\">Patina</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Associations for the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"associations\">Associations</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Remarks --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"remarks\">Remarks</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Transcriber's comments --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if you have any.\"></textarea>\r\n            </div>\r\n        \r\n        </form>\r\n\r\n        <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\r\n            \r\n\t<!-- Feedback items for the user -->\r\n        <p>\r\n            You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span>\r\n        </p>\r\n        <p>\r\n            You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\t<!-- End of feedback row -->\r\n\r\n    </div>\r\n    <!-- End of Question and Submission DIV (column) -->\r\n    \r\n    <!-- The column holding the open layers div --> \r\n    \r\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\">\r\n        <!-- Start of Photo DIV (column) -->\r\n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"550\">\r\n            <div class=\"btn-group\">\r\n                <a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\r\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n\t        <a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\r\n        \t<a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\r\n            </div>\r\n            <!-- The container for the zoomer --> \r\n            <div id=\"imgContainer\"></div>\r\n            <div id=\"taskImg\"></div>\r\n        </div><!-- End of Photo DIV (columnt) -->\r\n    </div>\r\n\r\n</div><!-- End of Skeleton Row -->\r\n\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n                <h3 class=\"lead\">BM Bronze Age Index DrawerA16 transcription tutorial</h3>\r\n            </div>\r\n\t<!-- stepped modal body -->\r\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n\r\n                <p>\r\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\r\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\r\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\r\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\r\n                    card (if a card does not load, you can still click the \"View on Flickr\" button to see the contents). Most scanned images combine the written details from the one side of the\r\n                    index card and the line drawing of the object from the reverse side.\r\n                    An example of the front side of a card is shown below.\r\n                </p>\r\n\r\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\r\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\r\n\r\n                <p>\r\n                    Each index card contains similar information and we are asking you to enter this information\r\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\r\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\r\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\r\n                    will hint that this information can be found \"Top of card\").\r\n                </p>\r\n\r\n            </div>\r\n\r\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n\t\t     <p>\r\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\r\n                    Here are some further issues to watch out for:\r\n                    </p>\r\n\r\n\t\t<ol>\r\n\t\t\r\n                    <li>\r\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\r\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\r\n                    This is often but not always written in pencil (and by the way, when the last letter is a G it often looks like a 9). The example below would be rendered \"II1A\":<br />\r\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    When entering information in the fields, please respect the case of words as seen on the card.\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\r\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\r\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\r\n                    you are fairly confident but not certain.\r\n                    </li>\r\n\r\n                    <li>\r\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\r\n                    into just one of our pre-specified boxes, then separate it by \"[;]\" (without any paragraph return/hitting the enter key). For example, on the\r\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\r\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\r\n                    </li>\r\n\r\n                    <li>\r\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\r\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\r\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\r\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\r\n                    </li>\r\n\r\n                    <li>\r\n                    If there is additional information on the card that you do not feel fits in one of our pre-specified\r\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\r\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\r\n                    </li>\r\n                    \r\n                </ol>\r\n\r\n\r\n\t\t</div>\r\n\r\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\r\n\t\t\t<p>\r\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\r\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\r\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\r\n\t            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\r\n\t            \tinput fields in response to your suggestions.\r\n\t            \t</p>\r\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\r\n\t\t</div>\r\n\t\t\r\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\r\n\t\t<p>\r\n                To find out how the project is progressing, suggest changes to this application or\r\n                propose new research ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n\t\t</div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 3 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<!-- The modernizer script --> \r\n\r\n<script>\r\n// Quick fix for IE8\r\nModernizr.load({\r\n  test: window.JSON,\r\n  nope: '/static/js/vendor/json2.min.js'\r\n});\r\n</script>\r\n<!-- The main pybossa functions --> \r\n<script>\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('DrawerA16').done(function(data){\r\n        console.log(data);\r\n        console.log(\"Total answers done for user: \" + data.done);\r\n        if ((data.done == 1) && ($.cookie('surveyDrawerA16') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('survey', 'shown', { path: '/'});\r\n        }\r\n        if ((data.done == 25) && ($.cookie('survey25DrawerA16') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25DrawerA16', 'shown', { path: '/'});\r\n        }\r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'});\r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n</script>\r\n\r\n<script>\r\nvar geocoder;\r\nvar map;\r\nvar marker;\r\n    \r\nfunction initialize(){\r\n//MAP\r\n  var latlng = new google.maps.LatLng(54, -2);\r\n  var options = {\r\n    zoom: 4,\r\n    center: latlng,\r\n    mapTypeId: google.maps.MapTypeId.TERRAIN\r\n  };\r\n        \r\n  map = new google.maps.Map(document.getElementById(\"map\"), options);\r\n        \r\n  //GEOCODER\r\n  geocoder = new google.maps.Geocoder();\r\n        \r\n  marker = new google.maps.Marker({\r\n    map: map,\r\n    draggable: true\r\n  });\r\n\t\t\t\t\r\n}\r\n\t\t\r\n$(document).ready(function() { \r\n         \r\n  initialize();\r\n\t\t\t\t  \r\n  $(function() {\r\n    $(\"#toSearch\").autocomplete({\r\n      //This bit uses the geocoder to fetch address values\r\n      source: function(request, response) {\r\n        geocoder.geocode( {'address': request.term }, function(results, status) {\r\n          response($.map(results, function(item) {\r\n            return {\r\n              label:  item.formatted_address,\r\n              value: item.formatted_address,\r\n              latitude: item.geometry.location.lat(),\r\n              longitude: item.geometry.location.lng()\r\n            }\r\n          }));\r\n        })\r\n      },\r\n      //This bit is executed upon selection of an address\r\n      select: function(event, ui) {\r\n        $(\"#lat\").val(ui.item.latitude);\r\n        $(\"#lon\").val(ui.item.longitude);\r\n        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);\r\n        console.log('Latitude: ' + ui.item.latitude);\r\n        console.log('Longitude: ' + ui.item.longitude);\r\n        marker.setPosition(location);\r\n        map.setCenter(location);\r\n      }\r\n    });\r\n  });\r\n\t\r\n  //Add listener to marker for reverse geocoding\r\n  google.maps.event.addListener(marker, 'drag', function() {\r\n    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {\r\n      if (status == google.maps.GeocoderStatus.OK) {\r\n        if (results[0]) {\r\n          $('#toSearch').val(results[0].formatted_address);\r\n          $('#lat').val(marker.getPosition().lat());\r\n          $('#lon').val(marker.getPosition().lng());\r\n          console.log('Longitude: ' + marker.getPosition().lng());\r\n          console.log('Latitude: ' + marker.getPosition().lat());\r\n        }\r\n      }\r\n    });\r\n  });\r\n  \r\n});  \r\n</script>\r\n<script>\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        \r\n        div_map.css(\"height\", \"390px\");\r\n        div_map.css(\"width\", \"600px\");\r\n        div_map.css(\"background\", \"#000\");\r\n\r\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\r\n\r\n        var extent = new OpenLayers.Bounds();\r\n        extent.extend(new OpenLayers.LonLat(1.758939,58.672231).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n        \r\n        extent.extend(new OpenLayers.LonLat(-6.99745,49.96112).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n\r\n\r\n        $(\"#imgContainer\").append(div_map);\r\n        div_map.attr(\"id\", \"img_\" + task.id);\r\n\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 1024, 720]\r\n        });\r\n\r\n        task.map_img = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: copyright\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [1024, 720],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'img_' + task.id,\r\n          view: new ol.View({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 1.0\r\n          })\r\n        });\r\n        div_map.css(\"display\", \"none\");\r\n\r\n\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        img.attr(\"id\", \"img_task_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n        });\r\n        img.attr('src', task.info.url_b);\r\n        img.attr('width', '600px');\r\n        img.attr('height', '390px');\r\n        img.addClass('img-polaroid');\r\n        img.css(\"cursor\", \"zoom-in\");\r\n        task.info.image = img;\r\n\r\n        \r\n        }  else {\r\n            deferred.resolve(task);\r\n        }\r\n\r\n});\r\n</script>\r\n<script>\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(':input','#transcription')\r\n           .not(':button, :submit, :reset, :hidden, :radio')\r\n           .val('')\r\n           .removeAttr('checked')\r\n           .removeAttr('selected');\r\n      \r\n      \t$(\"a#raw\").attr(\"href\", task.info.url_b);\r\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n\t$(\"a#down\").attr(\"download\", task.id);\r\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\r\n        $(\".fancybox\").fancybox();\r\n        $('#imgLink').tooltip();\r\n        $(\"[rel=tooltip]\").tooltip();\r\n        $(\"#searchingTip\").hide();\r\n        $(\"#question\").html(task.info.question);\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n        $(\"#img_\" + task.id).show();\r\n\r\n        // Clean\r\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\r\n        for (i = 1700; i < 2000; i++) {\r\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\r\n        for (i = 1; i <= 12; i++)  {\r\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\r\n        for (i = 1; i <= 31; i++) {\r\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            evt.preventDefault();\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer !== 'undefined') {\r\n                console.log(answer);\r\n                if (answer === 'search') {\r\n                    $(\"#searching\").show();\r\n                    search(task, $(\"#toSearch\").val(), 15);\r\n                } else {\r\n                    task.answer = $(\"#transcription\").serializeJSON();\r\n                    console.log(task.answer);\r\n                   if($('#lon').val()) {\r\n                   var geojson = {\r\n                       \"geometry\": {\r\n                            \"type\": \"Point\",\r\n                            \"coordinates\": [\r\n                                        $('#lon').val(),\r\n                                        $('#lat').val()\r\n                                ]\r\n                        },\r\n                        \"crs\": {\r\n                          \"type\": \"name\",\r\n                          \"properties\": {\r\n                            \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\"\r\n                          }\r\n                        },\r\n                        \"type\": \"Feature\",\r\n                        \"properties\": {\r\n\r\n                        }\r\n                   };\r\n                   console.log(geojson);\r\n                    task.answer.geojson = geojson;\r\n                }\r\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ');\r\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ');\r\n                    console.log(task.answer);\r\n                    \r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"#map_\" + task.id).hide();\r\n                        $(\"#img_\" + task.id).hide();\r\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\r\n                        deferred.resolve();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                }\r\n            } else {\r\n                console.log(answer);\r\n                console.log(typeof(answer));\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n});\r\n\r\nif(Modernizr.borderradius) {\r\n    pybossa.run('DrawerA16');\r\n}\r\nelse {\r\n    $(\".skeleton\").hide();\r\n    $(\"#oldbrowser\").show();\r\n}\r\n$(window).off('.affix');\r\n$(\"#imgHolder\")\r\n    .removeClass(\"affix affix-top affix-bottom\")\r\n    .removeData(\"bs.affix\");\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/64'/>"}, {"id": 65, "created": "2014-09-09T15:28:23.673888", "updated": "2015-02-26T09:53:18.055936", "name": "Pop-up: Photo Masking Olduvai Handaxes", "short_name": "photomaskingHandaxes", "description": "Pop-up: Photo Masking Olduvai Handaxes", "long_description": "This application enables the creation of a high quality 3D model of an\r\narchaeological artefact via process known as photo-masking. There has been a\r\nrevolution in 3D modelling in recent years and it is now relatively easy to\r\nconstruct such models from ordinary digital photographs. Isolating the object\r\ndepicted in these photographs, and masking out the background, is an important\r\nfirst step to achieving high quality results. The final 3D model will be made\r\npublicly available and is useful not only for basic documentation purposes,\r\nbut also for graphical displays in museums, for inclusion in gaming and\r\nvirtual reality environments, or for identifing different sub-styles in\r\notherwise similar types of artefact (that might tell us about the date of the\r\nartefact, where it was made, or by whom).\r\n\r\nThis particular photo-masking application is dedicated to two handaxes housed\r\ntemporarily at UCL Institute of Archaeology. These handaxes correspond to the\r\nAcheulean period (i.e. the age of the handaxe, which spans between 1.7 and 0.2\r\nmyr) at Olduvai Gorge, Tanzania. One is made of lava and the other of\r\nquartzite, and were discovered by the Olduvai Geochronology Archaeology\r\nProject (OGAP) from eroding outcrops in Olduvai Bed II, where the Acheulean\r\nage began around 1.5 myr ago.\r\n\r\nWe would like people to draw a polygon around the handaxe that they see in\r\neach photograph in order to identify its outline and exclude the image\r\nbackground. This allows the 3D modelling process to concentrate on the object\r\nitself and ignore irrelevant background information.\r\n\r\nIf you are interested in what a 3D completed model looks like, please have a\r\nlook at the example [here](http://micropasts.org/3D) for a MicroPasts palstave\r\nmodel.\r\n\r\n### **Thank you!\r\n\r\n** Hugh Fiske, Jeff Okazaki, Dina Fathalla, Nina Sharman, Jane Fellows, Heidi Lund, Tim Matteson, Maragkaki Froso, Maria Christakou, Christopher Wai and other anonymous contributors for completing this application. \r\n\r\n###  This project is on behalf of:\r\n\r\n![Olduvai Geochronology Archaeology Project](http://micropasts.org/wp-content/uploads/2014/09/OGAP_logo_sm.jpg) ![The UCL Institute of\r\nArchaeology](http://micropasts.org/wp-content/uploads/2014/09/UCL_logo_sm_blk.png)\r\n\r\n###  Find the code on GitHub\r\n\r\n![](https://crowdfunded.micropasts.org/assets/learn/github-ee049d767e762a0c6626051203a31f6e.png)\r\n\r\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"sched": "default", "tutorial": "<div id=\"modal\" class=\"modal fade\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h3>Photo-masking tutorial for 3D modelling </h3>\r\n            </div>\r\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                This application is very simple (but it does not yet work on mobile devices). When you participate, the platform will load a photograph of an archaeological artefact. Once the image has been loaded, you will be asked to click or tap around the edge of the artefact in order to define a polygon outline. Click once every time you wish to add a point along the edge of the polygon and your final point will snap back onto the one you started with. You can draw one polygon around the entire object or instead draw a series of overlapping polygons if you prefer. In general, we would like you to draw your polygon(s) very slightly inside the actual edge of the artefact. This is because we don't want background pixels near this edge to create a fuzzy border, and we don't need to worry so much about losing a bit of the artefact edge, as the missing few pixels are very likely to appear in one of the other photographs (at least 40 overlapping photographs are likely to exist for each object to support the construction of the 3D model). An example of a successful outline is shown below:\r\n                </p>\r\n                <img src=\"http://micropasts.org/wp-content/uploads/2014/09/Handaxe_Polygon.png\" width=\"100%\" class=\"img-polaroid\" alt=\"An example of an artefact photograph whose outline has been defined\" />\r\n            </div>\r\n\r\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                During the task, you can always return to this tutorial via the \"Tutorial\" button. \r\n                </p>\r\n                <p>\r\n                An example of a finished <a href=\"http://micropasts.org/3D\">3D model</a> has now been completed.    \r\n                </p>\r\n                  <p>\r\n                To find out how the project is progressing, to suggest changes to this application or to propose new research ideas based what you have photo-masked, please have a look at our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n            </div>\r\n\r\n            <div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <a id=\"startContrib\" href=\"../photomaskingHandaxes/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n      </div>\r\n</div>\r\n</div>\r\n\r\n\r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 1 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n", "container": "user_12", "thumbnail": "app_65_thumbnail_1424853758.png", "task_presenter": "<link rel=\"stylesheet\" href=\"http://ol3js.org/en/master/css/ol.css\" type=\"text/css\">\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\n<style>\n#map {\n    background-color: grey;\n}\n.ol-zoom a,\n.ol-zoom-extent a,\n.ol-full-screen a{\n  display: block;\n  margin: 1px;\n  padding: 0;\n  color: white;\n  font-size: 1.14em;\n  font-weight: bold;\n  text-decoration: none;\n  text-align: center;\n  height: 1.375em;\n  width: 1.375em;\n  line-height: 1.4em;\n  background-color: #7b98bc;\n  background-color: rgba(0,60,136,0.5);\n  border: none;\n}\n.ol-zoom a::-moz-focus-inner,\n.ol-zoom-extent a::-moz-focus-inner,\n.ol-full-screen a::-moz-focus-inner {\n  border: none;\n  padding: 0;\n}\n.ol-zoom-extent a {\n  line-height: 1.4em;\n}\n.ol-touch .ol-zoom a,\n.ol-touch .ol-full-screen a,\n.ol-touch .ol-zoom-extent a{\n  font-size: 1.5em;\n}\n.ol-touch .ol-zoom-extent {\n  top: 5.5em;\n}\n.ol-zoom a:hover,\n.ol-zoom a:focus,\n.ol-zoom-extent a:hover,\n.ol-zoom-extent a:focus,\n.ol-full-screen a:hover,\n.ol-full-screen a:focus {\n  text-decoration: none;\n  background-color: #4c6079;\n  background-color: rgba(0,60,136,0.7);\n}\n.ol-zoom-extent a:after {\n    content: \"E\";\n}\n.ol-zoom-in {\n  border-radius: 2px 2px 0 0;\n}\n.ol-zoom-out {\n  border-radius: 0 0 2px 2px;\n}\na.ol-full-screen-false:after {\n  content: \"\\2194\";\n}\na.ol-full-screen-true:after {\n  content: \"\\00d7\";\n}\n\n.ol-zoom-extent a,\n.ol-attribution,\n.ol-full-screen a,\n.ol-scale-line-inner,\n.ol-zoom a,\n.ol-has-tooltip [role=tooltip] {\n  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;\n}\n</style>\n<script src=\"http://ol3js.org/en/master/build/ol.js\" type=\"text/javascript\"></script>\n<script src=\"/static/js/vendor/ol3photomask.js\" type=\"text/javascript\"></script>\n<style>\n    .map {\n        height: 500px;\n        width: 100%;\n    }\n\n</style>\n\n<!--\n    Task DOM for loading the S3 Images\n    It uses the class=\"skeleton\" to identify the elements that belong to the\n    task.\n-->\n<div class=\"row skeleton\"> \n    <div class=\"col-md-12\">\n    \n        <div class=\"btn-group pull-right\">\n        \t\t<button class=\"btn btn-info btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</button>\n        \t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\n        </div>\n        \n        <h1 id=\"step1\">Draw the outline of the main object shown in the picture</h1>\n        <div class=\"btn-group\">\n            <button id=\"status\" type=\"button\" class=\"btn btn-default btn-type disabled\" name=\"loading\" value=\"loading\">Loading photo</button>\n            <button id=\"outline\" type=\"button\" class=\"btn btn-default btn-type active\" name=\"outline\" value=\"outline\">Outline</button>\n            <!-- button id=\"holes\" type=\"button\" class=\"btn btn-default btn-type\" name=\"holes\" value=\"holes\">Holes</button -->\n        </div>\n        <div class=\"btn-group\">\n            <button id=\"draw\" type=\"button\" class=\"btn btn-default btn-draw active\" name=\"draw\" value=\"draw\">Draw</button>\n            <button id=\"edit\" type=\"button\" class=\"btn btn-default btn-draw\" name=\"edit\" value=\"edit\">Edit</button>\n            <button id=\"delete\" type=\"button\" class=\"btn btn-default btn-draw\" name=\"delete\" value=\"delete\">Remove all polygons</button>\n        </div>\n        <div class=\"btn-group\">\n\n            <button id=\"btn-save\" class=\"btn btn-success btn-answer\" value='save'><i class=\"icon icon-white icon-save\"></i> Save the drawings</button>\n        </div>\n    </div>\n</div>\n\n<div class=\"row\">\n    <!-- Success and Error Messages for the user --> \n    <div class=\"col-md-6 col-md-offset-2\" style=\"height:50px\">\n        <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\n            <a class=\"close\">\u00d7</a>\n            <strong>Well done!</strong> Your answer has been saved\n        </div>\n        <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\n            <a class=\"close\">\u00d7</a>\n            Loading next task...\n        </div>\n        <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\n            <strong>The task has been completed!</strong> Thanks a lot!\n        </div>\n        <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\n            <strong>Congratulations!</strong> You have participated in all available tasks!\n            <br/>\n            <div class=\"alert-actions\">\n                <a class=\"btn small\" href=\"/\">Go back</a>\n                <a class=\"btn small\" href=\"/app\">or, Check other applications</a>\n            </div>\n        </div>\n        <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\n            <a class=\"close\">\u00d7</a>\n            <strong>Error!</strong> Something went wrong, please contact the site administrators\n        </div>\n    </div> <!-- End Success and Error Messages for the user -->\n</div> <!-- End of Row -->\n\n<div class=\"row skeleton\"> <!-- Start Skeleton Row-->\n    <div class=\"span8\"><!-- Start of Photo DIV (column) -->\n        <div id=\"map\" class=\"img-polaroid\"></div>\n    </div><!-- End of Photo DIV (columnt) -->\n    <div class=\"span4\"><!-- Start of Question and Submission DIV (column) -->\n        <!-- Feedback items for the user -->\n        <p>You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span></p>\n        <p>You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\n        <!-- Progress bar for the user -->\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\n        <div class=\"progress progress-striped\">\n            <div id=\"progress\" class=\"progress-bar\" role=\"progressbar\" rel=\"tooltip\" title=\"#\" class=\"bar\" style=\"width: 0%;\"></div>\n        </div>\n\n        <div id=\"answer\"> <!-- Start DIV for the submission buttons -->\n        </div><!-- End of DIV for the submission buttons -->\n       \n\n    </div><!-- End of Question and Submission DIV (column) -->\n\n</div><!-- End of Skeleton Row -->\n\n\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n        <h4 class=\"modal-title\">Hey there! Do you want to help us?</h4>\n      </div>\n      <div class=\"modal-body\">\n        Thanks for contributing one task for the project. We are interested in knowing how you found out about us. <strong>Could you please answer two questions in a short survey?</strong>\n       \n       <!-- <iframe src=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\" width=\"100%\" height=\"400\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\">Loading...</iframe>-->\n      </div>\n      <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/10WSSX_AHBdCFsz43-664GJMy1juIKfdGI7zubEctxuY/viewform?embedded=true\">Of course! Take me to the survey!</a>\n      </div>\n    </div><!-- /.modal-content -->\n  </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->\n\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n        <h4 class=\"modal-title\">Congrats for completing 25 tasks!</h4>\n      </div>\n      <div class=\"modal-body\">\n        Thanks for contributing 25 tasks for the project. Now that you have been using MicroPasts for a while, we would like to know how you found it. <strong>Could you please answer a few questions in a short survey?</strong>\n      </div>\n      <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1dzRKGGPqjaLpCd6vC73VXzoCtspqDJ71Q2WT4R6uiNs/viewform?embedded=true\">Of course! Take me to the survey!</a>\n      </div>\n    </div><!-- /.modal-content -->\n  </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->\n\n<!-- Modal start -->\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\t<!-- Modal header --> \n\t\t<div class=\"modal-header\">\n               <h3>Photo-masking tutorial for 3D modelling </h3>\n            </div>\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n                <p>\n                This application is very simple (but it does not yet work on mobile devices). When you participate, the platform will load a photograph of an archaeological artefact. Once the image has been loaded, you will be asked to click or tap around the edge of the artefact in order to define a polygon outline. Click once every time you wish to add a point along the edge of the polygon and your final point will snap back onto the one you started with. You can draw one polygon around the entire object or instead draw a series of overlapping polygons if you prefer. In general, we would like you to draw your polygon(s) very slightly inside the actual edge of the artefact. This is because we don't want background pixels near this edge to create a fuzzy border, and we don't need to worry so much about losing a bit of the artefact edge, as the missing few pixels are very likely to appear in one of the other photographs (at least 40 overlapping photographs are likely to exist for each object to support the construction of the 3D model). An example of a successful outline is shown below:\n                </p>\n                <img src=\"http://micropasts.org/wp-content/uploads/2014/09/Handaxe_Polygon.png\" width=\"100%\" class=\"img-polaroid\"\n                     alt=\"An example of an artefact photograph whose outline has been defined\" />\n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n                <p>\n                During the task, you can always return to this tutorial via the \"Tutorial\" button. \n                </p>\n                <p>\n                An example of a finished <a href=\"http://micropasts.org/3D\">3D model</a> has now been completed.\t\n                </p>\n            \t  <p>\n                To find out how the project is progressing, to suggest changes to this application or to propose new research ideas based what you have photo-masked, please have a look at our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n                </p>\n            </div>\n\n\t<!-- End of stepped modal body -->\n\n\t<!-- Modal footer -->\n\t<div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n\t</div>\n  </div>\n</div>\n<!-- Modal end --> \n<script type=\"text/javascript\">\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 1) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n\n\n<script>\nfunction loadUserProgress() {\n    pybossa.userProgress('photomaskingHandaxes').done(function(data){\n    \t\n    \tconsole.log('Tasks done so far: ' + data.done);\n    \t\n        if ((data.done == 1) && ($.cookie('surveyHandaxes') === undefined)){\n           $(\"#survey\").modal('show');\n           $.cookie('surveyHandaxes', 'shown', { path: '/'});\n        }\n        if ((data.done == 25) && ($.cookie('survey25Handaxes') === undefined)){\n           $(\"#survey25\").modal('show');\n           $.cookie('survey25Handaxes', 'shown', { path: '/'});\n        }\n        var pct = Math.round((data.done*100)/data.total);\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\n        $(\"#progress\").tooltip({'placement': 'left'}); \n        $(\"#total\").text(data.total);\n        $(\"#done\").text(data.done);\n    });\n}\n\npybossa.taskLoaded(function(task, deferred) {\n    if ( !$.isEmptyObject(task) ) {\n        // load image from flickr\n        var img = $('<img />');\n        var div_map = $('<div/>');\n        div_map.css(\"height\", \"500px\");\n        div_map.css(\"width\", \"100%\");\n        $(\"#draw\").addClass(\"disabled\");\n        $(\"#edit\").addClass(\"disabled\");\n        $(\"#delete\").addClass(\"disabled\");\n        $(\"#outline\").addClass(\"disabled\");\n        $(\"#holes\").addClass(\"disabled\");\n        $(\"#map\").append(div_map);\n        div_map.attr(\"id\", \"map_\" + task.id);\n        img.load(function() {\n            // continue as soon as the image is loaded\n            deferred.resolve(task);\n            $(\"#draw\").removeClass(\"disabled\");\n            $(\"#edit\").removeClass(\"disabled\");\n            $(\"#delete\").removeClass(\"disabled\");\n            $(\"#outline\").removeClass(\"disabled\");\n            $(\"#holes\").removeClass(\"disabled\");\n            $(\"#status\").text(\"Photo loaded!\");\n        });\n        img.attr('src', task.info.url_b).css('height', 460);\n        \n        //Log the url of image being masked.\n        console.log(task.info.url_b);\n        \n        img.addClass('img-polaroid');\n        task.info.image = img;\n\n        // Maps always need a projection, but the static image is not geo-referenced,\n        // and are only measured in pixels.  So, we create a fake projection that the\n        // map can use to properly display the layer.\n        task.pixelProjection = new ol.proj.Projection({\n          code: 'pixel',\n          units: 'pixels',\n          extent: [0, 0, 5184, 3456]\n        });\n\n        task.styleArray = [new ol.style.Style({\n          fill: new ol.style.Fill({\n            color: 'rgba(255, 255, 255, 0.2)'\n          }),\n          stroke: new ol.style.Stroke({\n            color: '#ffcc33',\n            width: 2\n          }),\n          image: new ol.style.Circle({\n            radius: 7,\n            fill: new ol.style.Fill({\n              color: '#ffcc33'\n            })\n          })\n        })];\n        \n        task.source = new ol.source.Vector();\n        task.source_holes = new ol.source.Vector();\n        \n        task.vector = new ol.layer.Vector({\n          source: task.source,\n          //styleFunction: function(feature, resolution) {\n          //  return task.styleArray;\n          //}\n          style: new ol.style.Style({\n                fill: new ol.style.Fill({\n                      color: 'rgba(255, 255, 255, 0.2)'\n                    }),\n                    stroke: new ol.style.Stroke({\n                      color: '#ffcc33',\n                      width: 2\n                    }),\n                    image: new ol.style.Circle({\n                      radius: 7,\n                      fill: new ol.style.Fill({\n                        color: '#ffcc33'\n                        })\n                      })\n                    })\n          });\n\n        task.holes = new ol.layer.Vector({\n          source: task.source_holes,\n          //styleFunction: function(feature, resolution) {\n          //  return task.styleArray;\n          //}\n          style: new ol.style.Style({\n                fill: new ol.style.Fill({\n                      color: 'rgba(255, 255, 255, 0.2)'\n                    }),\n                    stroke: new ol.style.Stroke({\n                      color: '#00CC99',\n                      width: 2\n                    }),\n                    image: new ol.style.Circle({\n                      radius: 7,\n                      fill: new ol.style.Fill({\n                        color: '#00CC99'\n                        })\n                      })\n                    })\n          });\n\n        task.overlay = new ol.FeatureOverlay({\n            style: new ol.style.Style({\n                  fill: new ol.style.Fill({\n                        color: 'rgba(255, 255, 255, 0.2)'\n                      }),\n                      stroke: new ol.style.Stroke({\n                        color: [0, 153, 255, 1],\n                        width: 2\n                      }),\n                      image: new ol.style.Circle({\n                        radius: 7,\n                        fill: new ol.style.Fill({\n                          color: [0, 153, 255, 1]\n                          })\n                        })\n                      })\n        });\n\n        // Modifiers for vector outline\n        task.modify = new ol.interaction.Modify({ \n                                                layer: task.vector,\n                                                featureOverlay: task.overlay });\n        task.select = new ol.interaction.Select({ \n                                                layer: task.vector,\n                                                featureOverlay: task.overlay });\n\n        // Modifiers for vector holes\n        task.modify_holes = new ol.interaction.Modify({ \n                                                layer: task.holes,\n                                                featureOverlay: task.overlay });\n        task.select_holes = new ol.interaction.Select({ \n                                                layer: task.holes,\n                                                featureOverlay: task.overlay });\n\n        task.map = new ol.Map({\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify, task.select_holes, task.modify_holes]),\n          layers: [\n            new ol.layer.Image({\n              source: new ol.source.ImageStatic({\n                attributions: [\n                  new ol.Attribution({\n                    html: '&copy; <a href=\"http://micropasts.org\">Micropasts</a>'\n                  })\n                ],\n                url: task.info.url_b,\n                imageSize: [5184, 3456],\n                projection: task.pixelProjection,\n                imageExtent: task.pixelProjection.getExtent()\n              })\n            })\n          , \n          task.vector,\n          task.holes,\n          ],\n          renderer: 'canvas',\n          target: 'map_' + task.id,\n          view: new ol.View2D({\n            projection: task.pixelProjection,\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\n            zoom: 2.25\n          })\n        });\n        var zoomslider;\n        zoomslider = new ol.control.ZoomSlider();\n        task.map.addControl(zoomslider);\n        div_map.css(\"display\", \"none\");\n\n        var typeSelect = document.getElementById('type');\n        \n        //task.draw; // global so we can remove it later\n        task.draw = new ol.interaction.Draw({\n          source: task.source,\n          type: 'Polygon',\n        });\n\n        task.draw_holes = new ol.interaction.Draw({\n          source: task.source_holes,\n          type: 'Polygon',\n        });\n\n        // When the first polygon is completed, remove the drawInteraction\n        task.draw.on('drawend', function(evt) {\n                task.polygon = true;\n                $(\"#btn-save\").removeClass(\"disabled\");\n                });\n\n        // When the first hole is completed, remove the drawInteraction\n        task.draw_holes.on('drawend', function(evt) {\n                task.holes = true;\n                $(\"#btn-save\").removeClass(\"disabled\");\n                });\n\n        task.map.addInteraction(task.draw);\n\n        task.answer = {\n                 'task_id': task.id,\n                 'outline': [],\n                 'holes': [],\n                 'img': task.info.url_b};\n        task.polygon = false;\n        task.holes = false;\n        }\n    else {\n        deferred.resolve(task);\n    }\n});\n\npybossa.presentTask(function(task, deferred) {\n    if ( !$.isEmptyObject(task) ) {\n        loadUserProgress();\n        $(\"#btn-save\").addClass(\"disabled\");\n        $('#task-id').html(task.id);\n        $(\"#map_\" + task.id).show();\n\n        // Code for drawing outlines or holes\n        $('.btn-type').off('click').on('click', function(evt) {\n            var answer = $(evt.target).attr(\"value\");\n            if (typeof answer != 'undefined'){\n                if (answer == 'holes') {\n                    $(\"#outline\").removeClass('active');\n                    $(\"#holes\").addClass('active');\n                    task.map.removeInteraction(task.draw);\n                    task.map.addInteraction(task.draw_holes);\n                }\n                else {\n                    $(\"#holes\").removeClass('active');\n                    $(\"#outline\").addClass('active');\n                    task.map.addInteraction(task.draw);\n                    task.map.removeInteraction(task.draw_holes);\n                }\n            }\n        });\n\n        // Code for editing/drawing polygons\n        $('.btn-draw').off('click').on('click', function(evt) {\n            var answer = $(evt.target).attr(\"value\");\n            if (typeof answer != 'undefined'){\n                if (answer == 'draw') {\n                    $(\"#edit\").removeClass(\"active\");\n                    $(\"#draw\").addClass(\"active\");\n                    if ($(\"#outline\").hasClass(\"active\")) {\n                        task.map.removeInteraction(task.modify);\n                        task.map.removeInteraction(task.select);\n                        task.map.addInteraction(task.draw);\n                    }\n                    else {\n                        task.map.removeInteraction(task.modify_holes);\n                        task.map.removeInteraction(task.select_holes);\n                        task.map.addInteraction(task.draw_holes);\n                    }\n                }\n                if (answer == 'edit') {\n                    $(\"#draw\").removeClass(\"active\");\n                    $(\"#edit\").addClass(\"active\");\n                    if ($(\"#outline\").hasClass(\"active\")) {\n                        task.map.removeInteraction(task.draw);\n                        task.map.addInteraction(task.select);\n                        task.map.addInteraction(task.modify);\n                    }\n                    else {\n                        task.map.removeInteraction(task.draw_holes);\n                        task.map.addInteraction(task.select_holes);\n                        task.map.addInteraction(task.modify_holes);\n                    }\n                }\n\n                if (answer == 'delete') {\n                    if ($(\"#outline\").hasClass(\"active\")) {\n                        $(\"#draw\").removeClass(\"active\");\n                        $(\"#edit\").removeClass(\"active\");\n                        $(\"#delete\").addClass(\"active\");\n                        var features = task.source.getAllFeatures();\n                        for(i=0;i<features.length;i++) {\n                            task.source.removeFeature(features[i]);\n                        }\n                        task.polygon = false;\n                        $(\"#draw\").addClass(\"active\");\n                        $(\"#delete\").removeClass(\"active\");\n                    }\n                    else {\n                        $(\"#draw\").removeClass(\"active\");\n                        $(\"#edit\").removeClass(\"active\");\n                        $(\"#delete\").addClass(\"active\");\n                        var features = task.source_holes.getAllFeatures();\n                        for(i=0;i<features.length;i++) {\n                            task.source_holes.removeFeature(features[i]);\n                        }\n                        task.holes = false;\n                        $(\"#draw\").addClass(\"active\");\n                        $(\"#delete\").removeClass(\"active\");\n                    }\n                }\n\n                }});\n\n\n\n        $('.btn-answer').off('click').on('click', function(evt) {\n            var answer = $(evt.target).attr(\"value\");\n            if (typeof answer != 'undefined'){\n                //Log the answer submitted to console\n                console.log(answer);\n                \n                //console.log(task.map.source.features);\n                console.log(task.source.features);\n\n                if (task.polygon) {\n                    var features = task.source.getAllFeatures();\n                    var polygons = [];\n                    for(i=0;i<features.length;i++) {\n                        var g = features[i].getGeometry();\n                        polygons.push(g.getCoordinates());\n                    }\n                    //task.answer = {\n                    //    'task_id': task.id,\n                    //    'polygon': polygons,\n                    //    'img': task.info.url_b};\n                    task.answer.outline = polygons;\n\n                    if (task.holes) {\n                        var features = task.source_holes.getAllFeatures();\n                        var polygons = [];\n                        for(i=0;i<features.length;i++) {\n                            var g = features[i].getGeometry();\n                            polygons.push(g.getCoordinates());\n                        }\n\n                        task.answer.holes = polygons;\n                    }\n\n                    pybossa.saveTask(task.id, task.answer).done(function() {\n                    \t$(\"#success\").fadeIn(500).fadeOut(5500);\n                        \n                        deferred.resolve();\n                        $(\"#map_\" + task.id).remove();\n                    });\n                    $(\"#loading\").fadeIn(500);\n                    \n                } // end if task.polygon\n            }\n            else {\n                $(\"#error\").show();\n            }\n        });\n        $(\"#loading\").hide();\n    }\n    else {\n        $(\".skeleton\").hide();\n        $(\"#loading\").hide();\n        $(\"#finish\").fadeIn(500);\n    }\n    $('#imgLink').tooltip();\n\n        \n});\n\npybossa.run('photomaskingHandaxes');\n</script>\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/65'/>"}, {"id": 68, "created": "2014-09-09T21:07:39.191565", "updated": "2015-02-26T09:42:43.335806", "name": "British Museum Bronze Age Index Drawer A14 - socketed spearheads", "short_name": "DrawerA14", "description": "British Museum Bronze Age Card Index transcription for Drawer A14.", "long_description": "This application will help the [British\r\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\r\nNeil Wilkin, to make available a huge card catalogue of British prehistoric\r\nmetal artefacts discovered in the 19th and 20th century. This information has\r\nlong been known to be an extremely important untapped resource. Metal finds\r\nare not only crucial forms of evidence for dating Britain's prehistoric past,\r\nbut also tell us a great deal about prehistoric society and economy.\r\nDigitising the thousands of objects in this catalogue will make these records\r\npublicly available via their incorporation into the [Portable Antiquities\r\nScheme website](http://finds.org.uk). The result will be the largest national\r\ndatabase of prehistoric metal finds anywhere in the world and a near\r\ncomprehensive view of what we currently know about such finds in the UK.\r\n\r\nThe cards have been scanned and uploaded to\r\n[Flickr](https://www.flickr.com/photos/micropasts/), and it is from there that\r\nthe current application will retrieve and manipulate the scans. These cards\r\ncontain some fairly standardised kinds of information: about where the\r\nartefact was discovered, its dimensions, a longer description of what it looks\r\nlike, etc.\r\n\r\nWhat the research team would like people to do, is to transcribe the details\r\nfrom each section on the card into some pre-determined fields, and also to\r\nattempt to geo-reference the object via its place of discovery.\r\n\r\n### Thank you!\r\n\r\n** Hugh Fiske, Cheryl Ellsworth, Elaine Dale, Jeff Okazaki, Melissa Vette Wobig, Joellen mcGann, Dina Fathalla, scruffyarcher, Margaret Ellen Joy, Tim Mudie, Jane Fellows, Emma Morris, John Marr, Denis Antoine, Heidi Lund, Raest Wylde, Maria Christakou, Christopher Wai, Susan Magyarody, Danielle Haigh-Wood, Michael George Adams, Elizabeth Dale, Sarah Allana Reynolds, Robert Brockman, Arielle Richards, David Christensen, Kiyoko Nishi, Abigail Turner, Van C. Vives, Darren Kinsman, Janet Levy, Dylan Meisner, Andrew E. Levitt, Elizabeth Starkey and other anonymous contributors for completing this application. \r\n\r\n> Opening the treasures of the Bronze Age to the widest public is why I get\r\nup, I would love your help: <http://t.co/q7eWlIrD9j>\r\n\r\n>\r\n\r\n> -- Neil Wilkin (@NWilkinBM) [ April 16,\r\n2014](https://twitter.com/NWilkinBM/statuses/456421634237140992)\r\n\r\n### This project is on behalf of\r\n\r\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\r\nBritish Museum logo](/static/img/bmBlackWhite.png)\r\n\r\n### Find the code on Github\r\n\r\n![](https://crowdfunded.micropasts.org/assets/learn/github-ee049d767e762a0c6626051203a31f6e.png)\r\n\r\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"tutorial": "<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\n            <div class=\"modal-header\">\n                <h3 class=\"lead\">BM Bronze Age Index Drawer DrawerA14 transcription tutorial</h3>\n            </div>\n\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the\n                    index card and the line drawing of the object from the reverse side.\n                    An example of the front side of a card is shown below.\n                </p>\n\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n\n                <p>\n                    Each index card contains similar information and we are asking you to enter this information\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\n                    will hint that this information can be found \"Top of card\").\n                </p>\n\n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\n                        both entries that should be entered in the the Collection box, so you could simply enter\n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n\n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and\n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n\n            </div>\n\n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or\n                propose new research ideas based what you have transcribed, please have a look at\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../DrawerA14/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_68_thumbnail_1424853757.png", "task_presenter": "<link rel=\"stylesheet\" href=\"/static/css/ol.css\" type=\"text/css\">\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n\r\n<script src=\"/static/js/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\r\n<script src=\"http://maps.google.com/maps/api/js?sensor=false\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n<script src=\"https://code.jquery.com/ui/1.8.1/jquery-ui.min.js\" type=\"text/javascript\"></script>\r\n\r\n<style type=\"text/css\">\r\n    .ui-autocomplete {\r\n\tbackground-color: white;\r\n\twidth: 300px;\r\n\tborder: 1px solid #cfcfcf;\r\n\tlist-style-type: none;\r\n\tpadding-left: 0px;\r\n    }\r\n    label {\r\n        font-size:16px;\r\n    }\r\n    #map_canvas label {\r\n        width: auto;\r\n        display: inline;\r\n    }\r\n    #map_canvas img {\r\n        max-width: none;\r\n    }\r\n    .affix {\r\n        width: inherit;\r\n        height: 0px;\r\n    }\r\n  \r\n    .affix-bottom {\r\n        top: auto !important;\r\n        position: fixed;\r\n        bottom: 240px;\r\n    }\r\n    \r\n    #imgContainer {\r\n        height: 390px;\r\n        width: 600px;\r\n    } \r\n#map {\r\nheight:400px;\r\nwidth:100%;\r\n}\r\n\r\n</style>\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Do you want to help us further?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing one task for the project. \r\n              We are interested in knowing how you found out about us.\r\n          </p>\r\n          <p>\r\n              Could you please answer two questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">\r\n            Congratulations! You have completed 25 tasks!\r\n        </h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing 25 tasks for the project. Now that you \r\n              have been using MicroPasts for a while, we would like to know how \r\n              you found it.\r\n          </p>\r\n          <p>\r\n              Could you please answer a few questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\r\n    <!-- Success and Error Messages for the user -->\r\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\r\n        <h2>\r\n            Browser problems!\r\n        </h2>\r\n        <p>\r\n            Sorry, but your browser does not support the current application. \r\n            If you want to contribute, please, upgrade to a modern web browser \r\n            like the open source and free alternative \r\n            <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or \r\n            <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a>.\r\n        </p>\r\n    </div>\r\n</div> \r\n<!-- End of Row -->\r\n\r\n<div style=\"margin-top:15px;\">\r\n    <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n    </div>\r\n    <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <img src=\"/static/img/loading.gif\">Loading next task...\r\n    </div>\r\n    <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <strong>The task has been completed!</strong> Thanks a lot!\r\n    </div>\r\n    <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <h2>\r\n            Congratulations!\r\n        </h2> \r\n        <p>\r\n            You have participated in <strong>all</strong> available tasks! Thank you for your interest and help.\r\n        </p>\r\n        <br/>\r\n        <img src=\"https://crowdfunded.micropasts.org/assets/logo-head.png\" width=\"200\" height=\"200\"/>\r\n        <div class=\"alert-actions\">\r\n            <a class=\"btn-default btn\" href=\"/\">Go back</a>\r\n            <a class=\"btn-default btn\" href=\"/app\">or, Check other applications</a>\r\n        </div>\r\n    </div>\r\n\r\n    <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n        <a class=\"close\">X.</a>\r\n        <strong>Error!</strong> Something went wrong, please contact the site \r\n        administrators via the forum, Twitter, email or our Facebook page.\r\n    </div>\r\n</div> <!-- End Success and Error Messages for the user -->\r\n\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n\r\n<!-- Start Skeleton Row-->\r\n<div class=\"row skeleton\"> \r\n\r\n        <h1 id=\"start\">\r\n            Please transcribe this index card\r\n        </h1> \r\n    \r\n    <!-- The question will be loaded here -->\r\n    \r\n    <span class=\"label label-info\">Note</span> You can use your mouse wheel track-pad to zoom in/out the picture, as well as drag & drop to navigate in the document.\r\n\r\n</div>\r\n\r\n<div class=\"row skeleton\">\r\n\r\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\r\n\r\n        <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\r\n        <form id=\"transcription\" role=\"form\">\r\n            \r\n            <!-- Object type form control --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"objectType\">Object Type</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\r\n            </div>\r\n            <!-- End of object type form control -->\r\n            \r\n            <!-- Date of discovery group -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\r\n                <div class=\"controls\">\r\n                    <!-- Year --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\r\n                    </div>\r\n                    <!-- Month --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\r\n                    </div>\r\n                    <!-- Day --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!-- End of date of discovery group --> \r\n\r\n            <!-- Right corner -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\r\n                <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n            \r\n             <!-- National grid reference -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\r\n                <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\">\r\n            </div>\r\n\r\n            <!-- Geographical grouping --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"site\">Site</label>\r\n                <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\r\n                <div class=\"input-append\">\r\n                    <label class=\"control-label\" for=\"site\">Georeference the site</label>\r\n                    <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site in a map\"></input>\r\n                    <button id=\"searchBtn\" class=\"btn btn-answer\" value=\"search\" type=\"button\"><i class=\"icon-search\"></i> Search</button>\r\n\r\n<input type=\"hidden\" name=\"lat\" value=\"\" id=\"lat\">\r\n                <input type=\"hidden\" name=\"lon\" value=\"\" id=\"lon\">\r\n                </div>\r\n                \r\n                <div style=\"display:none;margin-top:15px;\" id=\"searching\" class=\"alert alert-info\">\r\n                    <img src=\"/static/img/loading.gif\"> Searching...\r\n                </div>\r\n                \r\n                <div style=\"display:none;margin-top:15px;\" id=\"searchingError\" class=\"alert alert-warning\">\r\n                    <strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> in the map.\r\n                </div>\r\n                 \r\n                <div id=\"searchingTip\" class=\"alert alert-info\" style=\"display:none; margin-top:10px;\">\r\n                    Drag & drop the <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> to improve the location\r\n                </div>\r\n                \r\n                <div id=\"map\" style=\"margin-top:15px;\">\r\n                    \r\n                </div>\r\n\r\n            </div>\r\n            <!-- End of geo group --> \r\n\r\n           \r\n            \r\n            <!-- The collection --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"collection\">Collection</label>\r\n                <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- The publications cited --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"publications\">Publications</label>\r\n                <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Length in mm --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"length\">Length</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"length\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Width -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"width\">Width</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"width\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Edge --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"edge\">Edge</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"edge\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Thickness --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"thickness\">Thickness</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"thickness\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Weight -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"weight\">Weight</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"weight\" placeholder=\"In grammes\">\r\n            </div>\r\n\r\n            <!-- The composition of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"composition\">Composition</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\r\n            </div>\r\n\r\n            <!-- The description of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"description\">Description</label>\r\n                <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\" ></textarea>\r\n            </div>\r\n\r\n            <!-- The surface of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"surface\">Surface</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\r\n            </div>\r\n\r\n            <!-- The patina of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"patina\">Patina</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Associations for the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"associations\">Associations</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Remarks --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"remarks\">Remarks</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Transcriber's comments --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if you have any.\"></textarea>\r\n            </div>\r\n        \r\n        </form>\r\n\r\n        <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\r\n            \r\n\t<!-- Feedback items for the user -->\r\n        <p>\r\n            You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span>\r\n        </p>\r\n        <p>\r\n            You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\t<!-- End of feedback row -->\r\n\r\n    </div>\r\n    <!-- End of Question and Submission DIV (column) -->\r\n    \r\n    <!-- The column holding the open layers div --> \r\n    \r\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\">\r\n        <!-- Start of Photo DIV (column) -->\r\n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"550\">\r\n            <div class=\"btn-group\">\r\n                <a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\r\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n\t        <a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\r\n        \t<a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\r\n            </div>\r\n            <!-- The container for the zoomer --> \r\n            <div id=\"imgContainer\"></div>\r\n            <div id=\"taskImg\"></div>\r\n        </div><!-- End of Photo DIV (columnt) -->\r\n    </div>\r\n\r\n</div><!-- End of Skeleton Row -->\r\n\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n                <h3 class=\"lead\">BM Bronze Age Index Drawer A14 transcription tutorial</h3>\r\n            </div>\r\n\t<!-- stepped modal body -->\r\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n\r\n                <p>\r\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\r\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\r\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\r\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\r\n                    card (if a card does not load, you can still click the \"View on Flickr\" button to see the contents). Most scanned images combine the written details from the one side of the\r\n                    index card and the line drawing of the object from the reverse side.\r\n                    An example of the front side of a card is shown below.\r\n                </p>\r\n\r\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\r\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\r\n\r\n                <p>\r\n                    Each index card contains similar information and we are asking you to enter this information\r\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\r\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\r\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\r\n                    will hint that this information can be found \"Top of card\").\r\n                </p>\r\n\r\n            </div>\r\n\r\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n\t\t     <p>\r\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\r\n                    Here are some further issues to watch out for:\r\n                    </p>\r\n\r\n\t\t<ol>\r\n\t\t\r\n                    <li>\r\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\r\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\r\n                    This is often but not always written in pencil (and by the way, when the last letter is a G it often looks like a 9). The example below would be rendered \"II1A\":<br />\r\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    When entering information in the fields, please respect the case of words as seen on the card.\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\r\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\r\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\r\n                    you are fairly confident but not certain.\r\n                    </li>\r\n\r\n                    <li>\r\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\r\n                    into just one of our pre-specified boxes, then separate it by \"[;]\" (without any paragraph return/hitting the enter key). For example, on the\r\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\r\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\r\n                    </li>\r\n\r\n                    <li>\r\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\r\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\r\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\r\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\r\n                    </li>\r\n\r\n                    <li>\r\n                    If there is additional information on the card that you do not feel fits in one of our pre-specified\r\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\r\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\r\n                    </li>\r\n                    \r\n                </ol>\r\n\r\n\r\n\t\t</div>\r\n\r\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\r\n\t\t\t<p>\r\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\r\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\r\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\r\n\t            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\r\n\t            \tinput fields in response to your suggestions.\r\n\t            \t</p>\r\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\r\n\t\t</div>\r\n\t\t\r\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\r\n\t\t<p>\r\n                To find out how the project is progressing, suggest changes to this application or\r\n                propose new research ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n\t\t</div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 3 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<!-- The modernizer script --> \r\n\r\n<script>\r\n// Quick fix for IE8\r\nModernizr.load({\r\n  test: window.JSON,\r\n  nope: '/static/js/vendor/json2.min.js'\r\n});\r\n</script>\r\n<!-- The main pybossa functions --> \r\n<script>\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('Drawer A14').done(function(data){\r\n        console.log(data);\r\n        console.log(\"Total answers done for user: \" + data.done);\r\n        if ((data.done == 1) && ($.cookie('surveyDrawerA14') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('survey', 'shown', { path: '/'});\r\n        }\r\n        if ((data.done == 25) && ($.cookie('survey25DrawerA14') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25DrawerA14', 'shown', { path: '/'});\r\n        }\r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'});\r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n</script>\r\n\r\n<script>\r\nvar geocoder;\r\nvar map;\r\nvar marker;\r\n    \r\nfunction initialize(){\r\n//MAP\r\n  var latlng = new google.maps.LatLng(54, -2);\r\n  var options = {\r\n    zoom: 4,\r\n    center: latlng,\r\n    mapTypeId: google.maps.MapTypeId.TERRAIN\r\n  };\r\n        \r\n  map = new google.maps.Map(document.getElementById(\"map\"), options);\r\n        \r\n  //GEOCODER\r\n  geocoder = new google.maps.Geocoder();\r\n        \r\n  marker = new google.maps.Marker({\r\n    map: map,\r\n    draggable: true\r\n  });\r\n\t\t\t\t\r\n}\r\n\t\t\r\n$(document).ready(function() { \r\n         \r\n  initialize();\r\n\t\t\t\t  \r\n  $(function() {\r\n    $(\"#toSearch\").autocomplete({\r\n      //This bit uses the geocoder to fetch address values\r\n      source: function(request, response) {\r\n        geocoder.geocode( {'address': request.term }, function(results, status) {\r\n          response($.map(results, function(item) {\r\n            return {\r\n              label:  item.formatted_address,\r\n              value: item.formatted_address,\r\n              latitude: item.geometry.location.lat(),\r\n              longitude: item.geometry.location.lng()\r\n            }\r\n          }));\r\n        })\r\n      },\r\n      //This bit is executed upon selection of an address\r\n      select: function(event, ui) {\r\n        $(\"#lat\").val(ui.item.latitude);\r\n        $(\"#lon\").val(ui.item.longitude);\r\n        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);\r\n        console.log('Latitude: ' + ui.item.latitude);\r\n        console.log('Longitude: ' + ui.item.longitude);\r\n        marker.setPosition(location);\r\n        map.setCenter(location);\r\n      }\r\n    });\r\n  });\r\n\t\r\n  //Add listener to marker for reverse geocoding\r\n  google.maps.event.addListener(marker, 'drag', function() {\r\n    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {\r\n      if (status == google.maps.GeocoderStatus.OK) {\r\n        if (results[0]) {\r\n          $('#toSearch').val(results[0].formatted_address);\r\n          $('#lat').val(marker.getPosition().lat());\r\n          $('#lon').val(marker.getPosition().lng());\r\n          console.log('Longitude: ' + marker.getPosition().lng());\r\n          console.log('Latitude: ' + marker.getPosition().lat());\r\n        }\r\n      }\r\n    });\r\n  });\r\n  \r\n});  \r\n</script>\r\n<script>\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        \r\n        div_map.css(\"height\", \"390px\");\r\n        div_map.css(\"width\", \"600px\");\r\n        div_map.css(\"background\", \"#000\");\r\n\r\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\r\n\r\n        var extent = new OpenLayers.Bounds();\r\n        extent.extend(new OpenLayers.LonLat(1.758939,58.672231).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n        \r\n        extent.extend(new OpenLayers.LonLat(-6.99745,49.96112).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n\r\n\r\n        $(\"#imgContainer\").append(div_map);\r\n        div_map.attr(\"id\", \"img_\" + task.id);\r\n\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 1024, 720]\r\n        });\r\n\r\n        task.map_img = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: copyright\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [1024, 720],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'img_' + task.id,\r\n          view: new ol.View({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 1.0\r\n          })\r\n        });\r\n        div_map.css(\"display\", \"none\");\r\n\r\n\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        img.attr(\"id\", \"img_task_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n        });\r\n        img.attr('src', task.info.url_b);\r\n        img.attr('width', '600px');\r\n        img.attr('height', '390px');\r\n        img.addClass('img-polaroid');\r\n        img.css(\"cursor\", \"zoom-in\");\r\n        task.info.image = img;\r\n\r\n        \r\n        }  else {\r\n            deferred.resolve(task);\r\n        }\r\n\r\n});\r\n</script>\r\n<script>\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(':input','#transcription')\r\n           .not(':button, :submit, :reset, :hidden, :radio')\r\n           .val('')\r\n           .removeAttr('checked')\r\n           .removeAttr('selected');\r\n      \r\n      \t$(\"a#raw\").attr(\"href\", task.info.url_b);\r\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n\t$(\"a#down\").attr(\"download\", task.id);\r\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\r\n        $(\".fancybox\").fancybox();\r\n        $('#imgLink').tooltip();\r\n        $(\"[rel=tooltip]\").tooltip();\r\n        $(\"#searchingTip\").hide();\r\n        $(\"#question\").html(task.info.question);\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n        $(\"#img_\" + task.id).show();\r\n\r\n        // Clean\r\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\r\n        for (i = 1700; i < 2000; i++) {\r\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\r\n        for (i = 1; i <= 12; i++)  {\r\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\r\n        for (i = 1; i <= 31; i++) {\r\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            evt.preventDefault();\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer !== 'undefined') {\r\n                console.log(answer);\r\n                if (answer === 'search') {\r\n                    $(\"#searching\").show();\r\n                    search(task, $(\"#toSearch\").val(), 15);\r\n                } else {\r\n                    task.answer = $(\"#transcription\").serializeJSON();\r\n                    console.log(task.answer);\r\n                   if($('#lon').val()) {\r\n                   var geojson = {\r\n                       \"geometry\": {\r\n                            \"type\": \"Point\",\r\n                            \"coordinates\": [\r\n                                        $('#lon').val(),\r\n                                        $('#lat').val()\r\n                                ]\r\n                        },\r\n                        \"crs\": {\r\n                          \"type\": \"name\",\r\n                          \"properties\": {\r\n                            \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\"\r\n                          }\r\n                        },\r\n                        \"type\": \"Feature\",\r\n                        \"properties\": {\r\n\r\n                        }\r\n                   };\r\n                   console.log(geojson);\r\n                    task.answer.geojson = geojson;\r\n                }\r\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ');\r\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ');\r\n                    console.log(task.answer);\r\n                    \r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"#map_\" + task.id).hide();\r\n                        $(\"#img_\" + task.id).hide();\r\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\r\n                        deferred.resolve();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                }\r\n            } else {\r\n                console.log(answer);\r\n                console.log(typeof(answer));\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n});\r\n\r\nif(Modernizr.borderradius) {\r\n    pybossa.run('DrawerA14');\r\n}\r\nelse {\r\n    $(\".skeleton\").hide();\r\n    $(\"#oldbrowser\").show();\r\n}\r\n$(window).off('.affix');\r\n$(\"#imgHolder\")\r\n    .removeClass(\"affix affix-top affix-bottom\")\r\n    .removeData(\"bs.affix\");\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/68'/>"}, {"id": 69, "created": "2014-09-16T12:24:14.395729", "updated": "2015-02-26T09:49:16.146136", "name": "Photo Masking Lower Hardres Palstaves", "short_name": "photomaskingPalstaves", "description": "Photo masking application", "long_description": "This application enables the creation of a high quality 3D model of an\r\narchaeological artefact via process known as photo-masking. There has been a\r\nrevolution in 3D modelling in recent years and it is now relatively easy to\r\nconstruct such models from ordinary digital photographs. Isolating the object\r\ndepicted in these photographs, and masking out the background, is an important\r\nfirst step to achieving high quality results. The final 3D model will be made\r\npublicly available and is useful not only for basic documentation purposes,\r\nbut also for graphical displays in museums, for inclusion in gaming and\r\nvirtual reality environments, or for identifing different sub-styles in\r\notherwise similar types of artefact (that might tell us about the date of the\r\nartefact, where it was made, or by whom).\r\n\r\nThis particular photo-masking application is dedicated to a hoard found in\r\nLower Hardres, Canterbury. A hoard is an archaeological term for a group of\r\nvaluable objects that have been buried in the ground together, often seemingly\r\nwith the intention of later being recovered by its owners. This particular\r\nhoard includes five Bronze Age palstaves.\r\n\r\nWe would like people to draw a polygon around the palstave that they see in\r\neach photograph in order to identify its outline and exclude the image\r\nbackground. This allows the 3D modelling process to concentrate on the object\r\nitself and ignore irrelevant background information.\r\n\r\nIf you are interested in what a 3D completed model looks like, please have a\r\nlook at the example [here](http://micropasts.org/3D) for a MicroPasts palstave\r\nmodel.\r\n\r\n### **Thank you!**\r\n\r\nHugh Fiske, Jeff Okazaki, Melissa Vette Wobig, Joseph Koivisto, Dina Fathalla,\r\nNina Sharman, Jane Fellows, Swantje Dogunke, Denis Antoine, Heidi Lund, Tim\r\nMatteson, Raest Wylde, Eleni Papaioannou, Maragkaki Froso, Maria Christakou,\r\nChristopher Wai, Susan Magyarody, Danielle Haigh-Wood, Erik Paul Zuber, Kiyoko\r\nNishi, Van C. Vives and other anonymous contributors for completing this\r\napplication\r\n\r\n###  This project is on behalf of:\r\n\r\n![The British Museum logo](/static/img/bmBlackWhite.png)\r\n\r\n###  Find the code on GitHub\r\n\r\n![](https://crowdfunded.micropasts.org/assets/learn/github-ee049d767e762a0c6626051203a31f6e.png)\r\n\r\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"tutorial": "<div id=\"modal\" class=\"modal fade\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h3>Photo-masking tutorial for 3D modelling </h3>\r\n            </div>\r\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                This application is very simple (but it does not yet work on mobile devices). When you participate, the platform will load a photograph of an archaeological artefact. Once the image has been loaded, you will be asked to click or tap around the edge of the artefact in order to define a polygon outline. Click once every time you wish to add a point along the edge of the polygon and your final point will snap back onto the one you started with. You can draw one polygon around the entire object or instead draw a series of overlapping polygons if you prefer. In general, we would like you to draw your polygon(s) very slightly inside the actual edge of the artefact. This is because we don't want background pixels near this edge to create a fuzzy border, and we don't need to worry so much about losing a bit of the artefact edge, as the missing few pixels are very likely to appear in one of the other photographs (at least 40 overlapping photographs are likely to exist for each object to support the construction of the 3D model). An example of a successful outline is shown below:\r\n                </p>\r\n                <img src=\"http://micropasts.org/wp-content/uploads/2014/09/LHC_Palstaves-e1410875403194.png\" width=\"100%\" class=\"img-polaroid\" alt=\"An example of an artefact photograph whose outline has been defined\" />\r\n            </div>\r\n\r\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n                <p>\r\n                During the task, you can always return to this tutorial via the \"Tutorial\" button. \r\n                </p>\r\n                <p>\r\n                An example of a finished <a href=\"http://micropasts.org/3D\">3D model</a> has now been completed.    \r\n                </p>\r\n                  <p>\r\n                To find out how the project is progressing, to suggest changes to this application or to propose new research ideas based what you have photo-masked, please have a look at our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n            </div>\r\n\r\n            <div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <a id=\"startContrib\" href=\"../photomaskingPalstaves/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n      </div>\r\n</div>\r\n</div>\r\n\r\n\r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 1 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n", "container": "user_12", "thumbnail": "app_69_thumbnail_1424853752.png", "task_presenter": "<link rel=\"stylesheet\" href=\"http://ol3js.org/en/master/css/ol.css\" type=\"text/css\">\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\n<style>\n#map {\n    background-color: grey;\n}\n.ol-zoom a,\n.ol-zoom-extent a,\n.ol-full-screen a{\n  display: block;\n  margin: 1px;\n  padding: 0;\n  color: white;\n  font-size: 1.14em;\n  font-weight: bold;\n  text-decoration: none;\n  text-align: center;\n  height: 1.375em;\n  width: 1.375em;\n  line-height: 1.4em;\n  background-color: #7b98bc;\n  background-color: rgba(0,60,136,0.5);\n  border: none;\n}\n.ol-zoom a::-moz-focus-inner,\n.ol-zoom-extent a::-moz-focus-inner,\n.ol-full-screen a::-moz-focus-inner {\n  border: none;\n  padding: 0;\n}\n.ol-zoom-extent a {\n  line-height: 1.4em;\n}\n.ol-touch .ol-zoom a,\n.ol-touch .ol-full-screen a,\n.ol-touch .ol-zoom-extent a{\n  font-size: 1.5em;\n}\n.ol-touch .ol-zoom-extent {\n  top: 5.5em;\n}\n.ol-zoom a:hover,\n.ol-zoom a:focus,\n.ol-zoom-extent a:hover,\n.ol-zoom-extent a:focus,\n.ol-full-screen a:hover,\n.ol-full-screen a:focus {\n  text-decoration: none;\n  background-color: #4c6079;\n  background-color: rgba(0,60,136,0.7);\n}\n.ol-zoom-extent a:after {\n    content: \"E\";\n}\n.ol-zoom-in {\n  border-radius: 2px 2px 0 0;\n}\n.ol-zoom-out {\n  border-radius: 0 0 2px 2px;\n}\na.ol-full-screen-false:after {\n  content: \"\\2194\";\n}\na.ol-full-screen-true:after {\n  content: \"\\00d7\";\n}\n\n.ol-zoom-extent a,\n.ol-attribution,\n.ol-full-screen a,\n.ol-scale-line-inner,\n.ol-zoom a,\n.ol-has-tooltip [role=tooltip] {\n  font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;\n}\n</style>\n<script src=\"http://ol3js.org/en/master/build/ol.js\" type=\"text/javascript\"></script>\n<script src=\"/static/js/vendor/ol3photomask.js\" type=\"text/javascript\"></script>\n<style>\n    .map {\n        height: 500px;\n        width: 100%;\n    }\n\n</style>\n\n<!--\n    Task DOM for loading the S3 Images\n    It uses the class=\"skeleton\" to identify the elements that belong to the\n    task.\n-->\n<div class=\"row skeleton\"> \n    <div class=\"col-md-12\">\n    \n        <div class=\"btn-group pull-right\">\n        \t\t<button class=\"btn btn-info btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</button>\n        \t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\n        </div>\n        \n        <h1 id=\"step1\">Draw the outline of the main object shown in the picture</h1>\n        <div class=\"btn-group\">\n            <button id=\"status\" type=\"button\" class=\"btn btn-default btn-type disabled\" name=\"loading\" value=\"loading\">Loading photo</button>\n            <button id=\"outline\" type=\"button\" class=\"btn btn-default btn-type active\" name=\"outline\" value=\"outline\">Outline</button>\n            <!-- button id=\"holes\" type=\"button\" class=\"btn btn-default btn-type\" name=\"holes\" value=\"holes\">Holes</button -->\n        </div>\n        <div class=\"btn-group\">\n            <button id=\"draw\" type=\"button\" class=\"btn btn-default btn-draw active\" name=\"draw\" value=\"draw\">Draw</button>\n            <button id=\"edit\" type=\"button\" class=\"btn btn-default btn-draw\" name=\"edit\" value=\"edit\">Edit</button>\n            <button id=\"delete\" type=\"button\" class=\"btn btn-default btn-draw\" name=\"delete\" value=\"delete\">Remove all polygons</button>\n        </div>\n        <div class=\"btn-group\">\n\n            <button id=\"btn-save\" class=\"btn btn-success btn-answer\" value='save'><i class=\"icon icon-white icon-save\"></i> Save the drawings</button>\n        </div>\n    </div>\n</div>\n\n<div class=\"row\">\n    <!-- Success and Error Messages for the user --> \n    <div class=\"col-md-6 col-md-offset-2\" style=\"height:50px\">\n        <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\n            <a class=\"close\">\u00d7</a>\n            <strong>Well done!</strong> Your answer has been saved\n        </div>\n        <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\n            <a class=\"close\">\u00d7</a>\n            Loading next task...\n        </div>\n        <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\n            <strong>The task has been completed!</strong> Thanks a lot!\n        </div>\n        <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\n            <strong>Congratulations!</strong> You have participated in all available tasks!\n            <br/>\n            <div class=\"alert-actions\">\n                <a class=\"btn small\" href=\"/\">Go back</a>\n                <a class=\"btn small\" href=\"/app\">or, Check other applications</a>\n            </div>\n        </div>\n        <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\n            <a class=\"close\">\u00d7</a>\n            <strong>Error!</strong> Something went wrong, please contact the site administrators\n        </div>\n    </div> <!-- End Success and Error Messages for the user -->\n</div> <!-- End of Row -->\n\n<div class=\"row skeleton\"> <!-- Start Skeleton Row-->\n    <div class=\"span8\"><!-- Start of Photo DIV (column) -->\n        <div id=\"map\" class=\"img-polaroid\"></div>\n    </div><!-- End of Photo DIV (columnt) -->\n    <div class=\"span4\"><!-- Start of Question and Submission DIV (column) -->\n        <!-- Feedback items for the user -->\n        <p>You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span></p>\n        <p>You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\n        <!-- Progress bar for the user -->\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\n        <div class=\"progress progress-striped\">\n            <div id=\"progress\" class=\"progress-bar\" role=\"progressbar\" rel=\"tooltip\" title=\"#\" class=\"bar\" style=\"width: 0%;\"></div>\n        </div>\n\n        <div id=\"answer\"> <!-- Start DIV for the submission buttons -->\n        </div><!-- End of DIV for the submission buttons -->\n       \n\n    </div><!-- End of Question and Submission DIV (column) -->\n\n</div><!-- End of Skeleton Row -->\n\n\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n        <h4 class=\"modal-title\">Hey there! Do you want to help us?</h4>\n      </div>\n      <div class=\"modal-body\">\n        Thanks for contributing one task for the project. We are interested in knowing how you found out about us. <strong>Could you please answer two questions in a short survey?</strong> \n      </div>\n      <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Kgw8cvcufm-77PC2t_PL_b4y1_Tb9wJseimmb3cQIn4/viewform?embedded=true\">Of course! Take me to the survey!</a>\n      </div>\n    </div><!-- /.modal-content -->\n  </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->\n\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\n        <h4 class=\"modal-title\">Congrats for completing 25 tasks!</h4>\n      </div>\n      <div class=\"modal-body\">\n        Thanks for contributing 25 tasks for the project. Now that you have been using MicroPasts for a while, we would like to know how you found it. <strong>Could you please answer a few questions in a short survey?</strong>\n      </div>\n      <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1uczUGGYbrQ2FQfTtM8j4vfGr2qwcCMW6PLwzfvZZ6kI/viewform?embedded=true\">Of course! Take me to the survey!</a>\n      </div>\n    </div><!-- /.modal-content -->\n  </div><!-- /.modal-dialog -->\n</div><!-- /.modal -->\n\n<!-- Modal start -->\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\t<!-- Modal header --> \n\t\t<div class=\"modal-header\">\n               <h3>Photo-masking tutorial for 3D modelling </h3>\n            </div>\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n                <p>\n                This application is very simple (but it does not yet work on mobile devices). When you participate, the platform will load a photograph of an archaeological artefact. Once the image has been loaded, you will be asked to click or tap around the edge of the artefact in order to define a polygon outline. Click once every time you wish to add a point along the edge of the polygon and your final point will snap back onto the one you started with. You can draw one polygon around the entire object or instead draw a series of overlapping polygons if you prefer. In general, we would like you to draw your polygon(s) very slightly inside the actual edge of the artefact. This is because we don't want background pixels near this edge to create a fuzzy border, and we don't need to worry so much about losing a bit of the artefact edge, as the missing few pixels are very likely to appear in one of the other photographs (at least 40 overlapping photographs are likely to exist for each object to support the construction of the 3D model). An example of a successful outline is shown below:\n                </p>\n                <img src=\"http://micropasts.org/wp-content/uploads/2014/09/LHC_Palstaves-e1410875403194.png\" width=\"100%\" class=\"img-polaroid\" alt=\"An example of an artefact photograph whose outline has been defined\" />\n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n                <p>\n                During the task, you can always return to this tutorial via the \"Tutorial\" button. \n                </p>\n                <p>\n                An example of a finished <a href=\"http://micropasts.org/3D\">3D model</a> has now been completed.\t\n                </p>\n            \t  <p>\n                To find out how the project is progressing, to suggest changes to this application or to propose new research ideas based what you have photo-masked, please have a look at our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n                </p>\n            </div>\n\n\t<!-- End of stepped modal body -->\n\n\t<!-- Modal footer -->\n\t<div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n\t</div>\n  </div>\n</div>\n<!-- Modal end --> \n<script type=\"text/javascript\">\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 1) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n\n\n<script>\nfunction loadUserProgress() {\n    pybossa.userProgress('photomaskingPalstaves').done(function(data){\n    \t\n    \tconsole.log('Tasks done so far: ' + data.done);\n    \t\n        if ((data.done == 1) && ($.cookie('surveyPhotoMask') === undefined)){\n           $(\"#survey\").modal('show');\n           $.cookie('surveyPhotoMask', 'shown', { path: '/'});\n        }\n        if ((data.done == 25) && ($.cookie('survey25PhotoMask') === undefined)){\n           $(\"#survey25\").modal('show');\n           $.cookie('survey25PhotoMask', 'shown', { path: '/'});\n        }\n        var pct = Math.round((data.done*100)/data.total);\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\n        $(\"#progress\").tooltip({'placement': 'left'}); \n        $(\"#total\").text(data.total);\n        $(\"#done\").text(data.done);\n    });\n}\n\npybossa.taskLoaded(function(task, deferred) {\n    if ( !$.isEmptyObject(task) ) {\n        // load image from flickr\n        var img = $('<img />');\n        var div_map = $('<div/>');\n        div_map.css(\"height\", \"500px\");\n        div_map.css(\"width\", \"100%\");\n        $(\"#draw\").addClass(\"disabled\");\n        $(\"#edit\").addClass(\"disabled\");\n        $(\"#delete\").addClass(\"disabled\");\n        $(\"#outline\").addClass(\"disabled\");\n        $(\"#holes\").addClass(\"disabled\");\n        $(\"#map\").append(div_map);\n        div_map.attr(\"id\", \"map_\" + task.id);\n        img.load(function() {\n            // continue as soon as the image is loaded\n            deferred.resolve(task);\n            $(\"#draw\").removeClass(\"disabled\");\n            $(\"#edit\").removeClass(\"disabled\");\n            $(\"#delete\").removeClass(\"disabled\");\n            $(\"#outline\").removeClass(\"disabled\");\n            $(\"#holes\").removeClass(\"disabled\");\n            $(\"#status\").text(\"Photo loaded!\");\n        });\n        img.attr('src', task.info.url_b).css('height', 460);\n        \n        //Log the url of image being masked.\n        console.log(task.info.url_b);\n        \n        img.addClass('img-polaroid');\n        task.info.image = img;\n\n        // Maps always need a projection, but the static image is not geo-referenced,\n        // and are only measured in pixels.  So, we create a fake projection that the\n        // map can use to properly display the layer.\n        task.pixelProjection = new ol.proj.Projection({\n          code: 'pixel',\n          units: 'pixels',\n          extent: [0, 0, 5184, 3456]\n        });\n\n        task.styleArray = [new ol.style.Style({\n          fill: new ol.style.Fill({\n            color: 'rgba(255, 255, 255, 0.2)'\n          }),\n          stroke: new ol.style.Stroke({\n            color: '#ffcc33',\n            width: 2\n          }),\n          image: new ol.style.Circle({\n            radius: 7,\n            fill: new ol.style.Fill({\n              color: '#ffcc33'\n            })\n          })\n        })];\n        \n        task.source = new ol.source.Vector();\n        task.source_holes = new ol.source.Vector();\n        \n        task.vector = new ol.layer.Vector({\n          source: task.source,\n          //styleFunction: function(feature, resolution) {\n          //  return task.styleArray;\n          //}\n          style: new ol.style.Style({\n                fill: new ol.style.Fill({\n                      color: 'rgba(255, 255, 255, 0.2)'\n                    }),\n                    stroke: new ol.style.Stroke({\n                      color: '#ffcc33',\n                      width: 2\n                    }),\n                    image: new ol.style.Circle({\n                      radius: 7,\n                      fill: new ol.style.Fill({\n                        color: '#ffcc33'\n                        })\n                      })\n                    })\n          });\n\n        task.holes = new ol.layer.Vector({\n          source: task.source_holes,\n          //styleFunction: function(feature, resolution) {\n          //  return task.styleArray;\n          //}\n          style: new ol.style.Style({\n                fill: new ol.style.Fill({\n                      color: 'rgba(255, 255, 255, 0.2)'\n                    }),\n                    stroke: new ol.style.Stroke({\n                      color: '#00CC99',\n                      width: 2\n                    }),\n                    image: new ol.style.Circle({\n                      radius: 7,\n                      fill: new ol.style.Fill({\n                        color: '#00CC99'\n                        })\n                      })\n                    })\n          });\n\n        task.overlay = new ol.FeatureOverlay({\n            style: new ol.style.Style({\n                  fill: new ol.style.Fill({\n                        color: 'rgba(255, 255, 255, 0.2)'\n                      }),\n                      stroke: new ol.style.Stroke({\n                        color: [0, 153, 255, 1],\n                        width: 2\n                      }),\n                      image: new ol.style.Circle({\n                        radius: 7,\n                        fill: new ol.style.Fill({\n                          color: [0, 153, 255, 1]\n                          })\n                        })\n                      })\n        });\n\n        // Modifiers for vector outline\n        task.modify = new ol.interaction.Modify({ \n                                                layer: task.vector,\n                                                featureOverlay: task.overlay });\n        task.select = new ol.interaction.Select({ \n                                                layer: task.vector,\n                                                featureOverlay: task.overlay });\n\n        // Modifiers for vector holes\n        task.modify_holes = new ol.interaction.Modify({ \n                                                layer: task.holes,\n                                                featureOverlay: task.overlay });\n        task.select_holes = new ol.interaction.Select({ \n                                                layer: task.holes,\n                                                featureOverlay: task.overlay });\n\n        task.map = new ol.Map({\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify, task.select_holes, task.modify_holes]),\n          layers: [\n            new ol.layer.Image({\n              source: new ol.source.ImageStatic({\n                attributions: [\n                  new ol.Attribution({\n                    html: '&copy; <a href=\"http://micropasts.org\">Micropasts</a>'\n                  })\n                ],\n                url: task.info.url_b,\n                imageSize: [5184, 3456],\n                projection: task.pixelProjection,\n                imageExtent: task.pixelProjection.getExtent()\n              })\n            })\n          , \n          task.vector,\n          task.holes,\n          ],\n          renderer: 'canvas',\n          target: 'map_' + task.id,\n          view: new ol.View2D({\n            projection: task.pixelProjection,\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\n            zoom: 2.25\n          })\n        });\n        var zoomslider;\n        zoomslider = new ol.control.ZoomSlider();\n        task.map.addControl(zoomslider);\n        div_map.css(\"display\", \"none\");\n\n        var typeSelect = document.getElementById('type');\n        \n        //task.draw; // global so we can remove it later\n        task.draw = new ol.interaction.Draw({\n          source: task.source,\n          type: 'Polygon',\n        });\n\n        task.draw_holes = new ol.interaction.Draw({\n          source: task.source_holes,\n          type: 'Polygon',\n        });\n\n        // When the first polygon is completed, remove the drawInteraction\n        task.draw.on('drawend', function(evt) {\n                task.polygon = true;\n                $(\"#btn-save\").removeClass(\"disabled\");\n                });\n\n        // When the first hole is completed, remove the drawInteraction\n        task.draw_holes.on('drawend', function(evt) {\n                task.holes = true;\n                $(\"#btn-save\").removeClass(\"disabled\");\n                });\n\n        task.map.addInteraction(task.draw);\n\n        task.answer = {\n                 'task_id': task.id,\n                 'outline': [],\n                 'holes': [],\n                 'img': task.info.url_b};\n        task.polygon = false;\n        task.holes = false;\n        }\n    else {\n        deferred.resolve(task);\n    }\n});\n\npybossa.presentTask(function(task, deferred) {\n    if ( !$.isEmptyObject(task) ) {\n        loadUserProgress();\n        $(\"#btn-save\").addClass(\"disabled\");\n        $('#task-id').html(task.id);\n        $(\"#map_\" + task.id).show();\n\n        // Code for drawing outlines or holes\n        $('.btn-type').off('click').on('click', function(evt) {\n            var answer = $(evt.target).attr(\"value\");\n            if (typeof answer != 'undefined'){\n                if (answer == 'holes') {\n                    $(\"#outline\").removeClass('active');\n                    $(\"#holes\").addClass('active');\n                    task.map.removeInteraction(task.draw);\n                    task.map.addInteraction(task.draw_holes);\n                }\n                else {\n                    $(\"#holes\").removeClass('active');\n                    $(\"#outline\").addClass('active');\n                    task.map.addInteraction(task.draw);\n                    task.map.removeInteraction(task.draw_holes);\n                }\n            }\n        });\n\n        // Code for editing/drawing polygons\n        $('.btn-draw').off('click').on('click', function(evt) {\n            var answer = $(evt.target).attr(\"value\");\n            if (typeof answer != 'undefined'){\n                if (answer == 'draw') {\n                    $(\"#edit\").removeClass(\"active\");\n                    $(\"#draw\").addClass(\"active\");\n                    if ($(\"#outline\").hasClass(\"active\")) {\n                        task.map.removeInteraction(task.modify);\n                        task.map.removeInteraction(task.select);\n                        task.map.addInteraction(task.draw);\n                    }\n                    else {\n                        task.map.removeInteraction(task.modify_holes);\n                        task.map.removeInteraction(task.select_holes);\n                        task.map.addInteraction(task.draw_holes);\n                    }\n                }\n                if (answer == 'edit') {\n                    $(\"#draw\").removeClass(\"active\");\n                    $(\"#edit\").addClass(\"active\");\n                    if ($(\"#outline\").hasClass(\"active\")) {\n                        task.map.removeInteraction(task.draw);\n                        task.map.addInteraction(task.select);\n                        task.map.addInteraction(task.modify);\n                    }\n                    else {\n                        task.map.removeInteraction(task.draw_holes);\n                        task.map.addInteraction(task.select_holes);\n                        task.map.addInteraction(task.modify_holes);\n                    }\n                }\n\n                if (answer == 'delete') {\n                    if ($(\"#outline\").hasClass(\"active\")) {\n                        $(\"#draw\").removeClass(\"active\");\n                        $(\"#edit\").removeClass(\"active\");\n                        $(\"#delete\").addClass(\"active\");\n                        var features = task.source.getAllFeatures();\n                        for(i=0;i<features.length;i++) {\n                            task.source.removeFeature(features[i]);\n                        }\n                        task.polygon = false;\n                        $(\"#draw\").addClass(\"active\");\n                        $(\"#delete\").removeClass(\"active\");\n                    }\n                    else {\n                        $(\"#draw\").removeClass(\"active\");\n                        $(\"#edit\").removeClass(\"active\");\n                        $(\"#delete\").addClass(\"active\");\n                        var features = task.source_holes.getAllFeatures();\n                        for(i=0;i<features.length;i++) {\n                            task.source_holes.removeFeature(features[i]);\n                        }\n                        task.holes = false;\n                        $(\"#draw\").addClass(\"active\");\n                        $(\"#delete\").removeClass(\"active\");\n                    }\n                }\n\n                }});\n\n\n\n        $('.btn-answer').off('click').on('click', function(evt) {\n            var answer = $(evt.target).attr(\"value\");\n            if (typeof answer != 'undefined'){\n                //Log the answer submitted to console\n                console.log(answer);\n                \n                //console.log(task.map.source.features);\n                console.log(task.source.features);\n\n                if (task.polygon) {\n                    var features = task.source.getAllFeatures();\n                    var polygons = [];\n                    for(i=0;i<features.length;i++) {\n                        var g = features[i].getGeometry();\n                        polygons.push(g.getCoordinates());\n                    }\n                    //task.answer = {\n                    //    'task_id': task.id,\n                    //    'polygon': polygons,\n                    //    'img': task.info.url_b};\n                    task.answer.outline = polygons;\n\n                    if (task.holes) {\n                        var features = task.source_holes.getAllFeatures();\n                        var polygons = [];\n                        for(i=0;i<features.length;i++) {\n                            var g = features[i].getGeometry();\n                            polygons.push(g.getCoordinates());\n                        }\n\n                        task.answer.holes = polygons;\n                    }\n\n                    pybossa.saveTask(task.id, task.answer).done(function() {\n                    \t$(\"#success\").fadeIn(500).fadeOut(5500);\n                        \n                        deferred.resolve();\n                        $(\"#map_\" + task.id).remove();\n                    });\n                    $(\"#loading\").fadeIn(500);\n                    \n                } // end if task.polygon\n            }\n            else {\n                $(\"#error\").show();\n            }\n        });\n        $(\"#loading\").hide();\n    }\n    else {\n        $(\".skeleton\").hide();\n        $(\"#loading\").hide();\n        $(\"#finish\").fadeIn(500);\n    }\n    $('#imgLink').tooltip();\n\n        \n});\n\npybossa.run('photomaskingPalstaves');\n</script>\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/69'/>"}, {"id": 70, "created": "2014-09-26T15:12:52.124299", "updated": "2015-02-26T09:40:24.091661", "name": "British Museum Bronze Age Drawer A2 - Socketed Spearheads ", "short_name": "SpearHeadsA2", "description": "British Museum Bronze Age Card Index transcription of Drawer A2 - Socketed Spearheads", "long_description": "This application will help the [British\r\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\r\nNeil Wilkin, to make available a huge card catalogue of British prehistoric\r\nmetal artefacts discovered in the 19th and 20th century. This information has\r\nlong been known to be an extremely important untapped resource. Metal finds\r\nare not only crucial forms of evidence for dating Britain's prehistoric past,\r\nbut also tell us a great deal about prehistoric society and economy.\r\nDigitising the thousands of objects in this catalogue will make these records\r\npublicly available via their incorporation into the [Portable Antiquities\r\nScheme website](http://finds.org.uk). The result will be the largest national\r\ndatabase of prehistoric metal finds anywhere in the world and a near\r\ncomprehensive view of what we currently know about such finds in the UK.\r\n\r\nThe cards have been scanned and uploaded to\r\n[Flickr](https://www.flickr.com/photos/micropasts/), and it is from there that\r\nthe current application will retrieve and manipulate the scans. These cards\r\ncontain some fairly standardised kinds of information: about where the\r\nartefact was discovered, its dimensions, a longer description of what it looks\r\nlike, etc.\r\n\r\nWhat the research team would like people to do, is to transcribe the details\r\nfrom each section on the card into some pre-determined fields, and also to\r\nattempt to geo-reference the object via its place of discovery.\r\n\r\n### **Thank you!\r\n\r\n** Lucy Ellis, Helen Bowen, Hugh Fiske, Elaine Dale, Jeff Okazaki, Terry Jackson-Baker, Joellen mcGann, Dina Fathalla, scruffyarcher, John Marr, Denis Antoine, Heidi Lund, Raest Wylde, Maria Christakou, Christopher Wai, Susan Magyarody, Michael George Adams, Juliet Crome, Gillian Barnes, Kiyoko Nishi, Van C. Vives, Darren Kinsman, Janet Levy, Holly Peterson, Marilyn Kohn, William Charles Bemis, William J. Stewart, Paige, Sylvia Solarski, Gemma Lewis, Aspasia Galanopoulou, Anna-Elyse Young, David Glasgow, Catherine Pherigo and other anonymous contributors for completing this application. \r\n\r\n> Opening the treasures of the Bronze Age to the widest public is why I get\r\nup, I would love your help: <http://t.co/q7eWlIrD9j>\r\n\r\n>\r\n\r\n> -- Neil Wilkin (@NWilkinBM) [ April 16,\r\n2014](https://twitter.com/NWilkinBM/statuses/456421634237140992)\r\n\r\n### This project is on behalf of\r\n\r\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\r\nBritish Museum logo](/static/img/bmBlackWhite.png)\r\n\r\n### Find the code on Github\r\n\r\n![](https://crowdfunded.micropasts.org/assets/learn/github-ee049d767e762a0c6626051203a31f6e.png)\r\n\r\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"tutorial": "<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\n            <div class=\"modal-header\">\n                <h3 class=\"lead\">BM Bronze Age Index Drawer Socketed Spear Heads A2 transcription tutorial</h3>\n            </div>\n\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the\n                    index card and the line drawing of the object from the reverse side.\n                    An example of the front side of a card is shown below.\n                </p>\n\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n\n                <p>\n                    Each index card contains similar information and we are asking you to enter this information\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\n                    will hint that this information can be found \"Top of card\").\n                </p>\n\n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\n                        both entries that should be entered in the the Collection box, so you could simply enter\n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n\n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and\n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n\n            </div>\n\n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or\n                propose new research ideas based what you have transcribed, please have a look at\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../SpearHeadsA2/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_70_thumbnail_1424853760.png", "task_presenter": "<link rel=\"stylesheet\" href=\"/static/css/ol.css\" type=\"text/css\">\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n\r\n<script src=\"/static/js/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\r\n<script src=\"http://maps.google.com/maps/api/js?sensor=false\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n<script src=\"https://code.jquery.com/ui/1.8.1/jquery-ui.min.js\" type=\"text/javascript\"></script>\r\n\r\n<style type=\"text/css\">\r\n    .ui-autocomplete {\r\n\tbackground-color: white;\r\n\twidth: 300px;\r\n\tborder: 1px solid #cfcfcf;\r\n\tlist-style-type: none;\r\n\tpadding-left: 0px;\r\n    }\r\n    label {\r\n        font-size:16px;\r\n    }\r\n    #map_canvas label {\r\n        width: auto;\r\n        display: inline;\r\n    }\r\n    #map_canvas img {\r\n        max-width: none;\r\n    }\r\n    .affix {\r\n        width: inherit;\r\n        height: 0px;\r\n    }\r\n  \r\n    .affix-bottom {\r\n        top: auto !important;\r\n        position: fixed;\r\n        bottom: 240px;\r\n    }\r\n    \r\n    #imgContainer {\r\n        height: 390px;\r\n        width: 600px;\r\n    } \r\n#map {\r\nheight:400px;\r\nwidth:100%;\r\n}\r\n\r\n</style>\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Do you want to help us further?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing one task for the project. \r\n              We are interested in knowing how you found out about us.\r\n          </p>\r\n          <p>\r\n              Could you please answer two questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">\r\n            Congratulations! You have completed 25 tasks!\r\n        </h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing 25 tasks for the project. Now that you \r\n              have been using MicroPasts for a while, we would like to know how \r\n              you found it.\r\n          </p>\r\n          <p>\r\n              Could you please answer a few questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\r\n    <!-- Success and Error Messages for the user -->\r\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\r\n        <h2>\r\n            Browser problems!\r\n        </h2>\r\n        <p>\r\n            Sorry, but your browser does not support the current application. \r\n            If you want to contribute, please, upgrade to a modern web browser \r\n            like the open source and free alternative \r\n            <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or \r\n            <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a>.\r\n        </p>\r\n    </div>\r\n</div> \r\n<!-- End of Row -->\r\n\r\n<div style=\"margin-top:15px;\">\r\n    <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n    </div>\r\n    <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <img src=\"/static/img/loading.gif\">Loading next task...\r\n    </div>\r\n    <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <strong>The task has been completed!</strong> Thanks a lot!\r\n    </div>\r\n    <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <h2>\r\n            Congratulations!\r\n        </h2> \r\n        <p>\r\n            You have participated in <strong>all</strong> available tasks! Thank you for your interest and help.\r\n        </p>\r\n        <br/>\r\n        <img src=\"https://crowdfunded.micropasts.org/assets/logo-head.png\" width=\"200\" height=\"200\"/>\r\n        <div class=\"alert-actions\">\r\n            <a class=\"btn-default btn\" href=\"/\">Go back</a>\r\n            <a class=\"btn-default btn\" href=\"/app\">or, Check other applications</a>\r\n        </div>\r\n    </div>\r\n\r\n    <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n        <a class=\"close\">X.</a>\r\n        <strong>Error!</strong> Something went wrong, please contact the site \r\n        administrators via the forum, Twitter, email or our Facebook page.\r\n    </div>\r\n</div> <!-- End Success and Error Messages for the user -->\r\n\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n\r\n<!-- Start Skeleton Row-->\r\n<div class=\"row skeleton\"> \r\n\r\n        <h1 id=\"start\">\r\n            Please transcribe this index card\r\n        </h1> \r\n    \r\n    <!-- The question will be loaded here -->\r\n    \r\n    <span class=\"label label-info\">Note</span> You can use your mouse wheel track-pad to zoom in/out the picture, as well as drag & drop to navigate in the document.\r\n\r\n</div>\r\n\r\n<div class=\"row skeleton\">\r\n\r\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\r\n\r\n        <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\r\n        <form id=\"transcription\" role=\"form\">\r\n            \r\n            <!-- Object type form control --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"objectType\">Object Type</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\r\n            </div>\r\n            <!-- End of object type form control -->\r\n            \r\n            <!-- Date of discovery group -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\r\n                <div class=\"controls\">\r\n                    <!-- Year --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\r\n                    </div>\r\n                    <!-- Month --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\r\n                    </div>\r\n                    <!-- Day --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!-- End of date of discovery group --> \r\n\r\n            <!-- Right corner -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\r\n                <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n            \r\n             <!-- National grid reference -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\r\n                <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\">\r\n            </div>\r\n\r\n            <!-- Geographical grouping --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"site\">Site</label>\r\n                <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\r\n                <div class=\"input-append\">\r\n                    <label class=\"control-label\" for=\"site\">Georeference the site</label>\r\n                    <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site in a map\"></input>\r\n                    <button id=\"searchBtn\" class=\"btn btn-answer\" value=\"search\" type=\"button\"><i class=\"icon-search\"></i> Search</button>\r\n\r\n<input type=\"hidden\" name=\"lat\" value=\"\" id=\"lat\">\r\n                <input type=\"hidden\" name=\"lon\" value=\"\" id=\"lon\">\r\n                </div>\r\n                \r\n                <div style=\"display:none;margin-top:15px;\" id=\"searching\" class=\"alert alert-info\">\r\n                    <img src=\"/static/img/loading.gif\"> Searching...\r\n                </div>\r\n                \r\n                <div style=\"display:none;margin-top:15px;\" id=\"searchingError\" class=\"alert alert-warning\">\r\n                    <strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> in the map.\r\n                </div>\r\n                 \r\n                <div id=\"searchingTip\" class=\"alert alert-info\" style=\"display:none; margin-top:10px;\">\r\n                    Drag & drop the <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> to improve the location\r\n                </div>\r\n                \r\n                <div id=\"map\" style=\"margin-top:15px;\">\r\n                    \r\n                </div>\r\n\r\n            </div>\r\n            <!-- End of geo group --> \r\n\r\n           \r\n            \r\n            <!-- The collection --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"collection\">Collection</label>\r\n                <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- The publications cited --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"publications\">Publications</label>\r\n                <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Length in mm --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"length\">Length</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"length\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Width -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"width\">Width</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"width\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Edge --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"edge\">Edge</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"edge\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Thickness --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"thickness\">Thickness</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"thickness\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Weight -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"weight\">Weight</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"weight\" placeholder=\"In grammes\">\r\n            </div>\r\n\r\n            <!-- The composition of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"composition\">Composition</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\r\n            </div>\r\n\r\n            <!-- The description of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"description\">Description</label>\r\n                <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\" ></textarea>\r\n            </div>\r\n\r\n            <!-- The surface of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"surface\">Surface</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\r\n            </div>\r\n\r\n            <!-- The patina of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"patina\">Patina</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Associations for the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"associations\">Associations</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Remarks --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"remarks\">Remarks</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Transcriber's comments --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if you have any.\"></textarea>\r\n            </div>\r\n        \r\n        </form>\r\n\r\n        <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\r\n            \r\n\t<!-- Feedback items for the user -->\r\n        <p>\r\n            You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span>\r\n        </p>\r\n        <p>\r\n            You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\t<!-- End of feedback row -->\r\n\r\n    </div>\r\n    <!-- End of Question and Submission DIV (column) -->\r\n    \r\n    <!-- The column holding the open layers div --> \r\n    \r\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\">\r\n        <!-- Start of Photo DIV (column) -->\r\n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"550\">\r\n            <div class=\"btn-group\">\r\n                <a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\r\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n\t        <a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\r\n        \t<a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\r\n            </div>\r\n            <!-- The container for the zoomer --> \r\n            <div id=\"imgContainer\"></div>\r\n            <div id=\"taskImg\"></div>\r\n        </div><!-- End of Photo DIV (columnt) -->\r\n    </div>\r\n\r\n</div><!-- End of Skeleton Row -->\r\n\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n                <h3 class=\"lead\">BM Bronze Age Index SpearHeadsA2 transcription tutorial</h3>\r\n            </div>\r\n\t<!-- stepped modal body -->\r\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n\r\n                <p>\r\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\r\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\r\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\r\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\r\n                    card (if a card does not load, you can still click the \"View on Flickr\" button to see the contents). Most scanned images combine the written details from the one side of the\r\n                    index card and the line drawing of the object from the reverse side.\r\n                    An example of the front side of a card is shown below.\r\n                </p>\r\n\r\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\r\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\r\n\r\n                <p>\r\n                    Each index card contains similar information and we are asking you to enter this information\r\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\r\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\r\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\r\n                    will hint that this information can be found \"Top of card\").\r\n                </p>\r\n\r\n            </div>\r\n\r\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n\t\t     <p>\r\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\r\n                    Here are some further issues to watch out for:\r\n                    </p>\r\n\r\n\t\t<ol>\r\n\t\t\r\n                    <li>\r\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\r\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\r\n                    This is often but not always written in pencil (and by the way, when the last letter is a G it often looks like a 9). The example below would be rendered \"II1A\":<br />\r\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    When entering information in the fields, please respect the case of words as seen on the card.\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\r\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\r\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\r\n                    you are fairly confident but not certain.\r\n                    </li>\r\n\r\n                    <li>\r\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\r\n                    into just one of our pre-specified boxes, then separate it by \"[;]\" (without any paragraph return/hitting the enter key). For example, on the\r\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\r\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\r\n                    </li>\r\n\r\n                    <li>\r\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\r\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\r\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\r\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\r\n                    </li>\r\n\r\n                    <li>\r\n                    If there is additional information on the card that you do not feel fits in one of our pre-specified\r\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\r\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\r\n                    </li>\r\n                    \r\n                </ol>\r\n\r\n\r\n\t\t</div>\r\n\r\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\r\n\t\t\t<p>\r\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\r\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\r\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\r\n\t            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\r\n\t            \tinput fields in response to your suggestions.\r\n\t            \t</p>\r\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\r\n\t\t</div>\r\n\t\t\r\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\r\n\t\t<p>\r\n                To find out how the project is progressing, suggest changes to this application or\r\n                propose new research ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n\t\t</div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 3 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<!-- The modernizer script --> \r\n\r\n<script>\r\n// Quick fix for IE8\r\nModernizr.load({\r\n  test: window.JSON,\r\n  nope: '/static/js/vendor/json2.min.js'\r\n});\r\n</script>\r\n<!-- The main pybossa functions --> \r\n<script>\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('').done(function(data){\r\n        console.log(data);\r\n        console.log(\"Total answers done for user: \" + data.done);\r\n        if ((data.done == 1) && ($.cookie('surveySpearHeadsA2') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('survey', 'shown', { path: '/'});\r\n        }\r\n        if ((data.done == 25) && ($.cookie('survey25') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25SpearHeadsA2', 'shown', { path: '/'});\r\n        }\r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'});\r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n</script>\r\n\r\n<script>\r\nvar geocoder;\r\nvar map;\r\nvar marker;\r\n    \r\nfunction initialize(){\r\n//MAP\r\n  var latlng = new google.maps.LatLng(54, -2);\r\n  var options = {\r\n    zoom: 4,\r\n    center: latlng,\r\n    mapTypeId: google.maps.MapTypeId.TERRAIN\r\n  };\r\n        \r\n  map = new google.maps.Map(document.getElementById(\"map\"), options);\r\n        \r\n  //GEOCODER\r\n  geocoder = new google.maps.Geocoder();\r\n        \r\n  marker = new google.maps.Marker({\r\n    map: map,\r\n    draggable: true\r\n  });\r\n\t\t\t\t\r\n}\r\n\t\t\r\n$(document).ready(function() { \r\n         \r\n  initialize();\r\n\t\t\t\t  \r\n  $(function() {\r\n    $(\"#toSearch\").autocomplete({\r\n      //This bit uses the geocoder to fetch address values\r\n      source: function(request, response) {\r\n        geocoder.geocode( {'address': request.term }, function(results, status) {\r\n          response($.map(results, function(item) {\r\n            return {\r\n              label:  item.formatted_address,\r\n              value: item.formatted_address,\r\n              latitude: item.geometry.location.lat(),\r\n              longitude: item.geometry.location.lng()\r\n            }\r\n          }));\r\n        })\r\n      },\r\n      //This bit is executed upon selection of an address\r\n      select: function(event, ui) {\r\n        $(\"#lat\").val(ui.item.latitude);\r\n        $(\"#lon\").val(ui.item.longitude);\r\n        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);\r\n        console.log('Latitude: ' + ui.item.latitude);\r\n        console.log('Longitude: ' + ui.item.longitude);\r\n        marker.setPosition(location);\r\n        map.setCenter(location);\r\n      }\r\n    });\r\n  });\r\n\t\r\n  //Add listener to marker for reverse geocoding\r\n  google.maps.event.addListener(marker, 'drag', function() {\r\n    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {\r\n      if (status == google.maps.GeocoderStatus.OK) {\r\n        if (results[0]) {\r\n          $('#toSearch').val(results[0].formatted_address);\r\n          $('#lat').val(marker.getPosition().lat());\r\n          $('#lon').val(marker.getPosition().lng());\r\n          console.log('Longitude: ' + marker.getPosition().lng());\r\n          console.log('Latitude: ' + marker.getPosition().lat());\r\n        }\r\n      }\r\n    });\r\n  });\r\n  \r\n});  \r\n</script>\r\n<script>\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        \r\n        div_map.css(\"height\", \"390px\");\r\n        div_map.css(\"width\", \"600px\");\r\n        div_map.css(\"background\", \"#000\");\r\n\r\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\r\n\r\n        var extent = new OpenLayers.Bounds();\r\n        extent.extend(new OpenLayers.LonLat(1.758939,58.672231).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n        \r\n        extent.extend(new OpenLayers.LonLat(-6.99745,49.96112).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n\r\n\r\n        $(\"#imgContainer\").append(div_map);\r\n        div_map.attr(\"id\", \"img_\" + task.id);\r\n\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 1024, 720]\r\n        });\r\n\r\n        task.map_img = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: copyright\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [1024, 720],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'img_' + task.id,\r\n          view: new ol.View({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 1.0\r\n          })\r\n        });\r\n        div_map.css(\"display\", \"none\");\r\n\r\n\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        img.attr(\"id\", \"img_task_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n        });\r\n        img.attr('src', task.info.url_b);\r\n        img.attr('width', '600px');\r\n        img.attr('height', '390px');\r\n        img.addClass('img-polaroid');\r\n        img.css(\"cursor\", \"zoom-in\");\r\n        task.info.image = img;\r\n\r\n        \r\n        }  else {\r\n            deferred.resolve(task);\r\n        }\r\n\r\n});\r\n</script>\r\n<script>\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(':input','#transcription')\r\n           .not(':button, :submit, :reset, :hidden, :radio')\r\n           .val('')\r\n           .removeAttr('checked')\r\n           .removeAttr('selected');\r\n      \r\n      \t$(\"a#raw\").attr(\"href\", task.info.url_b);\r\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n\t$(\"a#down\").attr(\"download\", task.id);\r\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\r\n        $(\".fancybox\").fancybox();\r\n        $('#imgLink').tooltip();\r\n        $(\"[rel=tooltip]\").tooltip();\r\n        $(\"#searchingTip\").hide();\r\n        $(\"#question\").html(task.info.question);\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n        $(\"#img_\" + task.id).show();\r\n\r\n        // Clean\r\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\r\n        for (i = 1700; i < 2000; i++) {\r\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\r\n        for (i = 1; i <= 12; i++)  {\r\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\r\n        for (i = 1; i <= 31; i++) {\r\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            evt.preventDefault();\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer !== 'undefined') {\r\n                console.log(answer);\r\n                if (answer === 'search') {\r\n                    $(\"#searching\").show();\r\n                    search(task, $(\"#toSearch\").val(), 15);\r\n                } else {\r\n                    task.answer = $(\"#transcription\").serializeJSON();\r\n                    console.log(task.answer);\r\n                   if($('#lon').val()) {\r\n                   var geojson = {\r\n                       \"geometry\": {\r\n                            \"type\": \"Point\",\r\n                            \"coordinates\": [\r\n                                        $('#lon').val(),\r\n                                        $('#lat').val()\r\n                                ]\r\n                        },\r\n                        \"crs\": {\r\n                          \"type\": \"name\",\r\n                          \"properties\": {\r\n                            \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\"\r\n                          }\r\n                        },\r\n                        \"type\": \"Feature\",\r\n                        \"properties\": {\r\n\r\n                        }\r\n                   };\r\n                   console.log(geojson);\r\n                    task.answer.geojson = geojson;\r\n                }\r\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ');\r\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ');\r\n                    console.log(task.answer);\r\n                    \r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"#map_\" + task.id).hide();\r\n                        $(\"#img_\" + task.id).hide();\r\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\r\n                        deferred.resolve();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                }\r\n            } else {\r\n                console.log(answer);\r\n                console.log(typeof(answer));\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n});\r\n\r\nif(Modernizr.borderradius) {\r\n    pybossa.run('SpearHeadsA2');\r\n}\r\nelse {\r\n    $(\".skeleton\").hide();\r\n    $(\"#oldbrowser\").show();\r\n}\r\n$(window).off('.affix');\r\n$(\"#imgHolder\")\r\n    .removeClass(\"affix affix-top affix-bottom\")\r\n    .removeData(\"bs.affix\");\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/70'/>"}, {"id": 71, "created": "2014-09-26T17:06:03.332038", "updated": "2015-02-26T09:46:32.717910", "name": "British Museum Bronze Age Index Drawer A8 - Tools and Knives", "short_name": "A8tools", "description": "British Museum Bronze Age Card Index transcription for Drawer A8 - Tools and Knives", "long_description": "This application will help the [British\r\nMuseum](http://www.britishmuseum.org)'s curator of the Bronze Age collections,\r\nNeil Wilkin, to make available a huge card catalogue of British prehistoric\r\nmetal artefacts discovered in the 19th and 20th century. This information has\r\nlong been known to be an extremely important untapped resource. Metal finds\r\nare not only crucial forms of evidence for dating Britain's prehistoric past,\r\nbut also tell us a great deal about prehistoric society and economy.\r\nDigitising the thousands of objects in this catalogue will make these records\r\npublicly available via their incorporation into the [Portable Antiquities\r\nScheme website](http://finds.org.uk). The result will be the largest national\r\ndatabase of prehistoric metal finds anywhere in the world and a near\r\ncomprehensive view of what we currently know about such finds in the UK.\r\n\r\nThe cards have been scanned and uploaded to\r\n[Flickr](https://www.flickr.com/photos/micropasts/), and it is from there that\r\nthe current application will retrieve and manipulate the scans. These cards\r\ncontain some fairly standardised kinds of information: about where the\r\nartefact was discovered, its dimensions, a longer description of what it looks\r\nlike, etc.\r\n\r\nWhat the research team would like people to do, is to transcribe the details\r\nfrom each section on the card into some pre-determined fields, and also to\r\nattempt to geo-reference the object via its place of discovery.\r\n\r\n### **Thank you!\r\n\r\n** Hugh Fiske, Elaine Dale, Jeff Okazaki, Latifa Walker, Valeska Becker, Joellen mcGann, Dina Fathalla, Denis Antoine, Heidi Lund, Maria Christakou, Christopher Wai, Susan Magyarody, Michael George Adams, David Christensen, Van C. Vives, Marla Walcott, Janet Levy, Holly Peterson, Marilyn Kohn, Elizabeth Starkey, Gemma Lewis and other anonymous contributors for completing this application. \r\n\r\n> Opening the treasures of the Bronze Age to the widest public is why I get\r\nup, I would love your help: <http://t.co/q7eWlIrD9j>\r\n\r\n>\r\n\r\n> -- Neil Wilkin (@NWilkinBM) [ April 16,\r\n2014](https://twitter.com/NWilkinBM/statuses/456421634237140992)\r\n\r\n### This project is on behalf of\r\n\r\n![The Portable Antiquities Scheme logo](/static/img/pasrgbsize4.jpg) ![The\r\nBritish Museum logo](/static/img/bmBlackWhite.png)\r\n\r\n### Find the code on Github\r\n\r\n![](https://crowdfunded.micropasts.org/assets/learn/github-ee049d767e762a0c6626051203a31f6e.png)\r\n\r\n", "featured": false, "owner_id": 12, "category_id": 9, "info": {"tutorial": "<div id=\"modal\" class=\"modal fade\">\n  <div class=\"modal-dialog\">\n    <div class=\"modal-content\">\n\n            <div class=\"modal-header\">\n                <h3 class=\"lead\">BM Bronze Age Index Drawer A8 - Tools and Knives transcription tutorial</h3>\n            </div>\n\n            <div id=\"0\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\n                    card. Most scanned images combine the written details from the one side of the\n                    index card and the line drawing of the object from the reverse side.\n                    An example of the front side of a card is shown below.\n                </p>\n\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\n\n                <p>\n                    Each index card contains similar information and we are asking you to enter this information\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\n                    will hint that this information can be found \"Top of card\").\n                </p>\n\n            </div>\n\n            <div id=\"1\" class=\"modal-body\" style=\"display:none\">\n\n                <p>\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\n                    Here are some further issues to watch out for:\n                </p>\n                <ol>\n                    <li>The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\n                        including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\n                        This is often but not always written in pencil. The example below would be rendered \"II1A\":<br />\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" alt=\"Top corner\" width=\"227\" height=\"65\"/></li>\n                    <li>When entering information in the fields, please respect the case of words as seen on the card.</li>\n                    <li>If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\n                        using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\n                        you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\n                        you are fairly confident but not certain.</li>\n                    <li>If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\n                        into just one of our pre-specified boxes, then separate it by \"[;]\". For example, on the\n                        index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\n                        both entries that should be entered in the the Collection box, so you could simply enter\n                        \"Mr Vidler[;]Pevensey\".</li>\n                    <li>Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\n                        (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\n                        the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\n                        (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).</li>\n                    <li>If there is additional information on the card that you do not feel fits in one of our pre-specified\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.</li>\n                </ol>\n\n            </div>\n\n            <div id=\"2\" class=\"modal-body\" style=\"display:none\">\n\n            \t<p>\n            \tSometimes you might notice that there is some variability in the style of the index cards and\n            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\n            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\n            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\n            \tinput fields in response to your suggestions.\n            \t</p>\n            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\n\n            </div>\n\n           <div id=\"3\" class=\"modal-body\" style=\"display:none\">\n              <p>\n                To find out how the project is progressing, suggest changes to this application or\n                propose new research ideas based what you have transcribed, please have a look at\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\n              </p>\n\n            </div>\n\n            <div class=\"modal-footer\">\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\n                <a id=\"startContrib\" href=\"../A8tools/newtask\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\n            </div>\n      </div>\n</div>\n</div>\n\n\n<script>\n    var step = -1;\n    function showStep(action) {\n        $(\"#\" + step).hide();\n        if (action == 'next') {\n            step = step + 1;\n        }\n        if (action == 'prev') {\n            step = step - 1;\n        }\n        if (step == 0) {\n            $(\"#prevBtn\").hide();\n        }\n        else {\n            $(\"#prevBtn\").show();\n        }\n\n        if (step == 3 ) {\n            $(\"#nextBtn\").hide();\n            $(\"#startContrib\").show();\n        }\n        $(\"#\" + step).show();\n    }\n\n    showStep('next');\n    $(\"#modal\").modal('show');\n</script>\n", "container": "user_12", "thumbnail": "app_71_thumbnail_1424853760.png", "task_presenter": "<link rel=\"stylesheet\" href=\"/static/css/ol.css\" type=\"text/css\">\r\n<link rel=\"stylesheet\" href=\"/static/vendor/fancybox/jquery.fancybox.css?v=2.1.5\" type=\"text/css\" media=\"screen\" />\r\n\r\n<script src=\"/static/js/ol.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/js/vendor/jquery.serializeJSON.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js\"></script>\r\n<script src=\"http://maps.google.com/maps/api/js?sensor=false\"></script>\r\n<script src=\"//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js\" type=\"text/javascript\"></script>\r\n<script src=\"/static/vendor/fancybox/jquery.fancybox.pack.js\" type=\"text/javascript\"></script>\r\n<script src=\"https://code.jquery.com/ui/1.8.1/jquery-ui.min.js\" type=\"text/javascript\"></script>\r\n\r\n<style type=\"text/css\">\r\n    .ui-autocomplete {\r\n\tbackground-color: white;\r\n\twidth: 300px;\r\n\tborder: 1px solid #cfcfcf;\r\n\tlist-style-type: none;\r\n\tpadding-left: 0px;\r\n    }\r\n    label {\r\n        font-size:16px;\r\n    }\r\n    #map_canvas label {\r\n        width: auto;\r\n        display: inline;\r\n    }\r\n    #map_canvas img {\r\n        max-width: none;\r\n    }\r\n    .affix {\r\n        width: inherit;\r\n        height: 0px;\r\n    }\r\n  \r\n    .affix-bottom {\r\n        top: auto !important;\r\n        position: fixed;\r\n        bottom: 240px;\r\n    }\r\n    \r\n    #imgContainer {\r\n        height: 390px;\r\n        width: 600px;\r\n    } \r\n#map {\r\nheight:400px;\r\nwidth:100%;\r\n}\r\n\r\n</style>\r\n\r\n<div id=\"survey\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">Do you want to help us further?</h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing one task for the project. \r\n              We are interested in knowing how you found out about us.\r\n          </p>\r\n          <p>\r\n              Could you please answer two questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1Foe1CCfd4K_ZmtX2W8MDsoSjjDi5zd5DLgG7yRVn2HQ/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div id=\"survey25\" class=\"modal fade\" data-backdrop=\"static\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">&times;</button>\r\n        <h4 class=\"modal-title\">\r\n            Congratulations! You have completed 25 tasks!\r\n        </h4>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n          <p>\r\n              Thank you for contributing 25 tasks for the project. Now that you \r\n              have been using MicroPasts for a while, we would like to know how \r\n              you found it.\r\n          </p>\r\n          <p>\r\n              Could you please answer a few questions in a short survey?\r\n          </p>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Skip</button>\r\n        <a class=\"btn btn-large btn-success\" href=\"https://docs.google.com/forms/d/1WTVapZ2Qdq0AIRazG-onDrVYDtb9xAnid7LwLrR3Uqw/viewform?embedded=true\">Of course! Take me to the survey!</a>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n\r\n\r\n<div style=\"display:none;margin-top:15px; height:500px;\" id=\"oldbrowser\" class=\"row\">\r\n    <!-- Success and Error Messages for the user -->\r\n    <div  class=\"col-md-8 col-md-offset-1 alert alert-info\">\r\n        <h2>\r\n            Browser problems!\r\n        </h2>\r\n        <p>\r\n            Sorry, but your browser does not support the current application. \r\n            If you want to contribute, please, upgrade to a modern web browser \r\n            like the open source and free alternative \r\n            <a href=\"http://www.mozilla.org/en-US/firefox/new/\">Firefox</a> or \r\n            <a href=\"https://www.google.com/intl/en/chrome/browser/\">Chrome</a>.\r\n        </p>\r\n    </div>\r\n</div> \r\n<!-- End of Row -->\r\n\r\n<div style=\"margin-top:15px;\">\r\n    <div id=\"success\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <strong>Well done!</strong> You have successfully submitted your transcription. Here is another to try if you wish!\r\n    </div>\r\n    <div id=\"loading\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <img src=\"/static/img/loading.gif\">Loading next task...\r\n    </div>\r\n    <div id=\"taskcompleted\" class=\"alert alert-info\" style=\"display:none;\">\r\n        <strong>The task has been completed!</strong> Thanks a lot!\r\n    </div>\r\n    <div id=\"finish\" class=\"alert alert-success\" style=\"display:none;\">\r\n        <h2>\r\n            Congratulations!\r\n        </h2> \r\n        <p>\r\n            You have participated in <strong>all</strong> available tasks! Thank you for your interest and help.\r\n        </p>\r\n        <br/>\r\n        <img src=\"https://crowdfunded.micropasts.org/assets/logo-head.png\" width=\"200\" height=\"200\"/>\r\n        <div class=\"alert-actions\">\r\n            <a class=\"btn-default btn\" href=\"/\">Go back</a>\r\n            <a class=\"btn-default btn\" href=\"/app\">or, Check other applications</a>\r\n        </div>\r\n    </div>\r\n\r\n    <div id=\"error\" class=\"alert alert-error\" style=\"display:none;\">\r\n        <a class=\"close\">X.</a>\r\n        <strong>Error!</strong> Something went wrong, please contact the site \r\n        administrators via the forum, Twitter, email or our Facebook page.\r\n    </div>\r\n</div> <!-- End Success and Error Messages for the user -->\r\n\r\n\r\n<!--\r\n    Task DOM for loading the Flickr Images\r\n    It uses the class=\"skeleton\" to identify the elements that belong to the\r\n    task.\r\n-->\r\n\r\n<!-- Start Skeleton Row-->\r\n<div class=\"row skeleton\"> \r\n\r\n        <h1 id=\"start\">\r\n            Please transcribe this index card\r\n        </h1> \r\n    \r\n    <!-- The question will be loaded here -->\r\n    \r\n    <span class=\"label label-info\">Note</span> You can use your mouse wheel track-pad to zoom in/out the picture, as well as drag & drop to navigate in the document.\r\n\r\n</div>\r\n\r\n<div class=\"row skeleton\">\r\n\r\n    <div id=\"questions\" class=\"col-md-4\"><!-- Start of Question and Submission DIV (column) -->\r\n\r\n        <!-- If the user clicks this button, the saved answer will be value=\"yes\"-->\r\n        <form id=\"transcription\" role=\"form\">\r\n            \r\n            <!-- Object type form control --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"objectType\">Object Type</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"objectType\" placeholder=\"Top of card\">\r\n            </div>\r\n            <!-- End of object type form control -->\r\n            \r\n            <!-- Date of discovery group -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label inp\" for=\"dateDiscoveryYear\">Date of Discovery</label>\r\n                <div class=\"controls\">\r\n                    <!-- Year --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryYear\"></select>\r\n                    </div>\r\n                    <!-- Month --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryMonth\"></select>\r\n                    </div>\r\n                    <!-- Day --> \r\n                    <div class=\"col-xs-4\">\r\n                        <select class=\"form-control\" name=\"dateDiscoveryDay\"></select>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <!-- End of date of discovery group --> \r\n\r\n            <!-- Right corner -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"rightCorner\">Right Corner</label>\r\n                <textarea class=\"form-control\"  rows=\"5\" name=\"rightCorner\" placeholder=\"Right Corner\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n            \r\n             <!-- National grid reference -->     \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"gridRef\">Grid Reference</label>\r\n                <input type=\"text\" name=\"gridRef\" class=\"form-control\" placeholder=\"Top left of card\">\r\n            </div>\r\n\r\n            <!-- Geographical grouping --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"site\">Site</label>\r\n                <textarea name=\"site\" type=\"text\" class=\"form-control\" placeholder=\"Left of the card\"></textarea>\r\n                <div class=\"input-append\">\r\n                    <label class=\"control-label\" for=\"site\">Georeference the site</label>\r\n                    <input type=\"text\" class=\"form-control\" id=\"toSearch\" name=\"toSearch\" placeholder=\"Geolocate the site in a map\"></input>\r\n                    <button id=\"searchBtn\" class=\"btn btn-answer\" value=\"search\" type=\"button\"><i class=\"icon-search\"></i> Search</button>\r\n\r\n<input type=\"hidden\" name=\"lat\" value=\"\" id=\"lat\">\r\n                <input type=\"hidden\" name=\"lon\" value=\"\" id=\"lon\">\r\n                </div>\r\n                \r\n                <div style=\"display:none;margin-top:15px;\" id=\"searching\" class=\"alert alert-info\">\r\n                    <img src=\"/static/img/loading.gif\"> Searching...\r\n                </div>\r\n                \r\n                <div style=\"display:none;margin-top:15px;\" id=\"searchingError\" class=\"alert alert-warning\">\r\n                    <strong>Location not found</strong>. If you know where it is approximately, please drag and drop the icon <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> in the map.\r\n                </div>\r\n                 \r\n                <div id=\"searchingTip\" class=\"alert alert-info\" style=\"display:none; margin-top:10px;\">\r\n                    Drag & drop the <img style=\"width:16px;\" src=\"http://img225.imageshack.us/img225/5237/youarehere2.png\"/> to improve the location\r\n                </div>\r\n                \r\n                <div id=\"map\" style=\"margin-top:15px;\">\r\n                    \r\n                </div>\r\n\r\n            </div>\r\n            <!-- End of geo group --> \r\n\r\n           \r\n            \r\n            <!-- The collection --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"collection\">Collection</label>\r\n                <textarea name=\"collection\" rows=\"5\" class=\"form-control\" placeholder=\"Right of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- The publications cited --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"publications\">Publications</label>\r\n                <textarea rows=\"5\" class=\"form-control\" name=\"publications\" placeholder=\"Centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Length in mm --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"length\">Length</label>\r\n                <input class=\"form-control\" type=\"text\" name=\"length\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Width -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"width\">Width</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"width\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Edge --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"edge\">Edge</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"edge\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Thickness --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"thickness\">Thickness</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"thickness\" placeholder=\"In millimetres\">\r\n            </div>\r\n\r\n            <!-- Weight -->\r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"weight\">Weight</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"weight\" placeholder=\"In grammes\">\r\n            </div>\r\n\r\n            <!-- The composition of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"composition\">Composition</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"composition\" placeholder=\"Below measurements\">\r\n            </div>\r\n\r\n            <!-- The description of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"description\">Description</label>\r\n                <textarea type=\"text\" rows=\"5\" name=\"description\" placeholder=\"Below measurements\" class=\"form-control\" ></textarea>\r\n            </div>\r\n\r\n            <!-- The surface of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"surface\">Surface</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"surface\" placeholder=\"Left of card\">\r\n            </div>\r\n\r\n            <!-- The patina of the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"patina\">Patina</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"patina\" placeholder=\"Towards bottom left of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Associations for the object --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"associations\">Associations</label>\r\n                <input class=\"form-control\"  type=\"text\" name=\"associations\" placeholder=\"Bottom centre of card\">\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Remarks --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"remarks\">Remarks</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"remarks\" placeholder=\"Bottom centre of card\"></textarea>\r\n            </div>\r\n\r\n            <hr />\r\n\r\n            <!-- Transcriber's comments --> \r\n            <div class=\"form-group\">\r\n                <label class=\"control-label\" for=\"other\">Transcriber's Comments</label>\r\n                <textarea class=\"form-control\" rows=\"5\"  name=\"other\" placeholder=\"Add here your comments, if you have any.\"></textarea>\r\n            </div>\r\n        \r\n        </form>\r\n\r\n        <button class=\"btn btn-info btn-answer\" value='Yes'>Submit the transcription</button>\r\n            \r\n\t<!-- Feedback items for the user -->\r\n        <p>\r\n            You are working now on task: <span id=\"task-id\" class=\"label label-warning\">#</span>\r\n        </p>\r\n        <p>\r\n            You have completed: <span id=\"done\" class=\"label label-info\"></span> tasks from\r\n        <!-- Progress bar for the user -->\r\n        <span id=\"total\" class=\"label label-inverse\"></span></p>\r\n        <div class=\"progress progress-striped\">\r\n            <div id=\"progress\" rel=\"tooltip\" title=\"#\" class=\"progress-bar\" role=\"progressbar\" style=\"width: 0%;\"></div>\r\n        </div>\r\n\t<!-- End of feedback row -->\r\n\r\n    </div>\r\n    <!-- End of Question and Submission DIV (column) -->\r\n    \r\n    <!-- The column holding the open layers div --> \r\n    \r\n    <div id=\"photo-link\" class=\"col-md-7 col-md-offset-1\">\r\n        <!-- Start of Photo DIV (column) -->\r\n        <div id=\"imgHolder\" data-spy=\"affix\" data-offset-top=\"1\" data-offset-bottom=\"550\">\r\n            <div class=\"btn-group\">\r\n                <a class=\"btn btn-info btn-sm\" href=\"#\" data-toggle=\"modal\" data-target=\"#myModal\"><i class=\"glyphicon glyphicon-eye-open\"></i> Tutorial</a>\r\n\t\t<a class=\"btn btn-info btn-sm\" id=\"imgLink\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\"  href=\"http://community.micropasts.org/category/crowdsourcing-support\"><i class=\"glyphicon glyphicon-book\"></i> Community Help</a>\r\n\t\t<a id=\"raw\" href=\"\" class=\"btn btn-sm btn-info fancybox\" ><i class=\"glyphicon glyphicon-picture\"></i> Overlay</a>\r\n\t        <a id=\"flickr\" rel=\"tooltip\" target=\"_blank\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Opens in a new window\" href=\"\" class=\"btn btn-sm btn-info\"><i class=\"icon icon-flickr\"></i> View on flickr</a>\r\n        \t<a id=\"down\" rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Only works for compliant browsers\" download=\"\" href=\"\" class=\"btn btn-sm btn-info\" ><i class=\"glyphicon glyphicon-download\"></i> Download</a>\r\n            </div>\r\n            <!-- The container for the zoomer --> \r\n            <div id=\"imgContainer\"></div>\r\n            <div id=\"taskImg\"></div>\r\n        </div><!-- End of Photo DIV (columnt) -->\r\n    </div>\r\n\r\n</div><!-- End of Skeleton Row -->\r\n\r\n<!-- Modal start -->\r\n<div class=\"modal fade\" id=\"myModal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n\t<!-- Modal header --> \r\n\t\t<div class=\"modal-header\">\r\n                <h3 class=\"lead\">BM Bronze Age Index Drawer A8 - Tools and Knives transcription tutorial</h3>\r\n            </div>\r\n\t<!-- stepped modal body -->\r\n\t\t<div id=\"0\" class=\"modal-body\" style=\"display:none\">\r\n\r\n                <p>\r\n                    This application is very simple, but does require you to use your own judgement in reading hand-written documents. When you participate,\r\n                    the platform will load a scanned index card from the British Museum's Bronze Age catalogue\r\n                    (stored on the MicroPasts <a href=\"http://flickr.com\">Flickr</a> stream).\r\n                    Once the image has been loaded, you will be asked to transcribe the contents of each\r\n                    card (if a card does not load, you can still click the \"View on Flickr\" button to see the contents). Most scanned images combine the written details from the one side of the\r\n                    index card and the line drawing of the object from the reverse side.\r\n                    An example of the front side of a card is shown below.\r\n                </p>\r\n\r\n                <img src=\"https://farm4.staticflickr.com/3700/13305081014_dc91f9d867_n.jpg\" class=\"img-polaroid\"\r\n                     alt=\"An example of one of the Bronze Age Index cards\" width=\"229\" height=\"320\"/>\r\n\r\n                <p>\r\n                    Each index card contains similar information and we are asking you to enter this information\r\n                    into a set of pre-defined fields. In addition to the help provided by this tutorial, you will also\r\n                    find further hints inside the data entry boxes about where on the card the relevant information might be found\r\n                    (e.g. in the example card above, the necessary entry for the \"Object Type\" filed would be \"Palstave\" and the data entry box\r\n                    will hint that this information can be found \"Top of card\").\r\n                </p>\r\n\r\n            </div>\r\n\r\n\t\t<div id=\"1\" class=\"modal-body\" style=\"display:none\">\r\n\t\t     <p>\r\n                    During the transcription, you can always return to this tutorial via the \"Help\" button.\r\n                    Here are some further issues to watch out for:\r\n                    </p>\r\n\r\n\t\t<ol>\r\n\t\t\r\n                    <li>\r\n                    The \"top right corner\" field is not present on all cards, but if it exists, it is normally a typological code\r\n                    including a Latin numeral, following by an ordinary (Arabic) number, and finally a capital letter.\r\n                    This is often but not always written in pencil (and by the way, when the last letter is a G it often looks like a 9). The example below would be rendered \"II1A\":<br />\r\n                    <img src=\"http://farm6.staticflickr.com/5539/12233629423_e5f1f6ddcf_o.png\" class=\"img-polaroid\" alt=\"Top corner\" width=\"227\" height=\"65\"/>\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    When entering information in the fields, please respect the case of words as seen on the card.\r\n                    </li>\r\n                    \r\n                    <li>\r\n                    If there is a word or a portion of a word that you cannot read, please use the \"[...]\" notation. For example,\r\n                    using the example index card shown before, if you could not read the reference top left to \"Sea-shore near Cooden Bay\",\r\n                    you might render it as \"Sea-shore near [...] Bay\", although we suggest you do fill in the whole word in cases where\r\n                    you are fairly confident but not certain.\r\n                    </li>\r\n\r\n                    <li>\r\n                    If you see text that is stacked on more than one line or separated by a gap, but that otherwise should go\r\n                    into just one of our pre-specified boxes, then separate it by \"[;]\" (without any paragraph return/hitting the enter key). For example, on the\r\n                    index card we showed you before, \"Mr Vidler\" and \"Pevensey\" are\r\n                    both entries that should be entered in the the Collection box, so you could simply enter \"Mr Vidler[;]Pevensey\".\r\n                    </li>\r\n\r\n                    <li>\r\n                    Measurements should be entered in millimetres or grammes, as the hints suggest, and only the number should be entered in the box\r\n                    (e.g. a length of 174mm should  be entered as 174). If the units are not in mm or grammes, please convert them to whole number grammes and mm, and place\r\n                    the converted values in the correct box. In such cases, please also make a note of the original in the Transcriber's Comments\r\n                    (e.g. a length written as \"4.2 in\" should be note verbatim in the Transcriber's Comments, but recorded as 107 in the Length box).\r\n                    </li>\r\n\r\n                    <li>\r\n                    If there is additional information on the card that you do not feel fits in one of our pre-specified\r\n                    boxes, or if you have any further worries about how to transcribe the card, then please put these concerns in our\r\n                    \"Transcriber's Comments\" box at the bottom of the transcription page.\r\n                    </li>\r\n                    \r\n                </ol>\r\n\r\n\r\n\t\t</div>\r\n\r\n\t\t<div id=\"2\" class=\"modal-body\" style=\"display:none\">\r\n\t\t\t<p>\r\n\t            \tSometimes you might notice that there is some variability in the style of the index cards and\r\n\t            \toccasionally you might get a card that looks quite different, such as the one below. In such cases, please try your best\r\n\t            \tto fill in the requisite fields and note in the Transcriber's Comments field that you found this difficult for that\r\n\t            \tparticular card. As we continue drawer-by-drawer through the catalog, we will look to modify the\r\n\t            \tinput fields in response to your suggestions.\r\n\t            \t</p>\r\n\t            \t<img src=\"https://farm4.staticflickr.com/3815/12674204253_2695e6293a_n.jpg\" alt=\"variant card \" width=\"230\" height=\"320\"/>\r\n\t\t</div>\r\n\t\t\r\n\t\t<div id=\"3\" class=\"modal-body\" style=\"display:none\">\r\n\t\t<p>\r\n                To find out how the project is progressing, suggest changes to this application or\r\n                propose new research ideas based what you have transcribed, please have a look at\r\n                our <a href=\"http://community.micropasts.org\" title=\"Community forum\">community forum</a>.\r\n                </p>\r\n\t\t</div>\r\n\r\n\t<!-- End of stepped modal body -->\r\n\r\n\t<!-- Modal footer -->\r\n\t<div class=\"modal-footer\">\r\n                <a id=\"prevBtn\" href=\"#\" onclick=\"showStep('prev')\" class=\"btn btn-default\">Previous</a>\r\n                <a id=\"nextBtn\" href=\"#\" onclick=\"showStep('next')\" class=\"btn btn-success\">Next</a>\r\n                <button id=\"startContrib\" data-dismiss=\"modal\" class=\"btn btn-primary\" style=\"display:none\"><i class=\"glyphicon glyphicon-thumbs-up\"></i> Let's start!</a>\r\n            </div>\r\n\t</div>\r\n  </div>\r\n</div>\r\n<!-- Modal end --> \r\n<script>\r\n    var step = -1;\r\n    function showStep(action) {\r\n        $(\"#\" + step).hide();\r\n        if (action == 'next') {\r\n            step = step + 1;\r\n        }\r\n        if (action == 'prev') {\r\n            step = step - 1;\r\n        }\r\n        if (step == 0) {\r\n            $(\"#prevBtn\").hide();\r\n        }\r\n        else {\r\n            $(\"#prevBtn\").show();\r\n        }\r\n\r\n        if (step == 3 ) {\r\n            $(\"#nextBtn\").hide();\r\n            $(\"#startContrib\").show();\r\n        }\r\n        $(\"#\" + step).show();\r\n    }\r\n\r\n    showStep('next');\r\n    $(\"#modal\").modal('show');\r\n</script>\r\n\r\n\r\n<!-- The modernizer script --> \r\n\r\n<script>\r\n// Quick fix for IE8\r\nModernizr.load({\r\n  test: window.JSON,\r\n  nope: '/static/js/vendor/json2.min.js'\r\n});\r\n</script>\r\n<!-- The main pybossa functions --> \r\n<script>\r\nfunction loadUserProgress() {\r\n    pybossa.userProgress('A8tools').done(function(data){\r\n        console.log(data);\r\n        console.log(\"Total answers done for user: \" + data.done);\r\n        if ((data.done == 1) && ($.cookie('surveyA8tools') === undefined)){\r\n           $(\"#survey\").modal('show');\r\n           $.cookie('survey', 'shown', { path: '/'});\r\n        }\r\n        if ((data.done == 25) && ($.cookie('survey25A8tools') === undefined)){\r\n           $(\"#survey25\").modal('show');\r\n           $.cookie('survey25A8tools', 'shown', { path: '/'});\r\n        }\r\n        var pct = Math.round((data.done*100)/data.total);\r\n        $(\"#progress\").css(\"width\", pct.toString() +\"%\");\r\n        $(\"#progress\").attr(\"title\", pct.toString() + \"% completed!\");\r\n        $(\"#progress\").tooltip({'placement': 'left'});\r\n        $(\"#total\").text(data.total);\r\n        $(\"#done\").text(data.done);\r\n    });\r\n}\r\n</script>\r\n\r\n<script>\r\nvar geocoder;\r\nvar map;\r\nvar marker;\r\n    \r\nfunction initialize(){\r\n//MAP\r\n  var latlng = new google.maps.LatLng(54, -2);\r\n  var options = {\r\n    zoom: 4,\r\n    center: latlng,\r\n    mapTypeId: google.maps.MapTypeId.TERRAIN\r\n  };\r\n        \r\n  map = new google.maps.Map(document.getElementById(\"map\"), options);\r\n        \r\n  //GEOCODER\r\n  geocoder = new google.maps.Geocoder();\r\n        \r\n  marker = new google.maps.Marker({\r\n    map: map,\r\n    draggable: true\r\n  });\r\n\t\t\t\t\r\n}\r\n\t\t\r\n$(document).ready(function() { \r\n         \r\n  initialize();\r\n\t\t\t\t  \r\n  $(function() {\r\n    $(\"#toSearch\").autocomplete({\r\n      //This bit uses the geocoder to fetch address values\r\n      source: function(request, response) {\r\n        geocoder.geocode( {'address': request.term }, function(results, status) {\r\n          response($.map(results, function(item) {\r\n            return {\r\n              label:  item.formatted_address,\r\n              value: item.formatted_address,\r\n              latitude: item.geometry.location.lat(),\r\n              longitude: item.geometry.location.lng()\r\n            }\r\n          }));\r\n        })\r\n      },\r\n      //This bit is executed upon selection of an address\r\n      select: function(event, ui) {\r\n        $(\"#lat\").val(ui.item.latitude);\r\n        $(\"#lon\").val(ui.item.longitude);\r\n        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);\r\n        console.log('Latitude: ' + ui.item.latitude);\r\n        console.log('Longitude: ' + ui.item.longitude);\r\n        marker.setPosition(location);\r\n        map.setCenter(location);\r\n      }\r\n    });\r\n  });\r\n\t\r\n  //Add listener to marker for reverse geocoding\r\n  google.maps.event.addListener(marker, 'drag', function() {\r\n    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {\r\n      if (status == google.maps.GeocoderStatus.OK) {\r\n        if (results[0]) {\r\n          $('#toSearch').val(results[0].formatted_address);\r\n          $('#lat').val(marker.getPosition().lat());\r\n          $('#lon').val(marker.getPosition().lng());\r\n          console.log('Longitude: ' + marker.getPosition().lng());\r\n          console.log('Latitude: ' + marker.getPosition().lat());\r\n        }\r\n      }\r\n    });\r\n  });\r\n  \r\n});  \r\n</script>\r\n<script>\r\npybossa.taskLoaded(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        var img = $('<img />');\r\n        var div_map = $('<div/>');\r\n        \r\n        div_map.css(\"height\", \"390px\");\r\n        div_map.css(\"width\", \"600px\");\r\n        div_map.css(\"background\", \"#000\");\r\n\r\n        var copyright = \"&copy; <a href='\" + task.info.link + \"'>British Museum</a>\";\r\n\r\n        var extent = new OpenLayers.Bounds();\r\n        extent.extend(new OpenLayers.LonLat(1.758939,58.672231).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n        \r\n        extent.extend(new OpenLayers.LonLat(-6.99745,49.96112).transform(new OpenLayers.Projection(\"EPSG:4326\"),\r\n        new OpenLayers.Projection('EPSG:900913')));\r\n\r\n\r\n        $(\"#imgContainer\").append(div_map);\r\n        div_map.attr(\"id\", \"img_\" + task.id);\r\n\r\n        task.pixelProjection = new ol.proj.Projection({\r\n          code: 'pixel',\r\n          units: 'pixels',\r\n          extent: [0, 0, 1024, 720]\r\n        });\r\n\r\n        task.map_img = new ol.Map({\r\n          //interactions: ol.interaction.defaults().extend([task.select, task.modify]),\r\n          layers: [\r\n            new ol.layer.Image({\r\n              source: new ol.source.ImageStatic({\r\n                attributions: [\r\n                  new ol.Attribution({\r\n                    html: copyright\r\n                  })\r\n                ],\r\n                url: task.info.url_b,\r\n                imageSize: [1024, 720],\r\n                projection: task.pixelProjection,\r\n                imageExtent: task.pixelProjection.getExtent()\r\n              })\r\n            })\r\n          ],\r\n          renderer: 'canvas',\r\n          target: 'img_' + task.id,\r\n          view: new ol.View({\r\n            projection: task.pixelProjection,\r\n            center: ol.extent.getCenter(task.pixelProjection.getExtent()),\r\n            zoom: 1.0\r\n          })\r\n        });\r\n        div_map.css(\"display\", \"none\");\r\n\r\n\r\n        // load image from flickr\r\n        var img = $('<img />');\r\n        img.attr(\"id\", \"img_task_\" + task.id);\r\n        img.load(function() {\r\n            // continue as soon as the image is loaded\r\n            deferred.resolve(task);\r\n        });\r\n        img.attr('src', task.info.url_b);\r\n        img.attr('width', '600px');\r\n        img.attr('height', '390px');\r\n        img.addClass('img-polaroid');\r\n        img.css(\"cursor\", \"zoom-in\");\r\n        task.info.image = img;\r\n\r\n        \r\n        }  else {\r\n            deferred.resolve(task);\r\n        }\r\n\r\n});\r\n</script>\r\n<script>\r\npybossa.presentTask(function(task, deferred) {\r\n    if ( !$.isEmptyObject(task) ) {\r\n        loadUserProgress();\r\n        $(':input','#transcription')\r\n           .not(':button, :submit, :reset, :hidden, :radio')\r\n           .val('')\r\n           .removeAttr('checked')\r\n           .removeAttr('selected');\r\n      \r\n      \t$(\"a#raw\").attr(\"href\", task.info.url_b);\r\n\t$(\"a#flickr\").attr(\"href\", task.info.link + '/sizes/k/');\r\n\t$(\"a#down\").attr(\"download\", task.id);\r\n\t$(\"a#down\").attr(\"href\", task.info.url_b );\r\n        $(\".fancybox\").fancybox();\r\n        $('#imgLink').tooltip();\r\n        $(\"[rel=tooltip]\").tooltip();\r\n        $(\"#searchingTip\").hide();\r\n        $(\"#question\").html(task.info.question);\r\n        $('#task-id').html(task.id);\r\n        $(\"#map_\" + task.id).show();\r\n        $(\"#img_\" + task.id).show();\r\n\r\n        // Clean\r\n        $('select[name=dateDiscoveryYear]').html('').append($('<option/>').val('None').html('Year'));\r\n        for (i = 1700; i < 2000; i++) {\r\n            $('select[name=dateDiscoveryYear]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryMonth]').html('').append($('<option/>').val('None').html('Month'));\r\n        for (i = 1; i <= 12; i++)  {\r\n            $('select[name=dateDiscoveryMonth]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('select[name=dateDiscoveryDay]').html('').append($('<option/>').val('None').html('Day'));\r\n        for (i = 1; i <= 31; i++) {\r\n            $('select[name=dateDiscoveryDay]').append($('<option />').val(i).html(i));\r\n        }\r\n\r\n        $('.btn-answer').off('click').on('click', function(evt) {\r\n            evt.preventDefault();\r\n            var answer = $(evt.target).attr(\"value\");\r\n            if (typeof answer !== 'undefined') {\r\n                console.log(answer);\r\n                if (answer === 'search') {\r\n                    $(\"#searching\").show();\r\n                    search(task, $(\"#toSearch\").val(), 15);\r\n                } else {\r\n                    task.answer = $(\"#transcription\").serializeJSON();\r\n                    console.log(task.answer);\r\n                   if($('#lon').val()) {\r\n                   var geojson = {\r\n                       \"geometry\": {\r\n                            \"type\": \"Point\",\r\n                            \"coordinates\": [\r\n                                        $('#lon').val(),\r\n                                        $('#lat').val()\r\n                                ]\r\n                        },\r\n                        \"crs\": {\r\n                          \"type\": \"name\",\r\n                          \"properties\": {\r\n                            \"name\": \"urn:ogc:def:crs:OGC:1.3:CRS84\"\r\n                          }\r\n                        },\r\n                        \"type\": \"Feature\",\r\n                        \"properties\": {\r\n\r\n                        }\r\n                   };\r\n                   console.log(geojson);\r\n                    task.answer.geojson = geojson;\r\n                }\r\n                    task.answer.toSearch = task.answer.toSearch.replace(/\\n/g,', ');\r\n                    task.answer.site = task.answer.site.replace(/\\r\\n/g,', ');\r\n                    console.log(task.answer);\r\n                    \r\n                    pybossa.saveTask(task.id, task.answer).done(function() {\r\n                        $(\"#map_\" + task.id).hide();\r\n                        $(\"#img_\" + task.id).hide();\r\n                        //$('#img_task_' + task.id).trigger('wheelzoom.reset');\r\n                        $(\"html, body\").animate({ scrollTop: 0 }, \"slow\");\r\n                        $(\"#success\").fadeIn(500).fadeOut(5500);\r\n                        $(\"#loading\").fadeIn(500).fadeOut(1000);\r\n                        deferred.resolve();\r\n                    });\r\n                    $(\"#loading\").fadeIn(500);\r\n                    \r\n                }\r\n            } else {\r\n                console.log(answer);\r\n                console.log(typeof(answer));\r\n                $(\"#error\").show();\r\n            }\r\n        });\r\n        $(\"#loading\").hide();\r\n    }\r\n    else {\r\n        $(\".skeleton\").hide();\r\n        $(\"#loading\").hide();\r\n        $(\"#finish\").fadeIn(500);\r\n    }\r\n});\r\n\r\nif(Modernizr.borderradius) {\r\n    pybossa.run('A8tools');\r\n}\r\nelse {\r\n    $(\".skeleton\").hide();\r\n    $(\"#oldbrowser\").show();\r\n}\r\n$(window).off('.affix');\r\n$(\"#imgHolder\")\r\n    .removeClass(\"affix affix-top affix-bottom\")\r\n    .removeData(\"bs.affix\");\r\n</script>\r\n"}, "owners_ids": [12], "links": ["<link rel='category' title='category' href='https://crowdsourced.micropasts.org/api/category/9'/>"], "link": "<link rel='self' title='project' href='https://crowdsourced.micropasts.org/api/project/71'/>"}]