ראיון עבודה בעת לדעת (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

לפני 12 שנים

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

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

כרמל, עם ניסיון בעולם הגיימינג, החליטה להגשים את החלום ולהיכנס לתחום העיצוב. חתיכת אתגר. לאחר תקופה של חיפוש עבודה עצמאי היא הבינה שזה רק בזבוז זמן והחליטה להשקיע בקריירה שלה - ומצאה אותנו.

לבדיקת התאמה

לפני 12 שנים

ע"י: נייקי

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

לפני 12 שנים

ע"י: נייקי

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