<html>
<head>
<meta charset="UTF-8"/>
<title>Grid Layout - RJM Programming - October, 2026</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: dodgerblue;
padding: 10px;
}
.container div {
background-color: #f1f1f1;
border: 1px solid black;
padding: 10px;
font-size: 30px;
text-align: center;
}
</style>
<script type=text/javascript>
var postdiv='', woo=null, lastval='';
var score=0, goes=0, forans='';
var qs=["What is the tallest mountain on the South Island (and all of New Zealand)?",
"What is the largest lake located on the South Island?",
"In what year were the North Island and South Island officially named?",
"Which famous historic church sits on the edge of Lake Tekapo?",
"Which body of water separates the South Island from Stewart Island?",
"What famous steamship cruises across Lake Wakatipu in Queenstown?",
"Which limestone rock formations are a major tourist stop on the West Coast?",
"What words could describe the character of the kea bird?",
"What weight of wool in kilograms was Shrek as he exited the cave near Bendigo Station in 2004?",
"What varietal of wine is grown in Central Otago?",
"Is Cromwell's Big Fruit larger than Robertson's Big Potato?",
"Is Lake Wanaka deeper than Sydney Harbour?",
"Is Clutha River deeper than Sydney Harbour?",
"What is the Māori name for New Zealand greenstone?",
"In which river of the 1860s Otago gold rush was most gold found?",
"Does New Zealand have a longer coastline than China?",
"What sport do the All Whites play?",
"What year were the All Blacks rugby team last beaten at Eden Park, here in October, 2026?",
"If 73.6 million people, as of October 2026, live between latitude 45°N and 46°N how many million to nearest whole number live between latitude 45°S and 90°S?"];

var as=["Aoraki / Mount Cook, standing at 3,724 meters",
"Lake Te Anau",
"2013",
"The Church of the Good Shepherd (built in 1935)",
"Foveaux Strait",
"The TSS Earnslaw",
"The Pancake Rocks at Punakaiki",
"Intelligent inquisitive cheeky mischievous playful",
"27",
"Pinot Noir",
"Yes",
"Yes",
"No",
"pounamu",
"Shotover",
"yes",
"soccer",
"1994",
"1"];

function changeit(oin) {
if (oin.value.trim() != '') {
document.getElementById('mydiv').innerHTML='<div' + postdiv + '>' + oin.value.replace(/\,/g,'</div><div' + postdiv + '>') + '</div>';
oin.placeholder=oin.value;
}
}

function quizimgid(divo) {
var thisq=Math.floor(Math.random() * qs.length), wdsleft=0, ii=0, jj=0;
if (divo.innerHTML.indexOf('-') == 0) {
var ansis=prompt(qs[thisq], '');
if (ansis == null) { ansis=''; }
var wdsare=as[thisq].split(',')[0].split('(')[0].trim().replace(' / ',' ').replace(' at ',' ').toLowerCase().split(' ');
wdsleft=wdsare.length;
if (ansis.trim() != '') {
var qansare=ansis.toLowerCase().split(' ');
for (ii=0; ii<eval('' + qansare.length); ii++) {
for (jj=0; jj<eval('' + wdsare.length); jj++) {
if (wdsare[jj] == qansare[ii]) { wdsleft--; }
}
}
}
if (wdsleft > 0) {
forans=" <font size=1>(for answer " + as[thisq] + ")</font>";
} else {
forans=" <font size=6>(Congratulations!!)</font>";
}
document.getElementById('myh1').title='' + wdsleft;
} else {
divo.style.backgroundImage='url(//www.rjmprogramming.com.au/NZ/IMG_' + divo.innerHTML + '.jpeG)';
divo.style.backgroundSize='contain';
divo.style.backgroundRepeat='no-repeat';
if (woo) {
if (!woo.closed) {
woo.close();
woo=null;
}
}
woo=window.open('//www.rjmprogramming.com.au/PHP/read_exif_off_image_rotate.php?image=http://www.rjmprogramming.com.au/NZ/IMG_' + divo.innerHTML + '.jpeG', '_blank', 'top=100,left=' + eval(-800 + screen.width) + ',width=800,height=800');
}
}

