Make a Javascript Adoptables System with Multiple Variations

Need help making a website? Coding your own adoptables? Ask questions or share knowledge here

Make a Javascript Adoptables System with Multiple Variations

Postby Solloby » Mon Dec 08, 2008 7:55 pm

Javascript Adoptables System Tutorial
>>> Supports Multiple Variations

Contents
===========================
1.0: Introduction
1.1: Why use Javascript
1.2: Important things to note

2.0: Adoption Script
2.1: What it does
2.2: Define Variations
2.3: Select Variation & Output Codes

3.0: Calling the Script
3.1: Link, Call & Name
3.2: Combining into 1 File

4.0: Complete Script
4.1: Javascript file contents - individual
4.2: Javascript file contents - combined

5.0: Troubleshooting
5.1: Common Problems


1.0: Introduction
===========================
Welcome to Solloby's Javascript Adoptables System tutorial. If you would like to make an adoptables website that supports multiple pet variations (one egg/newborn growing into more than one child/adult) then this is a good place to be. Please read the entire tutorial before asking questions. Thank you!

1.1: Why use Javascript
So why should you use Javascript to make an adoptables system?
> It supports multiple variations.
> Almost all of the code is in 1 file.
> Javascript is client-side unlike PHP 5, so your web browser speaks the language and not the server. This means you don't have to worry about the server/host not supporting it. All good web browsers can interpret Javascript.
> If Nick's PHP tutorial looks too complex for you then this one is a good alternative or stepping stone.

1.2: Important things to Note
1. This is easier if know HTML but you don't have to.
2. You should make a note on your adoption page that you are using Javascript so people that have it disabled can reenable it.
3. The script is not protected, ie. people can get into it and work out the variations. If you are concerned about this then you will have to use Nick's PHP script because there is no easy way to protect Javascript (due to it being client-side).
4. If you log what IP addresses view what page however, and have a proboards forum, then you can match up IP addresses to forum users and work out who is doing this and ban them (if you made a rule against and forewarn about this).
Last edited by Solloby on Mon Jun 10, 2013 2:59 pm, edited 4 times in total.
Solloby
I take care of the CS archives and
sometimes submit pet/item designs.

My Stuff
Characters :: Artwork

Image

Help
You can find Help in the main navigation menu.
If your question or problem is not answered there, please use the Help System.
I am not a mod and cannot help you so please don't PM me for site help.
User avatar
Solloby
Archivist
 
Posts: 13428
Joined: Sat Jun 21, 2008 7:27 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

2.0

Postby Solloby » Mon Dec 08, 2008 7:56 pm

2.0: Adoption Script
=======================
2.1: What it Does
Or rather, what to make it do...

Javascript File:
1. Define how many variations there are.
2. Make an array and store the variations in it.
3. List the variations. List common variations more times than uncommon variations.
4. Make a function that chooses one of these variations randomly.
5. Output HTML and BBS(Forum) adoption code.

Adoption Page:
1. Link to the Javascript file.
2. Call the function.
3. Have a named <textarea> for the adoption codes to be put in.

2.2: Define Variations
First, make a Javascript file. You can do this in Dreamweaver or in Notepad. Save the file as a .js file, let's call it egg1.js.

Let's start with some comments. If you put // at the start of a line, it makes the web browser ignore whatever you type. So let's make some comments. Let's say what it is, who edited it and what date you first made it (month and year is good).

Code: Select all
//Solloby's Adoption Script
//Edited by [YOUR NAME], [Date]


Awesome. Now let's start with the code. How many variations do you want? Dynos! uses 20 which allows for more rarities, but 10 is sufficient. If you regularly have more than 3 or 4 variations per egg then you should think about using 20. Fear not if you ever need more variations, it's very easy to change.

Let's put in our Javascript file how many we want.

Code: Select all
var NumberOfVars = 10


There we go. We just made a new variable called NumberOfVars, and put the number 10 in it. Ok, let's make an array. An array is like a table of variables. It lets us store lots of values. I'm going to store the 'pointer' to the array in a variable called egg.

Code: Select all
var egg = new BuildArray(NumberOfVars)


Lovely. Now let's put some variations in it. Let's assume we have 1 baby that grows into 2 different adults. Upload the baby to Photobucket (if you use elsewhere just modify the output code to reflect this) and call it pet1.jpg. Upload it a second time and call it pet2.jpg. Later in the month, you can replace these images with the different adult stages. That's why we need two versions of the baby.

