Doppelanzeige bei Zufallsauswahl vermeiden ?

[Nico]

Hallo,

in 2 Zellen einer Tabelle stelle ich Bilder dar, die per Zufall ausgewählt werden (siehe Code weiter untern).

Das funzt gut, hat aber den Haken, dass die Darstellung des gleichen Bildes in beiden Zellen nicht ausgeschlossen wird.

Wie ist das Script abzuaendern, um Doppeldarstellungen des gleichen Bildes zu verhindern?

Gruesse,
Nico

Code
------------------------------
<table>
<tr>
<td>
<script>
today=new Date();
jran=today.getTime();

function rnd() {

ia=9301;
ic=49297;
im=233280;

jran = (jran*ia+ic) % im;
return jran/(im*1.0);
};

function rand(number) {

return Math.ceil(rnd()*number);
};

document.write("<CENTER>");
for(i=1;i<=1;i++) {
myNum=(rand(4));
if(myNum == 1) document.write("<img src='bild2.jpg'>");
if(myNum == 2) document.write("<img src='bild3.jpg'>");
if(myNum == 3) document.write("<img src='bild4.jpg'>");
if(myNum == 4) document.write("<img src='bild5.jpg'>");

else {
document.write();
}

};

document.write("</CENTER>");

</script>
</td>
<td>
...das gleiche nochmal ....
</td>
</tr>
</table>
---------------------------------------------------------------

[Thomas]

Den ersten Zufallswert in einer Variablen speichern und den zweiten solange aus der Funktion holen, bis er nicht gleich dem ersten ist.

also beim 2. Ermitteln in etwa...

var oldNum = myNum;
while(oldNum==myNum) {
    myNum=rand(4);
}

