سورس کد آزمون آنلاین PHP و javascript
سورس کد آزمون آنلاین PHP و javascript – در این آموزش پایه و اساس یک آزمون گیر آنلاین را با کمک php و javascript یاد خواهید گرفت . online quiz
این آزمون گیر شامل 3 فایل :
1- index.php که شامل فرم ، کد های js به صورت Inline است که فرم را کنترل می کند
2- quiz-data.json که به جای پایگاه داده استفاده می شود برای راحتی کار اما شدیدا توصیه میشود از پایگاه داده برای پروژه واقعی استفاده شود .
3- quiz-response.php به درخواست های ajax که از سمت index.php ارسال می شود پاسخ می دهد .
فایل index.php آزمون گیر آنلاین
<!DOCTYPE html>
<html lang="fa-IR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RapidCode.IR - آزمون گیر آنلاین</title>
<style>
body {
text-align: center;
overflow-x: hidden;
}
#introduce {
color: white;
text-decoration: none;
font-weight: bold;
display: block;
width: 100%;
padding: 5px 10px;
background-color: #4CAF50;
text-align: center;
font-size: 25px;
margin-bottom: 45px;
}
.container{
width: 60%;
margin: 0 20%;
text-align: center;
}
.container table{
display: inline-block;
margin-bottom: 20px;
}
.container table td{
text-align: right;
}
#submit {
font-weight: bold;
border: none;
outline: none;
padding: 5px 35px;
background: lime;
font-size: large;
}
.modal-user{
position: absolute;
width: 50%;
left: 25%;
background-color: #ccc;
color: white;
border: 3px solid black;
border-radius: 4px;
padding: 80px 0;
top: -400px;
transition: 0.3s all;
z-index: 5;
}
.modal-user.active{
top: 0;
}
.modal-user h1{
font-size: 45px;
}
.modal-user#correct{
background-color: #4CAF50
}
.modal-user#wrong{
background-color: red;
}
#user-overview{
font-size: 25px;
}
</style>
</head>
<body>
<a id="introduce" target="_blank" href="https://rapidcode.ir">رپید کد - کتابخانه مجازی برنامه نویسان</a>
<div class="container">
<section class="modal-user" id="">
<h1></h1>
</section>
<div id="user-overview"></div>
<form method="POST" id="form-quiz">
<p class="score"><span>امتیاز : </span><span id="value">0</span></p>
<p class="quiz-of"><span>سوال </span><span id="part">x</span><span> از </span><span id="all">x</span></p>
<div class="question">
<h3>x</h3>
</div>
<table>
<tbody>
<tr>
<td></td>
<td><input id="q1" class="quiz-ans-list" type="radio" name="answer-quiz" value="x"></td>
</tr>
<tr>
<td>x</td>
<td><input id="q2" class="quiz-ans-list" type="radio" name="answer-quiz" value="x"></td>
</tr>
<tr>
<td>x</td>
<td><input id="q3" class="quiz-ans-list" type="radio" name="answer-quiz" value="x"></td>
</tr>
<tr>
<td>x</td>
<td><input id="q4" class="quiz-ans-list" type="radio" name="answer-quiz" value="x"></td>
</tr>
</tbody>
</table>
<br>
<input type="button" id="submit" name="submit" value="ثبت">
<input type="hidden" id="qid" value="x">
</form>
</div>
<script>
(function(){
const submitDOM = document.getElementById("submit");
const userScoreDOM = document.querySelector(".score #value");
const userModalDOM = document.querySelector(".modal-user");
const formQuizDOM = document.getElementById("form-quiz");
const userModalHeadDOM = userModalDOM.children[0];
let userScore = 0;
userScoreDOM.textContent = userScore;
submitDOM.addEventListener("click" , submit_handler);
function submit_handler(){
changeDOMState(true);
const quizAnswerList = document.getElementsByClassName("quiz-ans-list");
const qid = document.getElementById('qid');
let checked = false;
for(var element of quizAnswerList){
if(element.checked){
checked = true;
postData({qid : qid.value , ans : true} , {userAnswer : element.value});
}
}
if(!checked){
changeDOMState(false);
alert("لطفا یکی از موارد زیر را انتخاب کنید");
}
}
function changeDOMState(lock = true){
if(lock){
submitDOM.setAttribute("disabled" , "disabled");
formQuizDOM.style.opacity = 0.2;
}else{
submitDOM.removeAttribute("disabled");
formQuizDOM.style.opacity = 1;
}
}
function resetUserModal(){
userModalDOM.classList.remove("active");
userModalDOM.id = "x";
}
function userOverviewHandler(overview){
resetUserModal();
document.getElementById("form-quiz").remove();
document.getElementById("user-overview").innerHTML = `<span>تعداد پاسخ صحیح : ${userScore}</span><br><span>تعداد پاسخ غلط : ${overview.wrongAnswer}</span><br><span>تعداد کل سوالات : ${overview.total}</span><br><a onclick="location.reload()" href="#">آزمون مجدد</a>`;
}
function quiz_answer_handler(quizObject , option){
const isCorrect = quizObject.key === option.userAnswer ? true : false;
if(isCorrect){
userScore++;
userModalDOM.id = "correct";
userModalHeadDOM.textContent = "درست (;";
}else{
userModalDOM.id = "wrong";
userModalHeadDOM.textContent = "نادرست ):";
}
userModalDOM.classList.toggle("active");
userScoreDOM.textContent = userScore;
setTimeout(changeDOMState , 2500 , false);
if(parseInt(option.qid) < parseInt(quizObject.total))
setTimeout(postData , 2000 , {qid : (parseInt(option.qid) + 1)});
else{
const wrongAnswer = parseInt(quizObject.total) - parseInt(userScore);
setTimeout(userOverviewHandler , 2000 , {total : quizObject.total , wrongAnswer : wrongAnswer});
}
}
function quiz_question_handler(quizObject){
// id , question , question-list[] , total
const qid = document.querySelector("#qid");
const question = document.querySelector(".question h3");
const questionAnswerList = document.querySelectorAll(".quiz-ans-list");
const quizPart = document.querySelector(".quiz-of #part");
const quizTotal = document.querySelector(".quiz-of #all");
qid.value = quizObject.id;
question.textContent = quizObject.question;
quizPart.textContent = quizObject.id;
quizTotal.textContent = quizObject.total;
let counter = 0;
for(const quizQ of quizObject['question-list']){
const currentElement = questionAnswerList[counter];
currentElement.value = quizQ;
currentElement.checked = false;
currentElement.parentElement.previousElementSibling.textContent = quizQ;
counter++;
}
}
function postData(formDataArgs , option = {}) {
resetUserModal();
const quizUrl = location.href + "/quiz-response.php";
const frmData = new FormData();
for (const frmKey in formDataArgs) {
frmData.append(frmKey , formDataArgs[frmKey]);
}
const xhr = new XMLHttpRequest();
xhr.open("post", quizUrl);
xhr.responseType = "json";
xhr.onreadystatechange = function () {
if (this.status === 200 && this.readyState === XMLHttpRequest.DONE){
var responseData = this.response;
if(responseData.msg)
throw new Error("somthing went Wrong ):");
if(formDataArgs.ans !== undefined){
option.qid = formDataArgs.qid;
quiz_answer_handler(responseData , option);
}else
quiz_question_handler(responseData);
}}
xhr.send(frmData);
}
postData({qid : 1});
})();
</script>
</body>
</html>
فایل quiz-data.json
این فایل که شامل اطلاعات آزمون و جواب آن است :
[
{
"id": 1,
"question": "کدام یک از حیوانات زیر سریع ترین دوندگی را دارد ؟",
"question-list": ["پلنگ", "یوزپلنگ", "خرگوش", "بوفالو"],
"key": "یوزپلنگ"
},
{
"id": 2,
"question": "تحمل کدام حیوان در برابر بی آبی بیشتر است ؟",
"question-list": ["موش صحرایی", "شتر", "سوسمار", "شاهین"],
"key": "موش صحرایی"
},
{
"id": 3,
"question": "کدام یک از ماشین های زیر بیشترین شتاب را دارد ؟",
"question-list": ["زانتیا", "تویوتا کمری", "405", "207"],
"key": "زانتیا"
},
{
"id": 4,
"question": "کدام یک از موتور های زیر بیشترین شتاب را دارد ؟",
"question-list": ["H2R", "Yamaha YZF-R1", "GSX-S1000", "Hayabusa"],
"key": "H2R"
}
]
فایل quiz-response.php
این فایل یکی از مهم ترین بخش های آزمون گیر را فراهم می کند بر اساس آیدی آزمون اطلاعات می دهد البته خروجی آن JSON .
header("Content-Type: application/json");
$quiz_id = $_POST['qid'] ?? false;
$quiz_id = intval($quiz_id);
if(!$quiz_id) die('{"msg" : "quiz id invalid"}');
$quiz_content = file_get_contents("quiz-data.json");
$quiz_content = json_decode($quiz_content , true);
$is_quiz_id_exist = isset($quiz_content[$quiz_id-1]);
if(!$is_quiz_id_exist) die('{"msg" : "quiz id does not found"}');
$current_quiz = $quiz_content[$quiz_id-1];
$quiz_key = !empty($_POST['ans']) && $_POST['ans'] === "true" ? true : false;
if($quiz_key){
$quiz_to_show = ["key" => $current_quiz['key']];
helper_encode_array_json_print_out($quiz_to_show);
}else{
unset($current_quiz['key']);
helper_encode_array_json_print_out($current_quiz);
}
function helper_encode_array_json_print_out($arr){
$arr["total"] = count($GLOBALS['quiz_content']);
$quiz_to_show = json_encode($arr);
echo $quiz_to_show;
}
از خط 18 تا 24 : در صورتی که علاوه بر ورودی qid ، ورودی ans هم داده شده تنها جواب پرسش به همراه تعداد کل پرسش ها برگردانده میشود ،
در غیر اینصورت صورت سوال به همراه 4 جواب احتمالی ، تعداد کل سوالات برگردانده می شود .
دموی سورس کد آزمون آنلاین PHP و javascript
دانلود پروژه آزمون گیر آنلاین با PHP و javascript
در صورتی که میخواهید یک آزمون آنلاین به همراه زمان و امتیاز با جاوا اسکریپت داشته باشید می توانید از این آموزش استفاده کنید .
لیست نظرات
سلام کد ها رو در چه برنامه ای پیاده سازی کنیم
درود ، باید wamp رو نصب کنید و سورس رو در مسیر www کپی کنید حالا وارد آدرس http://localhost/online-quiz-in-php-js در مرورگر خود بشید و پروژه رو مشاهده کنید .
سلام با این روش چطور باید جواب های سوالات سامانه سمیاد (دانشگاه فنی و حرفه ای) را بفهمم؟؟؟
درود یک سورس آزمون گیر هست که باید داخل فایل json سوالات و جواب رو خودتون وارد کنید .
میشه یکم شفاف تر توضیح بدین.
دوست عزیز این برنامه خودش یک آزمون گیر هست که به زبان PHP و javascript نوشته شده و واسه گرفتن آزمون آنلاین ساخته شده
سلام.اگر بخواهیم نتایج آزمون در دیتابیس ذخیره شود برای هر کاربر چطور انجام میشه؟
درود کافیه که برای شناسایی ابتدا زمان آزمون رو به صورت timestamp یک شناسه یونیک در بیارید و سپس امتیازش رو در سمت سرور جهت جلوگیری از تقلب ذخیره کنید .
سلام کدی که داتلود کردم خراب بود لطفا بررسی کنید سوالات نمایش داده نمیشن
درود ، ممنون بابت اطلاع تون برنامه بروزرسانی شد .
متشکرم