Random Haiku Generator with Matching Image

[whitneyt]

Hello

I am a teacher that has been using the LOGO programming language for the last 10 years. I am slowly trying to make the switch over to Javascript and Flash.

I do a project each year where my sixth grade students generate a random haiku. They create lists of parts of speech (1 syllable adjectives, 1 syllable nouns, 1 syllable verb , 2 syllable adverbs etc. .. )

They then create a program that randomly picks from each list and generates the 3 stanzas of their poem. ( 5, 7, 5 syllables)

To make it more interesting, they make the noun in the first stanza a variable. Depending on which noun from the array is chosen, an image is displayed that corresponds to the noun. (some kids add a matching sound as well)


Can we do this assignment in javascript?


In short, I want to create random haikus where an image is displayed that matches the noun in the first stanza.

Here is an example of their LOGO code, if it helps make this clearer.


To Noun2
Op Pick [forest jungle window spider flower ladder]
End

To Verb1
Op pick [leaps burns screams flies spies thinks]
End

Etc. etc…

to haiku
cg
hidetext
opaque "text1
set "text1 "pos [0 100]
set "text1 "size [350 250]
ct

make "noun pick [food horse bug hole ant]

if :noun = "food [setsh 1 st stamp ht]
if :noun = "horse [setsh 2 st stamp ht]
if :noun = "bug [setsh 3 st stamp ht]
if :noun = "hole [setsh 4 st stamp ht]
if :noun = "ant [setsh 5 st stamp ht]

print (sentence adj1 :noun verb1 adv2)
print (sentence prep2 art1 adj2 noun2)
print (sentence verb2 adv3)

transparent "text1
showtext
end




Thanks

[russell]

With the admission that I don't know the exact meter for a (an?) Haiku, here is some code. You'll need to modify it, by making the appropriate arrays, but this is what you are looking for, I think.

nouns = new Array("horse", "cat", "bug", "car");
verbs = new Array("runs", "sleeps", "thinks", "eats");
adverbs = new Array("quickly", "fully", "dimly", "hotly");
nouns2 = new Array("table", "kitchen", "tissue", "paper");

// generate a list of random #s
arNums = new Array();
for(i=0;i<numberOfRandomWords;i++) {
arNums[i] = parseInt(Math.random() * nouns.length);
}

haiku = nouns[arNums[0]] + " ";
haiku += verbs[arNums[1]] + " ";
haiku += adverbs[arNums[2]] + " ";
haiku += nouns2[arNums[3]] + " ";

alert(haiku);

Also replace "numberOfRandomWords" with the right number.

[Tage]

Also replace "numberOfRandomWords" with the right number.or you could consider replacing it with (nouns.length + verbs.length + adverbs.length + nouns2.length)so you don't have to edit it every time you add a word.a (an?) Haikuit's "a" =)

Loading images to go along with the noun is completely possible. I'm going to attempt to make this script even if you don't want the script made for you. =) By the way... To create this script, you would need definitely to work with arrays, Math.random(), document.getElementById("haikuBlock").innerHTML="", document.getElementById("haikuImage").src="", and the html part would need to include a <img src="blank.gif" id="haikuImage">, <div id="haikuBlock"></div>, and a <button>Create Haiku</button> (obviously every one of the things I listed needs editing; on a side note, some of these things require you to have a semi-recent web browser to view it with)
Those should be able to give you a vague idea of how to do it.

[whitneyt]

Much thanks to both of you,
I would love any help you are willing to give towards building the program.
In the interim, I'm going to play with what you have given me and try to better understand some of the javascript you used.

[Kor]

I don't know the exact meter for a (an?) Haiku...


It is s Japanese type poem composed of three unrhymed lines of five, seven, and five syllables (well, almost all haiku have indeed 5-7-5 rithm, but not necesary all of them...)

[whitneyt]

This is what I have come up with so far.
I know it is not quite right.



<SCRIPT LANGUAGE="Javascript">

adjective1 = new Array( "sad", "old", "cool", "kind");
verb1 = new Array("runs", "sleeps", "seeks", "eats");
adverb2 = new Array("quickly", "fully", "dimly", "hotly");
noun1 = new Array("cat", "swan", "truth", "joy");
preposition2 = new Array( "over", "under", "astride", "towards");
article1 = new Array("the", "this", "that", "our");
adjective2 = new Array("golden", "purple", "happy", "hidden");
noun2 = new Array("anger", "mountain", "morning", "forest");
verb2 = new Array( "speaking", "hunting", "jumping", "running");
adverb3 = new Array("quietly", "gracefully", "knowingly", "peacefully");

// generate a list of random #s
arNums = new Array();
for(i=0;i<10;i++) {
arNums[i] = parseInt(Math.random() * adjective1.length);
}

haiku = adjective1[arNums[0]] + " ";
haiku += noun1[arNums[1]] + " ";
haiku += adverb2[arNums[2]] + " ";
haiku += verb1[arNums[3]] + " ";

