Log in

View Full Version : javascript & jquery


kate22
12-10-2013, 08:09 AM
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>

<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>
vwphillips
12-10-2013, 11:31 AM
<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>
kate22
12-10-2013, 01:29 PM
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.......
Deadweight
12-11-2013, 12:14 AM
Do you want something like this:

<!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>
vwphillips
12-11-2013, 09:37 AM
<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>