Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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); 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. 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. 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?

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

    Code:
    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"
    			}
    		}
    	}
    }
    Last edited by Economica; 09-30-2012 at 12:50 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,306
    Thanks
    23
    Thanked 612 Times in 611 Posts
    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

    Code:
    <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>

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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?

  • #4
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    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.

    Quote Originally Posted by sunfighter View Post
    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?

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Try this:-

    Code:
    <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
    Last edited by Philip M; 09-30-2012 at 10:15 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Economica (09-30-2012)

  • #6
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Economica View Post
    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?
    You need to style using CSS. Example:

    Code:
    <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>
    Last edited by Philip M; 09-30-2012 at 11:12 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ... Of course! Don't I feel sheepish now.

    Thanks again!

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,373
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Quote Originally Posted by sunfighter View Post
    This comes from here http://javascript.about.com/library/blshuffle.htm

    Code:
    <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:

    Code:
    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;
    }
    Last edited by rnd me; 10-01-2012 at 01:33 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •