How to randomize content within randomized content?

Hi, I'm new to the forum! :) Don't know why I haven't discovered this place before. I have amateurish HTML/CSS skills (showcased at my site (http://www.celebritytypes.com/philosophers/index.php)); as far as JavaScript goes I'm at the stage where all I do is follow instructions at e.g. JavaScriptKit.com without actually understanding the script. :o Okay, enough throat-clearing...

My question concerns randomized content. I have ten quotes in total. I want to show five quotes at a time and I have been able to randomize two blocks of five quotes using this script (http://www.javascriptkit.com/script/script2/imageorder.shtml). So far so good. However, I'd also like to randomize the order of those five quotes within each block, and I can't figure out how to modify the script or combine it with another one in order to do that. Please help? :confused:

Here is the meat of the script (please bear with me if I'm shortening it too much or too little):


var randomordercontentdisplay={
divholders:new Object(),
masterclass: "randomordercontent",

init:function(){
if (!document.getElementById)
return
var alldivs=document.getElementsByTagName("div")
var randomcontentsearch=new RegExp(this.masterclass+"\\s+(group\\d+)", "i") //check for CSS class="randomcontent groupX" (x=integer)
for (var i=0; i<alldivs.length; i++){
if (randomcontentsearch.test(alldivs[i].className)){
if (typeof this.divholders[RegExp.$1]=="undefined"){ //if object to hold this group of divs doesn't exist yet
this.divholders[RegExp.$1]=new Object() //create object
this.divholders[RegExp.$1].ref=[] //create array to hold each div within group
this.divholders[RegExp.$1].contents=[] //create array to hold each div's content within group
}
this.divholders[RegExp.$1].ref.push(alldivs[i]) //add this div to the array
this.divholders[RegExp.$1].contents.push(alldivs[i].innerHTML) //add this div's content to the array
}
}
this.scrambleorder()
},

scrambleorder:function(){
for (group in this.divholders){ //loop thru each array within object
this.divholders[group].contents.sort(function() {return 0.5 - Math.random()}) //scramble contents array
for (var i=0; i<this.divholders[group].ref.length; i++){
this.divholders[group].ref[i].innerHTML=this.divholders[group].contents[i]
this.divholders[group].ref[i].style.display="block"
}
}
}
}

This may be bogus cause I just did a fast glance over the code. If your using an array to store your 5 quotes you can use a function to randomize them:

This comes from here http://javascript.about.com/library/blshuffle.htm

<script type="text/javascript">
function shuffle(ary) {
var s = [];
while (ary.length) s.push(ary.splice(Math.random() * ary.length, 1));
while (s.length) ary.push(s.pop());
}

var myArray2 = [0,1,2,3,4,5,6,7,8,9]; // This is the array using numbers
shuffle(myArray2); // We call the function here

document.write(myArray2[0] + myArray2[1] + myArray2[2]); // We show the first three elements of shuffled array

</script>

I'm not getting the second level of randomness.

You have 2 groups of 5 quotes (lets call them A and B). First you want to shuffle the order of the 5 quotes within each group, then you want to display all of either group A or group B (itself a random selection) in its new randomized order. Is that correct?

I'm not getting the second level of randomness.

You have 2 groups of 5 quotes (lets call them A and B). First you want to shuffle the order of the 5 quotes within each group, then you want to display all of either group A or group B (itself a random selection) in its new randomized order. Is that correct?

Yes, that is correct! :) Sorry if my explanation was unclear.

This may be bogus cause I just did a fast glance over the code. If your using an array to store your 5 quotes you can use a function to randomize them:

Unfortunately I'm not using an array (that would be above my current skill level); I'm going about it exactly like the instructions say, i.e. using <div> around the content. Also, I'm not sure what you mean by bogus? :confused:

Try this:-

<html>
<head>
</head>
<body onload = "showquotes()">

<div id = "quotes"></div><br>

<script type = "text/javascript">

Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
while (s.length) this.push(s.pop());
return this;
}

var quotations1 = [];
quotations1[0]= "germaine arnold";
quotations1[1]= "endearing moral";
quotations1[2]= "analog reminder";
quotations1[3]= "regained normal";
quotations1[4]= "renaming ordeal";

var quotations2 = [];
quotations2[0]= "nominal regrade";
quotations2[1]= "arraigned lemon";
quotations2[2]= "ringleader moan";
quotations2[3]= "mineral groaned";
quotations2[4] = "another quotation";

function showquotes() {

quotations1.shuffle();
quotations2.shuffle();

var randy = Math.floor(Math.random() * 2 +1); // generates 1-2
var q = window["quotations"+randy]; // array name
var result = "";
for (var i =0; i<q.length; i++) {
result += q[i] + "<br>"
}

document.getElementById("quotes").innerHTML = result;
}

</script>

</body>
</html>

Your Javascriptkit code is pretty long in the tooth (as so often, I am afraid) and over complicated.
Call showquotes() again to display another set of quotations.

"The only function of economic forecasting is to make astrology look respectable". - J.K.Galbraith

Philip M, thank you so much! :) I've implemented your script and it works beautifully even with <br> and <b> tags inside my quotes. However, I also need to specify their font size and family - how can I do that? :confused:

Philip M, thank you so much! :) I've implemented your script and it works beautifully even with <br> and <b> tags inside my quotes. However, I also need to specify their font size and family - how can I do that? :confused:

You need to style using CSS. Example:

<style type = "text/css">
.display {color:red; font-size:120%; font-weight:bold; font-family:arial;}
</style>
</head>
<body onload = "showquotes()">

<div id = "quotes" class = "display"></div><br>

... Of course! Don't I feel sheepish now. :o

Thanks again! :)

This comes from here http://javascript.about.com/library/blshuffle.htm

<script type="text/javascript">
function shuffle(ary) {
var s = [];
while (ary.length) s.push(ary.splice(Math.random() * ary.length, 1));
while (s.length) ary.push(s.pop());
}

var myArray2 = [0,1,2,3,4,5,6,7,8,9]; // This is the array using numbers
shuffle(myArray2); // We call the function here

document.write(myArray2[0] + myArray2[1] + myArray2[2]); // We show the first three elements of shuffled array

</script>

it's nice that this function mutates and actually randomizes, but it could be a lot simpler in the expensive loop portion.

a rewrite yields two looped function calls (including internals like this.length) instead of 8:

Array.prototype.shuffle= function array_shuffle() {
var s=[], i=0, rnd=Math.random, mx=this.length;
for(;i<mx;i++){
s[i]=this.splice( rnd() * (mx-i), 1)[0];
}

[].push.apply(this, s);

return this;
}