Browse Source

Improve options style for draggable question type - refs #8002

Angel Fernando Quiroz Campos 9 years ago
parent
commit
1e7dd94cd2

+ 4 - 40
app/Resources/public/css/base.css

@@ -4413,52 +4413,21 @@ ul.holder li.bit-box{
 }
 
 /***    Draggable answer    ***/
-.question_options ul.exercise-draggable-answer{
-  float: left;
-  margin-bottom: 20px;
-  min-height: 2em;
-  min-width: 100%;
+ul.exercise-draggable-answer {
+  min-height: 3.5em;
 }
-ul.exercise-draggable-answer li {
+ul.exercise-draggable-answer li.touch-items {
   cursor: move;
-  float: left;
   margin: 0 20px 20px 0;
-  padding: 5px 20px;
   text-align: center;
-}
-ul.exercise-draggable-answer .touch-items{
-  background: #ffffff;
-  background-image: -webkit-linear-gradient(top, #ffffff, #cfcfcf);
-  background-image: -moz-linear-gradient(top, #ffffff, #cfcfcf);
-  background-image: -ms-linear-gradient(top, #ffffff, #cfcfcf);
-  background-image: -o-linear-gradient(top, #ffffff, #cfcfcf);
-  background-image: linear-gradient(to bottom, #ffffff, #cfcfcf);
-  -webkit-border-radius: 4;
-  -moz-border-radius: 4;
-  border-radius: 4px;
-  font-family: Arial;
-  color: #2e2e2e;
-  font-size: 13px;
-  padding: 10px 20px 10px 20px;
-  border: solid #b0b0b0 1px;
-  text-decoration: none;
   z-index: 100;
 }
-ul.exercise-draggable-answer .touch-items:hover{
-  background: #ffffff;
-  background-image: -webkit-linear-gradient(top, #ffffff, #b8d3e3);
-  background-image: -moz-linear-gradient(top, #ffffff, #b8d3e3);
-  background-image: -ms-linear-gradient(top, #ffffff, #b8d3e3);
-  background-image: -o-linear-gradient(top, #ffffff, #b8d3e3);
-  background-image: linear-gradient(to bottom, #ffffff, #b8d3e3);
-  text-decoration: none;
-}
 .question_options .ui-widget{
   padding: 10px 20px;
 }
 .question_options .droppable {
   margin: 0 20px 20px 0;
-  padding: 10px;
+  padding: 0 10px 10px;
   text-align: center;
   background-color: #ECF0F1;
   border: dotted #dddddd 4px;
@@ -4479,11 +4448,6 @@ ul.exercise-draggable-answer .touch-items:hover{
 }
 .question_options .droppable .gallery .exercise-draggable-answer-option {
   margin-bottom: 15px;
-  background-color: #286090;
-  color: #ffffff;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  border-radius: 4px;
 }
 
 /***    Matching Draggable answer ***/

+ 4 - 4
main/inc/lib/exercise.lib.php

@@ -108,7 +108,7 @@ class ExerciseLib
                 if ($answerType == DRAGGABLE) {
                     $s .= '<div class="col-md-12 ui-widget ui-helper-clearfix">
                         <div class="clearfix">
-                        <ul class="exercise-draggable-answer ui-helper-reset ui-helper-clearfix">';
+                        <ul class="exercise-draggable-answer ui-helper-reset ui-helper-clearfix list-inline">';
                 } else {
                     $s .= '<div id="drag'.$questionId.'_question" class="drag_question">
                            <table class="data_table">';
@@ -830,7 +830,7 @@ class ExerciseLib
                             $parsed_answer,
                             [
                                 'id' => "window_$windowId",
-                                'class' => "window{$questionId}_question_draggable exercise-draggable-answer-option"
+                                'class' => "window{$questionId}_question_draggable exercise-draggable-answer-option btn btn-info"
                             ]
                         );
                         $selectedValue = 0;
@@ -1056,10 +1056,10 @@ HTML;
 
                     if ($answerCorrect) {
                         $s .= Display::div(
-                            $counterAnswer,
+                            '&nbsp;',
                             [
                                 'id' => "drop_$windowId",
-                                'class' => 'droppable col-md-2'
+                                'class' => 'col-md-2 droppable'
                             ]
                         );
 

+ 2 - 17
main/template/default/exercise/submit.js.tpl

@@ -9,7 +9,7 @@ var DraggableAnswer = {
         }
 
         item.fadeOut(function () {
-            var $list = $('<div class="gallery ui-helper-reset"/>').appendTo(insertHere);
+            var $list = $('<ul>').addClass('gallery ui-helper-reset').appendTo(insertHere);
 
             item.find('a.btn').remove();
 
@@ -24,22 +24,7 @@ var DraggableAnswer = {
                 })
                 .attr("selected", true);
 
-            var recycleButton = $('<a>')
-                    .attr('href', '#')
-                    .addClass('btn btn-default btn-xs')
-                    .append(
-                        "{{ "Undo" | get_lang }} ",
-                        $('<i>').addClass('fa fa-undo')
-                    )
-                    .on('click', function (e) {
-                        e.preventDefault();
-
-                        var liParent = $(this).parent();
-
-                        DraggableAnswer.recycleItem(liParent);
-                    });
-
-            item.append(recycleButton).appendTo($list).fadeIn();
+            item.appendTo($list).fadeIn();
         });
     },
     recycleItem: function (item) {