How do I put this custom CSS and JavaScript into a certain block?

Question

I'm having a hard time getting this: http://dev.chrisruno.com/sahshe/quiz/ To go into a block in this node: http://sahshe.chrisruno.com/?q=node/22#

I've successfully included the two Javascript files I need, but I can't figure out how to apply the css to ONLY what is inside the block. I've only gotten as far as including the CSS file in my theme's .info file, but that makes the whole site look crazy.

Answer 1

In very broad strokes, in your module's block() or block_view() hook, you would do something like this:

 drupal_add_js(....);   // see http://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_js/7
 drupal_add_css(....);  // see http://api.drupal.org/api/drupal/includes%21common.inc/function/drupal_add_css/7

and to have the CSS apply only to that block, look at what Drupal's block theme functions wrap the block with, and then using one of those ids or classes, cascade your CSS accordingly, eg, instead of:

.content {
  ....
}

use:

#BLOCK-ID .content {
   ....
}

or:

.BLOCK-CLASS .content {
   ....
}

Of course, you would return as the block's content either the HTML or a renderable array of it.