//MAKE: 3.04 Hand-in: Character Generator


Saving your work

Use Save as... to save the empty template as " 3.04H-CharacterGenerator-LastName.html " in your Computer Programming 12 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

Variable structure

I can do this without any global variables. I will need:

I will structure my character information object like this:

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

You will need four functions called from inside mainProcedure:

  1. generateCharacterStats();
  2. displayStatistics()
  3. animateStatistics()
  4. fadeGraphAway()


  1. As you create each function, add a descriptive comment, and add a console.log to help you troubleshoot.
  2. Create a PROCESS function ( generateCharacterStats ) that will create an empty object and randomly assign numbers to at least five characteristics. This function should return this object at the end of the function. Add it to the start of your mainProcedure.
  3. Create an OUTPUT function ( displayStatistics ) that will accept the character object as a parameter and display its properties inside the appropriate ScoreIDs. Add this next to your mainProcedure.
  4. Create an OUTPUT function ( animateStatistics ) that will accept the character object as a parameter/argument and then use that information to animate the graph.
    1. First get the graph animating in to opacity: 1
    2. Then get it animating the width of the right GraphID
    3. Then make the duration of the animation depend on the ability score
    4. Lastly, use setTimeout to make the animations trigger in a sequence
    5. Use an anonymous function in the timer to make it work, like this:
      setTimeout( function () {
      		//animation commands go here
      	}, 200
  5. Create an OUTPUT function ( fadeGraphAway ) that will animate shrinking the graphs backward
    1. First get it so each GraphID animates back to zero width
    2. Then get it so that it also fades out to opacity: 0
    Then add this to mainProcedure, putting it in before generateCharacterStats

An example

Let's generate a random programmer!

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