Procedure Write-Up: The Prompt Machine
Oct. 13th, 2007 01:06 am![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
hector_rashbaumThere were two really nice things about starting work on the prompt machine: One, most of what I needed to know I'd already done for the smut generator and was extremely comfortable with it and two, I knew exactly what it was I needed to learn.
Of course I think the last Javascript anything I did was the smut generator, so I was a smidge rusty. So step one was to open up the source code for the smut generator and brush up on my syntax (and play around with it for a while, and remind myself I really do plan to write an f/f scene for it one of these days).
Way more fun than brushing up through a book or website or something silly like that.
So with document.getElementById("element_id").innerHTML and var something = new Array() firmly refreshed, up comes a deliciously blank .js file. Mmmm.
The easiest part of the whole thing was gonna be making up the character and prompt arrays (funnily enough, the hardest part also had to do with the character arrays), so I dashed those off right away. Simple enough.
(If you'd rather keep yourself in the dark about what exactly the prompts are, scroll by this chunk fast ;) )
They're the same lists Lia and I were using when we were doing this over IM with dice, plus five random other cracky prompts I think have potential.
As an afterthought, I thought it might be nice to also use this for more standard prompting, so I wrote up a list of 25 one-word prompts and put those in their own array.
So now I have all these lovely characters and prompts just waiting for me to roll the dice and write something brain-melting. So the next step is to code the dice.
Again, this is something I did for the smut generator: declare a variable and then assign a random number to it.
Cracknumber picks a random number between 0 and 25 and rounds it down, so it'll give me a whole number from 0-24 inclusive. Ch_one_num and ch_two_num do the same thing with 0-12 inclusive. For the one-word prompts, I just copied this code and changed cracknumber to wordsnumber.
Last step before I pop over to an html file is to wrap each prompt set in its own function with its random number variables and give it a line to print to the screen so I can confirm it's working.
You assign the function name to your button in the html file and that executes the code wrapped up in that function. Variables wrapped up in a function can only be used by that function (this'll be important later), and since both prompt sets required the character lists I left those outside the functions, in global space.
I simply added function crackPrompt(){ before the crack array and a dinky little }; after it. Voila, function. Same thing with the words array, substituting oneWordPrompt() for crackPrompt().
The quickest and easiest way to write something to the screen is document.write(something), so I added an if statement to the crackPrompt() function to make that happen:
Because document.write wipes whatever's in the window and replaces it with the text, it's not workable for the final project, but it's quick and doesn't require me doing any html coding beyond putting in a button.
So that code will, when cracknumber is less than or equal to 25 (which it always will be, it can't possibly go higher than 25), the function wipes the screen and writes in two character names, some text, and a prompt. Spiff.
Of course, it can't do that without any provocation. So I open up a new html file and pop in a button.
So that makes a button, labeled Crack, that runs the crackPrompt() function when clicked.
Step-by-step, what should happen is:
1. I click the button
2. The crackPrompt() function first runs through the random number variables. Let's say it comes up with 20, 9, and 1.
3. Because 20 is less than 25, the if statement is triggered.
4. 9 is substituted for ch_one_num, 1 for ch_two_num, and 20 for cracknumber.
5. The numbers point to specific spots in each array, giving us "Tico Torres", "Nicko McBrain", and "...go camping"
6. document.write writes "Your characters are Tico Torres and Nicko McBrain. Your prompt is ...go camping"
And that's exactly what did happen! Yay, I got it right.
The logical next step probably would've been to test the oneWordPrompt() function, but instead I decided to write in a little extra html so I could use a better command than document.write.
I used document.getElementById("element_id").innerHTML for the smut generator - it finds "element_id" in your html file and replaces the HTML with whatever you tell it to. It just wipes what's already in "element_id", not the whole screen. Much nicer.
But you need an element to id. So I added a div with the id "Prompt", and there we go, all set.
Back to the .js file, to replace document.write with:
I didn't change anything about the way the code ran, so there wasn't really a need to test it again, but I was having fun seeing what came up, so testing time. It worked! HOW SHOCKING.
This is when I uploaded what I had so far and a bunch of people had to deal with me bouncing about it and showing it off over AIM. I also claimed I was gonna finish it after dinner but I got distracted constantly clicking for new prompts, lol.
So. Tore myself away from the crackliciousness of it all, off to dinner, get back, more coding YAY.
It finally occurred to me I might want to check the oneWordPrompt() function, even though that's way less fun than the cracky prompts. *Sigh* how I suffer for my art.
Add a new button, label "One Word", assign oneWordPrompt() as the onclick attribute, fire it up, clicky...
Nothing.
Rapid clicking, as if clicking faster will fix it. It doesn't. Bastard.
Right, then. Pop it up in Firefox, check the error console - "wordnumber is undefined".
What? Yes it is, I defined it right - oh. Oh, it says wordsnumber. With an s. How 'bout that. Easy enough to fix, anyway, so fix it I do. Fire it back up.
"Your characters are Steve Harris and Jon Bon Jovi. Your prompt is undefined."
Awesome, it - wait. Undefined. Motherfucker.
Back to the .js file to see what the Hell I did this time, and guys? Know how much I love you that I'm not pretending this didn't happen.
See, typing in the long lists of array contents is really tedious. So usually I'll type in the basic shell, the "words[0]=" ";" that every array item has in common, and copy/paste it down 24 times so I just have to fill in the space between the quotation marks.
And - this is important, kiddies - and change the 0 to whatever other number.
The variable was undefined because I'd forgotten to change the 0 - every single item was words[0], so when the function got to step 4 above and inserted a 20, there was no words[20] to point to. Just lots and lots of zeroes.
So - looking rather sheepish - I fix it. And it works like a charm. Excellent.
Alright. Arrays in order, functions working, cracky prompts flowing like wine - excellent. I decided to take a quick break from Javascript and hopped over to my good buddy CSS to make the page pretty. Excruciatingly simple, but presentable. Very nice. And then back to the html file to code in another div.
What for?
I'd been wanting to add another angle to the prompts thing, a randomly generated limitation like "drabble" or "slash" or even something odd like "word count must be a palindrome" or "no dialogue allowed". And that was easy enough to do - pop a bunch of limits in an array, same if statement I used with the prompts, bingo bango done. And no, I'm not showing off the list, because there's some crazy shit in there and I'm not giving it away ;)
At this point, I could've said I was done. Two different kinds of prompts, and a fair number of each, plus the added bonus of an extra boundary if you're up for a challenge. Exactly what I set out to do.
Except.
Hard as it may be to believe, not everyone on Earth wants to write the same rockers Lia and I do. I know! Try to wrap your mind around that. And so no one but Lia and I and anyone who happens to have the same taste was gonna get much use out of it with the character lists hard-coded in. I really wanted to make it so people could enter their own lists.
The input was easy enough. Two columns of 12 text boxes (I chose to leave the wild card spots where they are) each, and a submit button.
However, the submit button was a problem. Because getting data from a text box isn't hard, but I've always done it as a function. Remember how I said before that once a variable is wrapped in a function, it doesn't exist for other functions? I needed the character arrays for crackPrompt() and oneWordPrompt(). Hnh.
The solution was rather simple, if inelegant. I copy/pasted both character lists into each function. And using document.form_name.element_name.value, I could assign each array item to a text box. Whatever a user entered into the form would be grabbed when either the "Crack" or "One Word" buttons were clicked. Bye-bye, submit button.
I like it better that way, anyway - rather than type characters - click Submit - click Crack, it's just type - Crack.
The (rather ugly) new character arrays, same in both functions:
And the corresponding html:
I chose to use the original lists rather than placeholder text for the initial values, because while not everyone wants to use those characters, anyone who DOES want to use any of them is saved a bit of typing.
(Okay, and it makes it easier for me, because those're my lists, haha)
So there it is. A site that takes any character lists, chooses two characters at random, adds a prompt that's silly or serious at the user's discretion and, if the user so chooses, assigns a special extra limitation.
God, you guys. I rock so hard.
Of course I think the last Javascript anything I did was the smut generator, so I was a smidge rusty. So step one was to open up the source code for the smut generator and brush up on my syntax (and play around with it for a while, and remind myself I really do plan to write an f/f scene for it one of these days).
Way more fun than brushing up through a book or website or something silly like that.
So with document.getElementById("element_id").innerHTML and var something = new Array() firmly refreshed, up comes a deliciously blank .js file. Mmmm.
The easiest part of the whole thing was gonna be making up the character and prompt arrays (funnily enough, the hardest part also had to do with the character arrays), so I dashed those off right away. Simple enough.
(If you'd rather keep yourself in the dark about what exactly the prompts are, scroll by this chunk fast ;) )
var characters_one = new Array() characters_one[0]="Steve Harris"; characters_one[1]="Janick Gers"; characters_one[2]="Dave Murray"; characters_one[3]="Markus Grosskopf"; characters_one[4]="Dani Loeble"; characters_one[5]="Tobias 'Eggi' Exxel"; characters_one[6]="Joe Elliott"; characters_one[7]="Tobi Sammet"; characters_one[8]="Felix Bohnke"; characters_one[9]="Tico Torres"; characters_one[10]="Richie Sambora"; characters_one[11]="Rick Savage"; characters_one[12]="Wild Card"; var characters_two = new Array() characters_two[0]="Bruce Dickinson"; characters_two[1]="Nicko McBrain"; characters_two[2]="Adrian Smith"; characters_two[3]="Andi Deris"; characters_two[4]="Sascha Gerstner"; characters_two[5]="Kai Hansen"; characters_two[6]="Jens Ludwig"; characters_two[7]="Henjo Richter"; characters_two[8]="Jon Bon Jovi"; characters_two[9]="David Bryan"; characters_two[10]="Viv Campbell"; characters_two[11]="Phil Collen"; characters_two[12]="Wild Card"; var crack = new Array() crack[0]="...kiss in the dark"; crack[1]="...watch porn together"; crack[2]="...secret kink"; crack[3]="...meet the parents"; crack[4]="...fight/contest/challenge that ends in sex"; crack[5]="...at the circus"; crack[6]="...when the power goes out"; crack[7]="...karaoke"; crack[8]="...bad boy fantasy"; crack[9]="...unrequited love"; crack[10]="...wake up naked together and don't remember a thing"; crack[11]="...get slipped an aphrodisiac"; crack[12]="...mpreg"; crack[13]="...gendershift"; crack[14]="...have sex in an unlikely place"; crack[15]="...have an awkward conversation"; crack[16]="...meet in an over-the-top gay bar"; crack[17]="...one is secretly a sex worker"; crack[18]="...learn a horrible secret"; crack[19]="...one is (secretly?) a virgin"; crack[20]="...go camping"; crack[21]="...mile-high club"; crack[22]="...travel through time"; crack[23]="...in a fairy tale"; crack[24]="...switch bodies";
They're the same lists Lia and I were using when we were doing this over IM with dice, plus five random other cracky prompts I think have potential.
As an afterthought, I thought it might be nice to also use this for more standard prompting, so I wrote up a list of 25 one-word prompts and put those in their own array.
So now I have all these lovely characters and prompts just waiting for me to roll the dice and write something brain-melting. So the next step is to code the dice.
Again, this is something I did for the smut generator: declare a variable and then assign a random number to it.
var cracknumber = Math.floor(Math.random()*25); var ch_one_num = Math.floor(Math.random()*13); var ch_two_num = Math.floor(Math.random()*13);
Cracknumber picks a random number between 0 and 25 and rounds it down, so it'll give me a whole number from 0-24 inclusive. Ch_one_num and ch_two_num do the same thing with 0-12 inclusive. For the one-word prompts, I just copied this code and changed cracknumber to wordsnumber.
Last step before I pop over to an html file is to wrap each prompt set in its own function with its random number variables and give it a line to print to the screen so I can confirm it's working.
You assign the function name to your button in the html file and that executes the code wrapped up in that function. Variables wrapped up in a function can only be used by that function (this'll be important later), and since both prompt sets required the character lists I left those outside the functions, in global space.
I simply added function crackPrompt(){ before the crack array and a dinky little }; after it. Voila, function. Same thing with the words array, substituting oneWordPrompt() for crackPrompt().
The quickest and easiest way to write something to the screen is document.write(something), so I added an if statement to the crackPrompt() function to make that happen:
if (cracknumber<=25) {
document.write("Your characters are "+characters_one[ch_one_num]+" and "characters_two[ch_two_num]+". Your prompt is "+crack[cracknumber])
};Because document.write wipes whatever's in the window and replaces it with the text, it's not workable for the final project, but it's quick and doesn't require me doing any html coding beyond putting in a button.
So that code will, when cracknumber is less than or equal to 25 (which it always will be, it can't possibly go higher than 25), the function wipes the screen and writes in two character names, some text, and a prompt. Spiff.
Of course, it can't do that without any provocation. So I open up a new html file and pop in a button.
< input type="button" value="Crack" onclick="crackPrompt()" / >
So that makes a button, labeled Crack, that runs the crackPrompt() function when clicked.
Step-by-step, what should happen is:
1. I click the button
2. The crackPrompt() function first runs through the random number variables. Let's say it comes up with 20, 9, and 1.
3. Because 20 is less than 25, the if statement is triggered.
4. 9 is substituted for ch_one_num, 1 for ch_two_num, and 20 for cracknumber.
5. The numbers point to specific spots in each array, giving us "Tico Torres", "Nicko McBrain", and "...go camping"
6. document.write writes "Your characters are Tico Torres and Nicko McBrain. Your prompt is ...go camping"
And that's exactly what did happen! Yay, I got it right.
The logical next step probably would've been to test the oneWordPrompt() function, but instead I decided to write in a little extra html so I could use a better command than document.write.
I used document.getElementById("element_id").innerHTML for the smut generator - it finds "element_id" in your html file and replaces the HTML with whatever you tell it to. It just wipes what's already in "element_id", not the whole screen. Much nicer.
But you need an element to id. So I added a div with the id "Prompt", and there we go, all set.
Back to the .js file, to replace document.write with:
document.getElementById("Prompt").innerHTML=""Your characters are "+characters_one[ch_one_num]+" and "characters_two[ch_two_num]+". Your prompt is "+crack[cracknumber]I didn't change anything about the way the code ran, so there wasn't really a need to test it again, but I was having fun seeing what came up, so testing time. It worked! HOW SHOCKING.
This is when I uploaded what I had so far and a bunch of people had to deal with me bouncing about it and showing it off over AIM. I also claimed I was gonna finish it after dinner but I got distracted constantly clicking for new prompts, lol.
So. Tore myself away from the crackliciousness of it all, off to dinner, get back, more coding YAY.
It finally occurred to me I might want to check the oneWordPrompt() function, even though that's way less fun than the cracky prompts. *Sigh* how I suffer for my art.
Add a new button, label "One Word", assign oneWordPrompt() as the onclick attribute, fire it up, clicky...
Nothing.
Rapid clicking, as if clicking faster will fix it. It doesn't. Bastard.
Right, then. Pop it up in Firefox, check the error console - "wordnumber is undefined".
What? Yes it is, I defined it right - oh. Oh, it says wordsnumber. With an s. How 'bout that. Easy enough to fix, anyway, so fix it I do. Fire it back up.
"Your characters are Steve Harris and Jon Bon Jovi. Your prompt is undefined."
Awesome, it - wait. Undefined. Motherfucker.
Back to the .js file to see what the Hell I did this time, and guys? Know how much I love you that I'm not pretending this didn't happen.
See, typing in the long lists of array contents is really tedious. So usually I'll type in the basic shell, the "words[0]=" ";" that every array item has in common, and copy/paste it down 24 times so I just have to fill in the space between the quotation marks.
And - this is important, kiddies - and change the 0 to whatever other number.
The variable was undefined because I'd forgotten to change the 0 - every single item was words[0], so when the function got to step 4 above and inserted a 20, there was no words[20] to point to. Just lots and lots of zeroes.
So - looking rather sheepish - I fix it. And it works like a charm. Excellent.
Alright. Arrays in order, functions working, cracky prompts flowing like wine - excellent. I decided to take a quick break from Javascript and hopped over to my good buddy CSS to make the page pretty. Excruciatingly simple, but presentable. Very nice. And then back to the html file to code in another div.
What for?
I'd been wanting to add another angle to the prompts thing, a randomly generated limitation like "drabble" or "slash" or even something odd like "word count must be a palindrome" or "no dialogue allowed". And that was easy enough to do - pop a bunch of limits in an array, same if statement I used with the prompts, bingo bango done. And no, I'm not showing off the list, because there's some crazy shit in there and I'm not giving it away ;)
At this point, I could've said I was done. Two different kinds of prompts, and a fair number of each, plus the added bonus of an extra boundary if you're up for a challenge. Exactly what I set out to do.
Except.
Hard as it may be to believe, not everyone on Earth wants to write the same rockers Lia and I do. I know! Try to wrap your mind around that. And so no one but Lia and I and anyone who happens to have the same taste was gonna get much use out of it with the character lists hard-coded in. I really wanted to make it so people could enter their own lists.
The input was easy enough. Two columns of 12 text boxes (I chose to leave the wild card spots where they are) each, and a submit button.
However, the submit button was a problem. Because getting data from a text box isn't hard, but I've always done it as a function. Remember how I said before that once a variable is wrapped in a function, it doesn't exist for other functions? I needed the character arrays for crackPrompt() and oneWordPrompt(). Hnh.
The solution was rather simple, if inelegant. I copy/pasted both character lists into each function. And using document.form_name.element_name.value, I could assign each array item to a text box. Whatever a user entered into the form would be grabbed when either the "Crack" or "One Word" buttons were clicked. Bye-bye, submit button.
I like it better that way, anyway - rather than type characters - click Submit - click Crack, it's just type - Crack.
The (rather ugly) new character arrays, same in both functions:
var characters_one = new Array() characters_one[0]=document.character_one.one_one.value; characters_one[1]=document.character_one.one_two.value; characters_one[2]=document.character_one.one_three.value; characters_one[3]=document.character_one.one_four.value; characters_one[4]=document.character_one.one_five.value; characters_one[5]=document.character_one.one_six.value; characters_one[6]=document.character_one.one_seven.value; characters_one[7]=document.character_one.one_eight.value; characters_one[8]=document.character_one.one_nine.value; characters_one[9]=document.character_one.one_ten.value; characters_one[10]=document.character_one.one_eleven.value; characters_one[11]=document.character_one.one_twelve.value; characters_one[12]="Wild Card"; var characters_two = new Array() characters_two[0]=document.character_two.two_one.value; characters_two[1]=document.character_two.two_two.value; characters_two[2]=document.character_two.two_three.value; characters_two[3]=document.character_two.two_four.value; characters_two[4]=document.character_two.two_five.value; characters_two[5]=document.character_two.two_six.value; characters_two[6]=document.character_two.two_seven.value; characters_two[7]=document.character_two.two_eight.value; characters_two[8]=document.character_two.two_nine.value; characters_two[9]=document.character_two.two_ten.value; characters_two[10]=document.character_two.two_eleven.value; characters_two[11]=document.character_two.two_twelve.value; characters_two[12]="Wild Card";
And the corresponding html:
< form name="character_one" id="character_one" action=""> < input name="one_one" type="text" value="Steve Harris"> < input name="one_two" type="text" value="Janick Gers"> < input name="one_three" type="text" value="Dave Murray"> < input name="one_four" type="text" value="Markus Grosskopf"> < input name="one_five" type="text" value="Dani Loeble"> < input name="one_six" type="text" value="Tobias 'Eggi' Exxel"> < input name="one_seven" type="text" value="Joe Elliott"> < input name="one_eight" type="text" value="Tobi Sammet"> < input name="one_nine" type="text" value="Felix Bohnke"> < input name="one_ten" type="text" value="Tico Torres"> < input name="one_eleven" type="text" value="Richie Sambora"> < input name="one_twelve" type="text" value="Rick Savage"> < form name="character_two" id="character_two" action=""> < input name="two_one" type="text" value="Bruce Dickinson"> < input name="two_two" type="text" value="Nicko McBrain"> < input name="two_three" type="text" value="Adrian Smith"> < input name="two_four" type="text" value="Andi Deris"> < input name="two_five" type="text" value="Saschsa Gerstner"> < input name="two_six" type="text" value="Kai Hansen"> < input name="two_seven" type="text" value="Jens Ludwig"> < input name="two_eight" type="text" value="Henjo Richter"> < input name="two_nine" type="text" value="Jon Bon Jovi"> < input name="two_ten" type="text" value="David Bryan"> < input name="two_eleven" type="text" value="Viv Campbell"> < input name="two_twelve" type="text" value="Phil Collen"> < /form>
I chose to use the original lists rather than placeholder text for the initial values, because while not everyone wants to use those characters, anyone who DOES want to use any of them is saved a bit of typing.
(Okay, and it makes it easier for me, because those're my lists, haha)
So there it is. A site that takes any character lists, chooses two characters at random, adds a prompt that's silly or serious at the user's discretion and, if the user so chooses, assigns a special extra limitation.
God, you guys. I rock so hard.
