chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve form for create hotspot question - refs #7705

Browse Source
1.10.x
Angel Fernando Quiroz Campos 9 years ago
parent 8e62c35f77
commit de63780e8d
6 changed files with 854 additions and 411 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      main/exercice/admin.php
  2. 25
      main/exercice/hotspot_actionscript_admin.as.php
  3. 11
      main/exercice/hotspot_admin.inc.php
  4. 194
      main/plugin/hotspot2/css/hotspot.css
  5. 1029
      main/plugin/hotspot2/js/hotspot.js
  6. 5
      main/plugin/hotspot2/js/hotspot_user.js

1
main/exercice/admin.php
Unescape View File

@ -344,6 +344,7 @@ $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>

25
main/exercice/hotspot_actionscript_admin.as.php
Unescape View File

@ -22,10 +22,26 @@ $pictureWidth = $pictureSize[0];
$pictureHeight = $pictureSize[1];
$data = [];
$data['hotspot_lang'] = $_course['language'];
$data['hotspot_image'] = $pictureName;
$data['hotspot_image_width'] = $pictureWidth;
$data['hotspot_image_height'] = $pictureHeight;
$data['lang'] = [
'Square' => get_lang('Square'),
'Circle' => get_lang('Circle'),
'Polygon' => get_lang('Polygon'),
'HotspotStatus1' => get_lang('HotspotStatus1'),
'HotspotStatus2Polygon' => get_lang('HotspotStatus2Polygon'),
'HotspotStatus2Other' => get_lang('HotspotStatus2Other'),
'HotspotStatus3' => get_lang('HotspotStatus3'),
'HotspotShowUserPoints' => get_lang('HotspotShowUserPoints'),
'ShowHotspots' => get_lang('ShowHotspots'),
'Triesleft' => get_lang('Triesleft'),
'HotspotExerciseFinished' => get_lang('HotspotExerciseFinished'),
'NextAnswer' => get_lang('NextAnswer'),
'Delineation' => get_lang('Delineation'),
'CloseDelineation' => get_lang('CloseDelineation'),
'Oar' => get_lang('oar')
];
$data['image'] = $objQuestion->selectPicturePath();
$data['image_width'] = $pictureWidth;
$data['image_height'] = $pictureHeight;
$data['courseCode'] = $_course['path'];
$data['hotspots'] = [];
@ -39,6 +55,7 @@ $nbrAnswers = count($answers['answer']);
for ($i=1;$i <= $nbrAnswers; $i++) {
$hotSpot = [];
$hotSpot['id'] = null;
$hotSpot['answer']= $answers['answer'][$i];
if ($answer_type == HOT_SPOT_DELINEATION) {

11
main/exercice/hotspot_admin.inc.php
Unescape View File

@ -1008,9 +1008,6 @@ if ($modifyAnswers) {
</tbody>
</table>
</div>
<div class="row">
<div class="col-xs-12" id="hotspot-selectors"></div>
</div>
<div class="row">
<div class="col-xs-12">
<?php
@ -1018,16 +1015,16 @@ if ($modifyAnswers) {
$height = 450;
?>
<div id="hotspot-container" class="center-block">
<div id="hotspot-alert"></div>
<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(); ?>');
HotSpotAdmin.init({
questionId: <?php echo $modifyAnswers ?>,
selector: '#hotspot-container'
});
});
</script>
<?php

194
main/plugin/hotspot2/css/hotspot.css
Unescape View File

@ -1,15 +1,189 @@
#hotspot-container {
line-height: 0;
/*position: relative;
width: 100%;
vertical-align: middle;
padding-bottom: 408px;
margin: 0;
overflow: hidden;*/
position: relative;
}
#hotspot-container svg {
/*display: inline-block;
}
#hotspot-container #hotspot-context-menu {
position: absolute;
top: 0;
left: 0;*/
}
.input-group.hotspot-0 .fa-square {
color: rgb(66, 113, 181);
}
.input-group.hotspot-1 .fa-square {
color: rgb(254, 142, 22);
}
.input-group.hotspot-2 .fa-square {
color: rgb(69, 199, 240);
}
.input-group.hotspot-3 .fa-square {
color: rgb(188, 214, 49);
}
.input-group.hotspot-4 .fa-square {
color: rgb(214, 49, 115);
}
.input-group.hotspot-5 .fa-square {
color: rgb(215, 215, 215);
}
.input-group.hotspot-6 .fa-square {
color: rgb(144, 175, 221);
}
.input-group.hotspot-7 .fa-square {
color: rgb(175, 134, 64);
}
.input-group.hotspot-8 .fa-square {
color: rgb(79, 146, 66);
}
.input-group.hotspot-9 .fa-square {
color: rgb(244, 235, 36);
}
.input-group.hotspot-10 .fa-square {
color: rgb(237, 32, 36);
}
.input-group.hotspot-11 .fa-square {
color: rgb(59, 59, 59);
}
.input-group.hotspot-0.active {
border-color: rgb(66, 113, 181);
box-shadow: 1px 1px 10px rgb(66, 113, 181);
border-radius: 4px;
}
.input-group.hotspot-0.active .input-group-addon {
border-color: rgb(66, 113, 181);
}
.input-group.hotspot-0.active select {
border-color: rgb(66, 113, 181);
border-left-color: #CCC;
}
.input-group.hotspot-1.active {
border-color: rgb(254, 142, 22);
box-shadow: 1px 1px 10px rgb(254, 142, 22);
border-radius: 4px;
}
.input-group.hotspot-1.active .input-group-addon {
border-color: rgb(254, 142, 22);
}
.input-group.hotspot-1.active select {
border-color: rgb(254, 142, 22);
border-left-color: #CCC;
}
.input-group.hotspot-2.active {
border-color: rgb(69, 199, 240);
box-shadow: 1px 1px 10px rgb(69, 199, 240);
border-radius: 4px;
}
.input-group.hotspot-2.active .input-group-addon {
border-color: rgb(69, 199, 240);
}
.input-group.hotspot-2.active select {
border-color: rgb(69, 199, 240);
border-left-color: #CCC;
}
.input-group.hotspot-3.active {
border-color: rgb(188, 214, 49);
box-shadow: 1px 1px 10px rgb(188, 214, 49);
border-radius: 4px;
}
.input-group.hotspot-3.active .input-group-addon {
border-color: rgb(188, 214, 49);
}
.input-group.hotspot-3.active select {
border-color: rgb(188, 214, 49);
border-left-color: #CCC;
}
.input-group.hotspot-0 select:focus,
.input-group.hotspot-1 select:focus,
.input-group.hotspot-2 select:focus,
.input-group.hotspot-3 select:focus,
.input-group.hotspot-4 select:focus,
.input-group.hotspot-5 select:focus,
.input-group.hotspot-6 select:focus,
.input-group.hotspot-7 select:focus,
.input-group.hotspot-8 select:focus,
.input-group.hotspot-9 select:focus,
.input-group.hotspot-10 select:focus,
.input-group.hotspot-11 select:focus {
box-shadow: none;
}
.input-group.hotspot-0 select,
.input-group.hotspot-1 select,
.input-group.hotspot-2 select,
.input-group.hotspot-3 select,
.input-group.hotspot-4 select,
.input-group.hotspot-5 select,
.input-group.hotspot-6 select,
.input-group.hotspot-7 select,
.input-group.hotspot-8 select,
.input-group.hotspot-9 select,
.input-group.hotspot-10 select,
.input-group.hotspot-11 select {
transition: none;
border-color: #CCC;
}
svg .hotspot-0,
svg .hotspot-1,
svg .hotspot-2,
svg .hotspot-3,
svg .hotspot-4,
svg .hotspot-5,
svg .hotspot-6,
svg .hotspot-7,
svg .hotspot-8,
svg .hotspot-9,
svg .hotspot-10,
svg .hotspot-11 {
stroke-width: 2;
}
svg .hotspot-0 {
stroke: rgb(66, 113, 181);
fill: rgba(66, 113, 181, 0.75);
}
svg .hotspot-1 {
stroke: rgb(254, 142, 22);
fill: rgba(254, 142, 22, 0.75);
}
svg .hotspot-2 {
stroke: rgb(69, 199, 240);
fill: rgba(69, 199, 240, 0.75);
}
svg .hotspot-3 {
stroke: rgb(188, 214, 49);
fill: rgba(188, 214, 49, 0.75);
}
svg .hotspot-4 {
stroke: rgb(214, 49, 115);
fill: rgba(214, 49, 115, 0.75);
}
svg .hotspot-5 {
stroke: rgb(215, 215, 21);
fill: rgba(215, 215, 21, 0.75);
}
svg .hotspot-6 {
stroke: rgb(144, 175, 221);
fill: rgba(144, 175, 221, 0.75);
}
svg .hotspot-7 {
stroke: rgb(175, 134, 64);
fill: rgba(175, 134, 64, 0.75);
}
svg .hotspot-8 {
stroke: rgb(79, 146, 66);
fill: rgba(79, 146, 66, 0.75);
}
svg .hotspot-9 {
stroke: rgb(244, 235, 36);
fill: rgba(244, 235, 36, 0.75);
}
svg .hotspot-10 {
stroke: rgb(237, 32, 36);
fill: rgba(237, 32, 36, 0.75);
}
svg .hotspot-11 {
stroke: rgb(59, 59, 59);
fill: rgba(59, 59, 59, 0.75);
}

1029
main/plugin/hotspot2/js/hotspot.js
View File

File diff suppressed because it is too large Load Diff

5
main/plugin/hotspot2/js/hotspot_user.js
Unescape View File

@ -96,8 +96,8 @@ var HotSpotUser = (function () {
top: y + window.scrollY
},
canvasOffset = {
x: self.el.getBoundingClientRect().x + window.scrollX,
y: self.el.getBoundingClientRect().y + window.scrollY
x: self.el.getBoundingClientRect().left + window.scrollX,
y: self.el.getBoundingClientRect().top + window.scrollY
};
return {
@ -126,7 +126,6 @@ var HotSpotUser = (function () {
self.addAnswer(answer);
if (answers.length === hotSpots.length) {
console.log(lang);
self.messagesEl.textContent = lang.HotspotExerciseFinished;
return;

Write Preview
Loading…
Cancel
Save