Added error message for api refresh failure.

static/quiz_item.coffee

@@ -67,8 +67,10 @@ $("#get-help").click (e) ->
 
 $("#api-refresh").click (e) ->
   e.preventDefault();
-  $.post("/refresh");
-  refreshQuestion()
+  $.post("/refresh").success(() -> refreshQuestion()).fail(() -> $('#error-area').show());
+
+$('#error-area').find('button').click () ->
+  $('#error-area').hide()
 
 $ ->
   $(document).ready ->

static/quiz_item.js

@@ -90,8 +90,15 @@
 
   $("#api-refresh").click(function(e) {
     e.preventDefault();
-    $.post("/refresh");
+    return $.post("/refresh").success(function() {
       return refreshQuestion();
+    }).fail(function() {
+      return $('#error-area').show();
+    });
+  });
+
+  $('#error-area').find('button').click(function() {
+    return $('#error-area').hide();
   });
 
   $(function() {

templates/layout.html

@@ -25,7 +25,7 @@
 
     <!-- Optional theme -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
     <!-- Latest compiled and minified JavaScript -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

templates/quiz.html

@@ -27,6 +27,12 @@
     </div>
 </nav>
 <div class="container-fluid">
+    <div class="row">
+        <div class="col-md-12 text-center">
+            <div id="error-area" class="alert alert-danger alert-dismissible collapse" role="alert">
+                <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>Cannot refresh API. Try again later.</div>
+        </div>
+    </div>
     <div class="row">
         <div class="col-md-12 text-center"><p class="question-size" id="question-area"></p><img id="question-image" src=""></div>
     </div>