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

منذ 5 سنوات imadbelasri Javascript
JS

فهاد الدرس الاول من سلسلة 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;
}
                                                        
                                                    

دروس ذات صلة

JS

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

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


JS

لعبة Tic Tac Toe ب Javascript

فهاد الدرس غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها Tic Tac Toe بإستعمال javascript هاد الدرس...


JS

كيفاش تصاوب تطبيق صرف عملات بإستخدام JSON

فهاد الدرس الجديد غادي نشوفو كيفاش نصوبو واحد التطبيق بسيط لي كيعرض سعر صرف العملات فمثلا المستخدم ك...


JS

كيفاش تصاوب تطبيق كيحسب مؤشر كتلة الجسم بإستخدام JSON

فهاد الدرس غادي نقومو بالبرمجة ديال واحد لAPI بسيط كيمكن من حساب كتلة الجسم من بعد ما كيستقبل الوزن...


JS

لعبة Domino ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة لعبة دومينو المستخدم...


JS

كيفاش تصاوب jeu de math ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد اللعبة بسيطة سميتها jeu de math لي...


JS

application كتحسب المسافة بين المدن ب html & css & javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد ل application كتحسب المسافة مابين...


JS

برمج ساعة باستعمال javascript

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


JS

كيفاش تسجل المعلومات فل local storage ديال navigateur

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش تسجل المعلومات فل local storage ديال nav...


JS

ألة حاسبة للمبتدئين ب javascript

فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو آلة حاسبة للمبتدئين لي غادي تمكن من الق...