CSS Codes
CSS Layouts
Results 1 to 5 of 5

Thread: javascript & jquery

  1. 12-10-2013, 07:09 AM #1
    kate22
    kate22 is offline New Comer (less than 5 posts)
    Join Date
    Dec 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default javascript & jquery

    Hello, I have problem to show one question at a time, could someone help me please? Now I can see all questions. I know that this is possible by putting each question in div, I just dont know how to do it. Probably little piece of javascript or jquery will help as well. Any help is appreciated. Thanks alot.

    HTML Code:
    <html>

<head>
    <title>JavaScriptKit.com Multiple Choice Quiz Script</title>
    <link rel="stylesheet" href="../css/my.css" type="text/css">
    <script src="../js/quizconfig.js">
    </script>

    <script>
    var actualchoices = [];
    document.cookie="ready=yes"
    </script>

</head>

<body>



<p align="center">

<form method="POST" name="myquiz">



    <div class="gheader">
        1)Variables declared outside a function, become </div>
    <div class="gselections">
    <label><input type="radio" value="a" name="question1">a) International variables</label><br>
    <label><input type="radio" value="b" name="question1"> b) Universal variables </label><br>
    <label><input type="radio" value="c" name="question1"> c) Global variables </label><br>
    <label> <input type="radio" value="d" name="question1"> d) Local variables </label><br>
    </div>
    <br>

    <div class="gheader">
    2)If you add a number and a string, the result will be? </div>
        <div class="gselections">

    <label><input type="radio" value="a" name="question2"> a) Number</label><br>
    <label> <input type="radio" value="b" name="question2"> b) Error</label><br>
    <label><input type="radio" value="c" name="question2"> c) String + number </label><br>
    <label> <input type="radio" value="d" name="question2"> d) String</label><br>
</div>

<br>

    <div class="gheader">
    3) In JavaScript, different kinds of Loop are</div>
        <div class="gselections">
     <label> <input type="radio" value="a" name="question3">a) for</label><br>
    <label> <input type="radio" value="b" name="question3"> b) for/in </label><br>
    <label> <input type="radio" value="c" name="question3"> c) while</label><br>
    <label> <input type="radio" value="d" name="question3"> d) for/out </label><br>
        </div>


    <div class="gheader">
    4) JavaScript is</div>
            <div class="gselections">

    <label> <input type="radio" value="a" name="question4">a) Prototype based language </label><br>
    <label> <input type="radio" value="b" name="question4"></label>b) Class based language<br>
    <label> <input type="radio" value="c" name="question4"> c) ID based language
    </label><br>
    <label><input type="radio" value="d" name="question4">d) all of above</label><br>
            </div>

    <div class="gheader">
 5) The Array object is used to store:</div>
                <div class="gselections">

    <label><input type="radio" value="a" name="question5">a) Single value </label><br>
    <label> <input type="radio" value="b" name="question5"> b) candies </label><br>
    <label> <input type="radio" value="c" name="question5"> c) Multiple values </label><br>
    <label> <input type="radio" value="d" name="question5"> d) bananas</label><br>
                </div>

    <div class="gheader">
    6) What is the DOM?</div>
                    <div class="gselections">

    <label> <input type="radio" value="a" name="question6"> a) Difficult Object Model </label><br>
    <label> <input type="radio" value="b" name="question6"> </label>b) Document Object Model<br>
    <label><input type="radio" value="c" name="question6">c) Document Open Mouse </label><br>
    <label> <input type="radio" value="d" name="question6"> </label>d) Document Open Model<br>
                    </div>

    <div class="gheader">
    7) Where is the correct place to insert a JavaScript</div>
                        <div class="gselections">

    <label>
        <input type="radio" value="a" name="question7">a) The < head > section </label><br>
    <label> <input type="radio" value="b" name="question7"> b) The < body > section </label><br>
    <label><input type="radio" value="c" name="question7">c) both, a and b are correct </label><br>
    <label><input type="radio" value="d" name="question7">d) none of above</label><br>
</div>

<br>

<div class="gheader">
    8) How do you create a variable "x" that is equal to the integer 4?</div>
                        <div class="gselections">

    <div class="gselections">
    <label><input type="radio" value="a" name="question8">a)  int x = 4;</label><br>
    <label><input type="radio" value="b" name="question8">b)  var x = 4;</label><br>
    <label><input type="radio" value="c" name="question8">c) num x = 4;</label><br>
    <label><input type="radio" value="d" name="question8">d)  number x = 4;</label><br>
