| Server IP : 79.136.114.73 / Your IP : 3.141.33.133 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_old7/Html/LevelA/Category1/ |
Upload File : |
<!doctype html>
<html>
<head>
<title>'ap' words</title>
<script type="text/javascript" src="../../../js/allScriptsForLessonsHtml.js"></script>
<style type="text/css">
canvas
{
border:0px solid #d3d3d3;
position:absolute;
display:none;
}
span
{
font-family: questrial;
text-align:center;
}
table
{
border: 0px;
}
</style>
<script>
var isNoteDisplayed = false;
function page_preLoad()
{
shared_setDeviceTypeLevelCategoryLastLesson(Level.A, Category.No1);
shared_set_tblMainiPadBodyWidthHeight('id_tblMainiPadBody', 'id_meta');
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);
getTableSection2('id_div_Section2');
setSuffleWords();
drawCirclesOnLoad();
var ids_headings = ['id_td_text1', 'id_td_text2'];
var ids_texts = new Array();
for (var wordId = 1; wordId <= 54; wordId++)
{
ids_texts.push('id_word_' + wordId);
}
var ids_All = ids_headings.concat(ids_texts);
shared_adjust_fontSize_for_ids_all_devices(ids_All, 80);
var id_tables_array = ['id_table1', 'id_table2'];
shared_border_collapse_for_tables_except_android_and_IE(id_tables_array);
shared_setTablesHeightsForIE();
}
function page_onLoad()
{
}
function btnPrevious_click()
{
window.location = "LevelACat1Lesson03.html";
}
function btnNext_click()
{
window.location = "LevelACat1Lesson05.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', "Please check once again!", MessageOption.OK);
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();
var pScrolledXY = shared_getScrolledXY();
eCanvas.style.left = eTdRectangle.left + pScrolledXY.x + 'px';
eCanvas.style.top = eTdRectangle.top + pScrolledXY.y + '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;
var tableHeight = shared_dataTableHeight / 2.2;
var cellSpacing = shared_dataTableWidth / 70;
var tdHeightWidth = (tableHeight - (7 * cellSpacing)) / 6.0;
table += '<table id="id_tblSection2" class="shared_style_cellspacing_1_percent_IE" width="100%" height="' + tableHeight + '" border="0" cellspacing="' + cellSpacing + '" cellpadding="0">';
for (var rowNo = 1; rowNo <= 6; rowNo++)
{
table += '<tr>';
table += '<td> </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 + '" width="' + tdHeightWidth + '" height="' + tdHeightWidth + '" onClick="tdWord_click(\'' + canvasId + '\')" style="text-align:center">';
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="8%">
<td>
<div id="id_tblHeader"></div>
</td>
</tr>
<tr height="*" hieghtForIE="84%" data-role="page"> <!-- for swiping left and right especially for Android device -->
<td>
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="2%">
<tr height="40%">
<td style="padding-bottom:0px">
<table id="id_table1" width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr height="10%">
<td id="id_td_text1" class="shared_style_options_blue_24px_bold" align="left" style="border-bottom:none">
<u>Learn to read and write the following words:</u>
</td>
</tr>
<tr height="*" hieghtForIE="90%">
<td align="center" valign="middle" style="border-top:none">
<img id="id_img_apTable" src="../../../img/LevelA/Category1/LevelACat1Lesson04/apTable.png" width="50%" alt="" draggable="false"/>
</td>
</tr>
</table>
</td>
</tr>
<tr height="*" hieghtForIE="59.5%">
<td>
<table id="id_table2" width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr height="10%">
<td id="id_td_text2" class="shared_style_options_blue_24px_bold" align="left" valign="middle" style="border-bottom:none">
<u>Circle the "ap" words (Touch it):</u>
</td>
</tr>
<tr height="* "hieghtForIE="80%">
<td align="center" valign="middle" style="border-top:none">
<div id="id_div_Section2"></div>
</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>