私はちょっとしたクイズをしました：
var allQuestions = {
question: {
question0: {
question: "What is the meaning of HP?",
choices: ["Hewlett-Pako", "Holy-Packard", "Hewlett-Packard", "Holy-Bigel"],
correct: "Hewlett-Packard"
},
question1: {
question: "how much is PI?",
choices: ["2.54", "3.54", "1.21", "3.14"],
correct: "3.14"
},
question2: {
question: "Who is Messi?",
choices: ["basketball player", "soccer player", "gold player", "tennis player"],
correct: "soccer player"
},
question3: {
question: "What is jQuery?",
choices: ["JS library", "php library", "sql library", "html library"],
correct: "JS library"
}
},
correctAnswer: 0
};
function set_client() {//this function is to set the client info the first thing that the function does is to look if the text entered in the inputs is valid, next it will see if localstorage has been set already
//the blur function test to see if the value entered in the inputs are text if it is then it will let you procced if not it wont let you go further more
$("#fName,#lName").blur(function(){
//check to see if the the info given is valid if not it will pop up a sentence that alert for wrong info
var validfn = /[a-zA-Z]/.test($("input[name='fName']").val());// check to match the if the input is a-z char
var validln = /[a-zA-Z]/.test($("input[name='lName']").val());// check to match the if the input is a-z char
if (!validfn || !validln) {
$("#log").append($("#fool").text("First name and last name must be a-z charcters").fadeIn());
$("#fool").css({"margin-top":"-10px","margin-right":"-20px"});
}
else{ //if there the message already exist and the client entered valid text then the message will be dismiss
$("#fool").fadeOut();
return validfn;
}
}); //end of the blur function
//checks to see if localStorage is already has vlaue.
if (localStorage["fn"] == undefined) {
$("#contain").hide();
var data;
//set the first name and last name to localstorage object for future used when clicking "login"
$("#sublog").click(function () {
var validfn1 = /[a-zA-Z]/.test($("input[name='fName']").val());// check to match the if the input is a-z char
var validln1 = /[a-zA-Z]/.test($("input[name='lName']").val());// check to match the if the input is a-z char
if (!validfn1 || !validln1) {
//check blur function from above to see what validfn and valid ln does
}
else {
data = { //and object to store the client firstname and lastname
first: $("input[name='fName']").val(),
last: $("input[name='lName']").val()
}
localStorage["fn"] = JSON.stringify(data["first"]);//client first name
localStorage["ln"] = JSON.stringify(data["last"]);//client last name
}
});
}
//if there is already a value to localstorage then it means that someone has already logged in. in which this case it will show a welcome message including his first name and last name.
else {
$("#log").replaceWith("<h2>welcome : " + JSON.parse(localStorage['fn']) + " " + JSON.parse(localStorage['ln']) + "</h2>");
}
}
var allquestion = allQuestions["question"];//just a quick way to access the object
var calcAnswers = allQuestions["correctAnswer"];//just a quick way to access the correctAnswer property object
var qNum = 0; //counts the questions up
var value; //undeclared var
var AnsW = [];
//function that display the question and the choices to the section.
function loadquestions(qNum) {
if (allquestion["question" + qNum] != undefined) {
$(".question").text(allquestion["question" + qNum]["question"]); //set the the question to the title
for (var i = 0; i < allquestion["question" + qNum]["choices"].length;) {
//loops throughout the li's
var cH = (allquestion["question" + qNum]["choices"][i]); // a var that holds text of choice in poistion i
$("label[for=li" + i + "]").text(cH); //define for every label its text
$("#li" + i).attr("value", cH); //define for every input radio its value which is equals to label which is equals to var cH
i++;//count i with +1
}
}
}
//function that fires when clicked the "next" button and when trigered hides the current question and presents the next one
function checkClientChoice() {
$("#next").click(function () {
value = $("input[type='radio']:checked").val(); //gets the value of the choosen radio buttons
if (value == undefined) { //if the value is undefined throw an error and dont proceed to the next question
$("#fool").fadeIn();
}
else {
$("#back").css({"visibility":"visible"});
if (allquestion["question" + qNum]["correct"] == value) { //if the value is same as the correct property in the allQuestions object then add +1 to calcAnswers and +1 to qNum and display the next question
if ($("#fool").css({display: "block"})) {
$("#fool").hide();
}
$(".question,ul").fadeToggle(0.0000000001);
calcAnswers++;
qNum++;
$(".question,ul").fadeToggle(1000);
loadquestions(qNum);
}
else { //same here. if the value is not undefined but the client choosen answer is not correct then just count qNum up and load the next question but dont count calcAnswer +1
if ($("#fool").css({display: "block"})) {
$("#fool").hide();
}
AnsW.push(value);
$(".question,ul").fadeToggle(0.0000000000001);
qNum++;
$(".question,ul").fadeToggle(1000);
loadquestions(qNum);
}
}
result();
});
};
function go_back(){
$("#back").click(function(){
qNum--;
loadquestions(qNum);
if(calcAnswers <= 0){
calcAnswers = 0;
}
else{
calcAnswers--;
}
var tempQuestion = allquestion["question" + qNum]["question"];
alert(tempQuestion);
var tempAns = AnsW[qNum];//user last answer which is false i need this to make the radio button point to that answer
alert( $("input[value=tempAns]"));
$("input[value=tempAns]").is("checked",true);
alert(tempAns);
var tempAn = AnsW.splice(-1,1);//delete the false answer from the array i need this to make sure that the answer is deleted and there wont be overload of wrong answers
alert(tempAn);
});
}
function result() { //checks to see if the are no more questions to display
if (allquestion["question" + qNum] == undefined) {
$(".question").text("your Result is: " + calcAnswers + "/" + qNum);
$("ul,#next,#back").hide();
}
}
$(document).ready(function () {
set_client();
loadquestions(qNum);
checkClientChoice();
go_back();
});
go_back関数を元に戻し、前のラジオ ボタンをその値でチェックするように設定したいだけです。私のコーディングが良いかどうかわからないので、必要に応じてフィードバックをお寄せください
ここで私のjsfiddleをチェックしてください：http://jsfiddle.net/boazmier/RkQ9P/1/