diff --git a/css/style.css b/css/style.css
index 30cbe4c..041866d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -13,3 +13,15 @@
 .answer:hover{
     cursor: pointer;
 }
+.image-answer{
+    cursor: pointer;
+    height: 350px;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 10px;
+    margin-bottom: 20px;
+}
+.image-answer img{
+    width: 100%;
+    height: auto;
+}
diff --git a/index.html b/index.html
index 7c79476..48a6f38 100644
--- a/index.html
+++ b/index.html
@@ -71,7 +71,7 @@
                                   <div class="col-md-6">
                                       <p><strong>locations:</strong>{{list.activeTurtle.locations}}</p>
                                       <p><strong>Size:</strong>{{list.activeTurtle.size}}</p>
-                                      <p><strong>Average: Lifespan</strong>{{list.activeTurtle.lifespan}}</p>
+                                      <p><strong>Average Lifespan:</strong>{{list.activeTurtle.lifespan}}</p>
                                       <p><strong>Dite:</strong>{{list.activeTurtle.dite}}</p>
                                   </div>
                                   <div class="col-xs-12 top-buffer">
@@ -93,7 +93,7 @@
 
               <div class="row">
                 <div class="col-xs-8">
-                  <h2><progress:</h2>
+                  <h3>progress:</h3>
                   <div class="btn-toolbar">
                        <button class="btn"
                                ng-repeat = "question in quiz.dataServices.quizQuestions"
@@ -119,7 +119,7 @@
                          <p>Unanswered</p>
                        </div>
                   </div>
-                </div>
+                </div> <!-- legend ends -->
               </div> <!-- progress section -->
 
               <div class="row">
@@ -130,19 +130,30 @@
                          <h4>{{quiz.activeQuestion+1 + ". " + quiz.dataServices.quizQuestions[quiz.activeQuestion].text}}</h4>
                        </div>
                      </div>
-                     <div class="row">
+                     <div class="row"
+                          ng-if = "quiz.dataServices.quizQuestions[quiz.activeQuestion].type === 'text'" >
                        <div class="col-sm-6" ng-repeat = "answer in quiz.dataServices.quizQuestions[quiz.activeQuestion].possibilities">
                          <h4 class ="answer">
                            {{answer.answer}}
                          </h4>
                        </div>
                      </div>
+                     <div class="row"
+                          ng-if = "quiz.dataServices.quizQuestions[quiz.activeQuestion].type === 'image'">
+                       <div class="col-sm-6" ng-repeat = "answer in quiz.dataServices.quizQuestions[quiz.activeQuestion].possibilities">
+                            <div class="image-answer">
+                              <img ng-src="{{answer.answer}}">
+                            </div>
+                       </div>
+                     </div>
+                     <!-- ng-click will call the questionAnswered method on the controller -->
                      <button class = "btn btn-warning" ng-click = "quiz.questionAnswered()">Continue</button>
+
                 </div>
               </div>
 
-          </div>
-  </div>
+          </div> <!-- quizCtrl ends -->
+  </div> <!-- container ends -->
 <!-- third party scripts -->
   <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script> -->
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
diff --git a/js/controllers/quiz.js b/js/controllers/quiz.js
index 03a6c9a..856fdec 100644
--- a/js/controllers/quiz.js
+++ b/js/controllers/quiz.js
@@ -14,9 +14,35 @@
           vm.dataServices = DataServices;
           vm.questionAnswered = questionAnswered;
           vm.activeQuestion = 0;
+          vm.setActiveQuestion = setActiveQuestion;
+
+          var numQuestionsAnswered = 0;
+
+          function setActiveQuestion () {
+            var breakOut = false;
+            var quizLength = DataServices.quizQuestions.length - 1;
+
+            while (!breakOut) {
+                  vm.activeQuestion = vm.activeQuestion < quizLength?++vm.activeQuestion:0;
+
+                  if (DataServices.quizQuestions[activeQuestion].selected === null)
+                  breakOut = true;
+            }
+          }
 
           function questionAnswered () {
-            
+
+            var quizLength = DataServices.quizQuestions.length;
+
+            if (DataServices.quizQuestions[vm.activeQuestion].selected !== null){
+                numQuestionsAnswered++;
+
+                if (numQuestionsAnswered >= quizLength) {
+                     // Finilise the quiz
+                }
+            }
+
+            vm.setActiveQuestion();
           }
       }