| Server IP : 79.136.114.73 / Your IP : 3.133.59.209 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_old8/Html/LevelD/Category2/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<title>Draw connecting lines</title>
<script type="text/javascript" src="../../../js/allScriptsForLessonsHtml.js"></script>
<style type="text/css">
canvas
{
background:transparent;
position:absolute;
z-index: -1;
}
</style>
<script>
var _currentOrderNo = 0;
var _isValidClicks = true;
var _previousClickedTd = null;
function page_preLoad()
{
shared_setDeviceTypeLevelCategoryLastLesson(Level.D, Category.No2);
shared_set_tblMainiPadBodyWidthHeight('id_tblMainiPadBody', 'id_meta');
shared_setHeaderTable('id_tblHeader', shared_title_page, shared_getSubTitle(Level.D, Category.No2, 12), true, true);
shared_setFooterTable('id_tblFooter', true, true, false, true, true);
var ids_headings = ['id_td_heading1', 'id_td_heading2'];
shared_adjust_fontSize_for_ids_all_devices(ids_headings, 70);
set_canvas_position_widthHeight();
initialize_tds();
}
function page_onLoad()
{
}
function set_canvas_position_widthHeight()
{
var eTd = document.getElementById('id_td_root');
var eTdRectangle = eTd.getBoundingClientRect();
var eCanvas = document.getElementById('id_canvas1');
eCanvas.style.left = eTdRectangle.left + 'px';
eCanvas.style.top = eTdRectangle.top + 'px';
eCanvas.textAlign = 'center';
eCanvas.width = eTdRectangle.width;
eCanvas.height = eTdRectangle.height;
var sizePercentage = shared_getSizePercentageAsPerDeviceHeightWidth();
var eCanvasContext = eCanvas.getContext('2d');
eCanvasContext.lineWidth = 2 * sizePercentage;
eCanvasContext.strokeStyle = 'blue';
eCanvasContext.zIndex = 99;
}
function initialize_tds()
{
for (var tdIdSuffix = 1; tdIdSuffix <= 5; tdIdSuffix++)
{
var eTd = document.getElementById('id_td' + tdIdSuffix);
eTd.actualOrderNo = tdIdSuffix;
eTd.isClicked = false;
}
}
function td_click(id_td)
{
var eTd = document.getElementById(id_td);
if (eTd.isClicked == false)
{
if (_previousClickedTd != null)
{
drawLineFromTdToTd(_previousClickedTd, id_td);
}
_previousClickedTd = id_td;
}
eTd.isClicked = true;
validateLines(id_td);
}
function drawLineFromTdToTd(id_td1, id_td2)
{
var eTdRoot = document.getElementById('id_td_root');
var eTdRootRectangle = eTdRoot.getBoundingClientRect();
var tdRootTop = eTdRootRectangle.top;
var tdRootLeft = eTdRootRectangle.left;
var eTd1 = document.getElementById(id_td1);
var eTd1Rectangle = eTd1.getBoundingClientRect();
var centerXTd1 = eTd1Rectangle.left - tdRootLeft + (eTd1Rectangle.width / 2.0);
var centerYTd1 = eTd1Rectangle.top - tdRootTop + (eTd1Rectangle.height / 2.0);
var eTd2 = document.getElementById(id_td2);
var eTd2Rectangle = eTd2.getBoundingClientRect();
var centerXTd2 = eTd2Rectangle.left - tdRootLeft + (eTd2Rectangle.width / 2.0);
var centerYTd2 = eTd2Rectangle.top - tdRootTop + (eTd2Rectangle.height / 2.0);
var point1 = new Point(centerXTd1, centerYTd1);
var point2 = new Point(centerXTd2, centerYTd2);
var arrowLength = eTd1Rectangle.height / 6.0;
drawLine(point1, point2);
drawArrowLines(point1, point2, arrowLength);
}
function drawArrowLines(point1, point2, arrowLength)
{
var distance = shared_getDistance(point1, point2);
var lineAngleInRadians = shared_getAngleInRadians(point1, point2);
var lineAngleInRadians1 = lineAngleInRadians - (Math.PI * 3.6 / 4.0);
var lineAngleInRadians2 = lineAngleInRadians + (Math.PI * 3.6 / 4.0);
var atPoint1 = shared_getPoint(point1, lineAngleInRadians, (distance / 2.2));
var atPoint2 = shared_getPoint(point1, lineAngleInRadians, ((distance / 2.8) * 2.0));
var pointNew11 = shared_getPoint(atPoint1, lineAngleInRadians1, arrowLength);
var pointNew12 = shared_getPoint(atPoint1, lineAngleInRadians2, arrowLength);
var pointNew21 = shared_getPoint(atPoint2, lineAngleInRadians1, arrowLength);
var pointNew22 = shared_getPoint(atPoint2, lineAngleInRadians2, arrowLength);
drawLine(atPoint1, pointNew11);
drawLine(atPoint1, pointNew12);
drawLine(pointNew11, pointNew12);
drawLine(atPoint2, pointNew21);
drawLine(atPoint2, pointNew22);
drawLine(pointNew21, pointNew22);
}
function drawLine(fromPoint, toPoint)
{
var eCanvas = document.getElementById('id_canvas1');
var eCanvasContext = eCanvas.getContext('2d');
eCanvasContext.moveTo(fromPoint.x, fromPoint.y);
eCanvasContext.lineTo(toPoint.x, toPoint.y);
eCanvasContext.stroke();
}
function validateLines(id_td)
{
_currentOrderNo++;
var actualOrderNo = getActualOrderNo(id_td);
if (_currentOrderNo != actualOrderNo)
{
_isValidClicks = false;
}
if (id_td == 'id_td5')
{
if (_isValidClicks == true)
{
for (var tdId = 1; tdId <= 5; tdId++)
{
var eTd = document.getElementById('id_td' + tdId);
if (eTd.isClicked == false)
{
showErrorMessage();
return;
}
}
shared_show_claps_animation('shared_id_div_claps_image');
}
else
{
showErrorMessage();
}
}
}
function showErrorMessage()
{
shared_show_message_info('Invalid connecting lines! \n', 'Please try again', MessageOption.OK);
}
function getActualOrderNo(id_td)
{
var eTd = document.getElementById(id_td);
return (eTd.actualOrderNo);
}
function isPointInsideTd(id_td, pointX, pointY)
{
var eTd = document.getElementById(id_td);
var eTdRectangle = eTd.getBoundingClientRect();
if ((pointX > eTdRectangle.left) && (pointX < eTdRectangle.right) && (pointY > eTdRectangle.top) && (pointY < eTdRectangle.bottom))
{
return (true);
}
return (false);
}
function canvas_click(pointX, pointY)
{
for (var tdIdSuffix = 1; tdIdSuffix <= 5; tdIdSuffix++)
{
var id_td = 'id_td' + tdIdSuffix;
if (isPointInsideTd(id_td, pointX, pointY))
{
td_click(id_td)
}
}
}
function hide_message_info()
{
var eDiv = document.getElementById('shared_id_div_message');
eDiv.hidden = true;
window.location.reload();
}
function btnPrevious_click()
{
window.location = 'LevelDCat2Lesson11.html';
}
function btnNext_click()
{
window.location = 'LevelDCat2Lesson13.html';
}
function btnHome_click()
{
shared_btnHomeCategories_click('LevelD');
}
function page_onResize()
{
/*var eTd = document.getElementById('id_td2');
var eTdRectangle = eTd.getBoundingClientRect();
var eCanvas = document.getElementById('id_canvas1');
eCanvas.style.left = eTdRectangle.left + 'px';
eCanvas.style.top = eTdRectangle.top + 'px';*/
}
</script>
</head>
<body onLoad="page_onLoad()" onResize="page_onResize()">
<div id="shared_id_div_claps_image"></div>
<div id="shared_id_div_message"></div>
<table id="id_tblMainiPadBody" border="1" cellspacing="0" cellpadding="0">
<tr height="8%">
<td>
<div id="id_tblHeader"></div>
</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="2%">
<tr>
<td align="center">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse">
<tr height="15%">
<td id="id_td_heading1" class="shared_style_options_black_24px_bold" style="border-bottom:none">Ram lives in an <span style="color:red">apartment</span>. Every day he goes to Sam who lives in a <span style="color:red">cement house</span>. Then they both go to Pam who lives in a <span style="color:red">hut</span>. Then, three of them go to Tom who lives in a <span style="color:red">tent</span>. Then, four of them go to <span style="color:red">school</span>.
</td>
</tr>
<tr height="6%">
<td id="id_td_heading2" class="shared_style_options_black_24px_bold" style="border-top:none; border-bottom:none">Draw the connecting lines as described [<span style="color:red">click on pictures</span>]:<br>
</td>
</tr>
<tr height="*">
<td id="id_td_root">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="33%">
<td id="id_td2" width="33%" style="text-align:center" onClick="td_click('id_td2')">
<img id="id_imgCementHouse" src="../../../img/LevelD/Category2/LevelDCat2Lesson12/cementHouse.png" width="50%" draggable="false">
</td>
<td id="id_td5" width="*" style="text-align:center" onClick="td_click('id_td5')">
<img id="id_imgSchool" src="../../../img/LevelD/Category2/LevelDCat2Lesson12/school.png" width="50%" draggable="false">
</td>
<td width="33%"></td>
</tr>
<tr height="33%">
<td id="id_td3" width="33%" style="text-align:center" onClick="td_click('id_td3')">
<img id="id_imgHut" src="../../../img/LevelD/Category2/LevelDCat2Lesson12/hut.png" width="50%" draggable="false">
</td>
<td width="*"></td>
<td id="id_td4" width="33%" style="text-align:center" onClick="td_click('id_td4')">
<img id="id_imgTentHouse" src="../../../img/LevelD/Category2/LevelDCat2Lesson12/tentHouse.png" width="50%" draggable="false">
</td>
</tr>
<tr height="*">
<td width="33%"> </td>
<td id="id_td1" width="*" style="text-align:center" onClick="td_click('id_td1')">
<img id="id_imgApartment" src="../../../img/LevelD/Category2/LevelDCat2Lesson12/apartment.png" width="50%" draggable="false">
</td>
<td width="33%"></td>
</tr>
</table>
<canvas id="id_canvas1"></canvas>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="8%">
<td>
<div id="id_tblFooter"></div>
</td>
</tr>
</table>
<script>
page_preLoad();
</script>
</body>
</html>