2011-04-12 50 views
1

我只是做了一個簡單的JavaScript測驗腳本這裏:這個腳本是否遵循通用標準? (使用Javascript/HTML)

/* 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 />&nbsp;&nbsp;&nbsp;&nbsp;<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('chances')) }; 
    } 
    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(); 
    } 
} 

然後你把這又是一個HTML頁面:

<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> 

我的問題是,都是我的方法這裏使用的普遍接受嗎?

+2

對我很好。只有我看到的優化是將'for'循環從'for(var i = 0; i mVChr 2011-04-12 18:41:58

+0

謝謝!有人發表了另一個問題,我問了一些類似的問題。他們沒有解釋爲什麼;)爲你點分! – FreeSnow 2011-04-12 18:43:21

回答

2

您使用innerHTML可能會使您獲得JavaScript風格警察的訪問權限,除此之外看起來不錯。在客戶端構建HTML的最安全可靠的方法是使用document.createElementhttps://developer.mozilla.org/en/DOM/document.createElementNode.appendChildhttps://developer.mozilla.org/En/DOM/Node.appendChild製作DOM元素。

+0

謝謝!除非有人在接下來的幾分鐘內發佈更好的東西,否則你贏了比賽! – FreeSnow 2011-04-12 18:44:55

+0

@Tomalak不,不,不傻,我指的是遊戲。 :) – FreeSnow 2011-04-12 18:46:26

+0

@DalexL:堆棧溢出不是一個遊戲。堆棧溢出是_srs bizniz_。 – 2011-04-12 18:47:07