Merge pull request lml#356 from lml/terp-updates

Terp updates

app/assets/javascripts/application.js

@@ -52,6 +52,10 @@ function open_specified_dialog(name, is_modal, height, width, title, body) {
 
   $("#" + name + "_dialog").dialog('open').closeOnClickOutside();
   $("#" + name + "_dialog").scrollTop(0);   
+  $(document).on('after_dialog_open', function(event) {
+    $("#" + name + "_dialog").scrollTop("0");
+  });
+
 }
 
 function open_message_dialog(is_modal, height, width, title, body) {
@@ -83,3 +87,9 @@ $(document).ready(function() {
     }
   });
 });
+
+$(document).ready(function() {
+  $('body').on('added_errors', function(event) {
+    $('#' + event.target.id).parent('.ui-dialog-content').scrollTop("0");
+  });
+});

app/assets/stylesheets/terp.css.scss

@@ -334,6 +334,12 @@ $nav_bar_height: $header_height;
   @include rounded-side(0px, 0px);
 }
 
+.link_button_terp {
+  @extend .link_button;
+  @include rounded-side(0px, 0px);
+  padding: 8px 13px 10px 14px;
+}
+
 input[disabled].link_button {
   background-color: $ost_hot_blue;
 }
@@ -441,9 +447,15 @@ input[disabled].link_button {
 }
 
 #attention {
-   margin-bottom:18px;
+   margin-bottom:0px;
    margin-top: $header_height;
    clear:both;
