| 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/OLD/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">
.textFont
{
padding-left: 10px;
font-size: 20px;
font-family: "Arial Rounded MT Bold";
font-style: italic;
color: #000;
}
.textFontSmall
{
padding-left: 10px;
font-size: 15px;
font-family: "Arial Rounded MT Bold";
font-style: italic;
color: blue;
}
.textColourRed
{
color: #F00;
}
svg
{
position: absolute;
background-color: transparent;
}
</style>
<script>
function page_load()
{
shared_set_debugInfo(Level.B, Category.No1);
shared_set_tblMainiPadBodyWidthHeight('id_tblMainiPadBody', 'id_meta');
shared_setHeaderTable('id_tblHeader', shared_title_page, shared_getSubTitle(Level.B, Category.No1, 21), true, true);
shared_setFooterTable('id_tblFooter', true, true, true, true, true);
setPageImages();
setAllSvgsWidthHeightAndPositionFromTds();
setAllEllipseStyles();
}
function setPageImages()
{
var imagesPath = '../../../img/LevelB/Category1/LevelBCat1Lesson21/';
shared_setImageSource('id_imgEmptyMatchBox1', imagesPath, 'emptyMatchBox.png');
shared_setImageSource('id_imgFullMatchBox1', imagesPath, 'fullMatchBox.png');
shared_setImageSource('id_imgEmptyMatchBox2', imagesPath, 'emptyMatchBox.png');
shared_setImageSource('id_imgFullMatchBox2', imagesPath, 'fullMatchBox.png');
shared_setImageSource('id_imgManCheeks1', imagesPath, 'manCheeks.png');
shared_setImageSource('id_imgWomenCheeks1', imagesPath, 'womenCheeks.png');
shared_setImageSource('id_imgManCheeks2', imagesPath, 'manCheeks.png');
shared_setImageSource('id_imgWomenCheeks2', imagesPath, 'womenCheeks.png');
}
function setAllSvgsWidthHeightAndPositionFromTds()
{
var nTds = 8;
for (var nthTd = 1; nthTd <= nTds; nthTd++)
{
shared_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];
shared_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];
shared_svg_showHideEllipsesMultipleFor1Td(id_ellipse, allGroupsIdsArrayArray);
}
else if (eEllipse.defaultDotColor == CircleColorSvg.Black)
{
shared_svg_setEllipseBorderBlackIfisValidatedIsFalse(eEllipse);
shared_svg_setEllipseFillBlackTransparentIfisValidatedIsFalse(eEllipse);
eEllipse.circleColor = CircleColorSvg.Black;
}
else if (eEllipse.defaultDotColor == CircleColorSvg.Red)
{
shared_svg_setEllipseBorderRedIfisValidatedIsFalse(eEllipse);
shared_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 = shared_svg_validateEllipses(allEllipseIdsArrayInSet1Set2, correctEllipseIdsArrayInSet1Set2);
if ((nCorrectEllipses == 2) && (nCorrectBlackDots == 4) && (nCorrectRedDots == 4) && isTd6GreenColored && isTd7GreenColored)
{
shared_show_claps_animation('shared_id_div_claps_image');
}
}
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()
{
shared_btnHomeCategories_click('LevelB');
}
</script>
</head>
<body onLoad="page_load()">
<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="20%">
<td align="center" style="padding-bottom: 0px">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr height="20%">
<td class="textFont">Circle the full <span class="textColourRed">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">
<svg id="id_svg1">
<ellipse id="id_ellipse1" cx="49%" cy="50%" rx="50" ry="50"/>
</svg>
</td>
<td id="id_td2" width="50%" style="text-align:center">
<img id="id_imgFullMatchBox1">
<svg id="id_svg2">
<ellipse id="id_ellipse2" cx="49%" cy="50%" rx="50" ry="50"/>
</svg>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="20%">
<td align="center" style="padding-bottom: 0px">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr height="20%">
<td class="textFont">Circle the empty <span class="textColourRed">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">
<svg id="id_svg3">
<ellipse id="id_ellipse3" cx="49%" cy="50%" rx="50" ry="50"/>
</svg>
</td>
<td id="id_td4" width="50%" style="text-align:center">
<img id="id_imgFullMatchBox2">
<svg id="id_svg4">
<ellipse id="id_ellipse4" cx="49%" cy="50%" rx="50" ry="50"/>
</svg>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="30%">
<td align="center" style="padding-bottom: 0px">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr height="13%">
<td class="textFont">Put black dots on man's <span class="textColourRed">cheek</span>s:<span class="textFontSmall">[Click on both cheeks to display dots, 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%" style="padding-top: 5px; text-align:center">
<img id="id_imgManCheeks1" width="70%" height="95%">
<svg id="id_svg5">
<ellipse id="id_ellipse5" cx="35%" cy="49%" rx="8" ry="8"/>
<ellipse id="id_ellipse6" cx="40%" cy="53%" rx="8" ry="8"/>
<ellipse id="id_ellipse7" cx="35%" cy="57%" rx="8" ry="8"/>
<ellipse id="id_ellipse8" cx="38%" cy="64%" rx="8" ry="8"/>
<ellipse id="id_ellipse9" cx="60%" cy="53%" rx="8" ry="8"/>
<ellipse id="id_ellipse10" cx="65%" cy="49%" rx="8" ry="8"/>
<ellipse id="id_ellipse11" cx="64%" cy="57%" rx="8" ry="8"/>
<ellipse id="id_ellipse12" cx="62%" cy="64%" rx="8" ry="8"/>
</svg>
</td>
<td width="*"> </td>
<td id="id_td6" width="49%" style="padding-top: 7px; text-align:center">
<img id="id_imgWomenCheeks1" width="70%" height="95%">
<svg id="id_svg6">
<ellipse id="id_ellipse13" cx="31%" cy="61%" rx="8" ry="8"/>
<ellipse id="id_ellipse14" cx="37%" cy="64%" rx="8" ry="8"/>
<ellipse id="id_ellipse15" cx="33%" cy="69%" rx="8" ry="8"/>
<ellipse id="id_ellipse16" cx="37%" cy="74%" rx="8" ry="8"/>
<ellipse id="id_ellipse17" cx="60%" cy="65%" rx="8" ry="8"/>
<ellipse id="id_ellipse18" cx="66%" cy="62%" rx="8" ry="8"/>
<ellipse id="id_ellipse19" cx="64%" cy="69%" rx="8" ry="8"/>
<ellipse id="id_ellipse20" cx="61%" cy="75%" rx="8" ry="8"/>
</svg>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="*">
<td align="center">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr height="13%">
<td class="textFont">Put red dots on women's <span class="textColourRed">cheek</span>s:<span class="textFontSmall">[Click on both cheeks to display dots, 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%" style="padding-top: 5px; text-align:center">
<img id="id_imgManCheeks2" width="70%" height="95%">
<svg id="id_svg7">
<ellipse id="id_ellipse21" cx="35%" cy="49%" rx="8" ry="8"/>
<ellipse id="id_ellipse22" cx="40%" cy="53%" rx="8" ry="8"/>
<ellipse id="id_ellipse23" cx="35%" cy="57%" rx="8" ry="8"/>
<ellipse id="id_ellipse24" cx="38%" cy="64%" rx="8" ry="8"/>
<ellipse id="id_ellipse25" cx="60%" cy="53%" rx="8" ry="8"/>
<ellipse id="id_ellipse26" cx="65%" cy="49%" rx="8" ry="8"/>
<ellipse id="id_ellipse27" cx="64%" cy="57%" rx="8" ry="8"/>
<ellipse id="id_ellipse28" cx="62%" cy="64%" rx="8" ry="8"/>
</svg>
</td>
<td width="*"> </td>
<td id="id_td8" width="49%" style="padding-top: 7px; text-align:center">
<img id="id_imgWomenCheeks2" width="70%" height="95%">
<svg id="id_svg8">
<ellipse id="id_ellipse29" cx="31%" cy="61%" rx="8" ry="8"/>
<ellipse id="id_ellipse30" cx="37%" cy="64%" rx="8" ry="8"/>
<ellipse id="id_ellipse31" cx="33%" cy="69%" rx="8" ry="8"/>
<ellipse id="id_ellipse32" cx="37%" cy="74%" rx="8" ry="8"/>
<ellipse id="id_ellipse33" cx="60%" cy="65%" rx="8" ry="8"/>
<ellipse id="id_ellipse34" cx="66%" cy="62%" rx="8" ry="8"/>
<ellipse id="id_ellipse35" cx="64%" cy="69%" rx="8" ry="8"/>
<ellipse id="id_ellipse36" cx="61%" cy="75%" rx="8" ry="8"/>
</svg>
</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>
</body>
</html>