Help making questionare?

This site is best viewed in a modern browser with JavaScript enabled.

mjsblues

What I would like is to have questions, and when you answer one it tells you if you were right or wrong in a popup. Then you press next question to go onto the next question. Is it possible to have your total score at the end as well? Thanks
My script at the moment -

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var questions = {
    2: 'Question 2: Is 1+1 = 2<br>' +
       '<input type="radio" name="answer" value="yes">Yes<br>' +
       '<input type="radio" name="answer" value="no">No<br>',
    3: 'Question 3: Does 4+4=8<br>' +
       '<input type="radio" name="answer" value="yes">Yes<br>' +
       '<input type="radio" name="answer" value="no">No<br>'
    };

var current_question = 1;

$('#questionnaire').submit(function(){
    current_question++;
    $('#questionnaire #question').html(questions[current_question]);
    return false;
});
});//]]>  

</script>


</head>
<body>
  <form id="questionnaire">
  <div id="question">
      Question 1: Does 3+3=7<br>
      <input type="radio" name="answer" value="yes">Yes<br>
      <input type="radio" name="answer" value="no">No<br>
  </div>
  <input type="submit" value="Next Question" />
</form>

</body>

Padonak

take this as a draft:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Quiz</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<style type='text/css'>
body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;text-align:center;padding-top:250px;}
input[type=radio]{margin-left:15px;margin-right:10px;cursor:pointer;}
b{font-style:italic;}
#info{position:absolute;top:10px;right:20px;display:none;border:2px solid #000;border-radius:10px;padding:50px 50px;font-size:36px;font-weight:bold;}
#score{font-style:italic;}
.gr{color:Green;font-weight:bold;}
.cr{color:Crimson;font-weight:bold;}
</style>
<script type='text/javascript'>//<![CDATA[
var curr=0,rights=0,wrongs=0,questions=[
['Does 3 + 3 = 7?','no'],
['Does the Earth spin?','yes'],
['Do cats bark?','no'],
['Does the Internet exist?','yes'],
['Is <b>webdeveloper.com</b> the best internet resource?','yes'],
['Is this the last question of the Quiz?','yes']
];

function ask(){
if(curr < questions.length){
$('#question').html('Question '+(curr+1)+': '+questions[curr][0]);
}
else{
var R=Math.round((rights/questions.length)*100),
W=Math.round((wrongs/questions.length)*100),
resume='not bad';
if(W==100){resume='hopeless and pathetic stupid ass';}
if(W>0 && W<50){resume+=', but still not excellent';}
if(R==100){resume='genious';}
if(R>0 && R<50){resume+=', but please quit drinking';}
if(W==50 && R==50){resume='Rain Man';}
document.getElementById('frm').reset();
$('#question').empty();
$('#frm').fadeOut('normal',function(){
$('#score').html('The total score is: <span class="gr">'+R+'%</span> vs <span class="cr">'+W+'%</span><br /><br />According to the Quiz results You just has been considered:<br /><br /><b style="font-size:18px;">"'+resume+'"</b><h1>Congratulations!</h1>');
});
}
}

function inf(val){
var bg,col;
switch(val){case'Right':bg='#BCD379',cl='Green',rights++;break;case'Wrong':bg='#F3D326',cl='Crimson',wrongs++;break;}
$('#info').empty().html('<span class="'+cl+'">'+val+'</span> answer!').css('background-color',bg).show(10,function(){
$(this).fadeOut(1200,function(){
$('#score').html('The total score is: <span class="gr">'+rights+'</span> vs <span class="cr">'+wrongs+'</span> from '+questions.length+' questions');
curr++;document.getElementById('frm').reset();ask(curr);
});
});

}

$(window).load(function(){
ask(curr);
$('#score').html('The total score is: <span class="gr">'+rights+'</span> vs <span class="cr">'+wrongs+'</span> from '+questions.length+' questions');
$('[name="answer"]').click(function(){inf(($(':checked').val()===questions[curr][1])?'Right':'Wrong');});
});//]]>  

</script>
</head>
<body>
<div>
<div id="info"></div>
<div id="score"></div>
<div id="question"></div>
<form id="frm" action=""><input type="radio" name="answer" value="yes" />Yes<input type="radio" name="answer" value="no" />No</form>
</div>
</body>
</html>

live demo

Padonak

*typo found.

replace (line 49)

switch(val){case'Right':bg='#BCD379',cl='Green',rights++;break;case'Wrong':bg='#F3D326',cl='Crimson',wrongs++;break;}

with

switch(val){case'Right':bg='#BCD379',cl='gr',rights++;break;case'Wrong':bg='#F3D326',cl='cr',wrongs++;break;}

mjsblues

Padonak;1275335 wrote:
*typo found.

replace (line 49)
switch(val){case'Right':bg='#BCD379',cl='Green',rights++;break;case'Wrong':bg='#F3D326',cl='Crimson',wrongs++;break;}
with
switch(val){case'Right':bg='#BCD379',cl='gr',rights++;break;case'Wrong':bg='#F3D326',cl='cr',wrongs++;break;}

Omg I love you! Works so well!
The only problem I have now is trying to insert a picture on a question, so if I wanted to ask "is this a pig" and show a picture, how would I do that? I would know how to do it with html, but javascript baffles me. Thanks a bunch for the help

Padonak

...
<script type='text/javascript'>//<![CDATA[
var curr=0,rights=0,wrongs=0,questions=[

['[COLOR="#008000"]<img src="img/pig.png" alt="" /> Is this a pig?[/COLOR]','yes'],

['Does 3 + 3 = 7?','no'],
['Does the Earth spin?','yes'],
...

the demo is updated. if you still can't see the image in the first question press Ctrl+R to clean the browser cache