| Server IP : 79.136.114.73 / Your IP : 18.226.169.66 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_old10/Html/LevelB/Category1/ |
Upload File : |
<!DOCTYPE html>
<html>
<head>
<title>Circle match boxes, cheeks</title>
<script type="text/javascript" src="../../../js/allScriptsForLessonsHtml.js"></script>
<style type="text/css">
svg
{
position: absolute;
background-color: transparent;
}
</style>
<script>
function page_preLoad()
{
s_setDeviceTypeLevelCategoryLastLesson(Level.B, Category.No1);
s_set_tblMainiPadBodyWidthHeight('id_tblMainiPadBody', 'id_meta');
s_setHeaderTable('id_tblHeader', s_title_page, s_getSubTitle(Level.B, Category.No1, 21), true, true);
s_setFooterTable('id_tblFooter', true, true, true, true, true);
var ids_texts = ['id_td_text1', 'id_td_text2', 'id_td_text3', 'id_td_text4', 'id_td_text5', 'id_td_text6', 'id_td_text7', 'id_td_text8'];
var ids_small_texts = ['id_small_text1', 'id_small_text2'];
s_adjust_fontSize_for_ids_all_devices(ids_texts, 70);
s_adjust_fontSize_for_ids_all_devices(ids_small_texts, 60);
setAllSvgsWidthHeightAndPositionFromTds();
setAllEllipseStyles();
var id_tables_array = ['id_table1', 'id_table2', 'id_table3', 'id_table4'];
s_border_collapse_for_tables_for_all(id_tables_array);
}
function page_onLoad()
{
s_setTablesHeightsForIE();
}
function setAllSvgsWidthHeightAndPositionFromTds()
{
var nTds = 8;
for (var nthTd = 1; nthTd <= nTds; nthTd++)
{
s_svg_setSvgWidthHeightAndPositionFromTd('id_td' + nthTd, 'id_svg' + nthTd);
}
}
function setAllEllipseStyles()
{
var allEllipseIdsArray = getAllEllipseIdsArray();
for (var indexEllipse = 0; indexEllipse < allEllipseIdsArray.length; indexEllipse++)
{
var id_ellipse = allEllipseIdsArray[indexEllipse];
s_svg_setEllipseStyle(id_ellipse);
}
var blueIdsArray = ['id_ellipse1', 'id_ellipse2', 'id_ellipse3', 'id_ellipse4'];
for (var indexEllipse = 0; indexEllipse < blueIdsArray.length; indexEllipse++)
{
var id_ellipse = blueIdsArray[indexEllipse];
var eEllipse = document.getElementById(id_ellipse);
eEllipse.defaultDotColor = CircleColorSvg.Blue;
}
var blackDotIdsArray = ['id_ellipse5', 'id_ellipse6', 'id_ellipse9', 'id_ellipse10', 'id_ellipse13', 'id_ellipse14', 'id_ellipse17', 'id_ellipse18', 'id_ellipse21', 'id_ellipse22', 'id_ellipse25', 'id_ellipse26', 'id_ellipse29', 'id_ellipse30', 'id_ellipse33', 'id_ellipse34'];
for (var indexEllipse = 0; indexEllipse < blackDotIdsArray.length; indexEllipse++)
{
var id_ellipse = blackDotIdsArray[indexEllipse];
var eEllipse = document.getElementById(id_ellipse);
eEllipse.defaultDotColor = CircleColorSvg.Black;
}
var redDotIdsArray = ['id_ellipse7', 'id_ellipse8', 'id_ellipse11', 'id_ellipse12', 'id_ellipse15', 'id_ellipse16', 'id_ellipse19', 'id_ellipse20', 'id_ellipse23', 'id_ellipse24', 'id_ellipse27', 'id_ellipse28', 'id_ellipse31', 'id_ellipse32', 'id_ellipse35', 'id_ellipse36'];
for (var indexEllipse = 0; indexEllipse < redDotIdsArray.length; indexEllipse++)
{
var id_ellipse = redDotIdsArray[indexEllipse];
var eEllipse = document.getElementById(id_ellipse);
eEllipse.defaultDotColor = CircleColorSvg.Red;
}
}
function getAllEllipseIdsArray()
{
var allEllipseIdsArray = new Array();
for (var nthEllipse = 1; nthEllipse <= 36; nthEllipse++)
{
allEllipseIdsArray.push('id_ellipse' + nthEllipse );
}
return (allEllipseIdsArray);
}
function ellipse_click(id_ellipse)
{
var eEllipse = document.getElementById(id_ellipse);
if (eEllipse.circleColor == CircleColorSvg.None)
{
if (eEllipse.defaultDotColor == CircleColorSvg.Blue)
{
var group1IdsArray = ['id_ellipse1', 'id_ellipse2'];
var group2IdsArray = ['id_ellipse3', 'id_ellipse4'];
var allGroupsIdsArrayArray = [group1IdsArray, group2IdsArray];
s_svg_showHideEllipsesMultipleFor1Td(id_ellipse, allGroupsIdsArrayArray);
}
else if (eEllipse.defaultDotColor == CircleColorSvg.Black)
{
s_svg_setEllipseBorderBlackIfisValidatedIsFalse(eEllipse);
s_svg_setEllipseFillBlackTransparentIfisValidatedIsFalse(eEllipse);
eEllipse.circleColor = CircleColorSvg.Black;
}
else if (eEllipse.defaultDotColor == CircleColorSvg.Red)
{
s_svg_setEllipseBorderRedIfisValidatedIsFalse(eEllipse);
s_svg_setEllipseFillRedTransparentIfisValidatedIsFalse(eEllipse);
eEllipse.circleColor = CircleColorSvg.Red;
}
}
else
{
eEllipse.style.stroke = 'transparent';
eEllipse.style.fill = 'transparent';
eEllipse.circleColor = CircleColorSvg.None;
}
}
function btnValidate_click()
{
var blackDotIdsArrayTd5 = ['id_ellipse5', 'id_ellipse6', 'id_ellipse9', 'id_ellipse10'];
var redDotIdsArrayTd5 = ['id_ellipse7', 'id_ellipse8', 'id_ellipse11', 'id_ellipse12'];
var nCorrectBlackDots = validateForBlackDotsRequiredTd('id_td5', blackDotIdsArrayTd5, redDotIdsArrayTd5);
var blackDotIdsArrayTd6 = new Array();
var redDotIdsArrayTd6 = ['id_ellipse13', 'id_ellipse14', 'id_ellipse17', 'id_ellipse18', 'id_ellipse15', 'id_ellipse16', 'id_ellipse19', 'id_ellipse20'];
validateForBlackDotsRequiredTd('id_td6', blackDotIdsArrayTd6, redDotIdsArrayTd6);
var blackDotIdsArrayTd7 = new Array();
var redDotIdsArrayTd7 = ['id_ellipse21', 'id_ellipse22', 'id_ellipse25', 'id_ellipse26', 'id_ellipse23', 'id_ellipse24', 'id_ellipse27', 'id_ellipse28'];
validateForBlackDotsRequiredTd('id_td7', blackDotIdsArrayTd7, redDotIdsArrayTd7);
var blackDotIdsArrayTd8 = ['id_ellipse29', 'id_ellipse30', 'id_ellipse33', 'id_ellipse34'];
var redDotIdsArrayTd8 = ['id_ellipse31', 'id_ellipse32', 'id_ellipse35', 'id_ellipse36'];
var nCorrectRedDots = validateForRedDotsRequiredTd('id_td8', blackDotIdsArrayTd8, redDotIdsArrayTd8);
var allEllipseIdsArrayInSet1Set2 = ['id_ellipse1', 'id_ellipse2', 'id_ellipse3', 'id_ellipse4'];
var correctEllipseIdsArrayInSet1Set2 = ['id_ellipse2', 'id_ellipse3'];
var eTd6 = document.getElementById('id_td6');
var isTd6GreenColored = (eTd6.style.backgroundColor == 'green');
var eTd7 = document.getElementById('id_td7');
var isTd7GreenColored = (eTd7.style.backgroundColor == 'green');
var nCorrectEllipses = s_svg_validateEllipses(allEllipseIdsArrayInSet1Set2, correctEllipseIdsArrayInSet1Set2);
if ((nCorrectEllipses == 2) && (nCorrectBlackDots == 4) && (nCorrectRedDots == 4) && isTd6GreenColored && isTd7GreenColored)
{
s_show_claps_animation('s_id_div_message');
}
}
function validateForBlackDotsRequiredTd(id_td, blackDotIdsArrayTd, redDotIdsArrayTd)
{
if (id_td == 'id_td5')
{
var nCorrectBlackDots = 0;
}
for (var indexEllipse = 0; indexEllipse < blackDotIdsArrayTd.length; indexEllipse++)
{
var id_ellipse = blackDotIdsArrayTd[indexEllipse];
var eEllipse = document.getElementById(id_ellipse);
if (eEllipse.circleColor != CircleColorSvg.Black)
{
var eTd = document.getElementById(id_td);
eTd.style.backgroundColor = 'red';
return;
}
nCorrectBlackDots ++;
}
for (var indexEllipse = 0; indexEllipse < redDotIdsArrayTd.length; indexEllipse++)
{
var id_ellipse = redDotIdsArrayTd[indexEllipse];
var eEllipse = document.getElementById(id_ellipse);
if (eEllipse.circleColor != CircleColorSvg.None)
{
var eTd = document.getElementById(id_td);
eTd.style.backgroundColor = 'red';
return;
}
}
var eTd = document.getElementById(id_td);
eTd.style.backgroundColor = 'green';
if (id_td == 'id_td5')
{
return (nCorrectBlackDots);
}
}
function validateForRedDotsRequiredTd(id_td, blackDotIdsArrayTd, redDotIdsArrayTd)
{
if (id_td == 'id_td8')
{
var nCorrectRedDots = 0;
}
for (var indexEllipse = 0; indexEllipse < redDotIdsArrayTd.length; indexEllipse++)
{
var id_ellipse = redDotIdsArrayTd[indexEllipse];
var eEllipse = document.getElementById(id_ellipse);
if (eEllipse.circleColor != CircleColorSvg.Red)
{
var eTd = document.getElementById(id_td);
eTd.style.backgroundColor = 'red';
return;
}
nCorrectRedDots++;
}
for (var indexEllipse = 0; indexEllipse < blackDotIdsArrayTd.length; indexEllipse++)
{
var id_ellipse = blackDotIdsArrayTd[indexEllipse];
var eEllipse = document.getElementById(id_ellipse);
if (eEllipse.circleColor != CircleColorSvg.None)
{
var eTd = document.getElementById(id_td);
eTd.style.backgroundColor = 'red';
return;
}
}
var eTd = document.getElementById(id_td);
eTd.style.backgroundColor = 'green';
if (id_td == 'id_td8')
{
return (nCorrectRedDots);
}
}
function btnPrevious_click()
{
window.location = 'LevelBCat1Lesson20.html';
}
function btnNext_click()
{
window.location = 'LevelBCat1Lesson22.html';
}
function btnHome_click()
{
s_btnHomeCategories_click('LevelB');
}
function page_onResize()
{
for (var nthTd = 1; nthTd <= 8; nthTd++)
{
var eTd = document.getElementById('id_td' + nthTd);
var eTdRectangle = eTd.getBoundingClientRect();
var eCanvas = document.getElementById('id_svg' + nthTd);
eCanvas.style.left = eTdRectangle.left + 'px';
eCanvas.style.top = eTdRectangle.top + 'px';
}
}
</script>
</head>
<body onLoad="page_onLoad()" onResize="page_onResize()">
<div id="s_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 height="20%">
<td align="center" style="padding-bottom: 0px">
<table id="id_table1" width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr height="20%">
<td id="id_td_text1" class="s_style_textBlack" style="padding-left:2%">Circle the full <span id="id_td_text2" class="s_style_textRed">match </span> box:</td>
</tr>
<tr>
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="id_td1" width="50%" style="text-align:center">
<img id="id_imgEmptyMatchBox1" src="../../../img/LevelB/Category1/LevelBCat1Lesson21/emptyMatchBox.png" width="30%" draggable="false">
<svg id="id_svg1">
<ellipse id="id_ellipse1" cx="49%" cy="50%" rx="15%" ry="40%" style="stroke:transparent; fill:transparent"/>
</svg>
</td>
<td id="id_td2" width="50%" style="text-align:center">
<img id="id_imgFullMatchBox1" src="../../../img/LevelB/Category1/LevelBCat1Lesson21/fullMatchBox.png" width="30%" draggable="false">
<svg id="id_svg2">
<ellipse id="id_ellipse2" cx="49%" cy="50%" rx="15%" ry="40%" style="stroke:transparent; fill:transparent"/>
</svg>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="20%">
<td align="center" style="padding-bottom: 0px">
<table id="id_table2" width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr height="20%">
<td id="id_td_text3" class="s_style_textBlack" style="padding-left:2%">Circle the empty <span id="id_td_text4" class="s_style_textRed">match</span> box:</td>
</tr>
<tr>
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="id_td3" width="50%" style="text-align:center">
<img id="id_imgEmptyMatchBox2" src="../../../img/LevelB/Category1/LevelBCat1Lesson21/emptyMatchBox.png" width="30%" draggable="false">
<svg id="id_svg3">
<ellipse id="id_ellipse3" cx="49%" cy="50%" rx="15%" ry="40%" style="stroke:transparent; fill:transparent"/>
</svg>
</td>
<td id="id_td4" width="50%" style="text-align:center">
<img id="id_imgFullMatchBox2" src="../../../img/LevelB/Category1/LevelBCat1Lesson21/fullMatchBox.png" width="30%" draggable="false">
<svg id="id_svg4">
<ellipse id="id_ellipse4" cx="49%" cy="50%" rx="15%" ry="40%" style="stroke:transparent; fill:transparent"/>
</svg>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="30%">
<td align="center" style="padding-bottom: 0px">
<table id="id_table3" width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr height="13%">
<td id="id_td_text5" class="s_style_textBlack" style="border-bottom:none; padding-left:2%">Put black dots on man's <span id="id_td_text6" class="s_style_textRed">cheek</span>s:<span id="id_small_text1" class="s_style_textBlue"> [Click on both cheeks, 2 black & 2 red]</span>
</td>
</tr>
<tr>
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="id_td5" width="49%" align="center">
<img id="id_imgManCheeks1" src="../../../img/LevelB/Category1/LevelBCat1Lesson21/manCheeks.png" width="40%" draggable="false">
<svg id="id_svg5">
<ellipse id="id_ellipse5" cx="41%" cy="46%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse6" cx="45%" cy="49%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse7" cx="41%" cy="53%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse8" cx="44%" cy="56%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse9" cx="56%" cy="49%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse10" cx="59%" cy="45%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse11" cx="60%" cy="52%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse12" cx="57%" cy="56%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
</svg>
</td>
<td width="*"> </td>
<td id="id_td6" width="49%" align="center">
<img id="id_imgWomenCheeks1" src="../../../img/LevelB/Category1/LevelBCat1Lesson21/womenCheeks.png" width="40%" draggable="false">
<svg id="id_svg6">
<ellipse id="id_ellipse13" cx="39%" cy="57%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse14" cx="43%" cy="59%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse15" cx="40%" cy="64%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse16" cx="44%" cy="65%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse17" cx="56%" cy="60%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse18" cx="60%" cy="57%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse19" cx="59%" cy="64%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse20" cx="56%" cy="68%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
</svg>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="*">
<td align="center">
<table id="id_table4" width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr height="13%">
<td id="id_td_text7" class="s_style_textBlack" style="border-bottom:none; padding-left:2%">Put red dots on women's <span id="id_td_text8" class="s_style_textRed">cheek</span>s:<span id="id_small_text2" class="s_style_textBlue"> [Click on both cheeks, 2 black & 2 red]</span>
</td>
</tr>
<tr>
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="id_td7" width="49%" align="center">
<img id="id_imgManCheeks2" src="../../../img/LevelB/Category1/LevelBCat1Lesson21/manCheeks.png" width="40%" draggable="false">
<svg id="id_svg7">
<ellipse id="id_ellipse21" cx="41%" cy="46%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse22" cx="45%" cy="49%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse23" cx="41%" cy="53%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse24" cx="44%" cy="56%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse25" cx="56%" cy="49%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse26" cx="59%" cy="45%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse27" cx="60%" cy="52%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse28" cx="57%" cy="56%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
</svg>
</td>
<td width="*"> </td>
<td id="id_td8" width="49%" align="center">
<img id="id_imgWomenCheeks2" src="../../../img/LevelB/Category1/LevelBCat1Lesson21/womenCheeks.png" width="40%" draggable="false">
<svg id="id_svg8">
<ellipse id="id_ellipse29" cx="39%" cy="57%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse30" cx="43%" cy="59%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse31" cx="40%" cy="64%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse32" cx="44%" cy="65%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse33" cx="56%" cy="60%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse34" cx="60%" cy="57%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse35" cx="59%" cy="64%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
<ellipse id="id_ellipse36" cx="56%" cy="68%" rx="1.5%" ry="3%" style="stroke:transparent; fill:transparent"/>
</svg>
</td>
</tr>
</table>
</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>