haiku2 = preposition2[arNums[4]] + " ";
haiku2 += article1[arNums[5]] + " ";
haiku2 += adjective2[arNums[6]] + " ";
haiku2 += noun2[arNums[7]] + " ";

haiku3 = verb2[arNums[8]] + " ";
haiku3 += adverb3[arNums[9]] + " ";

document.write(haiku);
document.write (haiku2);
document.write (haiku3);
</script>

<FORM METHOD=POST>
<INPUT TYPE=button VALUE="Make a New Haiku" onclick="history.go(0);">
<FORM> <FORM METHOD=POST>



Can some one please tell me how I can generate a line break between each document.write so each line of the poem is displayed on a separate line?

Also, I would hate to teach my kids the wrong javascript form. Am I in the ballpark?

After fixing this, I will try to work out linking the array of noun1s to corresponding images.

[Kor]

Try:
document.write(haiku+'<br>');
document.write (haiku2+'<br>');

[whitneyt]

Thanks, it worked...

[whitneyt]

I got it to work...
I named each jpeg the same as the matching noun1 (cat.jpg, swan.jpg etc.)
I guess there needs to be a more elegant solution if you want to mix in .gifs

Thanks to all above who helped


<html>

<head>
<title>Random Haiku</title>
</head>

<body bgcolor="#ffffff">
<p>
<div align="center">
<p>

<SCRIPT LANGUAGE="Javascript">

adjective1 = new Array( "sad", "old", "cool", "kind");
verb1 = new Array("runs", "sleeps", "seeks", "eats");
adverb2 = new Array("quickly", "fully", "dimly", "hotly");
noun1 = new Array("cat", "swan", "truth", "joy");

preposition2 = new Array( "over", "under", "astride", "towards");
article1 = new Array("the", "this", "that", "our");
adjective2 = new Array("golden", "purple", "happy", "hidden");
noun2 = new Array("anger", "mountain", "morning", "forest");

verb2 = new Array( "speaking", "hunting", "jumping", "running");
adverb3 = new Array("quietly", "gracefully", "knowingly", "peacefully");

arNums = new Array();
for(i=0;i<10;i++) {
arNums[i] = parseInt(Math.random() * adjective1.length);
}

haiku = adjective1[arNums[0]] + " ";
haiku += noun1[arNums[1]] + " ";
haiku += adverb2[arNums[2]] + " ";
haiku += verb1[arNums[3]] + " ";
haiku2 = preposition2[arNums[4]] + " ";
haiku2 += article1[arNums[5]] + " ";
haiku2 += adjective2[arNums[6]] + " ";
haiku2 += noun2[arNums[7]] + " ";
haiku3 = verb2[arNums[8]] + " ";
haiku3 += adverb3[arNums[9]] + " ";

haikupic = noun1[arNums[1]] + ".jpg";


document.write ('<img src=" ' + haikupic + ' ">');
document.write('<br>');
document.write(haiku +'<br>');
document.write (haiku2 +'<br>');
document.write (haiku3 +'<br>');


</script>
</p>
<form method=POST>
<input type=button value="Make a New Haiku" onclick="history.go(0);">
</form>
</div>
</body>

</html>


I will try adding sound too.
Any sugestions for improvement are welcome

[whitneyt]

Can I use document.write to invisibly produce a sound via a variable?(as I did for my images)
I have many clipart sounds either .wav or .mp3.
Is there a freeware / mac software out there that converts between the two?
Is one form of sound file preferable for javascript/html over the other?
Are the end tags (.wav and/or .mp3) essential to inclusion for them to play?
(my program would be easier is they are not)

[Kor]

Can I use document.write to invisibly produce a sound via a variable?(as I did for my images)

Yes, it is possible

Is there a freeware / mac software out there that converts between the two?

Yes there might be for mac either (for PC are there for sure), google for it.

Is one form of sound file preferable for javascript/html over the other?

If you insert mp3 or wav, probably that will open your music/video player. midi is the only format (ASAYK) which can pe played on page without opening a player.

Are the end tags (.wav and/or .mp3) essential to inclusion for them to play?

For a Mac is not essential, but for a PC is.

[whitneyt]

Thanks
If I name my MIDI files the same name as my noun1 (as I did with my jpegs) and create a variable that tacks on the ".mid"


haikusound= noun1[arNums[1]] + ".mid";


How do I get the variable haikusound to play?

The sounds are going to be short(less than 5 seconds). Do I need the midi files preloaded?

also...
Is there a way to create an array of individual words without the quotes and commas
"cat", "dog", "mouse", etc

[Kor]

well... google for the way to insert music in your pages for PC/Mac and IE/Moz... or even this forum Search...

[whitneyt]

merçi
I have a variable "haikusound" generated from an array (swan.wav, joy.wav etc.)

Is there a way to have it play on most contempory browsers automaticly after the sound is randomly chosen as the variable?
I have tried to find this info elsewhere without any luck.