</div>

<br>

    <div class="gheader">
    9) The window object represents:</div>
    <div class="gselections">
    <label><input type="radio" value="a" name="question9">a)an open window in a browser</label><br>
    <label><input type="radio" value="b" name="question9">b)closed window in a browser</label><br>
    <label><input type="radio" value="c" name="question9">c) an open window in a room</label><br>
    <label><input type="radio" value="d" name="question9"> d)   closed window in a browser</label><br>
</div>

<br>


    <div class="gheader">
    10) Which continent is host to the most countries in the world?</div>
    <div class="gselections">
    <label><input type="radio" value="a" name="question10"> a) Asia</label><br>
    <label><input type="radio" value="b" name="question10">b) Africa</label><br>
    <label><input type="radio" value="c" name="question10">c) Europe</label><br>
</div>




    <div align="center">
        <input type="button" value="Grade Me!" name="B1" onClick="gradeit()"> <input type="button" value="Reset" name="B2" onClick="document.myquiz.reset()"></div>
 </div>
</form>


</body>
</html>
    Last edited by keyboard; 12-10-2013 at 08:51 AM. Reason: Format: Html Tags [html][/html]
    Reply With Quote Reply With Quote
  2. 12-10-2013, 10:31 AM #2
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <html>

<head>
    <title>JavaScriptKit.com Multiple Choice Quiz Script</title>
    <link rel="stylesheet" href="../css/my.css" type="text/css">
    <script src="../js/quizconfig.js">
    </script>

    <script>
    var actualchoices = [];
    document.cookie="ready=yes"
    </script>

</head>

<body>



<p align="center">

<form method="POST" name="myquiz">



    <div class="gheader">
        1)Variables declared outside a function, become
     <div class="gselections">
      <label><input type="radio" value="a" name="question1">a) International variables</label><br>
      <label><input type="radio" value="b" name="question1"> b) Universal variables </label><br>
      <label><input type="radio" value="c" name="question1"> c) Global variables </label><br>
      <label> <input type="radio" value="d" name="question1"> d) Local variables </label><br>
      </div>
     </div>
     <br>

     <div class="gheader">
         2)If you add a number and a string, the result will be?
      <div class="gselections">
       <label><input type="radio" value="a" name="question2"> a) Number</label><br>
       <label> <input type="radio" value="b" name="question2"> b) Error</label><br>
       <label><input type="radio" value="c" name="question2"> c) String + number </label><br>
      <label> <input type="radio" value="d" name="question2"> d) String</label><br>
     </div>
    </div>
    <br>

    <div class="gheader">
        3) In JavaScript, different kinds of Loop are
     <div class="gselections">
      <label> <input type="radio" value="a" name="question3">a) for</label><br>
      <label> <input type="radio" value="b" name="question3"> b) for/in </label><br>
      <label> <input type="radio" value="c" name="question3"> c) while</label><br>
      <label> <input type="radio" value="d" name="question3"> d) for/out </label><br>
     </div>
    </div>
    <br>

    <div class="gheader">
        4) JavaScript is
     <div class="gselections">
      <label> <input type="radio" value="a" name="question4">a) Prototype based language </label><br>
      <label> <input type="radio" value="b" name="question4"></label>b) Class based language</label><br>
      <label> <input type="radio" value="c" name="question4"> c) ID based language</label><br>
      <label><input type="radio" value="d" name="question4">d) all of above</label><br>
     </div>
    </div>
    <br>

    <div class="gheader">
        5) The Array object is used to store:
     <div class="gselections">
      <label><input type="radio" value="a" name="question5">a) Single value </label><br>
      <label> <input type="radio" value="b" name="question5"> b) candies </label><br>
      <label> <input type="radio" value="c" name="question5"> c) Multiple values </label><br>
      <label> <input type="radio" value="d" name="question5"> d) bananas</label><br>
     </div>
    </div>
    <br>

    <div class="gheader">
        6) What is the DOM?
     <div class="gselections">
      <label> <input type="radio" value="a" name="question6"> a) Difficult Object Model </label><br>
      <label> <input type="radio" value="b" name="question6"> </label>b) Document Object Model<br>
      <label><input type="radio" value="c" name="question6">c) Document Open Mouse </label><br>
      <label> <input type="radio" value="d" name="question6"> </label>d) Document Open Model</label><br>
     </div>
    </div>
    <br>

    <div class="gheader">
        7) Where is the correct place to insert a JavaScript
     <div class="gselections">
      <label><input type="radio" value="a" name="question7">a) The &lt; head &gt; section </label><br>
      <label> <input type="radio" value="b" name="question7"> b) The &lt; body &gt; section </label><br>
      <label><input type="radio" value="c" name="question7">c) both, a and b are correct </label><br>
      <label><input type="radio" value="d" name="question7">d) none of above</label><br>
     </div>
    </div>
    <br>

    <div class="gheader">
        8) How do you create a variable "x" that is equal to the integer 4?
     <div class="gselections">
      <label><input type="radio" value="a" name="question8">a)  int x = 4;</label><br>
      <label><input type="radio" value="b" name="question8">b)  var x = 4;</label><br>
      <label><input type="radio" value="c" name="question8">c) num x = 4;</label><br>
      <label><input type="radio" value="d" name="question8">d)  number x = 4;</label><br>
     </div>
    </div>
    <br>

    <div class="gheader">
        9) The window object represents:
     <div class="gselections">
      <label><input type="radio" value="a" name="question9">a)an open window in a browser</label><br>
      <label><input type="radio" value="b" name="question9">b)closed window in a browser</label><br>
      <label><input type="radio" value="c" name="question9">c) an open window in a room</label><br>
      <label><input type="radio" value="d" name="question9"> d)   closed window in a browser</label><br>
     </div>
    </div>
    <br>


    <div class="gheader">
        10) Which continent is host to the most countries in the world?
     <div class="gselections">
      <label><input type="radio" value="a" name="question10"> a) Asia</label><br>
      <label><input type="radio" value="b" name="question10">b) Africa</label><br>
      <label><input type="radio" value="c" name="question10">c) Europe</label><br>
     </div>
    </div>
    <br>
    <br>

    <div align="center">
      <input type="button" value="Grade Me!" name="B1" onClick="gradeit()"> <input type="button" value="Reset" name="B2" onClick="document.myquiz.reset()"></div>
    </div>

