Add the ability for course staff to specify a Survey and make it required so that a student must fill it out before starting the course

lms/static/js/course_survey.js

@@ -0,0 +1,93 @@
+$(function() {
+
+    // adding js class for styling with accessibility in mind
+    $('body').addClass('js');
+
+    // form field label styling on focus
+    $("form :input").focus(function() {
+        $("label[for='" + this.id + "']").parent().addClass("is-focused");
+    }).blur(function() {
+        $("label").parent().removeClass("is-focused");
+    });
+
+    $('.status.message.submission-error').addClass("is-hidden");
+
+    toggleSubmitButton(true);
+
+    $('#survey-form').on('submit', function() {
+      /* validate required fields */
+
+        var $inputs = $('#survey-form :input');
+
+        $('.status.message.submission-error .message-copy').empty();
+
+        var cancel_submit = false;
+
+        $inputs.each(function() {
+            /* see if it is a required field and - if so - make sure user presented all information */
+            if (typeof $(this).attr("required") !== typeof undefined) {
+                var val = $(this).val();
+                if (typeof(val) === "string") {
+                    if (val.trim().length === 0) {
+                        var field_label = $(this).parent().find("label");
+                        $(this).parent().addClass('field-error');
+                        $('.status.message.submission-error .message-copy').append("<li class='error-item'>"+field_label.text()+"</li>");
+                        cancel_submit = true;
+                    }
+                } else if (typeof(val) === "object") {
+                    /* for SELECT statements */
+                    if (val === null || val.length === 0 || val[0] === "") {
+                        var field_label = $(this).parent().find("label");
+                        $(this).parent().addClass('field-error');
+                        $('.status.message.submission-error .message-copy').append("<li class='error-item'>"+field_label.text()+"</li>");
+                        cancel_submit = true;
+                    }
+                }
+            }
+        });
+
+        if (cancel_submit) {
+          $('.status.message.submission-error').
+            removeClass("is-hidden").
+            focus();
+          $("html, body").animate({ scrollTop: 0 }, "fast");
+          return false;
+        }
+
+        toggleSubmitButton(false);
+    });
+
+    $('#survey-form').on('ajax:error', function() {
+        toggleSubmitButton(true);
+    });
+
+    $('#survey-form').on('ajax:success', function(event, json, xhr) {
+        var url = json.redirect_url;
+        location.href = url;
+    });
+
+    $('#survey-form').on('ajax:error', function(event, jqXHR, textStatus) {
+        toggleSubmitButton(true);
+        json = $.parseJSON(jqXHR.responseText);
+        $('.status.message.submission-error').addClass('is-shown').focus();
+        $('.status.message.submission-error .message-copy').
+            html(gettext("There has been an error processing your survey.")).
+            stop().
+            css("display", "block");
+    });
+});
+
+function toggleSubmitButton(enable) {
+    var $submitButton = $('form .form-actions #submit');
+
+    if(enable) {
+        $submitButton.
+            removeClass('is-disabled').
+            removeProp('disabled');
+    }
+    else {
+        $submitButton.
+            addClass('is-disabled').
+            prop('disabled', true);
+    }
+}

lms/static/sass/_shame.scss

@@ -121,7 +121,7 @@
 // ====================
 
 // edx.org marketing site - needed, but bad overrides with importants
