generate div layers in a loop

Discussion in 'CSS' started by Hemant Agarwal, Oct 5, 2010.

  1. #1
    I am trying to develop a quiz system.Here is a simplified version of my working code

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    
    
    
    <head>
    
    
    <script type="text/javascript">
    
    var count=3;
    
    var questions = new Array(3);
    
      for (var i = 1; i <=count; i++)
      {
       questions[i] = "Question "+String(i);
      }
    
    </script>
    
    
    
    
    <script type="text/javascript">
    /*
    Global "swap" holder
    Use value, null, if no layer initially visible
    */
    
    var currlayerId = "question1";
    
    function toglayer(id)
    {
    if(currlayerId) setDisplay(currlayerId, "none");
    if(id)setDisplay(id, "block");
    currlayerId = id;
    }
    
    
    function setDisplay(id,value)
    {
    var elm = document.getElementById(id);
    elm.style.display = value;
    }
    
    </script>
    
    
    
    
    
    
    
    <style type="text/css" media="screen, print, projection">
        
    .text
           {
            display:none;
           }
    
    
    </style>
    
    
    </head>
    
    
    
    
    
    <body>
    
    
    <li><a href="#" onclick="toglayer('question1');return false;">Q.1</a></li>
    <li><a href="#" onclick="toglayer('question2');return false;">Q.2</a></li>
    <li><a href="#" onclick="toglayer('question3');return false;">Q.3</a></li>
    
    
    
                    
    
    <div id="question1" class="text">
    <script>document.write(questions[1]);</script>
    <br>
    </div>
    
    
    <div id="question2" class="text">
    <script>document.write(questions[2]);</script>
    </div>
    
    
    <div id="question3" class="text">
    <script>document.write(questions[3]);</script>
    </div>
      
      
                 
    
    
    
    <script>toglayer('question1');</script>
    
      
    
    </body>
    </html>
    
    
    Code (markup):
    When you will run the code,you will find three links
    Q.1
    Q.2
    Q.3

    These links are basically due to the following code


    
    <li><a href="#" onclick="toglayer('question1');return false;">Q.1</a></li>
    <li><a href="#" onclick="toglayer('question2');return false;">Q.2</a></li>
    <li><a href="#" onclick="toglayer('question3');return false;">Q.3</a></li>
    
    Code (markup):

    When you click on any of the links,you will see the question associated with it.This is because of the following code


    
    <div id="question1" class="text">
    <script>document.write(questions[1]);</script>
    <br>
    </div>
    
    
    <div id="question2" class="text">
    <script>document.write(questions[2]);</script>
    </div>
    
    
    <div id="question3" class="text">
    <script>document.write(questions[3]);</script>
    </div>
    
    
    Code (markup):



    --------------------------------------------------------------------------------------
    Now,here's the question,how do I put the div layers and their links in a loop.That is,I want it to be something like this






    
    (for var i=1;i<=count;i++)
    {
    <li><a href="#" onclick="toglayer('question[i]');return false;">Q.[i]</a></li>
    }
    
    Code (markup):



    
    (for var i=1;i<=count;i++)
    {
    <div id="question[i]" class="text">
    <script>document.write(questions[i]);</script>
    <br>
    </div>
    }
    
    
    
    Code (markup):
    The reason why I ask this is,is because the number of questions in the quiz depends on the value of the javascript variable "count".Therefore,if the value of count is 5,the number of questions would be 5,if it is 6 the number of questions will be 6,etc.

    Thanks
    Hemant
     
    Hemant Agarwal, Oct 5, 2010 IP
  2. pmek

    pmek Guest

    Messages:
    101
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi Hemant, this really isn't a CSS based question. This is javascript. You'd be better off posting here, or getting a mod to move your thread. This way you are bound to find an answer!
     
    pmek, Oct 8, 2010 IP
  3. Hemant Agarwal

    Hemant Agarwal Member

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #3
    Hi,
    I have already been suggested an answer to this question somewhere else and it might be right.Therefore,if the moderator wants he/she can kindly delete this thread.Else,if you guys want to know the solution,I can post it here after verifying it or can post the link where the solution had been suggested.Thanks
    Hemant
     
    Hemant Agarwal, Oct 8, 2010 IP