Show answer list on admin view

main/inc/lib/exercise.lib.php

@@ -1148,24 +1148,6 @@ HTML;
             }
             $questionName = $objQuestionTmp->selectTitle();
             $questionDescription = $objQuestionTmp->selectDescription();
-            if ($freeze) {
-                $relPath = api_get_path(WEB_CODE_PATH);
-                echo "
-                    <script>
-//                        $(document).on('ready', function () {
-                            new " . ($answerType == HOT_SPOT ? "HotspotQuestion" : "DelineationQuestion") . "({
-                                questionId: $questionId,
-                                exerciseId: $exerciseId,
-                                selector: '#hotspot-preview-$questionId',
-                                for: 'preview',
-                                relPath: '$relPath'
-                            });
-//                        });
-                    </script>
-                    <div id=\"hotspot-preview-$questionId\"></div>
-                ";
-                return;
-            }
 
             // Get the answers, make a list
             $objAnswerTmp = new Answer($questionId);
@@ -1188,22 +1170,20 @@ HTML;
                 $answerList = '
                     <div class="well well-sm">
                         <h5 class="page-header">' . get_lang('HotspotZones') . '</h5>
-                        <ul>
+                        <ol>
                 ';
 
                 if (!empty($answers_hotspot)) {
                     Session::write("hotspot_ordered$questionId", array_keys($answers_hotspot));
-                    $countAnswers = 1;
                     foreach ($answers_hotspot as $value) {
                         $answerList .= "<li>";
                         if ($freeze) {
-                            $answerList .= "&nbsp<span class='hotspot-color hotspot-color-$hotspotColor'>&nbsp;&nbsp;&nbsp;&nbsp;</span>";
+                            $answerList .= '<span class="hotspot-color-'.$hotspotColor
+                                .' fa fa-square" aria-hidden="true"></span>'.PHP_EOL;
                         }
-                        $answerList .= "&nbsp{$countAnswers}.&nbsp;";
                         $answerList .= $value;
                         $answerList .= "</li>";
                         $hotspotColor++;
-                        $countAnswers++;
                     }
                 }
 
@@ -1211,6 +1191,31 @@ HTML;
                         </ul>
                     </div>
                 ';
+
+                if ($freeze) {
+                    $relPath = api_get_path(WEB_CODE_PATH);
+
+                    echo "
+                        <div class=\"row\">
+                            <div class=\"col-sm-9\">
+                                <div id=\"hotspot-preview-$questionId\"></div>                                
+                            </div>
+                            <div class=\"col-sm-3\">
+                                $answerList
+                            </div>
+                        </div>
+                        <script>
+                                new " . ($answerType == HOT_SPOT ? "HotspotQuestion" : "DelineationQuestion") . "({
+                                    questionId: $questionId,
+                                    exerciseId: $exerciseId,
+                                    selector: '#hotspot-preview-$questionId',
+                                    for: 'preview',
+                                    relPath: '$relPath'
+                                });
+                        </script>
+                    ";
+                    return;
+                }
             }
 
             if (!$only_questions) {

main/inc/lib/javascript/hotspot/css/hotspot.css

@@ -8,40 +8,52 @@
     position: absolute;
 }
 
-.input-group.hotspot-0 .fa-square {
+.input-group.hotspot-0 .fa-square,
+.hotspot-color-0.fa.fa-square {
    color: rgb(66, 113, 181);
 }
-.input-group.hotspot-1 .fa-square {
+.input-group.hotspot-1 .fa-square,
+.hotspot-color-1.fa.fa-square {
    color: rgb(254, 142, 22);
 }
-.input-group.hotspot-2 .fa-square {
+.input-group.hotspot-2 .fa-square,
+.hotspot-color-2.fa.fa-square {
    color: rgb(69, 199, 240);
 }
-.input-group.hotspot-3 .fa-square {
+.input-group.hotspot-3 .fa-square,
+.hotspot-color-3.fa.fa-square {
    color: rgb(188, 214, 49);
 }
-.input-group.hotspot-4 .fa-square {
+.input-group.hotspot-4 .fa-square,
+.hotspot-color-4.fa.fa-square {
    color: rgb(214, 49, 115);
 }
-.input-group.hotspot-5 .fa-square {
+.input-group.hotspot-5 .fa-square,
+.hotspot-color-5.fa.fa-square {
    color: rgb(215, 215, 215);
 }
-.input-group.hotspot-6 .fa-square {
+.input-group.hotspot-6 .fa-square,
+.hotspot-color-6.fa.fa-square {
    color: rgb(144, 175, 221);
 }
-.input-group.hotspot-7 .fa-square {
+.input-group.hotspot-7 .fa-square,
+.hotspot-color-7.fa.fa-square {
    color: rgb(175, 134, 64);
 }
-.input-group.hotspot-8 .fa-square {
+.input-group.hotspot-8 .fa-square,
+.hotspot-color-8.fa.fa-square {
    color: rgb(79, 146, 66);
 }
-.input-group.hotspot-9 .fa-square {
+.input-group.hotspot-9 .fa-square,
+.hotspot-color-9.fa.fa-square {
    color: rgb(244, 235, 36);
 }
-.input-group.hotspot-10 .fa-square {
+.input-group.hotspot-10 .fa-square,
+.hotspot-color-10.fa.fa-square {
    color: rgb(237, 32, 36);
 }
-.input-group.hotspot-11 .fa-square {
+.input-group.hotspot-11 .fa-square,
+.hotspot-color-11.fa.fa-square {
    color: rgb(59, 59, 59);
 }