</form>

<script  type="text/javascript">
/*<![CDATA[*/

var Quiz={

 Open:function(nme,n){
  var o=this[nme];
  if (o&&o.ary[n]){
   o.ary[n].style.display='block';
  }
 },

 init:function(o){
  var nme=o.FormName,frm=document.forms[nme];
  if (frm){
   var clds=frm.childNodes,iips,i=0,z0=0;
   o.ary=[];
   for (;z0<clds.length;z0++){
    if ((' '+clds[z0].className+' ').match(' '+o.SectionClass+' ')){
     ips=clds[z0].getElementsByTagName('INPUT');
     for (var z0a=0;z0a<ips.length;z0a++){
      this.addevt(ips[z0a],'click','Open',nme,i+1);
     }
     clds[z0].style.display=i>0?'none':'block';
     o.ary[i++]=clds[z0];
    }
   }
   this[nme]=o;
  }
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }


}

Quiz.init({
 FormName:'myquiz',
 SectionClass:'gheader'
})
/*]]>*/
</script>
</body>
</html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  3. 12-10-2013, 12:29 PM #3
    kate22
    kate22 is offline New Comer (less than 5 posts)
    Join Date
    Dec 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks Vic, but this is not want I need......I dont want other questions to be visible....For example, I want to see question 1, click on Next, second question should apper, click next, third question will appear and so on.......
    Reply With Quote Reply With Quote
  4. 12-10-2013, 11:14 PM #4
    Deadweight's Avatar
    Deadweight
    Deadweight is offline Senior Coders
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    445
    Thanks
    6
    Thanked 43 Times in 41 Posts

    Default

    Do you want something like this:
    HTML Code:
    <!DOCTYPE html>
<html>
<head>
<style>
#questions, #answers {display:none;}

#as li {list-style:upper-alpha;}


.circle{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	border:1px solid black;
	border-radius:50%;
	height: 15px;
	width:12px;
	margin-left:5px;
	padding-left:3px;
	line-height:15px;
	cursor:pointer;
}

.spacer {clear:both;}

#bot_bar span {width:50px;}

.active {}

.inactive {}

</style>

