Task Presenter code for budget-localization (ward no. allotting) project on http://crowdcrafting.org/project/localpunebudget

budget-ward-crowdcrafting-presenter-code.html

<div class="row">
	<div class="col-md-8">
		<h1>Localizing Pune's Budget</h1>
		<b>Read this Budget Item:</b>
		<div class="panel panel-warning">
			<div class="panel-body" style="background-color:#FFFDD2;">
				<big><big><span id="work">Loading, please
				wait..</span></big></big>&nbsp;&nbsp;&nbsp;<b>(Rs.<span id=
					"amount"></span>)</b>
			</div>
		</div>
		<p>Is this a work relating to any specific location? Is it mentioned which ward (prabhag) no. this budget work is related to? *</p>
		<p><input type="text" id="ward" placeholder="in Digits like 3,16,64" onkeyup=      "document.getElementById('checker').innerHTML = this.value &amp;&amp; /^[0-9, ]*$/.test(this.value) ? '&#10004;' : '&#10008;' ;" onkeydown="$('#errorMsg').html('');"> 
			<span id="checker"></span> 
			<button id="save" class="btn btn-primary">Save Answer</button> 
			&nbsp;&nbsp; 
			<button id="noward" class="btn btn-warning" onclick="$('#ward').val('0'); $('#save').click();">No Ward!</button>
			&nbsp;&nbsp; 
			<span id="errorMsg"></span>
		</p>
		<small><i>Type the answer in and press Enter key to quickly move to the next item</i></small>
		<h4>Instructions:</h4>
		<ul>
			<li>In case this is <u>not applicable</u> to any ward, please hit the yellow "No
				Ward" button, or type <big>0</big> (zero digit) and press Enter.
			</li>
			<li>If there is a ward/prabhag number mentioned, type the ward number in digits, between <big>1 and 76</big>.</li>
			<li>If there's an area in Pune mentioned, use the <b><big>map</big></b> below to
				figure out which ward number it's in.
			</li>
			<li>In case this applies to two or more wards, please enter the numbers separated
				by <u>commas</u> (ex: 34,35)
			</li>
			<li><small>Please keep in mind that works which are for govt institutions like
				PMC Bhavan, and which aren't related to the citizens living in that ward, are to
				be given a zero (0) even if that govt. building is located in a ward. There might
				be some grey area here, but it's ok, just go with what your gut instinct is
				telling you</small>
			</li>
		</ul>
	</div>
	<div class="col-md-4">
		<h4>More details:</h4>
		<ul>
			<li>Budet Code: <b><span id="code"></span></b></li>
			<li>This budget item appears under Section: <b><span id="Section-EN"></span> /
				<span id="Section-MR"></span></b>,
			</li>
			<li>In the Department: <b><span id="Department-EN"></span> / <span id=
				"Department-MR"></span></b>,</li>
			<li>Around page no.<b><big><span id="Department-page"></span></big></b> of the
				2015-16 Pune Budget Book (<a href=
					"http://punecorporation.org/informpdf/budget/1516%20SC%20Budget%20Book.pdf"
					target="_blank">see PDF</a> or <a href=
					"https://drive.google.com/open?id=18YpZsoC_m9w8KTWqsJaFv0D7ik5ZjJif9OiajGLID90"
					target="_blank">see List</a>)
			</li>
		</ul>
		<hr>
		<p><big><b>Q:</b></big> So what are you going to do with this data you're crowdsourcing? <br>
		<big><b>A:</b></big> <a href=
			"https://drive.google.com/open?id=18YpZsoC_m9w8KTWqsJaFv0D7ik5ZjJif9OiajGLID90"
			target="_blank">Click here to see</a> a simplified and combined list of
			Expenditures in Pune Budget Book 2015-16. We'll fill these missing ward numbers
			in there.</p>
		
	</div>
</div>
<br><br>
<iframe width="100%" height="520" frameborder="0" src=
	"https://nikhilvj.cartodb.com/viz/a0e3a1fe-5aa8-11e5-9c70-0ec6f7c8b2b9/embed_map"
	allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen=""
	msallowfullscreen=""></iframe>
<p>Trouble seeing the map above? <a href=
	"https://nikhilvj.cartodb.com/viz/a0e3a1fe-5aa8-11e5-9c70-0ec6f7c8b2b9/embed_map"
	target="_blank">Click here to open it in another tab</a></p>
<p>Feeling confused? Contact Nikhil on nikhil.js [at] gmail.com . And relax.. this is fun!</p>
<p>Interested in using this platform? <a href="https://gist.github.com/answerquest/57cbec9f56258f0d84f4" target="_blank">See the presenter code and the input tasks file sample here</a></p>

<script type="text/javascript">
	// Your JavaScript code
	  pybossa.taskLoaded(function(task, deferred){
	      // you don't need to do much here, as you don't want to load any assets, so just go on
	      deferred.resolve(task);
	  });
	
	  pybossa.presentTask(function(task, deferred){
	      // Present the current task to the user
	      // Load the task data into the HTML DOM
	      var wardInput = $("#ward");
	      wardInput.val("");
	    
	      $("#code").text(task.info.Code);
	      $("#work").text(task.info.Work);
	      $("#amount").text(easynumber(task.info['2015-16 amount']));
	      $("#Section-EN").text(task.info['Section-EN']);
	      $("#Section-MR").text(task.info['Section-MR']);
	      $("#Department-EN").text(task.info['Department-EN']);
	      $("#Department-MR").text(task.info['Department-MR']);
	      $("#Department-page").text(task.info['Department-page']);
	
	      $("#save").off('click').on('click', function(evt) {
	                      if( $("#ward").val() && /^[0-9, ]*$/.test( $("#ward").val() ) ) {
	                              $("#work").text("Loading, please wait..");
	                              var answer = wardInput.val();
	                              pybossa.saveTask(task.id, answer).done(function() {
	                                      deferred.resolve(task);
	                              });
	                              $("#errorMsg").html("<span style='color: green;'><small><i><b>Thanks!<\/b> Try another one!<\/i><\/small><\/span>");
	                              $("#checker").html("");
	                      } else {
	                              $("#errorMsg").html("<span style='color: red;'><small><i>Please give a valid input.<\/i><\/small><\/span>"); 
	                      }
	      });
	  });
	
	  pybossa.run('localpunebudget');
	  function easynumber(N) {
	      F = parseFloat(N);
	      if (!F) return N;
	      else if(F >= 10000000 ) return F/10000000 + " crore";
	      else if(F >= 100000 ) return F/100000 + " lakh";
	      else if(F >= 1000 ) return F/1000 + " thousand";
	      else if(F >= 0) return N;
	      //trying to make submit on pressing enter:
	}
	      $(document).ready(function(){
	              $('#ward').focus();
	              $('#ward').keypress(function(e){
	                      //from http://stackoverflow.com/a/12955267
	                if(e.keyCode==13)
	                $('#save').click();
	              });
	      });
	
</script>

sample-tasks.csv