<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Image map</title>
<!--
How to install the image map:
Copy and paste the img, map and area blocks into the body of your page.

This imagemap is created at Mobilefish.com.
https://www.mobilefish.com/services/image_map/image_map.php
-->

<script type=text/javascript>
var score=0, goes=0;
var pos=['33,342','390,342','950,342','1181,342','278,726','273,900','453,663','1181,726'];
var xpos=['33,342','390,342','950,342','1181,342','278,726','273,900','453,663','1181,726'];
var calledcount=0;

function amiright(ao) {
var bitswrong=false, found=false, prefix='', suffix='', ii=0, jj=0, origscore=score, veryorigscore=score, ansalt='';
var ans=prompt('What is your guess about the type of bird? Cancel to give up.', '');
if (ans == null) {
goes++;
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
if (('' + ao.id).replace(/null/g,'').replace(/undefined/g,'') != '') {
if (eval('' + pos.length) > eval('' + ao.id.replace('a',''))) {
if (xpos[eval('' + ao.id.replace('a',''))] != '') { xpos[eval('' + ao.id.replace('a',''))]=''; calledcount++; }
}
}
alert('' + ao.alt);
} else {
var yourw=ans.split(' ');
var youra=ao.alt.split(' ');
ansalt=ans;
goes++;
for (ii=0; ii<yourw.length; ii++) {
origscore=score;
for (jj=0; jj<youra.length; jj++) {
if ((' ' + youra[jj] + ' ').toLowerCase().replace(/s$/g,'').replace(/\'/g,'').replace(/\-/g,'').indexOf(yourw[ii].toLowerCase().replace(/s$/g,'').replace(/\'/g,'').replace(/\-/g,'')) == 1 && ('' + youra[jj] + '').toLowerCase().replace(/s$/g,'').replace(/\'/g,'').replace(/\-/g,'').length == yourw[ii].toLowerCase().replace(/s$/g,'').replace(/\'/g,'').replace(/\-/g,'').length) {
score++;
if (ii != jj) {
if (ii == 0 && prefix == '') {
prefix='? ';
} else if (ii == eval(-1 + yourw.length) && suffix == '') {
suffix=' ?';
}
bitswrong=true;
}
//alert('2;' + ii + ' ' + jj + ' ... ' + youra.length);
} else if (origscore == score && jj == eval(-1 + youra.length)) {
//alert('' + ii + ' ' + jj);
if (ii == 0 && prefix == '') { prefix='? '; }
if (ii == eval(-1 + yourw.length) && suffix == '') { suffix=' ?'; }
bitswrong=true;
}
}
}

if (veryorigscore == score && bitswrong) {
if (('' + youra.length) == '1') {
ansalt='';
prefix='?';
suffix='';
} else {
ansalt='';
prefix='??';
suffix='';
}
}

document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
if (!bitswrong) {
if (('' + ao.id).replace(/null/g,'').replace(/undefined/g,'') != '') {
if (eval('' + pos.length) > eval('' + ao.id.replace('a',''))) {
document.getElementById('db').innerHTML+='<span style="text-shadow:-1px 1px 1px rgba(255,45,149,0.7);z-index:299;background-color:white;position:absolute;left:' + pos[eval('' + ao.id.replace('a',''))].replace(',','px;top:') + 'px;">' + ao.alt + '</span>';
found=true;

if (xpos[eval('' + ao.id.replace('a',''))] != '') { xpos[eval('' + ao.id.replace('a',''))]=''; calledcount++; }

}
}
} else if (bitswrong) {
var rect=ao.getBoundingClientRect();
rect.left=eval('' + ao.coords.split(',')[0]);
rect.top=eval('' + ao.coords.split(',')[1]);
rect.width=eval(eval('' + ao.coords.split(',')[2]) - eval('' + ao.coords.split(',')[0]));
rect.height=eval(eval('' + ao.coords.split(',')[3]) - eval('' + ao.coords.split(',')[1]));
rect.bottom=eval(eval('' + rect.height) + eval('' + ao.coords.split(',')[1]));
rect.right=eval(eval('' + rect.width) + eval('' + ao.coords.split(',')[0]));

console.log(rect);
if (('' + ao.id).replace(/null/g,'').replace(/undefined/g,'') != '') {
if (eval('' + pos.length) > eval('' + ao.id.replace('a',''))) {
document.getElementById('db').innerHTML+='<span style="text-shadow:-1px 1px 1px rgba(255,45,149,0.7);z-index:99;opacity:0.7;background-color:white;position:absolute;left:' + pos[eval('' + ao.id.replace('a',''))].replace(',','px;top:') + 'px;">' + prefix + ansalt + suffix + '</span>';
found=true;
}
}
if (!found) {
if ((' ' + ao.alt + ' ').toLowerCase().indexOf(' monarch') != -1) {
document.getElementById('db').innerHTML+='<span style="text-shadow:-1px 1px 1px rgba(255,45,149,0.7);z-index:99;opacity:0.7;background-color:white;position:absolute;bottom:' + eval(eval('' + document.body.style.zoom) * eval('' + rect.bottom)) + 'px;right:' + eval(eval('' + document.body.style.zoom) * eval('' + rect.right)) + 'px;">' + prefix + ansalt + suffix + '</span>';
} else {
document.getElementById('db').innerHTML+='<span style="text-shadow:-1px 1px 1px rgba(255,45,149,0.7);z-index:99;opacity:0.7;background-color:white;position:absolute;bottom:' + eval(eval('' + document.body.style.zoom) * eval('' + rect.bottom)) + 'px;left:' + eval(eval('' + document.body.style.zoom) * eval('' + rect.left)) + 'px;">' + prefix + ansalt + suffix + '</span>';
}
}
}
}

if (calledcount >= 7 && document.getElementById('myimg').src.indexOf('.jpeg') != -1) {
document.getElementById('myimg').src=document.getElementById('myimg').src.replace('.jpeg','.jpg');
if (score > 0) { alert('Well done!'); }
setTimeout(function(){
var sps=document.getElementsByTagName('span');
for (var isp=0; isp<sps.length; isp++) {
sps[isp].innerHTML='';
}
}, 10000);
}
}

function changeit(osel) {
if ((document.URL.split('?')[0].split('#')[0] + '#').indexOf(osel.value + '#') == -1) {
location.href=osel.value;
}
}

</script>

</head>
<body style="zoom:0.6;">

<table style=width:100%;><tr><td>
<!-- START COPY -->
<img id=myimg src="birdyquiz.jpeg" usemap="#sa679892" width="1494" height="989" alt="click map" border="0" />
<map id="sa679892" name="sa679892">
<!-- Region 1 -->
<area id=a0 shape="rect" alt="Brahminy KITE" data-title="Brahminy KITE" coords="8,5,374,370" data-href="#" data-target="_blank" onclick="amiright(this);" />
<!-- Region 2 -->
<area id=a1 shape="rect" alt="Grey GOSHAWK" data-title="Grey GOSHAWK" coords="374,5,930,370" data-href="#" data-target="_blank" onclick="amiright(this);" />
<!-- Region 3 -->
<area id=a2 shape="rect" alt="Tawny FROGMOUTH" data-title="Tawny FROGMOUTH" coords="930,5,1164,370" data-href="#" data-target="_blank" onclick="amiright(this);" />
<!-- Region 4 -->
<area id=a3 shape="rect" alt="MAGPIE" data-title="MAGPIE" coords="1164,5,1500,370" data-href="#" data-target="_blank" onclick="amiright(this);" />
<!-- Region 5 -->
<area id=a4 shape="rect" alt="Barred CUCKOO-SHRIKE" data-title="Barred CUCKOO-SHRIKE" coords="5,680,374,1120" data-href="#" data-target="_blank" onclick="amiright(this);" />
<!-- Region 6 -->
<area id=a5 shape="rect" alt="Olive-backed ORIOLE" data-title="Olive-backed ORIOLE" coords="374,781,613,1120" data-href="#" data-target="_blank" onclick="amiright(this);" />
<!-- Region 7 -->
<area id=a6 shape="rect" alt="Spangled DRONGO" data-title="Spangled DRONGO" coords="8,370,1500,680" data-href="#" data-target="_blank" onclick="amiright(this);" />
<!-- Region 8 -->
<area id=a7 shape="rect" alt="Australasian FIGBIRD" data-title="Australasian FIGBIRD" coords="613,781,1500,1120" data-href="#" data-target="_blank" onclick="amiright(this);" />
<area shape="default" nohref alt="" />
</map>
<!-- END COPY -->
</td><td style=vertical-align:top;>
<h1 title='Thanks to my sister for photos. Extra points for multi-worded answers if they are correct. Hover below for hint.'>Bird Quiz</h1>
<select size=2 onchange=changeit(this);><option value='bird_quiz.htm' selected>Out and About</option><option value='bird_quiz.html'>Bird Bath</option></select>
<h2 title='Her property is west of Kenmore in Brisbane, Queensland, Australia.'>RJM Programming - March, 2026</h2>
<h2 id=score>Score: 0/0 ... click on a bird to identify</h2>
</td>
</tr></table>
<div id=db></div>
</body>
</html>