<script src="http://code.jquery.com/jquery-1.10.2.js">
</script>
<script>
$(function(){
	questions = $("#questions>li").length;
	create_top();
	var value = 0;
	selected(value);
	
	$(document).on("click","#top_bar > div > ul > li",function(){
		selected($(this).index());
	});
	
	function create_top(){
		
		string = '<div><ul>';
		for(i=1;i<=questions;i++){
			string += '<li class="circle">'+i+'</li>';
		}
		string += '<div class="spacer"></div></ul></div>';
		$('#top_bar').html(string);
	}
	
	function selected(value){
		question = $("#questions>li:eq("+value+")").html();
		answers = $("#answers>li:eq("+value+")").html();
		
		$("#create").html("<div>"+question+"</div><div id=\"as\">"+answers+"</div>");
	}
});
</script>
</head>
<body>
<div id="top_bar"></div>
<div id="create"></div>
<div id="bot_bar"></div>

<ol id="questions">
	<li>Question One</li>
    <li>Question Two</li>
    <li>Question Three</li>
</ol>

<ul id="answers">
	<li>
    	<ul>
        	<li>Q1</li>
            <li>Q1</li>
            <li>Q1</li>
            <li>Q1</li>
        </ul>
    </li>
    
    <li>
    	<ul>
        	<li>Q2</li>
            <li>Q2</li>
            <li>Q2</li>
            <li>Q2</li>
        </ul>
    </li>
    
    <li>
    	<ul>
        	<li>Q3</li>
            <li>Q3</li>
            <li>Q3</li>
            <li>Q3</li>
        </ul>
    </li>
</ul>

</body>
</html>
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved
    Reply With Quote Reply With Quote
  5. 12-11-2013, 08:37 AM #5
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <html>

<head>
    <title>JavaScriptKit.com Multiple Choice Quiz Script</title>
    <link rel="stylesheet" href="../css/my.css" type="text/css">
    <script src="../js/quizconfig.js">
    </script>

    <script>
    var actualchoices = [];
    document.cookie="ready=yes"
    </script>

</head>

<body>



<p align="center">

<form method="POST" name="myquiz">



    <div class="gheader">
        1)Variables declared outside a function, become
     <div class="gselections">
      <label><input type="radio" value="a" name="question1">a) International variables</label><br>
      <label><input type="radio" value="b" name="question1"> b) Universal variables </label><br>
      <label><input type="radio" value="c" name="question1"> c) Global variables </label><br>
      <label> <input type="radio" value="d" name="question1"> d) Local variables </label><br>
      <input type="button" name="next" value="Open 2" onclick="Quiz.Open('myquiz',1);"/>
      </div>
     </div>
     <br>

     <div class="gheader">
         2)If you add a number and a string, the result will be?
      <div class="gselections">
       <label><input type="radio" value="a" name="question2"> a) Number</label><br>
       <label> <input type="radio" value="b" name="question2"> b) Error</label><br>
       <label><input type="radio" value="c" name="question2"> c) String + number </label><br>
       <label> <input type="radio" value="d" name="question2"> d) String</label><br>
       <input type="button" name="next" value="Open 3" onclick="Quiz.Open('myquiz',2);"/>
     </div>
    </div>
    <br>

    <div class="gheader">
        3) In JavaScript, different kinds of Loop are
     <div class="gselections">
      <label> <input type="radio" value="a" name="question3">a) for</label><br>
      <label> <input type="radio" value="b" name="question3"> b) for/in </label><br>
      <label> <input type="radio" value="c" name="question3"> c) while</label><br>
      <label> <input type="radio" value="d" name="question3"> d) for/out </label><br>
      <input type="button" name="next" value="Open 4" onclick="Quiz.Open('myquiz',3);"/>
     </div>
    </div>
    <br>

    <div class="gheader">
        4) JavaScript is
     <div class="gselections">
      <label> <input type="radio" value="a" name="question4">a) Prototype based language </label><br>
      <label> <input type="radio" value="b" name="question4"></label>b) Class based language</label><br>
      <label> <input type="radio" value="c" name="question4"> c) ID based language</label><br>
      <label><input type="radio" value="d" name="question4">d) all of above</label><br>
     </div>
    </div>
    <br>

    <div class="gheader">
        5) The Array object is used to store:
     <div class="gselections">
      <label><input type="radio" value="a" name="question5">a) Single value </label><br>
      <label> <input type="radio" value="b" name="question5"> b) candies </label><br>
      <label> <input type="radio" value="c" name="question5"> c) Multiple values </label><br>
      <label> <input type="radio" value="d" name="question5"> d) bananas</label><br>
     </div>
    </div>
    <br>

    <div class="gheader">
        6) What is the DOM?
     <div class="gselections">
      <label> <input type="radio" value="a" name="question6"> a) Difficult Object Model </label><br>
      <label> <input type="radio" value="b" name="question6"> </label>b) Document Object Model<br>
      <label><input type="radio" value="c" name="question6">c) Document Open Mouse </label><br>
      <label> <input type="radio" value="d" name="question6"> </label>d) Document Open Model</label><br>
     </div>
    </div>
    <br>

    <div class="gheader">
        7) Where is the correct place to insert a JavaScript
     <div class="gselections">
      <label><input type="radio" value="a" name="question7">a) The &lt; head &gt; section </label><br>
      <label> <input type="radio" value="b" name="question7"> b) The &lt; body &gt; section </label><br>
      <label><input type="radio" value="c" name="question7">c) both, a and b are correct </label><br>
      <label><input type="radio" value="d" name="question7">d) none of above</label><br>
     </div>
    </div>
    <br>

    <div class="gheader">
        8) How do you create a variable "x" that is equal to the integer 4?
     <div class="gselections">
      <label><input type="radio" value="a" name="question8">a)  int x = 4;</label><br>
      <label><input type="radio" value="b" name="question8">b)  var x = 4;</label><br>
      <label><input type="radio" value="c" name="question8">c) num x = 4;</label><br>
      <label><input type="radio" value="d" name="question8">d)  number x = 4;</label><br>
     </div>
    </div>
    <br>

    <div class="gheader">
        9) The window object represents:
     <div class="gselections">
      <label><input type="radio" value="a" name="question9">a)an open window in a browser</label><br>
      <label><input type="radio" value="b" name="question9">b)closed window in a browser</label><br>
      <label><input type="radio" value="c" name="question9">c) an open window in a room</label><br>
      <label><input type="radio" value="d" name="question9"> d)   closed window in a browser</label><br>
     </div>
    </div>
    <br>


    <div class="gheader">
        10) Which continent is host to the most countries in the world?
     <div class="gselections">
      <label><input type="radio" value="a" name="question10"> a) Asia</label><br>
      <label><input type="radio" value="b" name="question10">b) Africa</label><br>
      <label><input type="radio" value="c" name="question10">c) Europe</label><br>
     </div>
    </div>
    <br>
    <br>

    <div align="center">
      <input type="button" name="next" value="Next" onclick="Quiz.Next('myquiz');"/><input type="button" value="Grade Me!" name="B1" onClick="gradeit()"> <input type="button" value="Reset" name="B2" onClick="document.myquiz.reset()"></div>
    </div>

