| Server IP : 79.136.114.73 / Your IP : 18.117.80.241 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/Category1/ |
Upload File : |
<!doctype html>
<html>
<head>
<title>apWordsPage</title>
<script type="text/javascript" src="../../../js/allScriptsForLessonsHtml.js"></script>
<style type="text/css">
td.properties
{
width:65px;
height:65px;
text-align:center;
}
canvas
{
border:0px solid #d3d3d3;
position:absolute;
display:none;
}
span
{
font-family: questrial;
font-size:25px;
text-align:center;
}
</style>
<script>
var isNoteDisplayed = false;
function page_preLoad()
{
setPageImages();
shared_setHeaderTable('id_tblHeader', shared_title_page, shared_getSubTitle(Level.A, Category.No1, 4), true, true);
shared_setFooterTable('id_tblFooter', true, true, true, true, true);
}
function page_onLoad()
{
shared_set_debugInfo(Level.A, Category.No1);
shared_set_tblMainiPadBodyWidthHeight('id_tblMainiPadBody', 'id_meta');
getTableSection2('id_tblSection2');
setSuffleWords();
drawCirclesOnLoad();
}
function setPageImages()
{
var imagePath = '../../../img/LevelA/Category1/LevelACat1Lesson4/';
shared_setImageSource('id_img_apTable', imagePath, 'apTable.png');
}
function btnPrevious_click()
{
window.location = "LevelACat1Lesson3.html";
}
function btnNext_click()
{
window.location = "LevelACat1Lesson5.html";
}
function btnHome_click()
{
shared_btnHomeCategories_click('LevelA');
}
function btnValidate_click()
{
var idStartSuffix = 1;
var idEndSuffix = 54;
var id;
if (!(isNoteDisplayed))
{
for (id = idStartSuffix; id <= idEndSuffix; id++)
{
var eCanvas = document.getElementById('id_canvas' + id);
var eSpan = document.getElementById('id_span' + id);
var text = eSpan.textContent;
var isApSuffixedText = (text.search("ap") != -1);
var isCircled = (eCanvas.style.display == 'block');
if ((isApSuffixedText && !(isCircled)) || (!(isApSuffixedText) && isCircled))
{
isNoteDisplayed = true;
shared_show_message_info('Words missed', "There are few more 'ap' words are missed. Please check it once again!", MessageOption.OK);
//alert("There are few more 'ap' words missed. Check it once again!");
return;
}
}
}
var isAllAreCorrect = true;
for (id = idStartSuffix; id <= idEndSuffix; id++)
{
var eCanvas = document.getElementById('id_canvas' + id);
var eSpan = document.getElementById('id_span' + id);
var text = eSpan.textContent;
var isApSuffixedText = (text.search("ap") != -1);
var isCircled = (eCanvas.style.display == 'block');
if ((isApSuffixedText && isCircled) || (!(isApSuffixedText) && !(isCircled)))
{
eCanvas.parentNode.style.backgroundColor = shared_colorGreen;
}
else
{
eCanvas.parentNode.style.backgroundColor = shared_colorRed;
isAllAreCorrect = false;
}
}
if (isAllAreCorrect == true)
{
shared_show_claps_animation('shared_id_div_claps_image');
}
}
function drawCirclesOnLoad()
{
for (var canvasId = 1; canvasId <= 54; canvasId++)
{
drawCircleFromId('id_canvas' + canvasId, 'id_word_' + canvasId);
}
}
function drawCircleFromId(id_canvas, id_word)
{
var eTd = document.getElementById(id_word);
var eTdRectangle = eTd.getBoundingClientRect();
var eCanvas = document.getElementById(id_canvas);
eTd.style.backgroundColor = '#FFB84D';//Light orange
var minWidthOrHeight = eTdRectangle.width < eTdRectangle.height ? eTdRectangle.width : eTdRectangle.height;
eCanvas.style.left = eTdRectangle.left + 'px';
eCanvas.style.top = eTdRectangle.top + 'px';
eCanvas.textAlign = 'center';
eCanvas.width = eTdRectangle.width;
eCanvas.height = eTdRectangle.height;
var radious = minWidthOrHeight / 2.5;
var eCanvasContext = eCanvas.getContext('2d');
eCanvasContext.beginPath();
eCanvasContext.arc(eCanvas.width/2, eCanvas.height/2, radious, 0, 2*Math.PI);
eCanvasContext.strokeStyle = 'blue';
eCanvasContext.lineWidth = 2;
eCanvasContext.stroke();
}
function tdWord_click(idCanvas)
{
var eCanvas = document.getElementById(idCanvas);
eCanvas.style.display = (eCanvas.style.display == 'block')? 'none' : 'block';
var eTd = document.getElementById(idCanvas.replace('id_canvas', 'id_word_'));
var eTdRectangle = eTd.getBoundingClientRect();
eCanvas.style.left = eTdRectangle.left + 'px';
eCanvas.style.top = eTdRectangle.top + 'px';
}
function getWords()
{
var arrayOfWords = new Array('cat', 'lap', 'fan', 'lap', 'pan', 'fat', 'van', 'gap', 'fan',
'rap', 'can', 'nap', 'cap', 'sat', 'map', 'man', 'pat', 'tap',
'man', 'sap', 'mat', 'rap', 'fan', 'lap', 'pan', 'cap', 'tan',
'nap', 'bat', 'rat', 'can', 'nap', 'man', 'sap', 'fan', 'nap',
'mat', 'rap', 'fan', 'lap', 'pan', 'cat', 'lap', 'tap', 'pat',
'lap', 'pan', 'fat', 'van', 'gap', 'fan', 'rap', 'can', 'bat');
return (arrayOfWords);
}
function setSuffleWords()
{
var idStart = 1;
var idEnd = 54;
var arrayOfWords = getWords();
var shuffledArray = getShuffledArray(arrayOfWords);
for (var id = idStart; id <= idEnd; id++)
{
var eSpan = document.getElementById('id_span' + id);
eSpan.innerText = shuffledArray[id-1];
}
}
function getShuffledArray(pArray)
{
for(var j, x, i = pArray.length; i; j = Math.floor(Math.random() * i), x = pArray[--i], pArray[i] = pArray[j], pArray[j] = x);
return (pArray);
}
function getTableSection2(idDivTable)
{
var table = "";
var nthWord = 1;
table += '<table id="id_tblSection2" class="properties_border" width="100%" height="100%" border="0" cellspacing="5" cellpadding="0">';
for (var rowNo = 1; rowNo <= 6; rowNo++)
{
table += '<tr>';
table += '<td style="border-top:none"> </td>';
for (var columnNo = 1; columnNo <= 9; columnNo++)
{
var tdId = 'id_word_' + nthWord;
var canvasId = 'id_canvas' + nthWord;
var spanId = 'id_span' + nthWord;
table += '<td id="' + tdId + '" class="properties" onClick="tdWord_click(\'' + canvasId + '\')">';
table += '<span id="' + spanId + '"><strong>cat</strong></span>';
table += '<canvas id="' + canvasId + '"></canvas>';
table += '</td>';
nthWord++;
}
table += '<td> </td>';
table += '</tr>';
}
table += ' </table>';
document.getElementById(idDivTable).innerHTML = table;
}
</script>
</head>
<body onLoad="page_onLoad()">
<div id="shared_id_div_claps_image">
</div>
<div id="shared_id_div_message">
</div>
<table id="id_tblMainiPadBody" border="1px" 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%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table id="id_tblSection1" width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr height="5%">
<td class="shared_style_text1">
<u>Learn to read and write the following words:</u>
</td>
</tr>
<tr height="30%">
<td align="center" valign="middle" style="border-top:none">
<img id="id_img_apTable" width="60%" height="60%" alt=""/>
</td>
</tr>
<tr height="10%">
<td class="shared_style_text1" style="border-bottom: 0px">
<u>Circle the "ap" words (Touch it):</u>
</td>
</tr>
<tr height="*">
<td valign="top" style="border-collapse: collapse; border-top:none">
<table id="id_tblSection2" class="properties_border" width="100%" border="0" cellspacing="5" cellpadding="0">
</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();
</script>
</body>
</html>