Here's the Javascript code to put our variations in the array. In this example, there is a 60% chance to adoption pet1 and 40% chance to adoption pet2, because pet1 appears in 6 out of 10 array cells (oh blah, I forget the proper jargon). If you want pet1 to be more common and pet2 to be more rare, put

Code: Select all
//Variations
egg[1] = "pet1"
egg[2] = "pet1"
egg[3] = "pet1"
egg[4] = "pet1"
egg[5] = "pet1"
egg[6] = "pet1"
egg[7] = "pet2"
egg[8] = "pet2"
egg[9] = "pet2"
egg[10] = "pet2"


Let's make this array happen. Just copy-paste this randomness beneath your variation list to make magic happen.

Code: Select all
function BuildArray(size){
    this.length = size
    for (var i = 1; i <= size; i++){
        this[i] = null}
    return this
}


Ok, so now we have an array with all our variations in it, and have even set the rarities!

2.3: Select Variation & Output Codes
Now it's time to actually make the adoption occur. To do this, we need to select one of the 10 possible variations and output its code.

I have made a function called getEgg, which randomly chooses a variation and stores it in a new variable called rnd.
Notice our variable NumberOfVars has appeared.

Code: Select all
function getEgg(frm) {
    var rnd = Math.ceil(Math.random() * NumberOfVars)


Now it's time to output the adoption codes. This script was originally designed to be a random text generator and name generator, and when adapting it to adoptables I left the inclusion of forms, probably unnecessarily. What does this mean? This means that if you are hosting your adoptables site on freewebs then it won't work until 7-8 days after you first sign up to a new account.

Ok, back to the code. frm stands for form. WordBox and WordBox2 are what I have called the textareas in my form. We'll revisit that later. Value is what we put in the textareas in the form. Something important to note is that the string (text characters) must be surrounded by " symbols. This means if we have a " symbol in the middle of our code, we need to put a \ symbol in front of it so that the web browser knows you want to include the " in the string. Otherwise it will think your string has ended, and won't understand what you've put afterwards!

Code: Select all
frm.WordBox.value = "<a href=\"http://www.rainbow-muffin.org/dynos/index.html\"><img src=\"http://i434.photobucket.com/albums/qq67/Dynos01/dec08/" + egg[rnd] + ".jpg\"></a>"

frm.WordBox2.value = "[url=http://www.rainbow-muffin.org/dynos/index.html][img]http://i434.photobucket.com/albums/qq67/Dynos01/dec08/" + egg[rnd] + ".jpg[/img][/url]"
}


Replace the 2 http://www.rainbow-muffin.org/dynos/index.html with your own website's URL.
Next, replace the photobucket address to your photobucket's address. Don't link the image, just link up to the folder the image is in.

If you saved your images as .gif or .png instead of .jpg, change that as well. If your images are .bmp then you need to optimise them by saving them in one of the aforementioned formats, .bmp files are too unnecessarily large bandwidth-wise for the Internet.

Notice the egg[rnd] in the code above? egg is the name of our array, and rnd is the variable we are storing the randomly selected variation number in. So if our random generator picked the number 2, then egg[rnd] will point to egg[2] which is pet1, and the adoption code for pet1 will display.
Last edited by Solloby on Mon Dec 08, 2008 8:44 pm, edited 3 times in total.
Solloby
I take care of the CS archives and
sometimes submit pet/item designs.

My Stuff
Characters :: Artwork

Image

Help
You can find Help in the main navigation menu.
If your question or problem is not answered there, please use the Help System.
I am not a mod and cannot help you so please don't PM me for site help.
User avatar
Solloby
Archivist
 
Posts: 13428
Joined: Sat Jun 21, 2008 7:27 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

3.0

Postby Solloby » Mon Dec 08, 2008 7:56 pm

3.0: Calling the Script
=====================
3.1: Link, Call & Name
To get our script to work, we need to link it in the adoption page. So open up your page that displays the pet that was just adopted (the Congratulations, you just adopted this pet! page). Open it in Dreamweaver or Notepad.

At the top of your html page you will see something similar to this:

Code: Select all
<html>
<head>
<title>Webpage Name Here</title>
<script src="egg1.js" type="text/javascript"></script>
</head>


The important parts to note:
the <link href="../dynos.css> part is where I have linked my CSS (Cascading Style Sheet). But that's another thing. What you are interested in is the next line:
Code: Select all
<script src="egg1.js type="text/javascript></script>

This line links your Javascript file so it can be used.

Ok, so now our file is linked. It's time to call the function we made, getEgg. But when are we going to do this? The best time to do this is when the page is first loading. So when the page loads, our Javascript will select a variation and output the code.

Below your </head> tag should be a <body> tag. Let's add the information to it.

Code: Select all
<body onLoad="getEgg(document.WordForm);">


Take note of the word WordForm. That is what we are going to call our form.

We have now linked our Javascript and called the function we made. But we aren't finished yet. We need to specify exactly where on the page we want the codes to appear. So after you have put your newborn/egg image on the page, add a form with some textarea boxes for the code to be output to.

Code: Select all
<FORM NAME="WordForm">
    <div align="center">
      <textarea rows="3" cols="30" name="WordBox"></textarea>
      <textarea rows="3" cols="30" name="WordBox2"></textarea>
    </div>
</FORM>


I have used a div tag to centre my textarea boxes because I like them that way. You can adjust the row and col numbers to make your textarea boxes bigger or smaller. There are 2 boxes we have made, WordBox and WordBox2. Sound familiar? They should because they are in our Javascript file. By giving our textareas these names, we can let our Javascript file know where to put the code.

And that's it! That wasn't too hard now was it.

3.2: Combining into 1 file
But Solloby, doesn't this mean I need 1 file per egg? So if I have 5 eggs I need 5 Javascript files?
Why yes it does! That's not very efficient is it. It works fine and if you want to stop now then go ahead.

If you would like all of your variations in 1 file, here's how to do it.

Let's open our Javascript file and take a look at the variables. Which variables do we need multiples of? I don't think we need more than one NumberOfVars variable, as long as each array we make has the same number. We do however need multiple arrays, one for each egg/newborn. We are also going to need different getEgg functions. If we number everything then that will make things simple.

Leave the comments and var NumberOfVars = 10 at the top, then copy and paste everything below it to duplicate it. For the duplicated code, add a number 2 after egg in var egg2 = new BuildArray(NumberOfVars) and all 10 variations. Leave the BuildArray code alone. Change the function name getEgg(frm) to getEgg2(frm) , and var rnd below it to var rnd2. In the output code change egg[rnd] to egg2[rnd2]. Test to make sure you made no errors, then rinse and repeat for each egg/newborn pet you have. And there you go, you can link all of your adoption pages to the same Javascript file. Yay!
Last edited by Solloby on Tue Dec 09, 2008 2:07 am, edited 1 time in total.
Solloby
I take care of the CS archives and
sometimes submit pet/item designs.

My Stuff
Characters :: Artwork

Image

Help
You can find Help in the main navigation menu.
If your question or problem is not answered there, please use the Help System.
I am not a mod and cannot help you so please don't PM me for site help.
User avatar
Solloby
Archivist
 
Posts: 13428
Joined: Sat Jun 21, 2008 7:27 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

4.0

Postby Solloby » Mon Dec 08, 2008 7:57 pm

4.0: Complete Files
=================
4.1: Javascript file contents - individual

Everything bolded you may need to edit.
You still need to complete section 3 of the tutorial.

//Solloby's Adoption Script
//Edited by YOU, DATE

var NumberOfVars = 10

var egg = new BuildArray(NumberOfVars)

//Variations
egg[1] = "pet1"
egg[2] = "pet1"
egg[3] = "pet1"
egg[4] = "pet1"
egg[5] = "pet1"
egg[6] = "pet1"
egg[7] = "pet1"
egg[8] = "pet1"
egg[9] = "pet1"
egg[10] = "pet1"

function BuildArray(size){
this.length = size
for (var i = 1; i <= size; i++){
this[i] = null}
return this
}

//Select a Variation
function getEgg(frm) {
var rnd = Math.ceil(Math.random() * NumberOfVars)

//Output the Adoption Codes
frm.WordBox.value = "<a href=\"http://www.YOURWEBSITE/index.html\"><img src=\"http://NUMBERS.photobucket.com/albums/NUMBERS/USERNAME/FOLDER/" + egg[rnd] + ".jpg\"></a>"
frm.WordBox2.value = "[url=http://www.YOURWEBSITE/index.html][img]http://NUMBERS.photobucket.com/albums/NUMBERS/USERNAME/FOLDER/"%20+%20egg[rnd]%20+%20".jpg[/img][/url]"
}



4.2: Javascript file contents - combined
You need to work out for yourself what needs editing, it's basically the same as above.

[This will be added when I have more time]
Last edited by Solloby on Tue Dec 09, 2008 2:27 am, edited 3 times in total.
Solloby
I take care of the CS archives and
sometimes submit pet/item designs.

My Stuff
Characters :: Artwork

Image

