diff --git a/src/pages/activities/list/popup.ts b/src/pages/activities/list/popup.ts
index c461f689..44a0e7f4 100644
--- a/src/pages/activities/list/popup.ts
+++ b/src/pages/activities/list/popup.ts
@@ -13,7 +13,6 @@ import { loadingMessages, errMessages } from '../../../app/messages';
   templateUrl: 'popup.html'
 })
 export class ActivityListPopupPage {
-
   achievementData: any = null;
   achievementName: string;
   achievementsLoadingErr: any = errMessages.General.loading.load;
diff --git a/src/pages/assessments/assessments.html b/src/pages/assessments/assessments.html
index 02d56f6b..bb0fe09f 100644
--- a/src/pages/assessments/assessments.html
+++ b/src/pages/assessments/assessments.html
@@ -1,7 +1,6 @@
 <ion-header>
   <ion-navbar>
     <ion-title></ion-title>
-
     <ion-buttons end>
       <button ion-button (click)="clickSubmit()" class="btn-submit" *ngIf="allowSubmit">
         {{ 'GENERAL.SUBMIT' | translate }}
@@ -9,18 +8,15 @@
     </ion-buttons>
   </ion-navbar>
 </ion-header>
-<ion-content class="assessments-list">
-
+<ion-content>
   <div *ngFor="let assessmentGroup of assessmentGroups; let i = index">
     <div *ngFor="let assessment of assessmentGroup; let j = index">
-
       <ion-card *ngIf="assessment.description" class="no-box-shadow">
         <ion-card-content>
-          <h2 class="text-center">{{ assessment.name }}</h2>
-          <div [innerHTML]="assessment.description"></div>
+          <h2 class="text-center assessment-title">{{ assessment.name }}</h2>
+          <p [innerHTML]="assessment.description" class="assessment-description"></p>
         </ion-card-content>
       </ion-card>
-
       <questionGroup
         *ngFor="let group of assessment.AssessmentGroup; let q = index"
         [group]="group"
diff --git a/src/pages/assessments/assessments.page.ts b/src/pages/assessments/assessments.page.ts
index bb5ba3a8..904053e2 100644
--- a/src/pages/assessments/assessments.page.ts
+++ b/src/pages/assessments/assessments.page.ts
@@ -72,10 +72,7 @@ export class AssessmentsPage {
       this.loadQuestions()
       .then(() => {
         loader.dismiss();
-      }, err => {
-        console.log('log::', err);
-      })
-      .catch((err) => {
+      }).catch(err => {
         console.log(err);
         loader.dismiss();
       });
@@ -95,125 +92,102 @@ export class AssessmentsPage {
    * @description mapping assessments and submissions
    * @param {Object} submissions submissions
    * @param {Object} assessments assessments
+   * @returns {Array} objects of compiled assessment + submissions
    */
-  mapSubmissionsToAssessment(submissions, assessments) {
-    _.forEach(assessments, (group, i) => {
-      _.forEach(group, (assessment, j) => {
-
-        // normalise
-        assessments[i][j] = assessment = this.assessmentService.normalise(assessment);
-
-        _.forEach(assessment.AssessmentGroup, (assessmentGroup, k) => {
-          _.forEach(assessmentGroup.questions, (question, l) => {
-            // Inject empty answer fields
-            // We will know thare are no submission when it is null
-            assessments[i][j].AssessmentGroup[k].questions[l].answer = null;
-            assessments[i][j].AssessmentGroup[k].questions[l].reviewerAnswer = null;
+  mapSubmissionsToAssessment(submissions, assessmentsBatch) {
+    let result = [];
+
+    _.forEach(assessmentsBatch, (batch, i) => {
+
+      let assessmentResult = [];
+      _.forEach(batch, (assessment, j) => {
+        // normalised
+        let normalised = this.assessmentService.normalise(assessment);
+
+        // groups
+        let assessmentGroupResult = [];
+        _.forEach(normalised.AssessmentGroup, assessmentGroup => {
+          // questions
+          let questionsResult = [];
+          let submissionResult : any = {};
+          _.forEach(assessmentGroup.questions, question => {
+            // force answers as null by default (for checkings)
+            let questionResult : any = {
+              answer: null,
+              reviewerAnswer: null
+            };
 
             // find submission
             _.forEach(submissions, (submission) => {
               // attach existing submission to assessment group it belongs to
-              let group = this.assessmentGroups[i][j].AssessmentGroup[k];
-              if (group.assessment_id === submission.assessment_id) {
-                this.assessmentGroups[i][j].AssessmentGroup[k].submission = submission;
+              if (assessmentGroup.assessment_id === submission.assessment_id) {
+                submissionResult = submission;
               }
 
               // find user answer
               _.forEach(submission.answer, (answer) => {
-                if (answer.assessment_question_id === question.id) {
-                  assessments[i][j].AssessmentGroup[k].questions[l].answer = answer;
+                if (answer.assessment_question_id === question.question_id) {
+                  questionResult.answer = answer;
                 }
               });
 
               // find reviewer feedback
               _.forEach(submission.review, (reviewerAnswer) => {
-                if (reviewerAnswer.assessment_question_id === question.id) {
-                  assessments[i][j].AssessmentGroup[k].questions[l].reviewerAnswer = reviewerAnswer;
+                if (reviewerAnswer.assessment_question_id === question.question_id) {
+                  questionResult.reviewerAnswer = reviewerAnswer;
                 }
               });
             });
 
-          });
-
-          // Summarise basic answer information
-          // get total number of questions
-          assessments[i][j].AssessmentGroup[k].totalRequiredQuestions = 0;
-          _.forEach(assessmentGroup.questions, (q) => {
-            if (q.required) {
-              assessments[i][j].AssessmentGroup[k].totalRequiredQuestions += 1;
+            // set assessmentGroup as accessible (submitter has no permission to view)
+            if (this.isAccessibleBySubmitter(question, submissionResult.status)) {
+              assessmentGroup.accessible = true;
+              questionsResult.push(Object.assign(question, questionResult));
             }
           });
 
-          // get total number of answered questions
-          assessments[i][j].AssessmentGroup[k].answeredQuestions = 0;
-          _.forEach(assessmentGroup.questions, (q) => {
-            if (q.required && q.answer && q.answer !== null) {
-              assessments[i][j].AssessmentGroup[k].answeredQuestions += 1;
-            }
-          });
+          let summaries = this.assessmentService.getSummaries(questionsResult);
+          if (assessmentGroup.accessible) {
+            assessmentGroupResult.push(Object.assign(assessmentGroup, {
+              questions: questionsResult,
+              submission: submissionResult,
+              totalRequiredQuestions: summaries.totalRequiredQuestions,
+              answeredQuestions: summaries.answeredQuestions,
+              reviewerFeedback: summaries.reviewerFeedback,
+              status: this.assessmentService.getStatus(questionsResult, submissionResult)
+            }));
+          }
+        });
 
-          // get total number of feedback
-          assessments[i][j].AssessmentGroup[k].reviewerFeedback = 0;
-          _.forEach(assessmentGroup.questions, (q) => {
-            // If API response, the reviewer's answer and comment are empty,
-            // front-end don't consider it as a feedback
-            if (
-              q.reviewerAnswer &&
-              q.reviewerAnswer !== null &&
-              !_.isEmpty(q.reviewerAnswer.answer) &&
-              !_.isEmpty(q.reviewerAnswer.comment)
-            ) {
-              assessments[i][j].AssessmentGroup[k].reviewerFeedback += 1;
-            }
-          });
+        normalised.AssessmentGroup = assessmentGroupResult;
+        assessmentResult.push(normalised);
+      });
 
-          // Set status
-          // let status = assessments[i][j].AssessmentGroup[k].status = 'incomplete';
-          let questionsStatus = [];
-          _.forEach(assessmentGroup.questions, (q) => {
-            if (q.required && q.answer !== null) {
-              if (
-                q.reviewerAnswer !== null &&
-                assessmentGroup.submission.status !== 'pending approval' &&
-                (q.reviewerAnswer.answer || q.reviewerAnswer.comment)
-              ) {
-                questionsStatus.push('reviewed');
-              } else {
-                questionsStatus.push('completed');
-              }
-            }
+      result.push(assessmentResult);
+    });
 
-            if (!q.required && q.answer !== null) {
-              if (
-                q.reviewerAnswer !== null &&
-                assessmentGroup.submission.status !== 'pending approval' &&
-                (q.reviewerAnswer.answer || q.reviewerAnswer.comment)
-              ) {
-                questionsStatus.push('reviewed');
-              } else {
-                questionsStatus.push('completed');
-              }
-            }
+    return result;
+  }
 
-            if (q.answer === null) {
-              questionsStatus.push('incomplete');
-            }
-          });
+  /**
+   * @description filter question by condition (submitter cannot view reviewer
+   *              question before it is published/reviewed)
+   * @param {object} question
+   * @param {string} status
+   */
+  isAccessibleBySubmitter(question, submissionStatus: string) {
+    let accessible = true;
+    let submitterAllowed = false;
 
-          assessments[i][j].AssessmentGroup[k].status = 'incomplete';
-          if (_.every(questionsStatus, (v) => {
-            return (v === 'completed');
-          })) {
-            assessments[i][j].AssessmentGroup[k].status = 'completed';
-          }
-          if (_.includes(questionsStatus, 'reviewed')) {
-            assessments[i][j].AssessmentGroup[k].status = 'reviewed';
-          }
-        });
-      });
-    });
+    if (question.audience.indexOf('submitter') !== -1) {
+      submitterAllowed = true;
+    }
 
-    return assessments;
+    if (!submitterAllowed && submissionStatus !== 'published') {
+      accessible = false;
+    }
+
+    return accessible;
   }
 
   /**
@@ -223,7 +197,7 @@ export class AssessmentsPage {
    *
    * @return {Promise<any>}
    */
-  public pullSubmissions(): Promise<any> {
+   pullSubmissions(): Promise<any> {
     return new Promise((resolve, reject) => {
       // 2nd batch API requests (get_submissions)
       Observable.forkJoin(
@@ -231,47 +205,29 @@ export class AssessmentsPage {
           this.activity.References
         ))
         .subscribe(allSubmissions => {
-          // allSubmissions - response format: [ // context_ids
-          //   [ // assessment group 1
-          //     assessment1,
-          //     assessment2,
-          //     ...
-          //   ],
-          //   [ // assessment group 2
-          //     assessment1,
-          //     assessment2,
-          //     ...
-          //   ],
-          //   ...
-          // ]
+          /** allSubmissions - response format:
+           *  [ // context_ids
+           *    [ // assessment group 1
+           *      assessment1,
+           *      assessment2,
+           *      ...
+           *    ],
+           *    [ // assessment group 2
+           *      assessment1,
+           *      assessment2,
+           *      ...
+           *    ],
+           *    ...
+           *  ]
+           */
           let submissions = [];
           _.forEach(allSubmissions, group => {
-            _.forEach(group, (submission) => {
+            _.forEach(group, submission => {
                 submissions.push(this.submissionService.normalise(submission));
             });
           });
 
-          // check if a submission is specified
-          let currentSubmission = this.navParams.get('currentSubmission');
-          let filteredSubmissions = [];
-
-          submissions.forEach(subm => {
-            if (currentSubmission && currentSubmission.id === subm.id) {
-              filteredSubmissions.push(subm);
-            }
-          });
-          let hasInProgress = _.find(submissions, {status: 'in progress'}); // 'in progress' never > 1
-          let isNew = (!currentSubmission && (filteredSubmissions.length === 0 || !_.isEmpty(hasInProgress)));
-
-          if (isNew) { // new submission
-            this.submissions = !_.isEmpty(hasInProgress) ? [hasInProgress] : [];
-          } else if (!isNew && hasInProgress) { // resume 'in progress'
-            filteredSubmissions.push(hasInProgress);
-            this.submissions = filteredSubmissions;
-          } else if (currentSubmission) { // display current submission
-            filteredSubmissions.push(currentSubmission);
-            this.submissions = filteredSubmissions;
-          }
+          this.submissions = this.filterSubmissions(submissions);
           resolve(submissions);
         }, (err) => {
           console.log('err', err);
@@ -280,37 +236,91 @@ export class AssessmentsPage {
     });
   }
 
-  loadQuestions(): Promise<any> {
-    return new Promise((resolve, reject) => {
+  /**
+   * @description filter submissions data
+   * @param {Array} submissions
+   */
+  filterSubmissions(submissions) {
+    let results = []; // filtered submissions
+
+    // check if a submission is specified (from previous page, from NavParams)
+    let currentSubmission = this.navParams.get('currentSubmission');
+
+    // filteredSubmission: store only submissions related to
+    // currentSubmission (if currentSubmission above exist)
+    let filteredSubmissions = [];
+    submissions.forEach(submission => {
+      if (currentSubmission && currentSubmission.id === submission.id) {
+        filteredSubmissions.push(submission);
+      }
+    });
+
+    // prepare statuses of submissions for different condition filtering (activity & event)
+    // Statuses: `in progress`, `done`
+
+    // "in progress" never > 1 (cuz "_.find" return only 1 found value)
+    let hasInProgress = _.find(submissions, {status: 'in progress'});
+    let isNew = (!currentSubmission && (filteredSubmissions.length === 0 || !_.isEmpty(hasInProgress)));
+    let isDone = _.find(submissions, {status: 'done'}); // "done" for view checkin
+    let isCheckin = (this.navParams.get('event') && isDone);
+
+
+    if (isCheckin) { // on event's view checkin, no status filtering required
+      results = submissions;
+    } else if (isNew) { // on new submission
+      results = !_.isEmpty(hasInProgress) ? [hasInProgress] : [];
+    } else if (!isNew && hasInProgress) { // on resume "in progress"
+      filteredSubmissions.push(hasInProgress);
+      results = filteredSubmissions;
+    } else if (currentSubmission) { // display current submission
+      filteredSubmissions.push(currentSubmission);
+      results = filteredSubmissions;
+    }
+
+    return results;
+  }
 
-      // get_assessments request with 'assessment_id' & 'structured'
-      let getAssessment = (assessmentId) => {
-        return this.assessmentService.getAll({
+  /**
+   * @name preStackTasks
+   * @description stack of tasks prepared to handle multiple activity references (ids)
+   */
+  preStackTasks() {
+    // get_assessments request with "assessment_id" & "structured"
+    let getAssessment = (assessmentId) => {
+      // @TODO: we might need to pass in submission id (if available) to get properly filtered assessmnet questions
+      return this.assessmentService.getAll({
+        search: {
           assessment_id: assessmentId,
           structured: true
-        });
-      };
-
-      // Congregation of assessment ids to fulfill get_assessments API's param requirement
-      let tasks = [];
-      _.forEach(this.activity.References, (reference) => {
-        if (
-          reference.Assessment &&
-          reference.Assessment.id
-        ) {
-          return tasks.push(getAssessment(reference.Assessment.id));
         }
       });
+    };
 
+    let tasks: Array<any> = [];
+    // Congregate assessment ids for rxjs forkJoin (batch API requests)
+    _.forEach(this.activity.References, ref => {
+      if (ref.Assessment && ref.Assessment.id) {
+        tasks.push(getAssessment(ref.Assessment.id));
+      }
+    });
+
+    return tasks;
+  }
+
+  /**
+   * @description loading question from API
+   */
+  loadQuestions(): Promise<any> {
+    return new Promise((resolve, reject) => {
       /**
        * merging submission into question inside of assessment array objects
        * - set question statuses (quantity of total answered)
        * - set submission button status
        */
-      let preprocessAssessmentSubmission = () => {
+      let preprocessAssessmentSubmission = (assessments) => {
         this.assessmentGroups = this.mapSubmissionsToAssessment(
           this.submissions,
-          this.assessmentGroups
+          assessments
         );
 
         // Only allow submit when all required question have answered.
@@ -318,13 +328,10 @@ export class AssessmentsPage {
           _.forEach(groups, assessment => {
             let groupWithAnswers = 0;
             _.forEach(assessment.AssessmentGroup, group => {
-              // console.log('group.answeredQuestions', group.answeredQuestions);
-              // console.log('group.totalRequiredQuestions', group.totalRequiredQuestions);
               if (group.answeredQuestions >= group.totalRequiredQuestions) {
                 groupWithAnswers += 1;
               }
             });
-            // console.log('groupWithAnswers', groupWithAnswers, _.size(assessment.AssessmentGroup));
             if (groupWithAnswers >= _.size(assessment.AssessmentGroup)) {
               this.allowSubmit = true;
             }
@@ -348,42 +355,39 @@ export class AssessmentsPage {
         });
       };
 
-      // first batch API requests (get_assessments)
-      Observable.forkJoin(tasks)
-        .subscribe(
-          (assessments: any) => {
-            this.assessmentGroups = assessments;
-            this.submissions = this.navParams.get('submissions');
+      let setSubmissionAndAssessment = (assessments) => {
+        this.submissions = this.navParams.get('submissions');
 
-            // check if this is from single submission view
-            let currentSubmission = this.navParams.get('currentSubmission');
-            if (currentSubmission) {
-              this.submissions = [currentSubmission];
-            }
+        // check if this is from single submission view
+        let currentSubmission = this.navParams.get('currentSubmission');
+        if (currentSubmission) {
+          this.submissions = [currentSubmission];
+        }
 
-            // pull new when submission is updated or currentSubmission is empty
-            if (this.submissionUpdated || !currentSubmission) {
-              this.pullSubmissions().then(res => {
-                preprocessAssessmentSubmission();
-              }, err => {
-                reject(err);
-              });
-              this.submissionUpdated = false;
-            } else {
-              preprocessAssessmentSubmission();
-            }
-          },
-          (err) => {
-            console.log('err', err);
+        // pull new when submission is updated or currentSubmission is empty
+        if (this.submissionUpdated || !currentSubmission) {
+          this.pullSubmissions().then(res => {
+            preprocessAssessmentSubmission(assessments);
+          }, err => {
             reject(err);
-          }
-        );
+          });
+          this.submissionUpdated = false;
+        } else {
+          preprocessAssessmentSubmission(assessments);
+        }
+      };
+
+      // first batch API requests (get_assessments)
+      Observable.forkJoin(this.preStackTasks())
+        .subscribe(setSubmissionAndAssessment, err => {
+          reject(err);
+        });
     });
   }
 
 
   /**
-   * submit answer and change submission status to done
+   * @description submit answer and change submission status to done
    */
   doSubmit() {
     let loading = this.loadingCtrl.create({
@@ -393,6 +397,8 @@ export class AssessmentsPage {
     loading.present().then(() => {
       let tasks = [];
       _.forEach(this.submissions, (submission) => {
+
+          // @TODO: investigate what causes absent of assessment_id/id/context_id
           if (
             submission &&
             submission.assessment_id &&
@@ -438,9 +444,12 @@ export class AssessmentsPage {
     });
   }
 
+  /**
+   * @description Submit anwsers
+   */
   clickSubmit() {
     const confirm = this.alertCtrl.create({
-      title: 'Submit evidence',
+      title: 'Confirm Submission',
       message: this.submitConfirmMessage,
       buttons: [
         {
@@ -460,8 +469,10 @@ export class AssessmentsPage {
     confirm.present();
   }
 
-  // items popup
-  popupAfterSubmit(){
+  /**
+   * @description  items popup
+   */
+  popupAfterSubmit() {
     const loading = this.loadingCtrl.create({
       content: this.loadingMessages
     });
@@ -471,7 +482,9 @@ export class AssessmentsPage {
         {
           text: 'OK',
           handler: () => {
-            this.navCtrl.setRoot(ActivitiesListPage); // dashboard page
+            // Move to dashboard
+            this.navCtrl.parent.select(0);
+            // this.navCtrl.setRoot(ActivitiesListPage); // dashboard page
           }
         }
       ]
@@ -490,64 +503,67 @@ export class AssessmentsPage {
 
     this.gameService.getItems({
       character_id: this.getCharacterID
-    })
-    .subscribe(
-      data => {
-        this.newItemsData = data.Items;
-        _.forEach(data.Items, (element, index) => {
-          let id = element.id;
-          if(!this.newItemsCount[id]){
-            this.newItemsCount[id] = 0;
-          }
-          this.newItemsCount[id]++;
-        });
-        // compare with previous get_characters() results and generate final index value array result
-        _.forEach(this.newItemsCount, (element, id) => {
-          if(!this.initialItemsCount[id]){
-            this.totalItems.push({ 'count': element, 'id': id });
-          }else {
-            let diffCountVal = element - this.initialItemsCount[id];
-            if(diffCountVal > 0){
-              this.totalItems.push({ 'count': diffCountVal, 'id': id });
+    }).subscribe(
+          data => {
+            this.newItemsData = data.Items;
+            _.forEach(data.Items, (element, index) => {
+              let id = element.id;
+              if(!this.newItemsCount[id]){
+                this.newItemsCount[id] = 0;
+              }
+              this.newItemsCount[id]++;
+            });
+            // compare with previous get_characters() results and generate final index value array result
+            _.forEach(this.newItemsCount, (element, id) => {
+              if(!this.initialItemsCount[id]){
+                this.totalItems.push({ "count": element, "id": id });
+              }else {
+                let diffCountVal = element - this.initialItemsCount[id];
+                if(diffCountVal > 0){
+                  this.totalItems.push({ "count": diffCountVal, "id": id });
+                }
+              }
+            });
+            _.forEach(this.totalItems, (element, index) => {
+              element.id = parseInt(element.id);
+            });
+            this.allItemsData = _.intersectionBy(this.newItemsData, this.totalItems, 'id');
+            // get the final object with item occurance count value
+            let groupData = _.groupBy(this.totalItems, 'id');
+            if(this.allItemsData.length === 0){
+              this.gotNewItems = false;
+              this.cacheService.setLocal('gotNewItems', this.gotNewItems);
+              loading.onDidDismiss(() => {
+                alert.present(); // redirect to dashboard page
+              });
+              loading.dismiss();
+            } else {
+              _.map(this.allItemsData, (ele) => {
+                this.combinedItems.push(_.extend({count: groupData[ele.id] || []}, ele))
+              });
+              // display items on dashboard page
+              this.gotNewItems = true;
+              this.cacheService.setLocal('gotNewItems', this.gotNewItems);
+              this.cacheService.setLocal('allNewItems', this.combinedItems);
+              loading.onDidDismiss(() => {
+                this.navCtrl.setRoot(ActivitiesListPage);
+              });
+              loading.dismiss();
             }
+          },
+          err => {
+            loading.dismiss().then(() => {
+              console.log("Err: ", err);
+            });
           }
-        });
-
-        _.forEach(this.totalItems, (element, index) => {
-          element.id = parseInt(element.id);
-        });
-
-        this.allItemsData = _.intersectionBy(this.newItemsData, this.totalItems, 'id');
-        // get the final object with item occurance count value
-        let groupData = _.groupBy(this.totalItems, 'id');
-        if(this.allItemsData.length === 0){
-          this.gotNewItems = false;
-          this.cacheService.setLocal('gotNewItems', this.gotNewItems);
-          loading.onDidDismiss(() => {
-            alert.present(); // redirect to dashboard page
-          });
-          loading.dismiss();
-        } else {
-          _.map(this.allItemsData, (ele) => {
-            this.combinedItems.push(_.extend({count: groupData[ele.id] || []}, ele));
-          });
-          // display items on dashboard page
-          this.gotNewItems = true;
-          this.cacheService.setLocal('gotNewItems', this.gotNewItems);
-          this.cacheService.setLocal('allNewItems', this.combinedItems);
-          loading.onDidDismiss(() => {
-            this.navCtrl.setRoot(ActivitiesListPage);
-          });
-          loading.dismiss();
-        }
-      },
-      err => {
-        loading.dismiss().then(() => {
-          console.log('Err: ', err);
-        });
-      }
-    );
+        );
   }
+
+  /**
+   * @description Move to assessment group page
+   * @param {Object} assessment group
+   * @param {Object} activity
+   */
   gotoAssessment(assessmentGroup, activity) {
     this.navCtrl.push(AssessmentsGroupPage, {
       assessmentGroup,
diff --git a/src/pages/assessments/group/assessments-group.html b/src/pages/assessments/group/assessments-group.html
index 43f8bcd9..dc0b3ad5 100644
--- a/src/pages/assessments/group/assessments-group.html
+++ b/src/pages/assessments/group/assessments-group.html
@@ -16,12 +16,13 @@
     </ion-list-header>
   </ion-list>
 
-  <ion-list text-wrap *ngIf="assessmentGroup">
+  <ion-list text-wrap *ngIf="assessmentGroup" class="assessments-group-text">
     <h6 class="strong center">{{assessmentGroup.name}}</h6>
-    <p [innerHTML]="assessment.description"></p>
+    <div [innerHTML]="assessmentGroup.description| keepHtml"></div>
   </ion-list>
 
   <div *ngFor="let question of questions; let i = index;"
+    class="assessments-group-text"
     [ngSwitch]="question.type"
     [ngClass]="{'hr': (i > 0 && i < questions.length)}">
 
@@ -30,43 +31,39 @@ <h6 class="strong center">{{assessmentGroup.name}}</h6>
       <span *ngIf="question.required" class="red">*</span>
     </ion-list>
 
-    <ion-item text-wrap *ngIf="question.description">
+    <ion-item text-wrap *ngIf="question.description" class="description">
       <p [innerHtml]="question.description"></p>
     </ion-item>
 
-    <div *ngFor="let submission of submissions">
-      <pre>{{ submission | json }}</pre>
-    </div>
-
     <!-- type: oneOf -->
     <oneof-question
       [question]="question"
-      [form]="formGroup[question.id]"
+      [form]="formGroup[question.question_id]"
       [disabled]="!canUpdateInput"
       *ngSwitchCase="'oneof'"></oneof-question>
 
     <!-- type: oneOf -->
     <multiple-question
       [question]="question"
-      [form]="formGroup[question.id]"
+      [form]="formGroup[question.question_id]"
       [disabled]="!canUpdateInput"
       *ngSwitchCase="'multiple'"></multiple-question>
 
     <!-- type: file -->
     <file-question
       [question]="question"
-      [form]="formGroup[question.id]"
+      [form]="formGroup[question.question_id]"
       [disabled]="!canUpdateInput"
       *ngSwitchCase="'file'"></file-question>
 
     <!-- type: text -->
     <text-question
       [question]="question"
-      [form]="formGroup[question.id]"
+      [form]="formGroup[question.question_id]"
       [disabled]="!canUpdateInput"
       *ngSwitchCase="'text'"></text-question>
 
     <!-- Reviewer's answer and comment -->
-    <feedback [question]="question" *ngIf="question.review_answer"></feedback>
+    <feedback [question]="question" *ngIf="question.review_answer" class="feedback"></feedback>
   </div>
 </ion-content>
diff --git a/src/pages/assessments/group/assessments-group.page.ts b/src/pages/assessments/group/assessments-group.page.ts
index 568e4cf2..bc2210f3 100644
--- a/src/pages/assessments/group/assessments-group.page.ts
+++ b/src/pages/assessments/group/assessments-group.page.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { NavParams, NavController, AlertController, LoadingController, Events } from 'ionic-angular';
 import { FormBuilder, Validators, FormGroup, FormControl, FormArray } from '@angular/forms';
 
@@ -6,12 +6,12 @@ import { FormBuilder, Validators, FormGroup, FormControl, FormArray } from '@ang
 import { CacheService } from '../../../shared/cache/cache.service';
 import { ChoiceBase, QuestionBase, Submission, AssessmentService } from '../../../services/assessment.service';
 import * as _ from 'lodash';
-
 @Component({
   selector: 'assessments-group-page',
   templateUrl: './assessments-group.html',
 })
-export class AssessmentsGroupPage {
+export class AssessmentsGroupPage implements OnInit {
+
   activity: any;
   answers: any; // to render & display submitted answers
   assessment: any;
@@ -36,7 +36,7 @@ export class AssessmentsGroupPage {
     public navParams: NavParams
   ) {}
 
-  ionViewDidEnter() {
+  ngOnInit() {
     // navigate from activity page
     this.activity = this.navParams.get('activity') || {};
 
@@ -45,10 +45,13 @@ export class AssessmentsGroupPage {
     if (!_.isEmpty(this.event)) {
       this.activity = this.event;
     }
+  }
 
-    this.assessment = this.activity.assessment; // required for context_id
-    this.cacheKey = `assessment.group.${this.assessment.context_id}`;
+  ionViewDidEnter() {
+    // use assessment object from activity (required for extracting context_id)
+    this.assessment = this.activity.assessment;
 
+    this.cacheKey = `assessment.group.${this.assessment.context_id}`;
     this.assessmentGroup = this.navParams.get('assessmentGroup') || {};
     this.submission = this.navParams.get('submission') || {};
 
@@ -63,6 +66,10 @@ export class AssessmentsGroupPage {
     );
   }
 
+  /**
+   * @name updateSubmission
+   * @description trace changes of input for assessment (to avoid extra checking logics)
+   */
   updateSubmission() {
     this.events.publish('assessment:changes', {
       changed: true
@@ -92,24 +99,32 @@ export class AssessmentsGroupPage {
     }
 
     _.forEach(submission.review, (review) => {
+
       _.forEach(questions, (question, idx) => {
-        if (review.assessment_question_id === question.id) {
-          // text type
+        if (review.assessment_question_id === question.question_id) {
+          // text type (no merging, text question displayed in plain text)
           if (question.type === 'text') {
             questions[idx].review_answer = review;
           }
 
           // oneof type
+          // combine question, when answered by both reviewer and submitter
           if (question.type === 'oneof') {
             questions[idx].review_answer = review;
+            let submitterAnswer = question.answer;
+
             _.forEach(question.choices, (choice, key) => {
-              if (choice.id == review.answer && choice.id == question.answer.answer) {
-                questions[idx].choices[key].name = choice.name + ' (you and reviewer)';
-              }
-              if (choice.id != review.answer && choice.id == question.answer.answer) {
-                questions[idx].choices[key].name = choice.name + ' (you)';
-              }
-              if (choice.id == review.answer && choice.id != question.answer.answer) {
+              if (!_.isEmpty(submitterAnswer)) {
+                if (choice.id == review.answer && choice.id == submitterAnswer.answer) {
+                  questions[idx].choices[key].name = choice.name + ' (you and reviewer)';
+                }
+                else if (choice.id != review.answer && choice.id == submitterAnswer.answer) {
+                  questions[idx].choices[key].name = choice.name + ' (you)';
+                }
+                else if (choice.id == review.answer && choice.id != submitterAnswer.answer) {
+                  questions[idx].choices[key].name = choice.name + ' (reviewer)';
+                }
+              } else if (choice.id == review.answer) { // display reviewer answer
                 questions[idx].choices[key].name = choice.name + ' (reviewer)';
               }
             });
@@ -178,7 +193,14 @@ export class AssessmentsGroupPage {
         group['choices'] = new FormGroup(choices);
       }
 
-      result[question.id] = new FormGroup(group);
+      /**
+       * id and question_id are different id
+       * - id =  has no obvious purpose
+       * - question_id must be used as id for submission
+       *
+       * but for case like this just for index id
+       */
+      result[question.question_id] = new FormGroup(group);
     });
 
     return result;
@@ -204,22 +226,31 @@ export class AssessmentsGroupPage {
 
     return {
       Assessment: {
-          id: submission.assessment_id,
-          context_id: this.getSubmissionContext()
+        id: submission.assessment_id,
+        context_id: this.getSubmissionContext()
       },
       AssessmentSubmissionAnswer: answers
     };
   }
 
   /**
-   * @description store assessment answer/progress locally
+   * @name storeProgress
+   * @description store assessment answer/progress locally (offline)
+   * @example format for cached submission
+   *          {
+   *            Assessment: {
+   *                id: 1,
+   *                context_id: 2
+   *            },
+   *            AssessmentSubmissionAnswer: Array<Submission>
+   *          }
    */
   storeProgress = () => {
     let answers = {};
-    _.forEach(this.formGroup, (question, id) => {
+    _.forEach(this.formGroup, (question, question_id) => {
       let values = question.getRawValue(),
           answer = {
-            assessment_question_id: id,
+            assessment_question_id: question_id,
             answer: values.answer || values.comment,
 
             // store it if choice answer is available or skip
@@ -228,7 +259,7 @@ export class AssessmentsGroupPage {
 
       // set empty string to remove answer
       answer.answer = (answer.answer) ? answer.answer : '';
-      answers[id] = answer;
+      answers[question_id] = answer;
     });
 
     // final step - store submission locally
@@ -248,6 +279,8 @@ export class AssessmentsGroupPage {
 
   /**
    * @description retrieve saved progress from localStorage
+   * @param {Array} questions
+   * @param {Object} answers
    */
   retrieveProgress = (questions: Array<any>, answers?) => {
     let cachedProgress = answers || {}; //this.cache.getLocal(this.cacheKey);
@@ -257,11 +290,11 @@ export class AssessmentsGroupPage {
 
     if (!_.isEmpty(savedProgress)) {
 
-      // index "id" is set as question.id in @Function buildFormGroup above
-      _.forEach(newQuestions, (question, id) => {
+      // index "id" is set as question.question_id in @Function buildFormGroup above
+      _.forEach(newQuestions, (question, question_id) => {
         // check integrity of saved answer (question might get updated)
-        if (savedProgress[id] && savedProgress[id].assessment_question_id == id) {
-          newQuestions[id] = this.setValueWith(question, savedProgress[id]);
+        if (savedProgress[question_id] && savedProgress[question_id].assessment_question_id == question_id) {
+          newQuestions[question_id] = this.setValueWith(question, savedProgress[question_id]);
         }
       });
     }
@@ -289,58 +322,52 @@ export class AssessmentsGroupPage {
   }
 
   /**
-   * @description initiate save progress and return to previous page/navigation stack
+   * @name save
+   * @description save input (partially post submission) and
+   *              return to previous navigation stack
    */
   save() {
     let self = this,
-    loading = this.loadingCtrl.create({
-      content: 'Loading...'
-    }),
-    // to provide a more descriptive error message (if available)
-    failAlert = this.alertCtrl.create({
-      title: 'Fail to submit.'
-    });
-
-    let saveProgress = () => {
-      this.updateSubmission();
-
-      loading.present().then(() => {
-        self.assessmentService.save(self.storeProgress()).subscribe(
-          response => {
-            loading.dismiss().then(() => {
-              self.navCtrl.pop();
-            });
-          },
-          reject => {
-            loading.dismiss().then(() => {
-              failAlert.data.title = reject.msg || failAlert.data.title;
-              failAlert.present().then(() => {
-                console.log('Unable to save', reject);
+      loading = this.loadingCtrl.create({
+        content: 'Loading...'
+      }),
+      // to provide a more descriptive error message (if available)
+      failAlert = this.alertCtrl.create({
+        title: 'Fail to submit.'
+      }),
+      saveProgress = () => {
+        this.updateSubmission();
+
+        loading.present().then(() => {
+          self.assessmentService.save(self.storeProgress()).subscribe(
+            response => {
+              loading.dismiss().then(() => {
+                self.navCtrl.pop();
               });
-            });
-          }
-        );
+            },
+            reject => {
+              loading.dismiss().then(() => {
+                failAlert.data.title = reject.msg || failAlert.data.title;
+                failAlert.present().then(() => {
+                  console.log('Unable to save', reject);
+                });
+              });
+            }
+          );
+        });
+      },
+      confirmBox = this.alertCtrl.create({
+        message: 'You have not completed all required questions. Do you still wish to Save?',
+        buttons: [
+          {
+            text: 'Yes',
+            handler: saveProgress
+          },
+          'No'
+        ]
       });
-    };
-
-    let confirmBox = this.alertCtrl.create({
-      message: 'You have not completed all required questions. Do you still wish to Save?',
-      buttons: [
-        {
-          text: 'Yes',
-          handler: () => {
-            saveProgress();
-          }
-        },
-        {
-          text: 'No',
-          handler: () => {
-            //return false;
-          }
-        }
-      ]
-    });
 
+    // has all compulsory questions answered?
     if (!this.isAllQuestionsAnswered()) {
       confirmBox.present();
     } else {
diff --git a/src/pages/assessments/popup/items-popup.page.ts b/src/pages/assessments/popup/items-popup.page.ts
index 26f57870..1ae14131 100644
--- a/src/pages/assessments/popup/items-popup.page.ts
+++ b/src/pages/assessments/popup/items-popup.page.ts
@@ -33,7 +33,9 @@ export class ItemsPopupPage {
     this.combinedData = this.cacheService.getLocal('allNewItems');
   }
 
-  // close disbaled activity popup
+  /**
+   * @description close disbaled activity popup
+   */
   closeModal() {
     this.viewCtrl.dismiss();
     this.navCtrl.setRoot(TabsPage);
diff --git a/src/pages/events/checkin/event-checkin.page.ts b/src/pages/events/checkin/event-checkin.page.ts
index 49286aea..3e1d4b22 100644
--- a/src/pages/events/checkin/event-checkin.page.ts
+++ b/src/pages/events/checkin/event-checkin.page.ts
@@ -35,13 +35,14 @@ export class EventCheckinPage {
   }
 
   ionViewDidEnter() {
-    this.checkin = this.getCheckinAnswer(this.submissions[0]); // event checkin has just single submission
+    // We assume event checkin has just single submission
+    this.checkin = this.getCheckinAnswer(this.submissions[0]);
     this.assessment = this.assessmentService.normaliseGroup(this.assessmentGroup);
     this.user = this.cache.getLocal('user');
   }
 
   // Only checkin/file upload answer is displayed in check-in view
-  public getCheckinAnswer(submission) {
+  getCheckinAnswer(submission) {
     let result = {};
     submission.answer.forEach(ans => {
       if (typeof ans.answer === 'object') {
diff --git a/src/pages/events/view/events-view.page.ts b/src/pages/events/view/events-view.page.ts
index 9d8c3899..b342f172 100755
--- a/src/pages/events/view/events-view.page.ts
+++ b/src/pages/events/view/events-view.page.ts
@@ -50,7 +50,7 @@ export class EventsViewPage {
     this.event = navParams.get('event');
   }
 
-  public availability(event): string {
+  availability(event): string {
     return (event.isBooked)? terms.booked : event.remaining_capacity + ' of ' + event.capacity + ' seats available';
   }
 
@@ -91,7 +91,8 @@ export class EventsViewPage {
    * @description each event has only one assessment
    * @param {Array} references References array response from get_activity API
    */
-   extractAssessment(references: Array<any>) {
+
+  extractAssessment(references: Array<any>) {
     let ref = references[0];
     ref.Assessment.context_id = ref.context_id;
 
diff --git a/src/pages/forget-password/forget-password.ts b/src/pages/forget-password/forget-password.ts
index 1a324c01..43e0518f 100644
--- a/src/pages/forget-password/forget-password.ts
+++ b/src/pages/forget-password/forget-password.ts
@@ -8,7 +8,7 @@ import { AlertController,
 import { FormBuilder, Validators } from '@angular/forms';
 import { Observable } from 'rxjs/Observable';
 import { TranslationService } from '../../shared/translation/translation.service';
-import { loadingMessages, errMessages } from '../../app/messages'; 
+import { loadingMessages, errMessages } from '../../app/messages';
 // services
 import { AuthService } from '../../services/auth.service';
 // directives
@@ -33,13 +33,18 @@ export class ForgetPasswordPage {
     public navParams: NavParams,
     public translationService: TranslationService,
     public toastCtrl: ToastController,
-    public viewCtrl: ViewController) {
-      this.forgotPwdFormGroup = formBuilder.group({
-        email: ['', [FormValidator.isValidEmail,
-                    Validators.required]],
-      });
-    }
-  userForgotPassword(){
+    public viewCtrl: ViewController
+  ) {
+    this.forgotPwdFormGroup = formBuilder.group({
+      email: ['', [FormValidator.isValidEmail,
+                  Validators.required]],
+    });
+  }
+
+  ionViewDidLoad() {
+  }
+
+  userForgotPassword() {
     const loading = this.loadingCtrl.create({
       dismissOnPageChange: true,
       content: this.sendingEmailLoadingMessage
diff --git a/src/pages/gallery/gallery.ts b/src/pages/gallery/gallery.ts
index 4426a930..da647457 100644
--- a/src/pages/gallery/gallery.ts
+++ b/src/pages/gallery/gallery.ts
@@ -45,10 +45,10 @@ export class GalleryPage {
   refresher = null;
 
   constructor(
-    public navCtrl: NavController,
-    public toastCtrl: ToastController,
-    public assessmentService: AssessmentService,
-    public submissionService: SubmissionService
+    private navCtrl: NavController,
+    private toastCtrl: ToastController,
+    private assessmentService: AssessmentService,
+    private submissionService: SubmissionService
   ) {}
 
   // @TODO: Move to shared function later...
diff --git a/src/pages/login/login.ts b/src/pages/login/login.ts
index 86bd4a87..cf5012fb 100644
--- a/src/pages/login/login.ts
+++ b/src/pages/login/login.ts
@@ -32,18 +32,17 @@ import { RequestServiceConfig } from '../../shared/request/request.service';
 })
 
 export class LoginPage {
-  public API_KEY: string = null;
-  public email: string = null;
-  public gameID: string = null;
-  public forgetpasswordPage = ForgetPasswordPage;
-  public invalidLoginMessage: any = errMessages.Login.login;
-  public loginFormGroup: any;
-  public loginLoadingMessages: any = loadingMessages.Login.login;
-  public milestone_id: string = null;
-  public password: any = null;
-  public userData: any = [];
-  public userName: string = null;
-  public userImage: string = null;
+  email: string;
+  password: any;
+  userName: string;
+  userImage: string;
+  API_KEY: string;
+  milestone_id: string;
+  loginFormGroup: any;
+  forgetpasswordPage = ForgetPasswordPage;
+  loginLoadingMessages: any = loadingMessages.Login.login;
+  invalidLoginMessage: any = errMessages.Login.login;
+
   constructor(
     public config: RequestServiceConfig,
     public formBuilder: FormBuilder,
diff --git a/src/pages/rankings/list/rankings.page.ts b/src/pages/rankings/list/rankings.page.ts
index ee1a5dfb..b2540d87 100644
--- a/src/pages/rankings/list/rankings.page.ts
+++ b/src/pages/rankings/list/rankings.page.ts
@@ -34,6 +34,7 @@ export class RankingsPage {
   ionViewWillEnter(){
     this.RankingData();
   }
+
   RankingData(){
     const loading = this.loadingCtrl.create({
       content: this.loadingMessages
@@ -80,6 +81,7 @@ export class RankingsPage {
         });
       });
   }
+
   goRankingDetail(myRanking){
     this.navCtrl.push(RankingDetailsPage, {
       myRanking: myRanking
diff --git a/src/pages/rankings/view/ranking-badges.ts b/src/pages/rankings/view/ranking-badges.ts
index 34fe85aa..7b834b2c 100644
--- a/src/pages/rankings/view/ranking-badges.ts
+++ b/src/pages/rankings/view/ranking-badges.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { ViewController, ToastController, LoadingController, NavParams } from 'ionic-angular';
 import { TranslationService } from '../../../shared/translation/translation.service';
-import { loadingMessages, errMessages } from '../../../app/messages'; 
+import { loadingMessages, errMessages } from '../../../app/messages';
 import * as _ from 'lodash';
 // services
 import { AchievementService } from '../../../services/achievement.service';
@@ -12,14 +12,15 @@ import { RankingDetailsPage } from '../view/ranking-details.page';
   templateUrl: 'ranking-badges.html'
 })
 export class RankingBadgesPage {
-  public currentAchievement: any = null;
-  public badgeUrl: string = '../assets/img/default/default-badge.png';
-  public description: string = "No Description Yet ..";
-  public points: number = 0;
-  public achievementName: string = "Achievement";
-  public loadingMessage: any = loadingMessages.LoadingSpinner.loading;
-  public achievementsLoadingErr: any = errMessages.General.loading.load;
-  public achievementsEmptyDataErr: any = errMessages.Activities.achievements.empty;
+  currentAchievement: any = null;
+  badgeUrl: string = '../assets/img/default/default-badge.png';
+  description: string = "No Description Yet ..";
+  points: number = 0;
+  achievementName: string = "Achievement";
+  loadingMessage: any = loadingMessages.LoadingSpinner.loading;
+  achievementsLoadingErr: any = errMessages.General.loading.load;
+  achievementsEmptyDataErr: any = errMessages.Activities.achievements.empty;
+
   constructor(public viewCtrl: ViewController,
               public navParams: NavParams,
               public toastCtrl: ToastController,
@@ -29,8 +30,9 @@ export class RankingBadgesPage {
                 this.currentAchievement = this.navParams.get('achievement');
                 console.log("currentAchievement: ", this.currentAchievement);
               }
+
   // close disbaled activity popup
   closeModal() {
     this.viewCtrl.dismiss();
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/rankings/view/ranking-details.page.ts b/src/pages/rankings/view/ranking-details.page.ts
index eb13b77d..51316c2d 100644
--- a/src/pages/rankings/view/ranking-details.page.ts
+++ b/src/pages/rankings/view/ranking-details.page.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams, LoadingController, AlertController, ModalController } from 'ionic-angular';
+
 import { TranslationService } from '../../../shared/translation/translation.service';
 import { loadingMessages, errMessages } from '../../../app/messages';
 import * as _ from 'lodash';
@@ -13,15 +14,15 @@ import { RankingBadgesPage } from './ranking-badges';
   templateUrl: 'ranking-details.html'
 })
 export class RankingDetailsPage {
-  public userAchievementsData: any = [];
-  public achievementBadgeImage = '../assets/img/default/default-badge.png';
-  public achievementName = 'Achievement';
-  public totalPoints = 0;
-  public myRank: any= {};
+  userAchievementsData: any = [];
+  achievementBadgeImage = '../assets/img/default/default-badge.png';
+  achievementName = 'Achievement';
+  totalPoints = 0;
+  myRank: any= {};
+  emptyAchievementMessage = errMessages.Activities.achievements.empty;
+  loadingMessages: any = loadingMessages.LoadingSpinner.loading;
+  emptyErrorMessage: any = errMessages.General.loading.load;
 
-  public emptyAchievementMessage = errMessages.Activities.achievements.empty;
-  public loadingMessages: any = loadingMessages.LoadingSpinner.loading;
-  public emptyErrorMessage: any = errMessages.General.loading.load;
   constructor(public navCtrl: NavController,
               public loadingCtrl: LoadingController,
               public alertCtrl: AlertController,
@@ -44,6 +45,7 @@ export class RankingDetailsPage {
     });
 
   }
+
   userAchievements(): Promise<any> {
     return new Promise((resolve, reject) => {
       this.achievementService.getAchievements()
@@ -67,6 +69,7 @@ export class RankingDetailsPage {
         );
     });
   }
+
   goToBadgeDetailsPage(achievementData){
     let goRankingBadgesPopup = this.modalCtrl.create(RankingBadgesPage, { achievement: achievementData });
     goRankingBadgesPopup.present();
diff --git a/src/pages/registration/register.page.ts b/src/pages/registration/register.page.ts
index ffc1b039..8de14415 100644
--- a/src/pages/registration/register.page.ts
+++ b/src/pages/registration/register.page.ts
@@ -1,7 +1,7 @@
 import { Component, ViewChild, OnInit, Inject } from '@angular/core';
 import { NgForm, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AlertController, LoadingController, NavController, NavParams, ModalController, ViewController } from 'ionic-angular';
-import { loadingMessages, errMessages, generalVariableMessages } from '../../app/messages'; 
+import { loadingMessages, errMessages, generalVariableMessages } from '../../app/messages';
 import { Observable } from 'rxjs/Observable';
 import * as _ from 'lodash';
 import 'rxjs/add/operator/map';
@@ -122,7 +122,7 @@ export class RegisterPage implements OnInit { // this part of registration is fo
     });
     if (!decodeURIComponent(this.navParams.get('email')) || !this.navParams.get('key')) {
       this.displayError();
-    } 
+    }
     else {
       loading.present().then(() => {
         let email = decodeURIComponent(this.navParams.get('email')),
@@ -139,7 +139,7 @@ export class RegisterPage implements OnInit { // this part of registration is fo
                 this.cacheService.setLocal('user.registration_key', key);
                 this.cacheService.setLocal('user.id', res.User.id);
               });
-            }, 
+            },
             err => {
               loading.dismiss().then(() => {
                 this.displayError(err.msg);
@@ -178,7 +178,7 @@ export class RegisterPage implements OnInit { // this part of registration is fo
           case 'User already registered':
             message = this.registeredErrMessage;
           break;
-          default: 
+          default:
             message = this.registrationErrMessage + supportEmail;
           break;
         }
@@ -238,7 +238,7 @@ export class RegisterPage implements OnInit { // this part of registration is fo
                           }
                           this.navCtrl.setRoot(TabsPage).then(() => {
                             this.viewCtrl.dismiss(); // close the login modal and go to dashaboard page
-                            window.history.replaceState({}, '', window.location.origin); // reformat current url 
+                            window.history.replaceState({}, '', window.location.origin); // reformat current url
                           });
                         });
                       },
@@ -258,15 +258,6 @@ export class RegisterPage implements OnInit { // this part of registration is fo
     }
   }
 
-  logError(error){
-    const alert = this.alertCtrl.create({
-      title: 'Error Message',
-      message: 'Oops, loading failed, please try it again later.', 
-      buttons: ['Close']
-    });
-    alert.present();
-  }
-
   setRegistrationData(data) {
     let cacheProcesses = [];
     _.forEach(data, (datum, key) => {
@@ -284,7 +275,7 @@ export class RegisterPage implements OnInit { // this part of registration is fo
   }
 
   // check password minmimum length
-  checkMinLength(){
+  checkMinLength() {
     return (this.password.length < 8 || this.verify_password.length < 8) ? this.minLengthCheck = true : this.minLengthCheck = false;
   }
 
@@ -307,4 +298,20 @@ export class RegisterPage implements OnInit { // this part of registration is fo
   openTermsCondition() {
     this.modalCtrl.create(TermsConditionsPage).present();
   }
+
+  /**
+   * @TODO we'll come back to this logging workflow later in this development
+   *
+   * This function is used to log unexpected error accountered in the client side
+   * @param {object} error result from API request
+   */
+  logError(error) {
+    const alert = this.alertCtrl.create({
+      title: 'Login Failed ..',
+      message: this.invalidLoginMessage,
+      buttons: ['Close']
+    });
+    alert.present();
+    // handle API calling errors display with alert controller
+  }
 }
diff --git a/src/pages/registration/registration.page.ts b/src/pages/registration/registration.page.ts
new file mode 100644
index 00000000..fb992a41
--- /dev/null
+++ b/src/pages/registration/registration.page.ts
@@ -0,0 +1,116 @@
+import { Component, OnInit } from '@angular/core';
+
+import { CacheService } from '../../shared/cache/cache.service';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { NavController, NavParams, AlertController } from 'ionic-angular';
+import { Observable } from 'rxjs';
+import { TranslationService } from '../../shared/translation/translation.service';
+import { loadingMessages, errMessages } from '../../app/messages';
+// services
+import { AuthService } from '../../services/auth.service';
+import { RequestService } from '../../shared/request/request.service';
+import { NotificationService } from '../../shared/notification/notification.service';
+// pages
+import { LoginPage } from '../../pages/login/login';
+@Component({
+  template: `<term-condition [user]='user'></term-condition>`,
+})
+export class RegistrationPage implements OnInit {
+  user: Object = {
+    email: null,
+    key: null
+  };
+  term: String;
+  content: SafeResourceUrl;
+  prefixUrl: any = this.request.getPrefixUrl();
+  // loadinbg & error message variables
+  verifyFailedErrMessage = errMessages.Registration.verifyFailed.verifyfailed;
+
+  constructor(
+    public nav: NavController,
+    public params: NavParams,
+    public authService: AuthService,
+    public sanitizer: DomSanitizer,
+    public notification: NotificationService,
+    public translationService: TranslationService,
+    public alertCtrl: AlertController,
+    public cache: CacheService,
+    public request: RequestService) {}
+
+  displayError(errorMessage?: any): void {
+    let alert = this.alertCtrl.create({
+      title: 'Invalid registration code',
+      subTitle: errorMessage || 'Registration Code is invalid, please contact our tech support for assistance.',
+      buttons: [{
+        text: 'OK',
+        handler: () => {
+          alert.dismiss().then(() => {
+            this.nav.setRoot(LoginPage).then(() => {
+              window.history.replaceState({}, '', window.location.origin);
+            });
+          })
+          return false;
+        }
+      }]
+    });
+    alert.present();
+  }
+
+  ngOnInit() {
+    // check if email and activation_code are provided in the url/params
+    if (!decodeURIComponent(this.params.get('email')) || !this.params.get('key')) {
+      this.displayError();
+    } else {
+      let email = decodeURIComponent(this.params.get('email')),
+        key = this.params.get('key');
+      this.authService.verifyRegistration({
+        email: email,
+        key: key
+      }).subscribe(res => {
+        this.cache.setLocal('user.email', email);
+        this.cache.setLocal('user.registration_key', key);
+        this.cache.setLocal('user.id', res.data.User.id);
+        this.user = {
+          email: email,
+          key: key
+        };
+        Observable.forkJoin([
+          this.cache.write('user.email', email),
+          this.cache.write('user.registration_key', key),
+          this.cache.write('user.id', res.data.User.id)
+        ]).subscribe(responds => {
+          console.log('RespondsVerify::', responds);
+        });
+      }, err => {
+        console.log(err);
+        this.displayError(err.msg);
+      });
+    }
+  }
+
+  ionViewDidEnter(): void {
+    this.authService.getTerms().subscribe(res => {
+      console.log("terms data: ", res);
+      this.term = res.terms_description;
+      this.content = this.sanitizer.bypassSecurityTrustResourceUrl(this.prefixUrl + res.terms_url);
+    });
+    this.params.get('test');
+  }
+
+  ionViewDidLoad(): void {
+    let category = [];
+    /*if (document.URL.indexOf("?") !== -1) {
+      let splitURL = document.URL.split("?");
+      let splitParams = splitURL[1].split("&");
+      console.log(splitURL, splitParams);
+      splitParams.forEach(param => {
+        let singleURLParam = param.split('=');
+        let urlParameter = {
+          'name': singleURLParam[0],
+          'value': singleURLParam[1]
+        };
+        category.push(urlParameter);
+      });
+    }*/
+  }
+}
diff --git a/src/pages/reset-password/reset-password.ts b/src/pages/reset-password/reset-password.ts
index 37ccf7f9..e2e8c1bf 100644
--- a/src/pages/reset-password/reset-password.ts
+++ b/src/pages/reset-password/reset-password.ts
@@ -6,7 +6,7 @@ import { AlertController,
          NavParams,
          ViewController } from 'ionic-angular';
 import { FormBuilder, Validators } from '@angular/forms';
-import { loadingMessages, errMessages } from '../../app/messages'; 
+import { loadingMessages, errMessages } from '../../app/messages';
 import { Observable } from 'rxjs/Observable';
 import * as _ from 'lodash';
 
@@ -91,7 +91,7 @@ export class ResetPasswordPage implements OnInit {
    * @return if user clicked email link, return reset password page, otherwise,
              return error hint screen
   */
-  verifyKeyEmail(){
+  verifyKeyEmail() {
     let key = this.navParams.get('key'),
         email = decodeURIComponent(this.navParams.get('email'));
         this.keyVal = key;
@@ -165,7 +165,7 @@ export class ResetPasswordPage implements OnInit {
                       }
                       this.navCtrl.setRoot(TabsPage).then(() => {
                         this.viewCtrl.dismiss(); // close the login modal and go to dashaboard page
-                        window.history.replaceState({}, '', window.location.origin); // reformat current url 
+                        window.history.replaceState({}, '', window.location.origin); // reformat current url
                       });
                     });
                   },
@@ -196,7 +196,7 @@ export class ResetPasswordPage implements OnInit {
   logError(error) {
     const alertLogin = this.alertCtrl.create({
       title: 'Error Message',
-      message: 'Oops, loading failed, please try it again later.', 
+      message: 'Oops, loading failed, please try it again later.',
       buttons: ['Close']
     });
     alertLogin.present();
diff --git a/src/pages/settings/settings.page.ts b/src/pages/settings/settings.page.ts
index 34293901..d538c067 100644
--- a/src/pages/settings/settings.page.ts
+++ b/src/pages/settings/settings.page.ts
@@ -29,15 +29,19 @@ export class SettingsPage {
   getUserEmail() {
     return this.cache.getLocal('email') || '';
   }
+
   goLeaderBoardSettings(){
     this.navCtrl.push(LeaderboardSettingsPage);
   }
+
   goToTutorial() {
     this.navCtrl.push(TutorialPage);
   }
+
   goToTermConditions() {
     this.navCtrl.push(TermsConditionsPage);
   }
+
   logout() {
     let loader = this.loadingCtrl.create({
       spinner: 'hide',
diff --git a/src/pages/team/team.ts b/src/pages/team/team.ts
index dc33a180..bbeec9df 100644
--- a/src/pages/team/team.ts
+++ b/src/pages/team/team.ts
@@ -19,8 +19,6 @@ export class TeamPage {
     public toastCtrl: ToastController
   ) {}
 
-
-
   // @TODO: Move to shared function later...
   _error(err) {
     let toast = this.toastCtrl.create({
diff --git a/src/pages/term-condition/term-condition.page.ts b/src/pages/term-condition/term-condition.page.ts
new file mode 100644
index 00000000..d256d987
--- /dev/null
+++ b/src/pages/term-condition/term-condition.page.ts
@@ -0,0 +1,120 @@
+import { Component, Input } from '@angular/core';
+import { SafeResourceUrl } from '@angular/platform-browser';
+import { NavController, AlertController } from 'ionic-angular';
+
+// services
+import { AuthService } from '../../services/auth.service';
+import { NotificationService } from '../../shared/notification/notification.service';
+// pages
+import { RegisterPage } from '../registration/register.page';
+import { TabsPage } from '../tabs/tabs.page';
+// Others
+import { TranslationService } from '../../shared/translation/translation.service';
+import { loadingMessages, errMessages, generalVariableMessages } from '../../app/messages';
+
+@Component({
+  selector: 'term-condition',
+  templateUrl: 'term-condition.html'
+})
+export class TermConditionPage {
+  @Input('content') content?: SafeResourceUrl;
+  @Input('user') user: any;
+
+  agreed:boolean = false;
+  checkAccessMethod: boolean = false;
+  disagreeErrMessage = errMessages.TermConditions.disagreement.noAccepted;
+  helpEmailMessage = generalVariableMessages.helpMail.email;
+  verifyFailedErrMessage = errMessages.TermConditions.verifyFailed.verifyfailed;
+
+  constructor(
+    public alertCtrl: AlertController,
+    public authService: AuthService,
+    public nav: NavController,
+    public notificationService: NotificationService,
+    public translationService: TranslationService,
+  ) {}
+
+  accessMethod(){
+    return (window.location.href.indexOf('?do=') > -1) ? this.checkAccessMethod = true : this.checkAccessMethod = false
+  }
+
+  displayError(errorMessage?: any): void {
+    let alert = this.alertCtrl.create({
+      title: 'Invalid registration code',
+      subTitle: errorMessage,
+      buttons: [{
+        text: 'Close'
+      }]
+    });
+    alert.present();
+  }
+  backToSAccountPage() {
+    this.nav.popToRoot();
+  }
+
+  ionViewDidEnter() {
+    console.log(this.user);
+  }
+
+  agree(user): void {
+    if (this.agreed === true) {
+      this.nav.push(RegisterPage, user);
+    } else {
+      this.notificationService.present(this.disagreeErrMessage);
+    }
+  }
+  /**
+   * verify if params from url is allowed to proceed with registration
+   */
+  verify(): void {
+    this.authService.verifyRegistration({
+      key: 'test',
+      password: 'test'
+    }).subscribe(
+      res => {
+        console.log(res);
+      },
+      err => {
+        this.notificationService.present(this.verifyFailedErrMessage);
+      },
+      () => {
+        this.nav.push(TabsPage);
+      }
+    );
+  }
+  /**
+   * toggle Read & confirm to proceed next registration page
+   */
+  toggleAgree(): void {
+    this.agreed = !this.agreed;
+  }
+
+  navToRegister(): void {
+    if (this.agreed === true) {
+      console.log(this.nav.getViews());
+    }
+  }
+
+  onTermError(err): void {
+    const supportEmail = this.helpEmailMessage;
+    if ((err.data || {}).msg) {
+      //@TODO: implement error handling
+      console.log({title: "Unable to register", template: `Something went wrong, please contact ${supportEmail}.`});
+    } else if (err.data.msg.indexOf('already registered') != -1) {
+      console.log({
+        title: "Account already registered",
+        template: "Please log in, or click 'forgot password'"
+      });
+    } else {
+      console.log({
+        title: "Invalid registration link",
+        template: `Please check your email again, or contact ${supportEmail}`
+      });
+    }
+  }
+
+  // temporary fix for direct signin
+  signIn(): void {
+    this.nav.push(TabsPage);
+  }
+}
diff --git a/src/services/assessment.service.ts b/src/services/assessment.service.ts
index dbc0e492..722df12e 100755
--- a/src/services/assessment.service.ts
+++ b/src/services/assessment.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { RequestService } from '../shared/request/request.service';
 
+// Others
 import * as _ from 'lodash';
 
 class Assessment {
@@ -15,6 +16,15 @@ class Answer {
   choices?: Array<any>;
 }
 
+export class questionsResult {
+  required: Boolean;
+  answer: any;
+  reviewerAnswer: {
+    answer: any;
+    comment: any;
+  };
+}
+
 export class ChoiceBase<T> {
   id: number;
   value?: number; // or choice id, usually same as "id" above
@@ -32,11 +42,12 @@ export class QuestionBase<T> {
   assessment_id: number;
   name: string;
   type: string;
-  file_type?: string;
-  audience: Array<any>;
+  description: string;
+  required: boolean;
+  audience: string | Array<any>;
+  file_type?: string | any;
   choices?: ChoiceBase<any>[];
   answer?: any;
-  required?: boolean;
   order?: string | number;
 
   constructor(id, assessment_id, name, type) {
@@ -270,9 +281,10 @@ export class AssessmentService {
    */
   normaliseGroup(group) {
     // let result = group;
-    let thisQuestions = group.AssessmentGroupQuestion;
-    thisQuestions = thisQuestions.map(question => {
-      return this.normaliseQuestion(question);
+    let questions = group.AssessmentGroupQuestion;
+    let thisQuestions = [];
+    questions.forEach(question => {
+      thisQuestions.push(this.normaliseQuestion(question));
     });
 
     return {
@@ -285,6 +297,27 @@ export class AssessmentService {
     }
   }
 
+  /**
+   * filter submission by:
+   * - "submitter" as audience
+   * - "submitter" as audience && status as "published"
+   * @name isAccessible
+   * @param {object} question Single normalised assessment
+   *                            object from this.normalise above
+   */
+  public isAccessible(question, status) {
+    let result = true;
+    if (question.audience.indexOf('submitter') === -1) {
+      result = false;
+    }
+
+    if (result && status === 'published') {
+      result = false;
+    }
+
+    return result;
+  }
+
   /*
     turn "AssessmentGroupQuestion" array format from:
     {
@@ -328,18 +361,19 @@ export class AssessmentService {
     });
 
     return {
-      id: question.id,
+      id: question.id, // unknown purpose (be careful with this id)
       assessment_id: question.assessment_question_id,
-      question_id: question.assessment_question_id,
+      question_id: question.assessment_question_id, // use this to indicate question
       group_id: question.assessment_group_id,
       name: thisQuestion.name,
       type: thisQuestion.question_type,
       audience: thisQuestion.audience,
+      description: thisQuestion.description,
       file_type: thisQuestion.file_type,
       required: thisQuestion.is_required,
       choices: choices,
       order: question.order,
-      answer: thisQuestion.answer
+      answer: thisQuestion.answer,
     };
   }
 
@@ -381,4 +415,100 @@ export class AssessmentService {
       weight: choice.weight
     };
   }
+
+  /**
+   * hardcode communication to different server
+   * @param {[type]} assessment_id [description]
+   */
+  public getPostProgramAssessment(assessment_id) {
+    // let url = `${this.prefixUrl}api/assessments.json?assessment_id=${assessment_id}&structured=true`;
+    // let headers = new Headers();
+    // headers.append('appkey', this.appkey);
+    // headers.append('apikey', this.cacheService.getLocalObject('apikey'));
+    // headers.append('timelineID', this.cacheService.getLocalObject('timelineID'));
+    return this.request.get(`api/assessments.json?assessment_id=${assessment_id}&structured=true`);
+  }
+
+  // helpers
+  public getStatus(questionsResult, submissionResult): string {
+    let questionsStatus = [];
+    _.forEach(questionsResult, q => {
+      if (q.required && q.answer !== null) {
+        if (
+          q.reviewerAnswer !== null &&
+          submissionResult.status !== 'pending approval' &&
+          (q.reviewerAnswer.answer || q.reviewerAnswer.comment)
+        ) {
+          questionsStatus.push('reviewed');
+        } else {
+          questionsStatus.push('completed');
+        }
+      }
+
+      if (!q.required && q.answer !== null) {
+        if (
+          q.reviewerAnswer !== null &&
+          submissionResult.status !== 'pending approval' &&
+          (q.reviewerAnswer.answer || q.reviewerAnswer.comment)
+        ) {
+          questionsStatus.push('reviewed');
+        } else {
+          questionsStatus.push('completed');
+        }
+      }
+
+      if (q.answer === null) {
+        questionsStatus.push('incomplete');
+      }
+    });
+
+    // get final status by checking all questions' statuses
+    let status = 'incomplete';
+    if (_.every(questionsStatus, (v) => {
+      return (v === 'completed');
+    })) {
+      status = 'completed';
+    }
+    if (_.includes(questionsStatus, 'reviewed')) {
+      status = 'reviewed';
+    }
+
+    return status;
+  }
+
+  public getSummaries(questionsResult: Array<questionsResult>) {
+    let totalRequiredQuestions = 0;
+    let answeredQuestions = 0;
+    let reviewerFeedback = 0;
+
+    _.forEach(questionsResult, (q) => {
+      // get total number of questions
+      if (q.required) {
+        totalRequiredQuestions += 1;
+      }
+
+      // get total number of answered questions
+      if (q.required && q.answer && q.answer !== null) {
+        answeredQuestions += 1;
+      }
+
+      // get total number of feedback
+      // If API response, the reviewer's answer and comment are empty,
+      // front-end don't consider it as a feedback
+      if (
+        q.reviewerAnswer &&
+        q.reviewerAnswer !== null &&
+        !_.isEmpty(q.reviewerAnswer.answer) &&
+        !_.isEmpty(q.reviewerAnswer.comment)
+      ) {
+        reviewerFeedback += 1;
+      }
+    });
+
+    return {
+      totalRequiredQuestions,
+      answeredQuestions,
+      reviewerFeedback
+    };
+  }
 }
diff --git a/src/services/auth.service.ts b/src/services/auth.service.ts
index c7997d4b..09ca1296 100755
--- a/src/services/auth.service.ts
+++ b/src/services/auth.service.ts
@@ -46,4 +46,7 @@ export class AuthService {
   isAuthenticated() {
     return true;
   }
+  getTerms() {
+    return this.request.get('api/registration_details.json');
+  }
 }
diff --git a/src/services/submission.service.ts b/src/services/submission.service.ts
index 562de8dc..54220189 100755
--- a/src/services/submission.service.ts
+++ b/src/services/submission.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
 
 // Others
 import { RequestService } from '../shared/request/request.service';
@@ -214,7 +215,7 @@ export class SubmissionService {
    * extract reference IDs and prepare Observables to retrieve submissions
    * @param {array} references References array responded with get_activities() api
    */
-  getSubmissionsByReferences(references) {
+  getSubmissionsByReferences(references: Array<{context_id : Number}>): Array<Observable<any>> {
     let tasks = []; // multiple API requests
 
     // get_submissions API to retrieve submitted answer