JavaScript positioning?

  Foolsbane_1 11:33 15 Jul 2003
Locked

As a complete novice, I set myself a little project as a way of getting to know a little more about how this stuff works. But, despite studying untold numbers of online tutorials, examining various samples and experimenting endlessly, I have to admit that I am stuck.

The object of the exercise was to create a web page with a grid of cells which are randomly re-numbered each time the page is reloaded. I have managed to find and adapt the code to randomise the numbers, but I have not been able to figure out how to position those numbers on the existing grid(s).

Any helpful suggestions would be deeply appreciated.

  oliverdore 13:43 15 Jul 2003

To be honest, I wouldn't know where to start! You've set yourself one hell of an objective in order to develop your JavaScript skills. There are plenty of people on this forum with some great skills though, so bump...

-oliverdore-

  User-312386 00:20 16 Jul 2003

what software are you using to develope the site?

My site click here uses the same sort of scripting, but on the front page the picture radomly changes, just click refresh on my page or click the HOME PAGE button again and the picture will change

madboy33

  Foolsbane_1 07:58 16 Jul 2003

I was hoping to spare our readers a long-winded explanation. Just remember! It was you who asked! ;o)

The whole thing started when I was asked to do a little print design project for a charity pub quiz. I won't go into too much detail, but the form of the quiz involves having two grids of 22 cells on the answer sheet. These cells must be randomly numbered in the range 1 - 22.

Now, this is a very small-scale job involving the printing of no more than twenty or thirty sheets each month. So it is no big deal to simply reorder the numbering manually. But it occured to me that there might be a way of automating the process using a random content generation script similar to that which you have used on your website.

I found a script which, with a little tweaking, will output to an html page a series of 'numbers' saved as gif image files and re-order these images randomly each time the page is reloaded. Truly! It is a marvel to behold! I could play with it for hours!

But, to be really useful, I have to get those numbers into the appropriate positions on the html page containing the grid(s). It was at this point that the smug drained out of me. I simply do not have the knowledge or skill to do this. Nor even sufficient understanding of the basics to be able to properly follow the various tutorials I have looked at.

So! I am stuck with a project which has developed into a minor obsession, with no way to take it forward short of doing a full-blown course of study. I have a notion that the thing for which I am aiming might have a variety of applications if it could be completed.

Or maybe it would just simplify the task of producing those twenty answer sheets for the pub quizz!

The answer sheet itself was done in PagePlus 8. I used 1st Page 2000 to fiddle with the script and both this and FrontPage when trying to put the two things together.

It may even be that I am taking entirely the wrong approach for the print job. Maybe I should be asking VoG about generating randomised output from Excel to data fields in the document, or something like that. But I would still like to resolve the positioning issue for my own satisfaction.

  Macro Kid - (Java script) 09:32 16 Jul 2003

Hi
Do the cells have to contain each number between 1 and 22 i.e. only use each number once. Or must each cell just contain a random number?

The best way for output either way will be to construct the page using document.write's, to put out the html code.

I will be back to help more later.

HTH

PN

  Foolsbane_1 10:17 16 Jul 2003

Each number must only appear once. This was one of the constraints which precluded using multiple instances of a simple image randomiser.

I look forward to any further input you might be able to offer. And, of course, I would be happy to email the code to you or anyone else who cares to take a look.

  Taran 13:04 16 Jul 2003

Copy and paste the following into a new Notepad document and save it with an HTM or HTML filename, or just paste the code into an empty web document in your preferred web editor.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Random Numbers - 1 to 22</title>

<script language="JavaScript">

function pickNums(nums, numArr)

{

if(nums>numArr.length)

{
alert('You have attempted to choose more numbers from the array than it contains!');


return false;


}
var pickArr=new Array();
var tempArr=numArr;
for(var i=0; i<nums; i++)


{
pickArr[pickArr.length]=tempArr[Math.round((tempArr.length-1)*Math.random())];
var temp=pickArr[pickArr.length-1];
for(var j=0; j<tempArr.length; j++)


{
if(tempArr[j]==temp)
{
tempArr[j]=null;
var tempArr2=new Array();
for(var k=0; k<tempArr.length; k++)
if(tempArr[k]!=null)
tempArr2[tempArr2.length]=tempArr[k];
tempArr=tempArr2;
break;

}

}

}

return pickArr;

}

</script>

</head>
<body bgcolor="#FFFFFF">
<br>

<table width="90%" align="center"><tr><td><font face="verdana,arial,helvetica" size="-1" color="#000000"><br><br>

<script language="JavaScript">


var myArr = new Array("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22");

var outArr=pickNums(22, myArr);

document.write('<span style="background:#FFFFFF;

border:#000000 solid 1px; padding:2px">');

for(var i=0; i<outArr.length; i++)

{

document.write('<b>' + outArr[i]

+ '</b> ');

}

document.write('</span>');

</script>

<br><br>
<a href="javascript:void(location.reload())" class="link">Reload</a> the
page to regenerate the numbers.</font> </td></tr></table>

</body>

</html>


===================

I'm not sure if this is along the lined of what you want, but it should be reasonably close and it's relatively easy to modify the document.write section to display the output in something more useful or appropriate.

Hope this helps a bit.

Regards

Taran

  Taran 13:07 16 Jul 2003

Sorry about that, I mangled the code in copying and pasting into this page. Hopefully this will sort it out.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Random Numbers - 1 to 22</title>

<script language="JavaScript">

function pickNums(nums, numArr)
{
if(nums>numArr.length)
{
alert('You have attempted to choose more numbers from the array than it contains!');
return false;
}
var pickArr=new Array();
var tempArr=numArr;
for(var i=0; i<nums; i++)
{
pickArr[pickArr.length]=tempArr[Math.round((tempArr.length-1)*Math.random())];
var temp=pickArr[pickArr.length-1];
for(var j=0; j<tempArr.length; j++)
{
if(tempArr[j]==temp)
{
tempArr[j]=null;
var tempArr2=new Array();
for(var k=0; k<tempArr.length; k++)
if(tempArr[k]!=null)
tempArr2[tempArr2.length]=tempArr[k];
tempArr=tempArr2;
break;
}
}
}
return pickArr;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<center>
</center>
<br>
<table width="90%" align="center">
<tr>
<td><font face="verdana,arial,helvetica" size="-1" color="#000000"><br>
<br>

<script language="JavaScript">
/* Add elements to this array */
var myArr = new Array("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22");
var outArr=pickNums(22, myArr);

document.write('<span style="background:#FFFFFF; border:#000000 solid 1px; padding:2px">');
for(var i=0; i<outArr.length; i++)
{
document.write('<b>' + outArr[i] + '</b> ');
}
document.write('</span>');
</script>

<br><br>
<a href="javascript:void(location.reload())" class="link">Reload</a> the
page to regenerate the numbers. </font> </td>
</tr></table>
</body>
</html>

  Taran 13:09 16 Jul 2003

Yes, that got it.

My apologies for the first attempt.

Serves me right for trying to format the code to display properly in here...

;o)

  Foolsbane_1 13:25 16 Jul 2003

Much appreciated, Taran. It may take me some time to try this out and make the necessary modifications. This stuff is far from second nature to me! I will report back as soon as possible.

  Taran 13:39 16 Jul 2003

I'd have tried to get it closer to the mark, but I'm not convinced I entirely understand what it is you would like the output to be.

This is where face to face is better than text for describing and solving problems.

Good luck with it.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Alienware 17 R4 2017 review

These brilliant Lego posters show just what children's imaginations are capable of

Mac power user tips and hidden tricks

Comment réinitialiser votre PC, ordinateur portable ou tablette Windows ?