| Server IP : 79.136.114.73 / Your IP : 52.14.25.155 Web Server : Apache/2.4.7 (Ubuntu) PHP/5.5.9-1ubuntu4.29 OpenSSL/1.0.1f System : Linux b8009 3.13.0-170-generic #220-Ubuntu SMP Thu May 9 12:40:49 UTC 2019 x86_64 User : www-data ( 33) PHP Version : 5.5.9-1ubuntu4.29 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/appsrv.astacus.se/apps/school/www_old/Html/LevelA/Category2/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<title>Put pans on Mat</title>
<script type="text/javascript" src="../../../js/allScriptsForLessonsHtml.js"></script>
<style type="text/css">
.textFont
{
font-size: 26px;
font-family: "Arial Rounded MT Bold";
font-style: italic;
color: #00F;
}
.rowHeightForText
{
height: 5%;
}
.rowHeightForImage
{
height: 15%;
}
.textColourBlue
{
color: #00F;
}
.textColourRed
{
color: #F00;
}
.LeftAndRightPadding
{
padding-left: 60px;
padding-right: 60px;
border: none;
}
.borderLines
{
border-right: none;
border-left: none;
border-top: none;
border-bottom: none;
}
canvas
{
border:0px solid #d3d3d3;
position:absolute;
display:none;
}
</style>
<script>
function page_preLoad()
{
setPageImages();
shared_setHeaderTable('id_tblHeader', shared_title_page, shared_getSubTitle(Level.A, Category.No2, 6), true, true);
shared_setFooterTable('id_tblFooter', true, true, false, true, true);
}
function page_onLoad()
{
shared_set_debugInfo(Level.A, Category.No2);
shared_set_tblMainiPadBodyWidthHeight('id_tblMainiPadBody', 'id_meta');
for (suffix=1; suffix<=5; suffix++)
{
var elementPans = document.getElementById('id_Pans' + suffix);
elementPans.isMoved = false;
}
}
function setPageImages()
{
var imagesPath = '../../../img/LevelA/Category2/LevelACat2Lesson6/';
setImageSource('id_MatForPan1', imagesPath, 'Mat.png');
setImageSource('id_Pans2', imagesPath, 'Pans2.png');
setImageSource('id_MatForPans2', imagesPath, 'Mat.png');
setImageSource('id_Pans4', imagesPath, 'Pans4.png');
setImageSource('id_MatForPans3', imagesPath, 'Mat.png');
setImageSource('id_Pans5', imagesPath, 'Pans5.png');
setImageSource('id_MatForPans4', imagesPath, 'Mat.png');
setImageSource('id_Pans3', imagesPath, 'Pans3.png');
setImageSource('id_MatForPans5', imagesPath, 'Mat.png');
setImageSource('id_Pans1', imagesPath, 'Pan1.png');
}
function setImageSource(id_image, imagesPath, imageName)
{
var eImage = document.getElementById(id_image);
eImage.src = imagesPath + imageName;
var deviceType = shared_getDeviceType();
if (imageName == 'Mat.png')
{
if (deviceType == shared_DeviceTypeAndroid)
{
eImage.style.width = '90%';
eImage.style.height = '170%';
}
else
{
eImage.style.width = '90%';
eImage.style.height = '90%';
}
}
}
function btnPrevious_click()
{
window.location = "LevelACat2Lesson5.html";
}
function btnNext_click()
{
window.location = "LevelACat2Lesson7.html";
}
function btnHome_click()
{
shared_btnHomeCategories_click('LevelA');
}
function DragDrop1()
{
DragDrop('id_Pans1', 'id_MatForPan1', 'id_tdMatForPans1');
}
function DragDrop2()
{
DragDrop('id_Pans2', 'id_MatForPans2', 'id_tdMatForPans2');
}
function DragDrop3()
{
DragDrop('id_Pans3', 'id_MatForPans3', 'id_tdMatForPans3');
}
function DragDrop4()
{
DragDrop('id_Pans4', 'id_MatForPans4', 'id_tdMatForPans4');
}
function DragDrop5()
{
DragDrop('id_Pans5', 'id_MatForPans5', 'id_tdMatForPans5');
}
function DragDrop(id_imgPans, id_MatForPans, id_tdMatForPans)
{
var eImgPans = document.getElementById(id_imgPans);
var eImgMatForPans = document.getElementById(id_MatForPans);
var eTdPosition = eImgMatForPans.getBoundingClientRect();
var xAddition = (eTdPosition.width - eImgPans.width) / 2.0;
var yAddition = (eTdPosition.height - eImgPans.height) / 2.0;
eImgPans.style.position = 'absolute';
eImgPans.style.left = eTdPosition.left + xAddition + 'px';
eImgPans.style.top = eTdPosition.top + yAddition + 'px';
eImgPans.width = eTdPosition.width - (2 * xAddition);
eImgPans.height = eTdPosition.height - (2 * yAddition);
eImgPans.isMoved = true;
var eTdMatForPans = document.getElementById(id_tdMatForPans);
eTdMatForPans.style.backgroundColor = shared_colorGreen;
isAllInfosMovedShowClapsAnimation();
}
function isAllInfosMovedShowClapsAnimation()
{
if (isAllPansMoved())
{
shared_show_claps_animation('shared_id_div_claps_image');
}
}
function isAllPansMoved()
{
for (suffix=1; suffix<=5; suffix++)
{
var elementPans = document.getElementById('id_Pans' + suffix);
if (elementPans.isMoved == false)
{
return (false);
}
}
return (true);
}
</script>
</head>
<body onload="page_onLoad()">
<div id="shared_id_div_claps_image">
</div>
<table id="id_tblMainiPadBody" border="1" cellspacing="0" cellpadding="0">
<tr height="5%">
<td>
<header height="100%">
<div id="id_tblHeader" align="center"></div>
</header>
</td>
</tr>
<tr height="*" data-role="page"> <!-- for swiping left and right especially for Android device -->
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" height="100%" border="0px" cellspacing="0" cellpadding="5">
<tr height="50%">
<td align="center">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr height="*">
<td class="textFont" style="padding-left: 10px; border-bottom: none"><span class="textColourBlue">Put</span> <span class="textColourRed">pans</span> on the <span class="textColourRed">mat</span>:
</td>
</tr>
<tr height="19%">
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="*">
<td class="textFont" style="padding-left: 10px; border: none">
<span class="textColourBlue">1. Put 1</span> <span class="textColourRed">pan</span> on this <span class="textColourRed">mat</span>:
</td>
</tr>
<tr height="80%">
<td id="id_tdMatForPans1" width="55%" align="center" class="LeftAndRightPadding">
<img id="id_MatForPan1" class="cls_MatForPan1">
</td>
<td width="*" align="center" style="border: none">
<img id="id_Pans2" class="cls_Pans2" width="50%" height="70%" isMoved=false>
</td>
</tr>
</table>
</td>
</tr>
<tr height="19%">
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="*">
<td class="textFont" style="padding-left: 10px; border: none">
<span class="textColourBlue">2. Put 3</span>
<span class="textColourRed">pans</span> on this <span class="textColourRed">mat</span>:
</td>
</tr>
<tr height="80%">
<td id="id_tdMatForPans3" width="55%" align="center" class="LeftAndRightPadding">
<img id="id_MatForPans3" class="cls_MatForPans3">
</td>
<td width="*" id="id_td_Pans4" align="center" style="border: none">
<img id="id_Pans4" class="cls_Pans4" width="50%" height="70%" isMoved=false>
</td>
</tr>
</table>
</td>
</tr>
<tr height="19%">
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="*">
<td class="textFont" style="padding-left: 10px; border: none">
<span class="textColourBlue">3. Put 2</span>
<span class="textColourRed">pans</span> on this <span class="textColourRed">mat</span>:
</td>
</tr>
<tr height="80%">
<td id="id_tdMatForPans2" width="55%" align="center" class="LeftAndRightPadding">
<img id="id_MatForPans2" class="cls_MatForPans2">
</td>
<td width="*" id="id_td_Pans5" align="center" style="border: none">
<img id="id_Pans5" class="cls_Pans5" width="50%" height="70%" isMoved=false>
</td>
</tr>
</table>
</td>
</tr>
<tr height="19%">
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="*">
<td class="textFont" style="padding-left: 10px; border: none">
<span class="textColourBlue">4. Put 4</span> <span class="textColourRed">pans</span> on this <span class="textColourRed">mat</span>:
</td>
</tr>
<tr height="80%">
<td id="id_tdMatForPans4" width="55%" align="center" class="LeftAndRightPadding">
<img id="id_MatForPans4" class="cls_MatForPans4">
</td>
<td width="*" id="id_td_Pans3" align="center" style="border: none">
<img id="id_Pans3" class="cls_Pans3" width="50%" height="70%" isMoved=false>
</td>
</tr>
</table>
</td>
</tr>
<tr height="19%">
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="*">
<td class="textFont" style="padding-left: 10px; border: none">
<span class="textColourBlue">5. Put 5</span> <span class="textColourRed">pans</span> on this <span class="textColourRed">mat</span>:
</td>
</tr>
<tr height="80%">
<td id="id_tdMatForPans5" width="55%" align="center" class="LeftAndRightPadding">
<img id="id_MatForPans5" class="cls_MatForPans5">
</td>
<td width="*" id="id_td_Pans1" align="center" style="border: none">
<img id="id_Pans1" class="cls_Pans1" width="50%" height="70%" isMoved=false>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="5%">
<td>
<footer height="100%">
<div id="id_tblFooter" align="center"></div>
</footer>
</td>
</tr>
</table>
<script>
page_preLoad();
new webkit_draggable('id_Pans1', {revert : true, scroll : false});
new webkit_draggable('id_Pans2', {revert : true, scroll : false});
new webkit_draggable('id_Pans3', {revert : true, scroll : false});
new webkit_draggable('id_Pans4', {revert : true, scroll : false});
new webkit_draggable('id_Pans5', {revert : true, scroll : false});
webkit_drop.add('id_MatForPan1', {accept:["cls_Pans1"], onDrop : DragDrop1});
webkit_drop.add('id_MatForPans2', {accept:["cls_Pans2"], onDrop : DragDrop2});
webkit_drop.add('id_MatForPans3', {accept:["cls_Pans3"], onDrop : DragDrop3});
webkit_drop.add('id_MatForPans4', {accept:["cls_Pans4"], onDrop : DragDrop4});
webkit_drop.add('id_MatForPans5', {accept:["cls_Pans5"], onDrop : DragDrop5});
</script>
</body>
</html>