</form>

<script  type="text/javascript">
/*<![CDATA[*/

var Quiz={

 Open:function(nme,n){
  var o=this[nme];
  if (o&&o.ary[n]){
   o.n=n;
   o.ary[n].style.display='block';
  }
 },

 Next:function(nme){
  var o=this[nme];
  if (o){
   o.n++;
   o.ary[o.n].style.display='block';
  }
 },

 init:function(o){
  var nme=o.FormName,frm=document.forms[nme];
  if (frm){
   var clds=frm.childNodes,iips,i=0,z0=0;
   o.ary=[];
   for (;z0<clds.length;z0++){
    if ((' '+clds[z0].className+' ').match(' '+o.SectionClass+' ')){
     ips=clds[z0].getElementsByTagName('INPUT');
     clds[z0].style.display=i>0?'none':'block';
     o.ary[i++]=clds[z0];
    }
   }
   o.n=0;
   this[nme]=o;
  }
 }


}

Quiz.init({
 FormName:'myquiz',
 SectionClass:'gheader'
})
/*]]>*/
</script>
</body>
</html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Resolved Javascript fade in&out (without jquery)
    By keyboard in forum JavaScript
    Replies: 1
    Last Post: 09-05-2012, 10:15 AM
  2. Need Javascript help - ImageFlow mod & a bit of jquery.
    By Silas in forum General Paid Work Requests
    Replies: 1
    Last Post: 02-13-2012, 03:41 AM
  3. how to use jquery to intialize javascript?
    By louisaivy in forum JavaScript
    Replies: 3
    Last Post: 10-04-2011, 02:55 AM
  4. Need Jquery / Javascript advice please! :)
    By zeech26 in forum JavaScript
    Replies: 0
    Last Post: 09-22-2011, 09:50 PM
  5. why jquery is superior then javascript
    By deepakdeep in forum Other
    Replies: 1
    Last Post: 05-21-2009, 07:18 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules