drapak.ca - Computer Programming: Character Generator

Resources

//INIT: Using objects

//PROCESS: String addition
//PROCESS: Timeout and intervals
//PROCESS: Functions: Definition, trigger, or reference?

//OUTPUT: Animating other CSS properties

Saving your work

Use Save as... to save the empty template as "3.05H-CharacterGenerator-LastName.html" in your Computer Programming directory.

The assignment: Computer Programmer - the RPG

Let's say that I have created a role-playing game in which people play computer programmers with different skills and abilities. I know! Brilliant idea! I am going to make a mint!

Let's say that each character could have the following characteristics:

Name	Dragos the Security Guru
Typing	5	Random die roll from 1-100
Spelling and Grammar	3	Random die roll from 1-100
Modularizes Code	6	Random die roll from 1-100
Problem Solving	2	Random die roll from 1-100
Awesome with CSS	2	Random die roll from 1-100
Coding Style	6	Random die roll from 1-100

Program planning

I could make a program to roll random characters up quickly!

User interface

instructions for the user
a button to trigger the program, using .onclick
a table for the information with a ScoreId to hold the score and a ChartId to hold a bar graph for each characteristic

Variable structure

I can do this without any global variables. I will need an object variable to handle the character information,

I will structure my character information object like this:

characterObject
`characterObject.typing`	stores the Typing skill of the character
`characterObject.spellingAndGrammar`	stores the Spelling and Grammar skill of the character
`characterObject.modular`	stores the Modularizes Code skill of the character
`characterObject.problemSolving`	stores the CSS skill of the character
`characterObject.CSS`	stores the CSS skill of the character
`characterObject.style`	stores the Coding Style skill of the character

An example

Let's generate a random programmer!

--	Patience
--	Curiosity
--	Troubleshooting
--	Precision
--	Resourcefulness
--	Teamwork

Evaluation

___/10 INIT: including
1. create an empty object
2. use the value of an object's property to make a custom animation (width)
3. pass an object to a function as a parameter/argument
4. use the value of an object's property to make a custom animation duration
___/10 PROCESS: including
1. create a function that accepts an object as an argument/parameter
2. set a delay using setTimeout() or setInterval
3. use an anonymous function inside setTimeout() or setInterval
4. use string addition
5. processes at least 5 characteristics
___/10 OUTPUT: including ANY FIVE of
1. change the src of an element
2. display information using .innerHTML
3. animate using a custom duration
4. position an object using % instead of px
5. animate a change in the width of an element
6. animate a fade in or fade out of an element
___/10 STYLE: including
1. honour all previous //STYLE sections
2. use descriptive variable names
3. break up functions into separate ones for input, processing, and output
4. uses descriptive comments to identify and describe each function,
  for example: //PROCESS: this function accepts distanceUp and animates the image up that number of pixels
5. add spaces between mathematical operators,
  for example: var exampleVar = 3 + 4, not var exampleVar=3+4.