wahrscheinlich geht auch:
while(oldNum==(myNum=rand(4));

Dein Code erscheint aber generell noch ein bißchen "optimierungsbedürftig".
Erste Anregung: statt der 4 if Abfragen reicht ein
document.write("<img src='bild" + (i+1) + ".jpg'>");

Gruß aus Wien!

Hallo,

in 2 Zellen einer Tabelle stelle ich Bilder dar, die per Zufall ausgewählt werden (siehe Code weiter untern).

Das funzt gut, hat aber den Haken, dass die Darstellung des gleichen Bildes in beiden Zellen nicht ausgeschlossen wird.

Wie ist das Script abzuaendern, um Doppeldarstellungen des gleichen Bildes zu verhindern?

Gruesse,
Nico

Code

<table>
<tr>
<td>
<script>
today=new Date();
jran=today.getTime();

function rnd() {

ia=9301;
ic=49297;
im=233280;

jran = (jran*ia+ic) % im;
return jran/(im*1.0);
};

function rand(number) {

return Math.ceil(rnd()*number);
};

document.write("<CENTER>");
for(i=1;i<=1;i++) {
myNum=(rand(4));
if(myNum == 1) document.write("<img src='bild2.jpg'>");
if(myNum == 2) document.write("<img src='bild3.jpg'>");
if(myNum == 3) document.write("<img src='bild4.jpg'>");
if(myNum == 4) document.write("<img src='bild5.jpg'>");

else {
document.write();
}

};

document.write("</CENTER>");

</script>
</td>
<td>
...das gleiche nochmal ....
</td>
</tr>
</table>

[Nico]

Hi Thomas,

danke fuer Deine Anregungen.

Mir bleibt da nur ein Problem:

Das geiche Script wird ja in jeder Tabellenzelle aufgerufen. Wie stelle ich denn da den Bezug her zu der Nummer des Bildes (oldNum) das in der jeweiligen vorhergehen Zelle ausgewaehlt wurde. Koenntest Du mir das verdeutlichen?

Und wie geht's dann weiter in den naechsten Zellen (in Wirklichkeit sind es 8!) Dort muss ich ja dann den Bezug zu jeweils allen vorausgehenden Zellen herstellen, die bereits berechnet sind. Komme da ehrlich gesagt ins Schleudern ...

Gruesse,
Nico

[Thomas]

Ich hab' jetzt Deine Frage möglicherweise nicht 100% verstanden.
Ich gehe einfach mal davon aus, dass Du einen Pool von vielen Bildern hast, und auf der Seite einige davon zufällig darstellen möchtest, sich dabei aber keines wiederholen soll.

Dafür würden mir jetzt adhoc mehrere Möglichkeiten einfallen, und ich bin mir sicher, dass die eleganteste Lösung noch nicht dabei ist.

Ich verwende jedenfalls ein Array, in dem alle BildVerweise gespeichert werden. Sobald ein Bild "aufgebraucht" ist, wird der String auf den Leerstring gesetzt. In einer Schleife wiederhole ich den Zugriff solange, bis ich einen gültigen String erwische. Außerdem habe ich versucht, den HTML-Code möglichst übersichtlich zu halten und die JavaScripts möglichst auszulagern.
ACHTUNG: Code nicht getestet!!
GEFAHR: Sind in dem Pool (=Array) weniger Bilder als auf der Seite letzlich verwendet werden, hängen wir in einer Endlosschleife!!

<script>
var pics = new Array("herz.gif", "karro.gif", "kreuz.gif", "pik.gif", "sonstwas.jpg");

function GetPic() {
    var idx;
    var picName="";
    while(picName=="") {
        idx=Math.floor(rnd()*pics.length);
        picName=pics[idx];
    }
    pics[idx]="";
    return picName;
}

function WritePic() {
    document.writeln("<img src='" + GetPic() + "'");
}

</script>

<!-- irgendwo im HTML-Code, gerne auch in jeder Tabellenzelle -->
<!-- in diesem Fall ein 2x2 Tabelle -->
<table>
<tr>
<td>
<script>WritePic();</script>
</td>
<td>
<script>WritePic();</script>
</td>
</tr>
<tr>
<td>
<script>WritePic();</script>
</td>
<td>
<script>WritePic();</script>
</td>
</tr>
</table>

Aber wie gesagt: dass ist nur ein Ansatz von vielen...

Hope that helps!

Thomas

[Nico]

Hi Thomas,

Du hast verstanden. Danke fuer Deine Leosung.

Eine Frage bleibt:

Speicher ich alle Bildverweise in ein Array (bei mir sind es ca 50 Bilder), werden dann die Bilder nicht alle geladen, bevor einige Davon ausgewaehlt und dargestellt werden?
Das wuerde ja enorme Ladezeiten verursachen ....

Gruesse
Nico

Ich hab' jetzt Deine Frage möglicherweise nicht 100% verstanden.
Ich gehe einfach mal davon aus, dass Du einen Pool von vielen Bildern hast, und auf der Seite einige davon zufällig darstellen möchtest, sich dabei aber keines wiederholen soll.

Dafür würden mir jetzt adhoc mehrere Möglichkeiten einfallen, und ich bin mir sicher, dass die eleganteste Lösung noch nicht dabei ist.

Ich verwende jedenfalls ein Array, in dem alle BildVerweise gespeichert werden. Sobald ein Bild "aufgebraucht" ist, wird der String auf den Leerstring gesetzt. In einer Schleife wiederhole ich den Zugriff solange, bis ich einen gültigen String erwische. Außerdem habe ich versucht, den HTML-Code möglichst übersichtlich zu halten und die JavaScripts möglichst auszulagern.
ACHTUNG: Code nicht getestet!!
GEFAHR: Sind in dem Pool (=Array) weniger Bilder als auf der Seite letzlich verwendet werden, hängen wir in einer Endlosschleife!!

<script>
var pics = new Array("herz.gif", "karro.gif", "kreuz.gif", "pik.gif", "sonstwas.jpg");

function GetPic() {
    var idx;
    var picName="";
    while(picName=="") {
        idx=Math.floor(rnd()*pics.length);
        picName=pics[idx];
    }
    pics[idx]="";
    return picName;
}

function WritePic() {
    document.writeln("<img src='" + GetPic() + "'");
}

</script>

<!-- irgendwo im HTML-Code, gerne auch in jeder Tabellenzelle -->
<!-- in diesem Fall ein 2x2 Tabelle -->
<table>
<tr>
<td>
<script>WritePic();</script>
</td>
<td>
<script>WritePic();</script>
</td>
</tr>
<tr>
<td>
<script>WritePic();</script>
</td>
<td>
<script>WritePic();</script>
</td>
</tr>
</table>

Aber wie gesagt: dass ist nur ein Ansatz von vielen...

Hope that helps!

Thomas

[Thomas]

Du hast verstanden. Danke fuer Deine Leosung.

Gerne.

Eine Frage bleibt:

Speicher ich alle Bildverweise in ein Array (bei mir sind es ca 50 Bilder), werden dann die Bilder nicht alle geladen, bevor einige Davon ausgewaehlt und dargestellt werden?
Das wuerde ja enorme Ladezeiten verursachen ....

Nein, sie werden nicht geladen, da ja nur die Verweise als Strings im Array gespeichert werden.
Allerdings wäre das eine weitere Möglichkeit (die ich auch im Sinn hatte), in einem Array image-Objekte zu speichern und anschließend den entsprechenden <img>-Tags zuzuordnen.
Nachteil richtig erkannt: Ladezeit. Aber es kann trotzdem durchaus gewollt sein, um die Bilder beispielsweise nachträglich zu ändern.

[Thomas]

Nachteil richtig erkannt: Ladezeit. Aber es kann trotzdem durchaus gewollt sein, um die Bilder beispielsweise nachträglich zu ändern.

Nachtrag: die meisten Rollover-Effekte werden so realisiert.

[Nico]

Hi Thomas,

Dein Code (script) ist nun eingebaut (s.u.), verweigert sich aber, indem er folgenden Fehler anzeigt:
Line 12 Object expected

Code
--------------------------
<html>

<head>
<title>New Page 6</title>
<script>
var pics = new Array("bild2.jpg", "bild3.jpg", "bild4.jpg", "bild5.jpg", "bild6.jpg");

function GetPic() {
var idx;
var picName="";
while(picName=="") {
idx=Math.floor(rnd()*pics.length);
picName=pics[idx];
}
pics[idx]="";
return picName;
}

function WritePic() {
document.writeln("<img src='" + GetPic() + "'");
}

</script>
</head>

<body>

<table>
  <tr>
    <td><script>WritePic();</script> </td>
    <td><script>WritePic();</script> </td>
  </tr>
  <tr>
    <td><script>WritePic();</script> </td>
    <td><script>WritePic();</script> </td>
  </tr>
</table>
</body>
</html>
------------------------------------------------------

[Thomas]

Wie kommt den diese Zeile da hinein?!?
War ich das etwa?? ;o)

idx=Math.floor(rnd()*pics.length);

idx=Math.floor(Math.random()*pics.length);

[JCB]

Hallo,

in 2 Zellen einer Tabelle stelle ich Bilder dar, die per Zufall ausgewählt werden (siehe Code weiter untern).

Das funzt gut, hat aber den Haken, dass die Darstellung des gleichen Bildes in beiden Zellen nicht ausgeschlossen wird.

Wie ist das Script abzuaendern, um Doppeldarstellungen des gleichen Bildes zu verhindern?

Hallo Nico!

Also, so rein theoretisch kann man ja nicht ausschließen, dass 2mal das gleich Bild angezeigt wird. Ist halt Zufall ;). Und bei 4 Auswahlmöglichkeiten ist die Wahrscheinlichkeit mit 1/4 noch recht hoch :). Aber mal zu Deinem Problem. Ich würd 1 Script (anstatt 2en) nehmen, das dann 2 Platzhalter füllt. Beim 3. mußt du dann nur voher abfragen, welches Bild schon angezeigt wird.

Gruß,

Jan