Added code for cookie and inserted progress bar

template.html

@@ -247,6 +247,17 @@ <h1 id="start">Please transcribe this index card</h1> <!-- The question will be
             </form>
 
             <button class="btn btn-info btn-answer" value='Yes'>Submit the transcription</button>
+
+
+	<!-- Feedback items for the user -->
+        <p>You are working now on task: <span id="task-id" class="label label-warning">#</span></p>
+        <p>You have completed: <span id="done" class="label label-info"></span> tasks from
+        <!-- Progress bar for the user -->
+        <span id="total" class="label label-inverse"></span></p>
+        <div class="progress progress-striped">
+            <div id="progress" rel="tooltip" title="#" class="progress-bar" role="progressbar" style="width: 0%;"></div>
+        </div>
+	<!-- End of feedback row -->
 
     </div><!-- End of Question and Submission DIV (column) -->
     <div id="photo-link" class="col-md-7 col-md-offset-1"><!-- Start of Photo DIV (column) -->
@@ -447,14 +458,14 @@ <h3 class="lead">BM Bronze Age Index Drawer A9 transcription tutorial</h3>
 function loadUserProgress() {
     pybossa.userProgress('drawA9').done(function(data){
             console.log("Total answers done for user: " + data.done);
-	if ((data.done == 1) && ($.cookie('survey') === undefined)){
+	if ((data.done == 1) && ($.cookie('surveyA9') === undefined)){
            $("#survey").modal('show');
-           $.cookie('survey', 'shown', { path: '/'});
+           $.cookie('surveyA9', 'shown', { path: '/'});
         }
 
-    if ((data.done == 25) && ($.cookie('survey25') === undefined)){
+    if ((data.done >= 25) && ($.cookie('survey25A9') === undefined)){
            $("#survey25").modal('show');
-           $.cookie('survey25', 'shown', { path: '/'});
+           $.cookie('survey25A9', 'shown', { path: '/'});
         }
 
         var pct = Math.round((data.done*100)/data.total);