December 3rd, 2012, 10:56 PM
|
|
Registered User
|
|
Join Date: Dec 2012
Posts: 1
Time spent in forums: 37 m 6 sec
Reputation Power: 0
|
|
|
Multiple choice quiz
Hi,
I've been struggling with a radio button quiz script I found online (to modify) for hours and hope someone could help me. I'm not very good at Javascript hence using a prefab script.
Currently, when you click submit all the answers are shown in a div set in the last div container. Instead of showing all the answers at the end I want the answer to display after each question on submit.
In addition, when a user checks the wrong answer I want to highlight the label and check the correct answer. Would I use jquery .each()? I know I need to do something like for each question compare the users checked answer to the real answer then execute some code (highlight label, check correct answer). I'm just don't know how to write this or where to include this in the script below:
Code:
$(function(){
var jQuiz = {
answers: { q1: 'd', q2: 'd', q3: 'a', q4: 'c', q5: 'a' },
questionLenght: 5,
checkAnswers: function() {
var arr = this.answers;
var ans = this.userAnswers;
var resultArr = []
for (var p in ans) {
var x = parseInt(p) + 1;
var key = 'q' + x;
var flag = false;
if (ans[p] == 'q' + x + '-' + arr[key]) {
flag = true;
}
else {
flag = false;
}
resultArr.push(flag);
}
return resultArr;
},
init: function(){
$('.btnShowResult').click(function(){
var arr = $('input[type=radio]:checked');
var ans = jQuiz.userAnswers = [];
for (var i = 0, ii = arr.length; i < ii; i++) {
ans.push(arr[i].getAttribute('id'));
}
// my attempt at comparing user checked answer to real answer
if($('input[type=radio]:checked').val() == answers) {
alert('True');
}else{
alert('False!');
$('label').addClass('error'); //highlight label
// uncheck radio button of incorrect answer and check radio button of correct answer
}
})
$('.btnShowResult').click(function(){
var results = jQuiz.checkAnswers();
var trueCount = 0;
var totalQuestions = 5;
var resultSet = '';
var resultKeeperSet = '';
var resultKeeperPercentage = '';
for (var i = 0, ii = results.length; i < ii; i++){
if (results[i] == true) trueCount++;
resultSet += '<div> Question ' + (i) + ' is ' + results[i] + '</div>'
$('.resultAnswer').html(resultSet).show();
}
var percent = (trueCount/totalQuestions * 100);
resultKeeperSet += '<div class="totalScore">You got ' + trueCount + ' out of 5 correct!</div>'
resultKeeperPercentage += '<div class="totalScore">Percentage: ' + percent + '%</div>'
$('.resultKeeper').html(resultKeeperSet).show();
$('.resultKeeperPercentage').html(resultKeeperPercentage).show();
})
}
};
jQuiz.init();
})
Any help is greatly appreciated. Thank you.
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
