Here is a way to not need to use a database unless the images are not sequential or in individual directories
which you seem to imply they are by the code provided in the link of the last post.
There are TWO example of how the array could be set-up. Even if they are not sequential, the first array
could be modified by specifying the correct file names for the appropriate answer.
Note also that the directory selection could also be randomized with a bit of forthought.
<html>
<body>
<table border="1" width=50%">
<tr>
<td width="50%"> <div id="debugger1"></div> </td>
<td width="50%"> <div id="debugger2"></div>
</tr>
<tr>
<th><button onclick="testDisplay()">Test Display 1</button> </th>
<th> <button onclick="displayTest()">Display Test 2</button> </th>
</tr>
</table>
<script type="text/javascript">
// Suggested modifications for: http://www.webdeveloper.com/forum/showthread.php?273241-Aircraft-recognition-quiz&daysprune=30
var testData = [ ['uh-1 iroquois', '361','362','363','364','365'], // 5 images 361.jpg, 362.jpg, 363.jpg, 364.jpg, 365.jpg
['uh-60 black hawk', '366','367','368','369','370'],
['mi-8/17 hip', '371','372','373','374','375'],
['mi-14 haze', '376','377','378','379','380'],
['ch-53 stallion', '381','372','373','374','375'],
['puma', '386','377','378','379','390'],
['nh-90', '391','392','393','394','395'],
['aw101 merlin', '396','397','398','399','400'],
['mi-6 hook', '401','402','403','404','405'],
['mi-26 halo', '406','407','408','409','410'],
['sea king', '411','412','413','414','415'],
['gazelle', '416','417','418','419','420'],
['dauphin - panther', '421','422','423','424','435'],
['ch-46 sea knight', '426','427','428','429','430'],
['ch-47 chinook', '431','432','433','434','445'],
['a-109', '436','437','438','439','440'],
['lynx', '441','442','443','444','455'],
['mi-24 hind', '446','447','448','449','450'],
['mi-28 havoc', '451','452','453','454','465'],
['ah-1 cobra', '456','457','458','459','460'],
['ah-64 apache', '461','462','463','464','475'],
['tiger', '466','467','468','469','470'],
['a-129 mangusta', '471','472','473','474','485'],
['ka-50/52 hokum', '476','477','478','479','480'],
['ka-25 hormone', '481','482','483','484','495'],
['ka-27 helix', '486','487','488','489','490'],
['md 500 defender', '491','492','493','494','495'],
['bo-105', '496','497','498','499','500'],
['oh-58 kiowa', '501','502','503','504','505'] // No comma after final entry
];
function testDisplay() {
// http://www.driesgovaerts.be/heverlee/aircraft
imgDirs = './'; // ['./d1/','./d2/','./d3/']; // could select one of these with addition of some random pick logic
var q = Math.floor(Math.random()*testData.length); // form random question #
var qp = Math.floor(Math.random()*5); // form random question picture
var pix = imgDirs+testData[q][qp+1]+'.jpg'; // get image to display
var ans = testData[q][0]; // remember answer to question
var tarr = [];
tarr.push('Random Question: '+q);
tarr.push('Random Picture : '+qp);
tarr.push('Image : '+pix);
tarr.push('Answer: '+ans);
var obj = document.getElementById('debugger1');
obj.innerHTML = tarr.join('<br>');
}
var dataTest = [ ['uh-1 iroquois', '361'], // 5 images starting at 361.jpg, 362.jpg, 363.jpg, 364.jpg, 365.jpg
['uh-60 black hawk', '366'],
['mi-8/17 hip', '371'],
['mi-14 haze', '376'],
['ch-53 stallion', '381'],
['puma', '386'],
['nh-90', '391'],
['aw101 merlin', '396'],
['mi-6 hook', '401'],
['mi-26 halo', '406'],
['sea king', '411'],
['gazelle', '416'],
['dauphin - panther', '421'],
['ch-46 sea knight', '426'],
['ch-47 chinook', '431'],
['a-109', '436'],
['lynx', '441'],
['mi-24 hind', '446'],
['mi-28 havoc', '451'],
['ah-64 apache', '461'],
['tiger', '466'],
['a-129 mangusta', '471'],
['ka-50/52 hokum', '476'],
['ka-25 hormone', '481'],
['ka-27 helix', '486'],
['md 500 defender', '491'],
['bo-105', '496'],
['oh-58 kiowa', '501'] // No comma after final entry
];
function displayTest() {
imgDirs = './'; // ['./d1/','./d2/','./d3/']; // could select one of these with addition of some random pick logic
var q = Math.floor(Math.random()*dataTest.length); // form random question #
var qp = Math.floor(Math.random()*5); // form random question picture
var img = (Number(dataTest[q][1])+qp)+'.jpg'; // add random # to base for picture to display
var pix = imgDirs+img; // get image to display
var ans = dataTest[q][0]; // remember answer to question
var tarr = [];
tarr.push('Random Question: '+q);
tarr.push('Random Picture : '+qp);
tarr.push('Image : '+pix);
tarr.push('Answer: '+ans);
var obj = document.getElementById('debugger2');
obj.innerHTML = tarr.join('<br>');
}
</script>
</body>
</html>
Another concept you could apply would be to place all your filenames into a text file and read that file
from a server using some ajax code added. This would require an internet connection while the previous
example above could be executed from a local file. Your design choice.
The filenames could be created with a simple UNIX command on the server
Something like: ls -1 > imgFile1.txt and then modified with your answer key to form the formatted arrays.