Explorar o código

Allow create questions with hotspots - refs #7705

Angel Fernando Quiroz Campos %!s(int64=9) %!d(string=hai) anos
pai
achega
0e8ee3c56b

+ 3 - 0
main/exercice/admin.php

@@ -344,6 +344,9 @@ $template = new Template();
 $htmlHeadXtra[] = $template->fetch('default/exercise/submit.js.tpl');
 $htmlHeadXtra[] = api_get_js('d3/jquery.xcolor.js');
 
+$htmlHeadXtra[] = '<link rel="stylesheet" href="../plugin/hotspot2/css/hotspot.css">';
+$htmlHeadXtra[] = '<script src="../plugin/hotspot2/js/hotspot.js"></script>';
+
 $htmlHeadXtra[] = "<script type=\"text/javascript\" src=\"../plugin/hotspot/JavaScriptFlashGateway.js\"></script>
 <script src=\"../plugin/hotspot/hotspot.js\" type=\"text/javascript\"></script>
 <script language=\"JavaScript\" type=\"text/javascript\">

+ 24 - 20
main/exercice/hotspot_actionscript_admin.as.php

@@ -21,12 +21,15 @@ $pictureSize = getimagesize($picturePath.'/'.$objQuestion->selectPicture());
 $pictureWidth = $pictureSize[0];
 $pictureHeight = $pictureSize[1];
 
-$courseLang = $_course['language'];
-$courseCode = $_course['code'];
-$coursePath = $_course['path'];
+$data = [];
+$data['hotspot_lang'] = $_course['language'];
+$data['hotspot_image'] = $pictureName;
+$data['hotspot_image_width'] = $pictureWidth;
+$data['hotspot_image_height'] = $pictureHeight;
+$data['courseCode'] = $_course['path'];
+$data['hotspots'] = [];
 
 // Init
-$output = "hotspot_lang=$courseLang&hotspot_image=$pictureName&hotspot_image_width=$pictureWidth&hotspot_image_height=$pictureHeight&courseCode=$coursePath";
 $i = 0;
 $nmbrTries = 0;
 $answer_type = $objQuestion->type;
@@ -35,28 +38,29 @@ $answers = $_SESSION['tmp_answers'];
 $nbrAnswers = count($answers['answer']);
 
 for ($i=1;$i <= $nbrAnswers; $i++) {
-    $output .= "&hotspot_".$i."=true";
-    $output .= "&hotspot_".$i."_answer=".$answers['answer'][$i];
+    $hotSpot = [];
+    $hotSpot['answer']= $answers['answer'][$i];
 
     if ($answer_type == HOT_SPOT_DELINEATION) {
         if ($i==1) {
-            $output .= "&hotspot_".$i."_type=delineation";
-        } else
-            {$output .= "&hotspot_".$i."_type=oar";}
+            $hotSpot['type'] = 'delineation';
+        } else {
+            $hotSpot['type'] = 'oar';
+        }
     } else {
         // Square or rectancle
         if ($answers['hotspot_type'][$i] == 'square') {
-            $output .= "&hotspot_".$i."_type=square";
+            $hotSpot['type'] = 'square';
         }
 
         // Circle or ovale
         if ($answers['hotspot_type'][$i] == 'circle') {
-            $output .= "&hotspot_".$i."_type=circle";
+            $hotSpot['type'] = 'circle';
         }
 
         // Polygon
         if ($answers['hotspot_type'][$i] == 'poly') {
-            $output .= "&hotspot_".$i."_type=poly";
+            $hotSpot['type'] = 'poly';
         }
         /*// Delineation
         if ($answers['hotspot_type'][$i] == 'delineation')
@@ -70,14 +74,14 @@ for ($i=1;$i <= $nbrAnswers; $i++) {
 		$nmbrTries++;
 	}
 
-	$output .= "&hotspot_".$i."_coord=".$answers['hotspot_coordinates'][$i]."";
-}
-
-// Generate empty
-$i++;
-for ($i; $i <= 12; $i++) {
-	$output .= "&hotspot_".$i."=false";
+    $hotSpot['coord'] = $answers['hotspot_coordinates'][$i];
+    $data['hotspots'][] = $hotSpot;
 }
 
 // Output
-echo $output."&nmbrTries=".$nmbrTries."&done=done";
+$data['nmbrTries'] = $nmbrTries;
+$data['done'] = 'done';
+
+header('Content-Type: application/json');
+
+echo json_encode($data);

+ 12 - 23
main/exercice/hotspot_admin.inc.php

@@ -1009,37 +1009,26 @@ if ($modifyAnswers) {
                     </table>
         </div>
         <div class="row">
-            <div class="col-md-offset-3 col-md-6">
-                <div class="embed-responsive embed-responsive-4by3">
-                    <div class="embed-responsive-item">
-                    <script>
-                        <!--
-                        // Version check based upon the values entered above in "Globals"
-                        var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
+            <div class="col-xs-12" id="hotspot-selectors"></div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12">
     <?php
     $swf_loaded = $answerType == HOT_SPOT_DELINEATION ? 'hotspot_delineation_admin' : 'hotspot_admin';
     $height = 450;
     ?>
-                        // Check to see if the version meets the requirements for playback
-                        if (hasReqestedVersion) {  // if we've detected an acceptable version
-                            var oeTags = '<object type="application/x-shockwave-flash" data="../plugin/hotspot/<?php echo $swf_loaded ?>.swf?modifyAnswers=<?php echo $modifyAnswers ?>" width="600" height="<?php echo $height ?>">'
-                                    + '<param name="movie" value="../plugin/hotspot/<?php echo $swf_loaded ?>.swf?modifyAnswers=<?php echo $modifyAnswers ?>" />'
-                                    + '<param name="test" value="OOoowww fo shooww" />'
-                                    + '</object>';
-                            document.write(oeTags);   // embed the Flash Content SWF when all tests are passed
-                        } else {  // flash is too old or we can't detect the plugin
-                            var alternateContent = 'Error<br \/>'
-                                    + 'This content requires the Macromedia Flash Player.<br \/>'
-                                    + '<a href=http://www.macromedia.com/go/getflash/>Get Flash<\/a>';
-                            document.write(alternateContent);  // insert non-flash content
-                        }
-                        // -->
-                    </script>
-                    </div>
+                <div id="hotspot-container" class="center-block">
+                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 0 0">
+                    </svg>
                 </div>
             </div>
         </div>
     </form>
+    <script>
+        $(document).on('ready', function () {
+            HotSpotAdmin.init(<?php echo $modifyAnswers ?>, '<?php echo $objQuestion->selectPicturePath(); ?>');
+        });
+    </script>
     <?php
     if ($debug > 0) {
         echo str_repeat('&nbsp;', 0) . '$modifyAnswers was set - end' . "<br />\n";