Results 1 to 5 of 5

Thread: javascript & jquery

  1. #1
    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 09:51 AM. Reason: Format: Html Tags [html][/html]

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 425 Times in 419 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/

  3. #3
    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.......

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    381
    Thanks
    6
    Thanked 35 Times in 33 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

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 425 Times in 419 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/

Similar Threads

  1. Resolved Javascript fade in&out (without jquery)
    By keyboard in forum JavaScript
    Replies: 1
    Last Post: 09-05-2012, 11: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, 04:41 AM
  3. how to use jquery to intialize javascript?
    By louisaivy in forum JavaScript
    Replies: 3
    Last Post: 10-04-2011, 03:55 AM
  4. Need Jquery / Javascript advice please! :)
    By zeech26 in forum JavaScript
    Replies: 0
    Last Post: 09-22-2011, 10:50 PM
  5. why jquery is superior then javascript
    By deepakdeep in forum Other
    Replies: 1
    Last Post: 05-21-2009, 08: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
  •