سورس کد آزمون آنلاین PHP و javascript

سورس کد آزمون آنلاین 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 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.origin + "/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
آزمون آنلاین PHP و javascript


دانلود پروژه آزمون گیر آنلاین با PHP و javascript

ارسال نظر