Help
You can find Help in the main navigation menu.
If your question or problem is not answered there, please use the Help System.
I am not a mod and cannot help you so please don't PM me for site help.
User avatar
Solloby
Archivist
 
Posts: 13428
Joined: Sat Jun 21, 2008 7:27 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

5.0

Postby Solloby » Mon Dec 08, 2008 7:57 pm

5.0: Troubleshooting
======================
5.1: Common Problems
I'll added these as questions are asked.

1. Make sure you have made the Javascript file correctly AND included the 3 pieces of code in your adoption page.
2. Make sure you adoption page ends in .html and your Javascript file ends in .js
Last edited by Solloby on Tue Dec 09, 2008 2:28 am, edited 1 time in total.
Solloby
I take care of the CS archives and
sometimes submit pet/item designs.

My Stuff
Characters :: Artwork

Image

Help
You can find Help in the main navigation menu.
If your question or problem is not answered there, please use the Help System.
I am not a mod and cannot help you so please don't PM me for site help.
User avatar
Solloby
Archivist
 
Posts: 13428
Joined: Sat Jun 21, 2008 7:27 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

6.0

Postby Solloby » Mon Dec 08, 2008 8:48 pm

This tutorial is complete!
Well except for the combined code dump. I'll do that later, I have an exam tomorrow and need to sleep.
Feel free to ask questions, but please read the entire thread first, I don't plan to answer questions answered in the tutorial.
Solloby
I take care of the CS archives and
sometimes submit pet/item designs.

My Stuff
Characters :: Artwork

Image

Help
You can find Help in the main navigation menu.
If your question or problem is not answered there, please use the Help System.
I am not a mod and cannot help you so please don't PM me for site help.
User avatar
Solloby
Archivist
 
Posts: 13428
Joined: Sat Jun 21, 2008 7:27 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Make a Javascript Adoptables System with Multiple Variations

Postby Atroxa » Tue Dec 09, 2008 6:30 am

this tutorial will be extremely helpful when i get my tablet as i plan on doing my own adoptable site ^_^ but i had a quick question, i saw not too long ago where nick posted a tutorial on the php aspect of the site, where did it go? i can't find it..
Image
User avatar
Atroxa
 
Posts: 601
Joined: Tue Sep 23, 2008 6:49 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Make a Javascript Adoptables System with Multiple Variations

Postby Solloby » Tue Dec 09, 2008 10:43 am

Btw this was requested by Deli on the Dynos! forum. Ty Deli <3

Thanks Kult ^.^ Yeah it's hard to find lol, it's under the Announcements section now.
Solloby
I take care of the CS archives and
sometimes submit pet/item designs.

My Stuff
Characters :: Artwork

Image

Help
You can find Help in the main navigation menu.
If your question or problem is not answered there, please use the Help System.
I am not a mod and cannot help you so please don't PM me for site help.
User avatar
Solloby
Archivist
 
Posts: 13428
Joined: Sat Jun 21, 2008 7:27 pm
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Make a Javascript Adoptables System with Multiple Variations

Postby Cryos » Tue Dec 09, 2008 4:42 pm

YAY! thank you so much! this is something that I have been hunting for (while I prod at my brain to learn PHP @_@) now once I get enough time to make more adoptables for my site I can use this! ^_^ thanks!! off to bed now so I can do that later :lol:
Image

~x~ If you have a dragon RP and need more people toss me a message and I'll check it out! ^_^ ~x~

~x~ ImageImageImageImage ~x~
~x~ I was once known as Shinara ^_^ ~x~
Image
~x~ Just a warning, don't click the link above unless you don't mind strong language and such. It's one of my favorite web comics so I wish to spread knowledge about it. Also if you read it and use pesterchum my chumhandle is cryosKardia.~x~
User avatar
Cryos
 
Posts: 357
Joined: Wed Sep 24, 2008 10:13 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Re: Make a Javascript Adoptables System with Multiple Variations

Postby Atomic Blue » Sat Dec 13, 2008 3:29 pm

Thanks so much! I'm working on it right now. xD

Question - [I'm not sure if it's in your tutorial or something but...] On freewebs, would you put the whole code thing into a HTML box? [Or maybe I'm missing something here. xD]
Image

SIE SIND DAS ESSEN
UND WIR SIND DIE JÄGER
User avatar
Atomic Blue
 
Posts: 3896
Joined: Thu Oct 23, 2008 10:55 am
My pets
My items
My wishlist
My gallery
My scenes
My dressups
Trade with me

Who is online

Users browsing this forum: No registered users and 0 guests