-.view-register, .view-login, .view-passwordreset {
+.view-register, .view-login, .view-passwordreset, .view-survey {
 
   .form-actions button[type="submit"] {
     text-transform: none;

lms/static/sass/application-extend1-rtl.scss.mako

@@ -55,6 +55,7 @@
 @import 'multicourse/error-pages';
 @import 'multicourse/help';
 @import 'multicourse/edge';
+@import 'multicourse/survey-page';
 
 @import 'developer'; // used for any developer-created scss that needs further polish/refactoring
 @import 'shame';     // used for any bad-form/orphaned scss

lms/static/sass/application-extend1.scss.mako

@@ -55,6 +55,7 @@
 @import 'multicourse/error-pages';
 @import 'multicourse/help';
 @import 'multicourse/edge';
+@import 'multicourse/survey-page';
 
 @import 'developer'; // used for any developer-created scss that needs further polish/refactoring
 @import 'shame';     // used for any bad-form/orphaned scss

lms/static/sass/multicourse/_survey-page.scss

@@ -0,0 +1,162 @@
+// full-page course survey styles
+
+.view-survey {
+
+  .container {
+    padding: ($baseline*1.5) 0;
+  }
+
+  .content-primary {
+    @include float(left);
+    @include margin-right(flex-gutter());
+    width: flex-grid(9,12);
+  }
+
+  .content-supplementary {
+    @include float(left);
+    width: flex-grid(3,12);
+    margin-top: ($baseline*2);
+  }
+
+  .header-survey {
+
+    .title {
+      @extend %t-title4;
+      @extend %t-weight4;
+      margin-bottom: $baseline;
+      border-bottom: 1px solid $gray-l4;
+      padding-bottom: ($baseline/2);
+    }
+
+    .course-info {
+      @extend %t-title;
+      padding-bottom: ($baseline/4);
+    }
+
+    .course-org,
+    .course-number {
+      @extend %t-title8;
+      display: inline-block;
+      text-transform: uppercase;
+      color: $gray-l1;
+    }
+
+    .course-org {
+      @include margin-right($baseline/4);
+    }
+
+    .course-name {
+      @extend %t-title5;
+      display: block;
+    }
+  }
+
+  // reset nasty LMS default styles
+  form {
+
+    h1, h2 {
+      text-align: inherit;
+      letter-spacing: inherit;
+      text-transform: inherit;
+    }
+  }
+
+  .instructions {
+    margin-bottom: $baseline;
+    font-style: italic;
+    @extend %t-copy-base;
+  }
+
+  .message.submission-error {
+    display: block;
+    margin-bottom: ($baseline);
+    border-top: 3px solid $error-color;
+    @include padding( ($baseline), ($baseline*1.5), ($baseline*1.5), ($baseline*1.5) );
+    background-color: tint($error-color,85%);
+
+    .message-title {
+      @extend %t-title5;
+      @extend %t-weight4;
+      margin-bottom: ($baseline/2);
+      color: $error-color;
+    }
+
+    .message-copy {
+      @extend %ui-no-list;
+      line-height: 1.3;
+
+      .error-item {
+        margin-bottom: ($baseline/3);
+      }
+    }
+
+    &.is-hidden {
+      display: none;
+    }
+  }
+
+  .list-input {
+    @extend %ui-no-list;
+
+    .field {
+      margin-bottom: $baseline;
+
+      &.required label:after {
+        content: "*";
+        @include margin-left($baseline/4);
+      }
+
+      .tip {
+        @extend %t-copy-sub2;
+        display: block;
+        margin-top: ($baseline/4);
+        color: $gray;
+      }
+
+      &.is-focused {
+
+        .tip {
+          color: $base-font-color;
+        }
+      }
+    }
+  }
+
+  .action-primary {
+    @extend %m-btn-primary;
+    @extend %t-copy-base;
+    @include padding-left($baseline*2);
+  }
+
+  .action-cancel {
+    @extend %t-copy-sub1;
+    @include margin-left($baseline);
+  }
+
+  // override basic label styles
+  label {
+    @extend %t-copy-base;
+    @extend %t-weight4;
+    display: block;
+    font-style: normal;
+  }
+
+  // override basic form input styles
+  button, input, select, textarea {
+    @extend %t-copy-sub1;
+  }
+
+  .bit {
+    margin-bottom: $baseline;
+
+    .title {
+      @extend %t-title7;
+      @extend %t-weight4;
+    }
+
+    p {
+      @extend %t-copy-sub1;
+      color: $gray;
+    }
+  }
+}