function firstcheck() {
if (document.URL.indexOf('#') != -1) {
var lhlook=decodeURIComponent(document.URL.split('#')[1]);
if (document.URL.indexOf('quiz=') != -1) {
postdiv=location.search.split('quiz=')[1] ? decodeURIComponent(location.search.split('quiz=')[1].split('&')[0]).replace(/\+/g,' ') : '';
if (postdiv.indexOf('onclick') != -1 && postdiv.indexOf('quizimgid') == -1) {
postdiv=' style="cursor:help;" onclick="quizimgid(this);"';
}
if (lhlook == '') {
lhlook="4418,4419,-4420,4421,4422,-4423,-4424,4425,4426,4427,";
lhlook+="4428,4429,4430,4431,4432,4433,-4434,4435,4436,4437,";
lhlook+="4438,-4439,-4440,4441,4442,-4443,-4444,4445,4446,-4447,";
lhlook+="4448,4449,4450,4451,-4452,-4453,-4454,4455,4456,4457,";
lhlook+="-4458,-4459,-4460,-4461,4462,-4463,4464,4465,4466,4467,";
lhlook+="4468,4469,4470,4471,4472,4473,4474,4475,4476,-4477,";
lhlook+="-4478,4479,4480,-4481,4482,4483,-4484,-4485,-4486,-4487,";
lhlook+="4488,4489,4490,4491,4492,4493,4494,4495,4496,4497,";
lhlook+="4498,-4499,4500,4501,4502,-4503,-4504,4505,4506,4507,";
lhlook+="4508,4509,4510,4511,4512,4513,4514,4515,4516,4517,";
lhlook+="4518,4519,4520,4521,4522,4523,4524,4525,-4526,4527,";
lhlook+="4528,-4529,4530,4531";
}
}
document.getElementById('mylist').value=lhlook;
changeit(document.getElementById('mylist'));
if (document.URL.indexOf('quiz=') != -1) {
document.getElementById('subj').innerHTML='Scenery Geolocation Quiz ';
document.getElementById('mydiv').title='Click/tap an image number below.';
}
}
}

function myhonecheck() {
if (lastval != document.getElementById('myh1').title) {
score+=eval('' + document.getElementById('myh1').title);
goes++;
document.getElementById('subj').title='Scenery Geolocation Quiz scores are best when small.';
document.getElementById('subj').innerHTML='Scenery Geolocation Quiz <sup>Score: ' + score + '</sup>/<sub>' + goes + ' :Goes' + forans + '</sub> ';
forans='';
document.getElementById('myh1').title='';
setTimeout(function(){
if (('' + document.getElementById('myh1').getAttribute('data-title')) != '') {
window.open(document.getElementById('myh1').getAttribute('data-title'), '_blank', 'top=10,left=' + eval(-900 + screen.width) + ',width=900,height=800');
document.getElementById('myh1').setAttribute('data-title', '');
} else if (('' + document.getElementById('myh3').title) != '') {
//alert(document.getElementById('myh3').title);
window.open(document.getElementById('myh3').title, '_blank'); //, 'top=10,left=' + eval(-900 + screen.width) + ',width=900,height=800');
document.getElementById('myh3').title='';
}
}, 2000);
setTimeout(function(){
if (woo) {
if (!woo.closed) {
if (('' + woo.document.URL).indexOf('/GeoChart') == -1) {
woo.close();
woo=null;
}
}
}
}, 5000);
}
}

setInterval(myhonecheck, 3000);
</script>
</head>
<body onload=firstcheck();>

<h1 title='' id=myh1 data-title=''><span id=subj title=''>Months </span>Grid Layout</h1>
<h3 title='' id=myh3>RJM Programming - October, 2026 ... thanks to <a target=_blank title='W3schools help' href='https://www.w3schools.com/css/tryit.asp?filename=trycss_grid'>W3schools</a></h3>
<input title="Feel free to enter your own (CSV) data, comma separated, here." style=width:96%; onkeydown="document.getElementById('subj').innerHTML='';" type=text id=mylist onblur=changeit(this); value="" placeholder="January,February,March,April,May,June,July,August,September,October,November,December"></input>
<br><br>



<div id="mydiv" class="container" title="">
<div>January</div>
<div>February</div>
<div>March</div>
<div>April</div>
<div>May</div>
<div>June</div>
<div>July</div>
<div>August</div>
<div>September</div>
<div>October</div>
<div>November</div>
<div>December</div>
</div>

</body>
</html>