1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

generate div layers in a loop

Discussion in 'JavaScript' started by Hemant Agarwal, Oct 2, 2010.

0
  1. #1
    Hi,
    I am trying to develop a quiz system.Here is a simplified version of my code with lots of modifications made mainly for easier comprehension.

    
<!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 2, 2010 IP
  2. Hemant Agarwal

    Hemant Agarwal Member

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #2
    Hi,
    Does anyone have any idea at all?In case,the question is not clear,pls ask and I will try to clear any doubts.Thanks
    Hemant
     
    Hemant Agarwal, Oct 5, 2010 IP
  3. clockedout7

    clockedout7 Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hey, I answered you in your other thread in this forum. You should be able to use that same code for this stuff.
     
    clockedout7, Oct 5, 2010 IP
  4. Hemant Agarwal

    Hemant Agarwal Member

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #4
    Hey clockedout7 ,
    This is a completely different problem from the other problem posted by me,namely "copy 2d php array to 2d javascript array".
    In case you have the time,I do request you to try out this problem and if possible,publish your code here.
     
    Hemant Agarwal, Oct 5, 2010 IP
  5. clockedout7

    clockedout7 Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yeah my mistake, it seems this is indeed a different problem. But, if you mix in some PHP, you can do something like this:

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">



<head>

<?php

$count=5;

?>


<script type="text/javascript">

<?php
	echo "var count=$count;";

	echo "var questions = new Array($count)";
?>

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>

<?php
	for($i=1;$i<=$count;$i+=1)
	{
		echo "<li><a href=\"#\" onclick=\"toglayer('question$i');return false;\">Q.$i</a></li>";
	}
?>

<?php
	for($i=1;$i<=$count;$i+=1)
	{
		echo "<div id=\"question$i\" class=\"text\">";
		echo "<script>document.write(questions[$i]);</script>";
		echo "</div>";
	}
?>

<script>toglayer('question1');</script>

</body>
</html>
    Code (markup):
     
    Last edited: Oct 5, 2010
    clockedout7, Oct 5, 2010 IP
  6. clockedout7

    clockedout7 Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I managed to pull this off in pure javascript too. Try putting this into your original code:

    
<script type="text/javascript">
for(var i=1;i<=count;++i)
{
	document.write("<li><a href=\"#\" onclick=\"toglayer('question" + i.toString() + "');return false;\">Q." + i.toString() + "</a></li>");
}
</script>


<script type="text/javascript">
for(var i=1;i<=count;++i)
{
	document.write("<div id=\"question" + i.toString() + "\" class=\"text\">");
	document.write("<script>document.write(questions[" + i.toString() + "]);<\/script>");
	document.write("<br>");
	document.write("</div>");
}
</script>
    Code (markup):
     
    clockedout7, Oct 5, 2010 IP