Enforcing the viewing order of videos.

Also made the Outline links more noticeable.

2 files changed, 23 insertions, 4 deletions

diff --git a/web/scripts/growth.js b/web/scripts/growth.js
index 5f5b273..fa5e3a9 100644
--- a/web/scripts/growth.js
+++ b/web/scripts/growth.js
@@ -143,6 +143,11 @@ function sendAnswer(required)
 
 function playVideo(videoId)
 {
+    if (!$('#' + videoId).hasClass('allowed')) {
+        notice("You must watch the videos in order.");
+        return;
+    }
+
     $.ajax({
         type: "GET",
         url: location.href + "/videos/" + videoId + ".json",
@@ -197,6 +202,7 @@ function reportVideoComplete(data)
     var completedBefore = $('#videos article .completed').length;
 
     $('#' + data.id).addClass('completed');
+    $('#' + data.id).parent().next().children('div.image').addClass('allowed');
 
     var completed = $('#videos article .completed').length;
     var total = $('#videos article').length;
diff --git a/web/style.css b/web/style.css
index ecad037..3e96a5d 100644
--- a/web/style.css
+++ b/web/style.css
@@ -7,7 +7,7 @@ html, body {
 
 a {
     color: #BDBDBD;
-    text-decoration: none;
+    text-decoration: underline;
     font-weight: bold;
 }
 
@@ -75,6 +75,7 @@ header h1 {
 
 header h1 a {
     color: #7bc043;
+    text-decoration: none;
 }
 
 header h1 img {
@@ -266,7 +267,7 @@ footer a:hover {
 
 #content nav a {
     text-decoration: none;
-    color: #eaeaea;
+    color: #BDBDBD;
     letter-spacing: 2px;
     font-weight: normal;
 }
@@ -275,6 +276,10 @@ footer a:hover {
     color: #fd6000;
 }
 
+#content nav .disabled {
+    color: #eaeaea;
+}
+
 #chapterprogress {
     margin: 2em auto 2em auto;
     width: 75%;
@@ -306,14 +311,22 @@ footer a:hover {
     border-radius: 10px;
 }
 
-#videos .image.completed a:before {
+#videos .image.completed.allowed a:before {
     content: url('/images/complete.png');
     position: absolute;
     top: 0;
     left: 0;
 }
 
-#videos .image a:hover:before {
+#videos .image.allowed a {
+    cursor: pointer;
+}
+
+#videos .image a {
+    cursor: default;
+}
+
+#videos .image.allowed a:hover:before {
     content: url('/images/play.png');
     position: absolute;
     top: 50%;