كيفاش نصاوب إختبار بإستعمال Javascript

كيفاش نصاوب إختبار بإستعمال Javascript


فهاد الدرس الاول من سلسلة javascript غادي نشوفو كيفاش نقادو واحد المشروع لي عبارة عن إختبار ديال الأسئلة المستخدم كيجاوب على الأسئلة من بعد كيبدا العرض ديال الأجوبة لي جابها صحيحة .

نظرة سريعة بالفيديو

- الصفحة الرئيسية وباقي الصفحات

اول حاجة غادي تمشي ل wamp/www وغادي تزيد مجلد جديد تسميه simple-quiz-javascript من بعد تزيد فيه جوج مجلدات واحد تسميه css والآخر js غادي تقوم بتحميل bootstrap وغادي تزيد الملف bootstrap.min.css ف css والملف bootstrap.min.js ف js من بعد غادي تزيد ملف تسميه header.php و آخر تسميه footer.php وفالآخر تزيد ملف تسميه index.php لي هي الصفحة الرئيسية ديالنا لي غادي يكونوا فيها الأسئلة ديال الإختبار الكود ديالها هو :

                                <?php include('header.php');?>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <h1 class="text-center text-primary">إستمارة الأسئلة</h1>
                    <hr style=" border: 1px dashed orange;">
                    <section class="questions-box">
                        <div id="result"></div>
                        <form name="quickForm" onsubmit="return submitAnswers()">
                            <h3 class="text-danger">1. ماهي عاصمة إنجلترا ؟</h3>
                            <div class="form-group">
                                <input type="radio" name="q1" value="أ" id="q1a"> أ.لندن<br>
                                <input type="radio" name="q1" value="ب" id="q1b"> ب.باريس<br>
                                <input type="radio" name="q1" value="ت" id="q1c"> ت.مدريد<br>
                                <input type="radio" name="q1" value="ج" id="q1d"> ج.لشبونة<br>
                            </div>
                            <h3 class="text-danger">2. من هو أول رئيس أمريكي ؟</h3>
                            <div>
                                <input type="radio" name="q2" value="أ" id="q2a"> أ.كينيدي<br>
                                <input type="radio" name="q2" value="ب" id="q2b"> ب.واشنطن<br>
                                <input type="radio" name="q2" value="ت" id="q2c"> ت.بوش<br>
                                <input type="radio" name="q2" value="ج" id="q2d"> ج.ريغن<br>
                            </div>
                            <h3 class="text-danger">3. متى كانت الحرب العالمية الأولى ؟</h3>
                            <div class="form-group">
                                <input type="radio" name="q3" value="أ" id="q3a"> أ.1918<br>
                                <input type="radio" name="q3" value="ب" id="q3b"> ب.1922<br>
                                <input type="radio" name="q3" value="ت" id="q3c"> ت.1914<br>
                                <input type="radio" name="q3" value="ج" id="q3d"> ج.1935<br>
                            </div>
                            <h3 class="text-danger">4. أين تقع مدينة إزمير ؟</h3>
                            <div class="form-group">
                                <input type="radio" name="q4" value="أ" id="q4a"> أ.تركيا<br>
                                <input type="radio" name="q4" value="ب" id="q4b"> ب.البرتغال<br>
                                <input type="radio" name="q4" value="ت" id="q4c"> ت.سوريا<br>
                                <input type="radio" name="q4" value="ج" id="q4d"> ج.إيران<br>
                            </div>
                            <h3 class="text-danger">5. ما هي جنسية فان دام  ؟</h3>
                            <div class="form-group">
                                <input type="radio" name="q5" value="أ" id="q5a"> أ.أمريكي<br>
                                <input type="radio" name="q5" value="ب" id="q5b"> ب.روسي<br>
                                <input type="radio" name="q5" value="ت" id="q5c"> ت.بلجيكي<br>
                                <input type="radio" name="q5" value="ج" id="q5d"> ج.فرنسي<br>
                            </div>
                            <div class="form-group">
                                <button type="submit" name="submit" class="btn btn-success">إرسال الأجوبة</button>
                            </div>
                        </form>
                    </section>
                </div>
            </div>
        </div>
    </div>
<?php include('footer.php');?>
                            

- header.php

الكود النهائي ديال الملف header.php

                                <!DOCTYPE html>
<html lang="fr" dir="rtl">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Simple javascript quiz</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
                            

- footer.php

الكود النهائي ديال الملف footer.php

                                 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>
                            

style.css

فاالمجلد css غادي نزيد واحد الملف ونسميه style.css غادي يكون فيه كود ديال css الكود النهائي ديالو هو :

                                    body{
    background:#c9c9c9;
}
.panel{
    margin-top:100px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.questions-box{
    padding: 10px;
}
                                

- script.js

آخر ملف غادي نزيدوه هو script.js فالمجلد js هاد الملف هو لي غادي يدير المعالجة ديال المعلومات لي رسل المستخدم غادي يكون فيه كود التحقق من الإجابة على جميع الاسئلة من بعد غادي يتحقق من الأجوبة الصحيحة والخاطئة وفالآخر غادي يعرض النتيجة النهائية الكود النهائي ديالو هو :

                                    function submitAnswers(){
    var score = 0;
    var questions = 5;
    var q1 = document.forms['quickForm']['q1'].value;
    var q2 = document.forms['quickForm']['q2'].value;
    var q3 = document.forms['quickForm']['q3'].value;
    var q4 = document.forms['quickForm']['q4'].value;
    var q5 = document.forms['quickForm']['q5'].value;
    //validation
    for(i = 1;i <= questions;i++){
        if(eval('q'+i) == null || eval('q'+i) == ""){
           alert('لم تجب على السؤال  '+i);
        return false;
        }
    }  
    //score
    answers = ['أ','ب','ت','أ','ت'];
    for(i = 1;i <= questions;i++){
        if(eval('q'+i) == answers[i-1]){
             score++;
        }
    }
    //display result
    var result = document.getElementById('result');
    result.innerHTML = '<p class="label label-success lead"> لقد أجبت عن '+ score +'  من أصل  '+ questions +'</p>';
    return false;
}
                                


بحث في الموقع


إشترك للتوصل بالجديد