+
+   div {
+    div.ui-corner-all {
+      margin-bottom: 0px;
+    }
+   }
 }
 
 .js_not_enabled_alert {
@@ -464,12 +476,24 @@ div.field label {
   margin-bottom: 3px;
 }
 
+td {
+  label {
+    margin-bottom: 0px;
+  }
+}
+
 .field_help {
    font-size:11px;
    color: #999;
    margin-top:-7px;
 }
 
+.terp_field_help {
+    font-size:11px;
+   color: #999;
+   margin-top:-10px; 
+}
+
 .field_with_errors {
   padding: 2px;
   background-color: $os_dark_orange;
@@ -553,13 +577,19 @@ div.field label {
 
 #question_outer {
    width:600px;
-   margin: 20px auto;
+   // margin: 20px auto;
    clear: right;
+   margin-left: 25px;
 
    // &.present_feedback {
    //   .section_heading { display: none }
    //   .section_body {margin: 0}
    // }
+
+   input[type='radio'] {
+     width: 15px;
+     height: 15px;
+   }
 }
 
 /************ 2-column layout *****************/
@@ -999,7 +1029,8 @@ input.ui-widget {
 .question_count {
   float:right;
   font-style: italic;
-  margin-right: 22px;
+  margin-right: 12px;
+  margin-top: -10px;
 }
 
 .section-exercise-responses {
@@ -1061,11 +1092,13 @@ input.ui-widget {
 }
 
 .quiz_start {
-  width: 500px;
-  margin: 20px auto;
+  padding-top: 0px;
+  width: 700px;
+  margin: 0 auto;
 
   .heading {
     font-weight: bold;
+    padding-bottom: 15px;
   }
 
   .info {
@@ -1094,3 +1127,235 @@ input.ui-widget {
   clear: both;
   text-align: center;
 }
+
+#terp-contents {
+  padding: 15px;
+
+  .instructions {
+    font-weight: bold;
+    padding-bottom: 15px;
+  }
+}
+
+.middle-space {
+  margin-left: 102px;
+
+  .or-bar {
+    margin-bottom: 35px;
+    margin-top: 10px;
+    margin-left: 50%;
+    position: relative;
+    height: 230px;
+    border-left: 1px solid #dddddd;
+
+    .or-text {
+      position: absolute;
+      left:-24px;
+      top: 86px;
+      margin-top: 0px;
+      margin-bottom: 0px;
+      margin-left: -50%;
+      padding: 14px 14px;
+      background: white;
+      font-weight: bold;
+    }      
+  }  
+}
+
+.prompt {
+
+  padding-top: 0px;
+  width: 700px;
+  margin: 0 auto;
+
+  .prompt-instructions {
+    font-weight: bold;
+    padding-bottom: 15px;
+  }
+
+  .prompt-form {
+
+    .prompt-buttons {
+      padding-top: 10px;
+    }
+
+  }
+}
+
+#confirmation-code-help {
+  padding-top: 15px;
+  ul {
+    padding-top: 8px;
+    width: 600px;
+  }
+}
+
+.terp-simple-message {
+  font-size: 18px;
+  line-height: 28px;
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+
+.fixed-right-button {
+  position: fixed;
+  right: 27px;
+  top: 300px;
+}
+
+.terp-explanation {
+
+  .terp-explanation-separator {
+    margin: 8px;
+    border-top: 1px solid $ost_light_beige;
+  }
+}
+
+.highlighted-choice {
+  background-color: #efefef;
+}
+
+label.answer-content {
+  padding: 3px;
+  padding-left:8px;
+}
+
+
+span {
+  &.terp-correct-answer, &.terp-incorrect-answer {
+    width: 30px;
+    height: 30px;
+    display:block;    
+
+    &.summary {
+      margin-bottom: -8px;
+      margin-left: 18px;
+      display: inline-block;
+    }
+  }
+
+  &.terp-correct-answer {
+    background: image-url("check_mark.png") no-repeat transparent;  
+  }
+
+  &.terp-incorrect-answer {
+    background: image-url("x_mark.png") no-repeat transparent;  
+  }
+}
+
+.terp-guess-was {
+  .terp-guess-was-intro {
+    font-size:11px;
+    color: #999;
+    margin-bottom: 6px;
+
+  }
+  .terp-guess-was-content {
+    width: 97.5%;
+  }
+}
+
+.terp-now-select {
+  font-size:11px;
+  color: #999;
+  margin-top: 8px; 
+}
+
+
+.terp-correctness-feedback {
+  font-weight: bold;
+  margin-bottom: 24px;
+
+  .terp-correct-feedback {
+    color: $os_green;
+    display: inline-block;
+  }
+
+  .terp-incorrect-feedback {
+    color: rgb(237,28,36);
+    display: inline-block;
+  }
+}
+
+.terp-summary-nav {
+  position: fixed;
+  right: 27px;
+  top: 300px;
+}
+
+.page-alpha {
+
+  padding-top: 0px;
+  width: 600px;
+  margin-left: 25px;
+
+  .instructions {
+    font-weight: bold;
+    padding-bottom: 15px;
+  }
+
+  .content {
+
+  }
+}
+
+@mixin terp-summary-item {
+  width: 60px;
+  height: 30px;
+  text-align: center;
+  color: white;
+  margin-bottom: 2px;
+}
+
+.terp-summary-nav {
+  .terp-summary-nav-item {
+    @include terp-summary-item;
+    background: image-url("terp-summary-link-2.png") no-repeat transparent;  
+
+    span {
+      padding-top:6px;
+      display:inherit;
+      font-size: 11px;
+    }
+
+    &.correct {
+      background-color: $os_green;
+    }
+
+    &.incorrect {
+      background-color: rgb(237,28,36);
+    }
+  }
+}
+
+.terp-summary-nav-simple {
+  @include terp-summary-item;
+  background-color: $ost_hot_blue;
+
+  &.popout {
+    background: image-url("popout.png") no-repeat $ost_hot_blue 20px 4px;  
+  }
+
+}
+
+.terp-dashboard-status {
+  &.complete {
+    color: $os_green;
+  }
+
+  &.started {
+    color: $os_orange;
+  }
+
+  &.not-started {
+    color: black;
+  }
+}
+
+.section.summary-question {
+  border-top: 1px solid #d9d9d9;
+  margin-bottom: 27px;
+  margin-top:10px
+}