diff --git a/question/type/ordering/renderer.php b/question/type/ordering/renderer.php
index 4147bd61bc4..c123087d356 100644
--- a/question/type/ordering/renderer.php
+++ b/question/type/ordering/renderer.php
@@ -97,6 +97,10 @@ class qtype_ordering_renderer extends qtype_with_combined_feedback_renderer {
 
             // Set layout class.
             $layoutclass = $question->get_ordering_layoutclass();
+            $activeclass = '';
+            if ($qa->get_state()->is_active()) {
+                $activeclass = ' orderingactive';
+            }
 
             // Generate ordering items.
             foreach ($currentresponse as $position => $answerid) {
@@ -110,9 +114,9 @@ class qtype_ordering_renderer extends qtype_with_combined_feedback_renderer {
 
                 if ($printeditems == false) {
                     $printeditems = true;
-                    $result .= html_writer::start_tag('div', array('class' => 'ablock', 'id' => $ablockid, 'contenteditable' => 'true'));
-                    $result .= html_writer::start_tag('div', array('class' => 'answer ordering', 'contenteditable' => 'false'));
-                    $result .= html_writer::start_tag('ul',  array('class' => 'sortablelist', 'id' => $sortableid));
+                    $result .= html_writer::start_tag('div', array('class' => 'ablock', 'id' => $ablockid));
+                    $result .= html_writer::start_tag('div', array('class' => 'answer ordering'));
+                    $result .= html_writer::start_tag('ul',  array('class' => 'sortablelist' . $activeclass, 'id' => $sortableid));
                 }
 
                 // Set the CSS class and correctness img for this response.
diff --git a/question/type/ordering/styles.css b/question/type/ordering/styles.css
index f56e180ed26..b213e6075b7 100644
--- a/question/type/ordering/styles.css
+++ b/question/type/ordering/styles.css
@@ -10,11 +10,16 @@
     list-style-type  : none;
     margin           : 0;
     margin-left      : 5px;
-    padding          : 4px 4px 0 4px;
+    padding          : 4px;
+}
+.que.ordering ul.sortablelist.orderingactive {
+    border           : 1px dotted #333;
+    border-radius    : 4px;
 }
 .que.ordering ul.sortablelist li {
     background-color : #ffffff;
     border           : 1px solid #000;
+    border-radius    : 4px;
     list-style-type  : none;
     margin           : 4px;
     padding          : 6px 12px;