PDA

View Full Version : Change images to text in random selection



Jay Dog
01-07-2013, 02:37 PM
1) Script Title: Bloom's Taxonomy

2) Script URL (on DD):

http://www.bigwood.nottingham.sch.uk/VLE/test.html

3) Describe problem:

Hi,

This is a code I was working on last year and completed with the help from people here which I am very grateful for, however I want to be able to change it from being random images that appear when you roll over a specific colour in the pyramid to it being random text.

OK so imagine you have 6 hats and you can pick an image at random from each hat, red hat images are not the same as blue hat etc. instead of it being images, I'd like it to be text as it should be text and it's easier to put in rather than me making images in Photoshop everytime.

It would be cool if the text appeared in the table and I can set the table cell to have a red background for random red text and so on.




<html><head>
<title>Blooms Taxonomy</title>

<script language="JavaScript">
<!--

function yrandomImage() {
pic = new Array();
pic[0] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow who.png';
pic[1] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow what.png';
pic[2] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow where.png';
pic[3] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow why.png';
pic[4] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow when.png';

randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];


return newImage;
}

// -->

<!--

function brandomImage() {
pic = new Array();
pic[0] = 'http://www.bigwood.nottingham.sch.uk/VLE/blue who.png';
pic[1] = 'http://www.bigwood.nottingham.sch.uk/VLE/blue what.png';
pic[2] = 'http://www.bigwood.nottingham.sch.uk/VLE/blue where.png';
pic[3] = 'http://www.bigwood.nottingham.sch.uk/VLE/blue why.png';
pic[4] = 'http://www.bigwood.nottingham.sch.uk/VLE/blue when.png';

randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];


return newImage;
}

// -->

<!--

function vrandomImage() {
pic = new Array();
pic[0] = 'http://www.bigwood.nottingham.sch.uk/VLE/violet who.png';
pic[1] = 'http://www.bigwood.nottingham.sch.uk/VLE/violet what.png';
pic[2] = 'http://www.bigwood.nottingham.sch.uk/VLE/violet where.png';
pic[3] = 'http://www.bigwood.nottingham.sch.uk/VLE/violet why.png';
pic[4] = 'http://www.bigwood.nottingham.sch.uk/VLE/violet when.png';

randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];


return newImage;
}

// -->

<!--

function rrandomImage() {
pic = new Array();
pic[0] = 'http://www.bigwood.nottingham.sch.uk/VLE/red who.png';
pic[1] = 'http://www.bigwood.nottingham.sch.uk/VLE/red what.png';
pic[2] = 'http://www.bigwood.nottingham.sch.uk/VLE/red where.png';
pic[3] = 'http://www.bigwood.nottingham.sch.uk/VLE/red why.png';
pic[4] = 'http://www.bigwood.nottingham.sch.uk/VLE/red when.png';

randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];


return newImage;
}

// -->

<!--

function grandomImage() {
pic = new Array();
pic[0] = 'http://www.bigwood.nottingham.sch.uk/VLE/green who.png';
pic[1] = 'http://www.bigwood.nottingham.sch.uk/VLE/green what.png';
pic[2] = 'http://www.bigwood.nottingham.sch.uk/VLE/green where.png';
pic[3] = 'http://www.bigwood.nottingham.sch.uk/VLE/green why.png';
pic[4] = 'http://www.bigwood.nottingham.sch.uk/VLE/green when.png';

randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];


return newImage;
}


// -->

<!--

function orandomImage() {
pic = new Array();
pic[0] = 'http://www.bigwood.nottingham.sch.uk/VLE/orange who.png';
pic[1] = 'http://www.bigwood.nottingham.sch.uk/VLE/orange what.png';
pic[2] = 'http://www.bigwood.nottingham.sch.uk/VLE/orange where.png';
pic[3] = 'http://www.bigwood.nottingham.sch.uk/VLE/orange why.png';
pic[4] = 'http://www.bigwood.nottingham.sch.uk/VLE/orange when.png';

randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];


return newImage;
}

// -->
</script>
<style type="text/css">
.arial {
font-family: Arial, Helvetica, sans-serif;
}
.arial {
font-family: Arial;
}
</style>
</head><body>

