Does this script follow common standard? (Javascript/Html)
I just made a simple Javascript Quiz script here:
/* Dade Lamkins. 2011. */
var Questions = [
{ Question: "What is 5+2?", Values: ["7", "9", "10", "6"], Answer: 1 },
{ Question: "What is the square root of 16?", Values: ["7", "5", "4", "1"], Answer: 3 },
{ Question: "What is the answer to life?", Values: ["7", "42", "4", "47"], Answer: 2 }
];
var currentSession={ Questions: [], TotalPoints: 0 }
var Letters = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
function createQuestions(id) {
var tReturn="<form style=\"text-align: left;width: 33.33333%;background-color: lightblue;border=1px solid #000000;padding: 10px\">";
tReturn=tReturn+"<b>Questions "+(id+1)+":</b><br /> <i>"+Questions[id].Question+"</i><br /><br />";
for (var i=0;i<(Questions[id].Values).length;i++) {
tReturn=tReturn+"<input onClick=\"checkAnswer("+id+","+i+",this)\" type=\"button\" value=\""+Letters[i]+"\" style=\"width:50px\" />. "+Questions[id].Values[i]+"<br />";
}
tReturn=tReturn+"</form>";
return tReturn;
}
function updateScore() {
var currentPoints=0;
for (var i=0;i<currentSession.Questions.length;i++) {
currentPoints+=currentSession.Questions[i].Score;
}
document.getElementById('quiz_score').innerHTML='%'+Math.round((currentPoints/currentSession.TotalPoints)*100);
}
function initializeQuiz() {
for (var i=0;i<Questions.length;i++) {
var elem=document.getElementById('quiz_section');
currentSession.TotalPoints+=parseInt(elem.getAttribute('chances'));
elem.innerHTML=elem.innerHTML+createQuestions(i)+"<br />";
currentSession.Questions[i]={ Chances: elem.getAttribute('chances'), Answered: false, Score: parseInt(elem.getAttribute('cha开发者_如何学Cnces')) };
}
updateScore();
}
function finalizeAnswer(bttn,c,questionId) {
if (c) {
bttn.parentNode.style.backgroundColor="lightgreen";
bttn.parentNode.innerHTML="<b>QUESTION "+(questionId+1)+":</b> Correct!";
} else {
bttn.parentNode.style.backgroundColor="pink";
bttn.parentNode.innerHTML="<b>QUESTION "+(questionId+1)+":</b> Wrong!";
}
updateScore();
}
function checkAnswer(questionId,answerId,bttn) {
if (Questions[questionId].Answer==(answerId+1)) {
finalizeAnswer(bttn,true,questionId);
return 0;
} else {
bttn.setAttribute('value','x');
bttn.setAttribute('disabled','true');
}
currentSession.Questions[questionId].Chances--;
currentSession.Questions[questionId].Score--;
if (currentSession.Questions[questionId].Chances<=0) {
finalizeAnswer(bttn,false,questionId);
} else {
updateScore();
}
}
You then put this is another html page:
<html>
<head>
<title>HTML QUIZ</title>
<script language="javascript" src="Quiz.js"></script>
</head>
<body onload='javascript:initializeQuiz()' bgcolor="#CCFFFF">
<b>Your Score Is Currently: </b><span id="quiz_score"></span>
<br />
<br />
<center><span style="width:100%" id="quiz_section" chances="1" quizid="1"></span></center>
</body>
</html>
My question is, are all the methods I've used here generally accepted?
Your use of innerHTML might earn you a visit from the JavaScript style police, other than that it looks fine. The most secure and robust way of building HTML on the client is to make DOM elements using document.createElement https://developer.mozilla.org/en/DOM/document.createElement and Node.appendChild https://developer.mozilla.org/En/DOM/Node.appendChild .
加载中,请稍侯......
精彩评论