I will write a little bit more to clarify my problem. Please stay with me.
I have an `ImageMap` with an `ImageFlip` and a `MouseOver` (all written in `JS`). Clicking on one of the highlighted areas in the `ImageMap` will open a `LightBox` (I used the `Colorbox`) with a multiple choice Quiz, written in `JS` and `CSS` and an answere button. Clicking on the answere button will open a `PopUp`, saying wheather the answere was wrong or right.
So far so, good.

**How it worked:**
I had a `HTML document` where I loaded in the `<head>` the `Colorbox JS file` and the `Colorbox CSS file` as well as the `jQuery file`. the `ImageMap` was in this `HTML Document`(lets call it `Document1`). I put a link behind the highlighted areas in the `ImageMap` to a new `HTML Document (Document2)` which contained the Quiz and told with the a `Colorbox function` in `Document1`to open `Document2` as an `iFrame` on my `ImageMap`. The `Document2` of the Quiz contained besides the Questions (written in `HTML`) the `JS` and the `CSS Style`, which was written in the Document (not externly linked like in `Document1` with the `Colorbox JS and CSS files`).
That worked just fine.

**How its not working anymore**
But then I thought it would be nicer to have several `JS files` as well as several `CSS` files and not another `Document2` (so a second .html site with the whole Quiz in it, rather all implemented in Document). So I seperated in `Document2` the `JS` and the `CSS` and wrote the Questions from the Quiz into `Document1`. That left me with a `JS file` for the Quiz, a `CSS file` for the Quiz, a `JS file` for the `Colorbox` as well as a `CSS file` for the colorbox. 
All the `JS files` and `CSS files` are loaded in the `<head>` of `Document1`. There is no `Document2` now anymore.
But, now the Quiz is not working anymore. Clicking on a highlighted area works, the `Lightbox` opens with the questions, but the answere button does not open a `PopUp` anymore which should show weather the chosen answere was right or wrong.

All I did was getting rid of the extra `Document2` in order not to link in the `ImageMap` with a `href` to a different site (what worked though). 
Here my code from `Document1`. If you need the code of any `JS` or `CSS` file please let me know. 

```
<html>
<head>

<!-- LINK THE STYLESHEET, JQUERY AND THE JS SCRIPT OF COLORBOX AND QUIZ -->

<!-- STYLESHEET OF COLORBOX-->
<link rel="stylesheet" href="colorbox.css">
<!-- STYLESHEET OF QUIZ-->
<link rel="stylesheet" href="trivia_css.css">
<!-- LINK ZU JQUERY ONLINE-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- COLORBOX JS-->
<script src="jquery.colorbox.js"></script>
<!-- QUIZ JS-->
<script src="trivia_solo.jsx" type="text/javascript"></script>

<script>
//PRELOAD THE IMAGES
originale = new Image(698, 233);
originale.src = "paramo_plantas_original.gif";

....

//JS FUNCTION TO HIGHLIGHT THE PICTURES. IMAGEFLIP IS USED HERE
function resaltarHelecho() {
    document.getElementById('juego_paramo').src = helecho.src;
    return true;
}

....

//COLORBOX
$(function(){
  $("#paramo area").colorbox({width:"35%", innerHeight:"35%", inline:true});
});
</script>

</head>
<body>

<!-- INSERT THE PICTURE -->
<img name="juego_paramo" id="juego_paramo" src="paramo_plantas_original.gif" usemap="#paramo">

<!-- CREATE THE MAP -->
<map name="paramo" id="paramo">
    <area shape="poly" coords="0,161,4,161,4,162,12,162,12,163,19,163,26,165,34,166,45,168,52,170,62,174,73,177,82,180,91,184,103,188,112,192,122,196,133,202,142,207,152,212,162,216,172,221,180,224,186,227,193,230,197,233,0,233,0,161" href="#test" alt="helecho" onMouseOver="resaltarHelecho()" onMouseOut="originalJuego()">
</map>

<!-- THE HIDDEN DIV TAG NEEDS TO BE UNDER THE MAP -->
<div style="display:none">
<div id="test">

    <!-- HTML PART OF QUIZ-->
    <p class="question">1. What is the answer to this question?</p>        

    <ul class="answers">            
    <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>          
    <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>            
    <input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>            
    <input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>       
    </ul>          

    <br/>
    <div id="results">            
    Show me the answers!       
    </div>
    </div>

</body>
</html>

```

The only thing I can think of is that it might me problematic to get access to the `div container` with my `JS Quiz file`.

```
$(document).ready(function() 
{    $("#results").click(function() {                

if (!$("input[@name=q1]:checked").val()             
) {            
alert("You're not done yet!");        
}        

else {            
var cat1name = "1";            
var cat2name = "None";  

....

```

As you can see I go for `@name=q1` which is `<input type="radio" name="q1" value="a" (...)` but in the `div container ¨test¨`.

Could that be the problem?