<table width="962" border="0" align="center">
<tbody><tr>
<td width="463" height="377" rowspan="7" align="center" valign="middle"><img src="http://www.bigwood.nottingham.sch.uk/VLE/triangle.png" name="myImage0" height="377" border="0" usemap="#myImage0Map"></td>
<td width="489" height="50" align="left" valign="bottom"><b><font face="Arial" size="5">Blooms Question Generator</font></b></td>
</tr>
<tr>
<td height="57" align="left" valign="middle"><img name="myImage1" src="http://www.bigwood.nottingham.sch.uk/VLE/yellow where.png" onMouseOver="this.src = yrandomImage();"></td>
</tr>
<tr>
<td height="55" align="left" valign="middle"><img name="myImage2" src="http://www.bigwood.nottingham.sch.uk/VLE/blue who.png" onMouseOver="this.src = brandomImage();"></td>
</tr>
<tr>
<td height="54" align="left" valign="middle"><img name="myImage3" src="http://www.bigwood.nottingham.sch.uk/VLE/green who.png" onMouseOver="this.src = grandomImage();"></td>
</tr>
<tr>
<td height="52" align="left" valign="middle"><img name="myImage4" src="http://www.bigwood.nottingham.sch.uk/VLE/violet when.png" onMouseOver="this.src = vrandomImage();"></td>
</tr>
<tr>
<td height="52" align="left" valign="middle"><img name="myImage5" src="http://www.bigwood.nottingham.sch.uk/VLE/red when.png" onMouseOver="this.src = rrandomImage();"></td>
</tr>
<tr>
<td height="57" align="left" valign="middle"><img name="myImage6" src="https://jupiter.inthehive.net/sites/bigwood/Departments/Blooms/orange who.png" onMouseOver="this.src = orandomImage();"></td>
</tr>
</tbody></table>


<map name="myImage0Map">
<area shape="poly" coords="275,110,216,13,159,110" href="#" onMouseOver="document.images.myImage1.src = yrandomImage();">
<area shape="poly" coords="306,168,281,121,151,122,128,167" href="#" onMouseOver="document.images.myImage2.src = brandomImage();">
<area shape="poly" coords="338,221,310,176,123,177,99,219" href="#" onMouseOver="document.images.myImage3.src = grandomImage();">
<area shape="poly" coords="367,270,339,225,93,227,70,268" href="#" onMouseOver="document.images.myImage4.src = vrandomImage();">
<area shape="poly" coords="396,320,368,275,66,275,42,316" href="#" onMouseOver="document.images.myImage5.src = rrandomImage();">
<area shape="poly" coords="423,371,398,326,35,327,12,373" href="#" onMouseOver="document.images.myImage6.src = orandomImage();">
</map>


</body></html>


As I have said, I need it to be text instead of yellow who.png etc. if that makes sense.

Many thanks,


Jay Dog

jscheuer1
01-07-2013, 06:32 PM
Change your arrays so that they contain the desired text and their functions so that they return that text, for example:



function yrandomImage() {
pic = new Array();
pic[0] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow who.png';
pic[1] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow what.png';
pic[2] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow where.png';
pic[3] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow why.png';
pic[4] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow when.png';

randomNum = Math.floor(Math.random()*pic.length);
newImage = pic[randomNum];


return newImage;
}

could become:


function yrandomImage() {
pic = new Array();
pic[0] = "some text here";
pic[1] = "some other text here";
pic[2] = "some more text here";
pic[3] = "some more other text here";
pic[4] = "yet some more text here";

randomNum = Math.floor(Math.random()*pic.length);

return pic[randomNum];
}

Then where you have:



onMouseOver="document.images.myImage1.src = yrandomImage();"

That can be:


onmouseover="document.getElementById('myText1').innerHTML = yrandomImage();"

And where you have:



<td height="57" align="left" valign="middle"><img name="myImage1" src="http://www.bigwood.nottingham.sch.uk/VLE/yellow where.png" onMouseOver="this.src = yrandomImage();"></td>

That can be:


<td height="57" align="left" valign="middle"><div id="myText1" onmouseover="this.innerHTML = yrandomImage();">some text here</div></td>

That's pretty much it. Do that with all of them and you should be set.

BTW, the code still exhibits a lot of unnecessary repetition. Like one randomizing function could service all arrays. And if the arrays are all the same, only one would be required.

Here's a demo:

http://home.comcast.net/~jscheuer1/side/blooms/demo.htm

On another front, you can rename the functions and arrays to reflect the fact that they're now text generators, not image generators. But that's just for clarity's sake, javascript doesn't care what they're called.

Jay Dog
01-11-2013, 02:55 PM
Wow! That's amazing and I really love your mod of it. However, for some reason our font colour is defaulted to white on the Intranet and I've tried chnaging them all to black again but it won't allow me to.

I really appreciate your help and input but if it's a simple thing about the font colour, again your help would be greatly appreciated.

Many thanks.

jscheuer1
01-11-2013, 04:33 PM
I've updated the demo to fix that. Make sure to refresh the page before viewing its updated source code:

http://home.comcast.net/~jscheuer1/side/blooms/demo.htm

I also made an advanced version:

http://home.comcast.net/~jscheuer1/side/blooms/demo2.htm

However, since I cannot see your intranet, I cannot know for sure what's causing the problem. The change I made should fix it. But if it doesn't, I will need to see the page or a copy of it that shows the problem in order to fix it. The live demo you put up would not have that problem, at least not as far as I can see.

The browser cache may need to be cleared and/or the page refreshed to see changes.