ראיון עבודה בעת לדעת (Time To Know) פיתוח WEB

ע"י: נייקי

TimeToKnow כתוב מערכת מבוססת FRONT END לשאלות אמריקאיות עבור המשתמש בפורמט הבא: 1.The Question a. Answer1a b. Answer1b c. Answer1c d. Answer1d <previeus> <next> המערכת תעניק ציון סופי לתלמיד בהתאם למספר התשובות הנכונות שענה. שקול להשתמש בקבצים הבאים: Data.json-, view.css, jquery.js, index.js, main.html

ע"י: 1_אורח_כללי

וואו, שימושי ביותר, תודה רבה

ע"י: נייקי

My suggestion for solution based on MVC: main.html: (VIEW) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="data.json"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="index.js"></script> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body onload="previewQuestion(0);"> <div id="systemHeader">Tests System</div> <div id="questionDiv"> <div id="questionHeader" ></div> <div id="questionChoises" > <form name="fchoises"> <ol id="orderListChoises" type='a'></ol> </form> </div> <div id="previousNextLinks"></div> </div> </body> </html> data.json: (DATA) // Model var jsonObject = [ { "question" : "question1", "answer" : "c11", "choises" : ["c11", "c12", "c13", "c14"], "explanation": "sdsdsdsdsd" }, { "question" : "question2", "answer" : "c22", "choises" : ["c21", "c22", "c23", "c24"], "explanation": "sdsdsdsdsd" }, { "question" : "question3", "answer" : "c33", "choises" : ["c31", "c32", "c33", "c34"], "explanation": "sdsdsdsdsd" }, { "question" : "question4", "answer" : "c44", "choises" : ["c41", "c42", "c43", "c44"], "explanation": "sdsdsdsdsd" }, { "question" : "question4", "answer" : "c44", "choises" : ["c41", "c42", "c43", "c44"], "explanation": "sdsdsdsdsd" } ]; index.js: (CONTROLLER) /* *Getting jasonObject with Test data. return a copy object. */ function copyJasonObject(){ var viewObject = new Array; var i; for(i=0; i<jsonObject.length; i++) { var qObject = new Object(); qObject.question = jsonObject[i].question; qObject.answer = jsonObject[i].answer; qObject.choises = jsonObject[i].choises; qObject.explanation = jsonObject[i].explanation; viewObject[i] = qObject; } return viewObject; } var testObj = copyJasonObject(); var userAns = new Array(testObj.length); function previewQuestion(number){ if(number>=0 && number<userAns.length){ $("#questionHeader").text((number+1)+ ". "+ testObj[number].question); $("#orderListChoises").text(""); for(var i=0; i<testObj[number].choises.length; i++) $("#orderListChoises").append("<li><input name='q"+number+"' type='radio' value='"+ testObj[number].choises[i]+"' />"+ testObj[number].choises[i]+ "</li>"); $("#previousNextLinks").html("<a href='#' onclick='changeToQuestion("+ number+", "+-1+ ");' >previous</a>&emsp;"); $("#previousNextLinks").append(" <a href='#' onclick='changeToQuestion("+ number+", "+1+ ");' >next</a>"); }else if(number<0) previewQuestion(0); else previewTestResults(); } function changeToQuestion(number, operand){ //For each radio button if it is checked get the value and break. for (var i = 0; i < document.fchoises.length; i++){ if(document.fchoises[i].checked){ userAns[number] = document.fchoises[i].value; break; } } previewQuestion(number+operand); } function previewTestResults(){ var points = 0; document.getElementById("questionHeader").innerHTML = "Test Results:"; var result=""; for(var i=0; i<testObj.length; i++) { result += "<p>"; if(userAns[i]==testObj[i].answer){ points++; result += "<font color='#00FF00'>V</font>"; }else result+= "<font color='#FF0000'>X</font>"; result += "<b>"+(i+1)+". "+testObj[i].question+"</b>"; result += "</br><b>Your answer:</b> "+ userAns[i]; result += "</br><b>Correct answer:</b> "+ testObj[i].answer; result += "</br><b>Explanation:</b> "+ testObj[i].explanation; result += "</p>"; } document.getElementById("questionChoises").innerHTML = result; document.getElementById("previousNextLinks").innerHTML = "<b>Finnal Grade: "+ (points/testObj.length)*100; } test.css: (VIEW) @charset "utf-8"; /* CSS Document */ div#systemHeader{ background:#0000FF; color:#FFFFFF; vertical-align:central; text-align:center; font-size:larger; } div#questionHeader{ font-family:Verdana, Geneva, sans-serif; font-size:large; font-weight:bold; }

ע"י: נייקי

למי שזה חשוב.. נראה לי שהעורך עליו עובדים הוא Sublime Text 2