معهد آفاق التيسير للتعليم عن بعد - JavaScript - تطبيق (1) : شرح كود السؤال العشوائي

بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

كود السؤال العشوائي

تستطيع أن ترى الصورة بحجمها الطبيعي بعد الضغط عليها

إن شاء الله . نتعرف على أقسام هذا الكود واحدا واحدا.

أولا يجب أن نكتب كود html ، المطلوب أن يظهر سؤال عشوائي للمستخدم ، ثم يختار منها الأسئلة التي يريد الإجابة عليه .
إذن ، نحتاج إلى:

1-نموذج بيانات form وفيه حقل بيانات textarea يعرض فيه السؤال العشوائي سنسميه (questbox) واسم النموذج (questform).
2- ونموذج ثان (quiz) وفيه حقل بيانات آخر (outputtext) تضاف فيه نسخة من الأسئلة التي يختارها المستخدم (يعني الناتج سيكون مجموعة من الأسئلة).
3- زر (سؤال) لعرض الأسئبلة العشوائية في حقل البيانات الأول "حقل-1".
4- زر (اختر) لإضافة نسخة من الأسئلة التي يختارها المستخدم إلى حقل البيانات الثاني.
5- زر (مسح) لمسح محتويات حقل البيانات الثاني "حقل-2".

نبدأ بكود html فقط في المتن <body>
ثم نضيف كود javascript. إن شاء الله

كود بلغة HTML:

<body style="background-color:#eaffff">



<div style="font-family:traditional arabic,arial, verdana, helvetica, geneva, ms sans serif; color: #000000">



<center>

<table width=410 cellspacing=0 cellpadding=0><tr><td>



<br>

<div style="margin-center: 5px">

<p algin="right" style="font-size:4" class="titletext">

أسئلة من عدة شروح للأربعين النووية، القسم الثالث: من ح35: "لا تحاسدوا  ولا تناجشوا ولا تباغضوا" إلى ح50: "لا يزال لسانك رطباً من ذكر الله عز  وجل"

</p>

</div>



<p align="right" style="font-size:2">

   عِند استخدام هذا التطبيق يظهر للمُستخدم سُؤال (عَشوائيًا) كلما ضَغط على زر:  [سؤال ]

</p>



<div align="right">

<form name="questform">

<textarea  cols="45" rows="8" name="questbox" algin="center"></textarea>

<p>

<input type=button onclick="—؟؟--" value="سؤال">

</p>

</form>

</div>



<div align="right">

<p><hr></p>

<form name="quiz">

<p align="right">

عندما الضغط على زر "اختر" تتم إضافة السؤال إلى: "اجب على الأسئلة"

</p>

<p align="right">

<input type="button" onclick="—؟؟--" value="اختر">

</p>



<p align="right">

اجب على الأسئلة، واستعن بالله ولا تعجز 

<textarea cols="45" rows="10" name="outputtext"></textarea>

</p>

<p align="right">

<!--<input type=button onclick="javascript:document.write(addtext(document.quiz.outputtext.value))" value="طباعة">-->

<input type="reset" value="مسح"/>

</p>

</form>

</div>



<div align="right" size=3>

<p>

ملاحظة: الرمز أول كل سؤال للدلالة على رقم الدرس، (ح01) الحديث الأول، (ح02) الحديث الثاني..إلخ

منتدى الأربعين النووية-من مقررات الدورة العلمية الثانية للمبتدئين-معهد آفاق التيسير الإلكتروني للتعليم 

عن بعد:

</p>

 

<p>

<a  href="http://www.afaqattaiseer.com/vb/forumdisplay.php?f=17">http://www.afaqattaiseer.com/vb/forumdisplay.php?f=17</a>

</p>



<p style="font-size:1">

{ربنا تقبل منا إنك أنت السميع العليم}

</p>

</div>





</td></tr></table></center>

</div>



</body>

في قسم الرأس head يجب توضيح نوع النص البرمجي الذي نستخدمه.

كود:

<script language="javascript">

عرفنا في دروس سابقة "حقل البيانات" textarea
وطبعا ، يمن أن تعرض قيمة واحدة فقط لجميع الزوار .
لكن حتى يتم عرض قيمة مختلفة كل مرة ، نحتاج لعدد من القيم ، تسمى بالــ :
المتغيرات (variables)
وهى عبارة عن حاوية أو مكان يتم تخزين المعلومات بداخله.

من درس مادة الجبر في المدرسة يتذكر :-
س = 10 ، ص = 6 ، ض = س + 3
أو x= 2 , y = z+3
وتسمى هذه الحروف بالمتغيرات .

ومن المهم عند إنشاء أو تعريف متغيرات كتابة كلمة var قبل اسم المتغير كما في المثال.
var a1=2
var a2 = 4
var a3 = 28

وفي الكود لدينا var quests
ولكن نحتاج لعدد من المتغيرات، لذلك نستخدم كائن "المصفوفة array" الذي يتضمن عدد من المتغيرات (الأسئلة ، "أسئلة من الحديث 35 من النووية")
أما طريقة كتابتها فتختلف:

(1) إما باستعمال الكلمة الأساسية new :

كود:

var quests = new array(10)

عدد عناصر المصفوفة أو طولها هو 10
ثم نعرفها عنصر عنصر:

كود:

 quests[0] = "(م): اذكر أهمية اصطحاب النية الصالحة عند طلب العلم؟"

 quests[1] = "(م): ما هو سبب عناية العلماء وطلاب العلم بمتن الآجرومية؟"

 quests[2] = "(م): لماذا ألف الشيخ الكفراوي شرحه على الآجرومية؟"

 quests[3] = "(م): ما هي طريقة الشيخ الكفراوي في شرحه للآجرومية؟"

 quests[4] = "(م): ما هي أسباب انتشار المتن؟"

 quests[5] = "(م): ما معنى البسملة؟"

 quests[6] = "(م): لماذا ابتدأ المؤلف بالبسملة؟"

 quests[7] = "(م): عرف النحو لغة واصطلاحًا؟"

 quests[8] = "(م): ما هي الثمرة من تعلم علم النحو؟"

 quests[9] = "(م): من هو أول من وضع علم النحو؟ ومن أين استمده؟"

أشبه بالفهرس لكل سؤال أو عنصر في المصفوفة . الصفحة رقم كذا (العنصر) من الكتاب (المصفوفة).

(2) وهناك طريقة أخرى استعمال المعقفات [] كما في مثالنا

كود:

var numberofquests = 10

var quests = new Array();

  var quests = ["[ح35]: ما معنى الحسد وهل يدخل فيه الغبطة؟ حديث أبي هريرة: لا تحاسدوا ولا تناجشوا ولا تباغضوا.",

 "[ح35]: حقيقة الحسد اعتراض على قضاء الله وقدره؛ بين ذلك. حديث أبي هريرة: لا تحاسدوا ولا تناجشوا ولا تباغضوا.",

 "[ح35]: ما حكم من لم يعمل بمقتضى حسده إن كان مغلوباً على أمره؟ حديث أبي هريرة: لا تحاسدوا ولا تناجشوا ولا تباغضوا.",

 "[ح35]: إذا سعى المرء في اكتساب مثل فضائل الآخر فهل عليه إثم؟ حديث أبي هريرة: لا تحاسدوا ولا تناجشوا ولا تباغضوا.",

 "[ح35]: اذكر مراتب الناس في ترك الحسد مبيناً أيها الأفضل؟ حديث أبي هريرة: لا تحاسدوا ولا تناجشوا ولا تباغضوا.",

 "[ح35]: اذكر بعض النصوص الواردة في الترهيب من الحسد. حديث أبي هريرة: لا تحاسدوا ولا تناجشوا ولا تباغضوا.",

 "[ح35]: تحدث باختصار عن سبل علاج الحسد. حديث أبي هريرة: لا تحاسدوا ولا تناجشوا ولا تباغضوا.",

 "[ح35]: ما سبب تسمية الغبطة حسداً؟ حديث أبي هريرة: لا تحاسدوا ولا تناجشوا ولا تباغضوا.",

 "[ح35]: عرف (النجش) لغة وشرعاً. حديث أبي هريرة: لا تحاسدوا ولا تناجشوا ولا تباغضوا.",

 "[ح35]: اذكر الخلاف في حكم بيع النجش. حديث أبي هريرة: لا تحاسدوا ولا تناجشوا ولا تباغضوا.",

 "[ح35]: مثل بأمثلة للبغض المحمود وأخرى للبغض المذموم. حديث أبي هريرة: لا تحاسدوا ولا تناجشوا ولا تباغضوا.",

أول عنصر يدل عليه الرقم صفر [0] quests هو العنصر الأول من المصفوفة quests
والثاني يدل عليه الرقم [1]quests ، والثالث [2] questsوهكذا
نلاحظ أنها أعداد صحيحة، لكن كيف نعرضها بشكل عشوائي على صفحة الويب؟

كود:

Math.random()

Math كائن (object) من كائنات javascript ومن خصائصه :

كود:

random()

لإعطاء قيم عشوائية

جرب :

كود:

<script type="text/javascript">

document.write(Math.random());

</script>

النتيجة(عند إعادة تحميل الصفحة) قيم عشوائية أقل من 1
تنبيه هام:
في HTML كنا نكتب الوسوم بأحرف كبيرة أو أحرف صغيرة ، لكن في جافا سكريبت يجب مراعاة حالة الخط سواءا في المتغيرات التي نقوم بتعريفها أو في الدوال والعناصر المعرفة في جافا سكريبت ( Math وليس math). [ربما تغير حالة بعض الأحرف عند نقل الشرح إلى هذا الموضوع ، لذا يرجى مراجعة الكود الأصلي الموجود في المرفقات]

لإعطاء قيم من 0 إلى 9 (عدد عناصر المصفوفة) نكتب التالي
Math.random() * 10
أو
Math.random() * numberofquests

كود:

 <script type="text/javascript">

 document.write(Math.random() * 10);

 </script>

النتيجة أعداد من 0 إلى 9 .. لكنها أعداد غير صحيحة لا تستخدم ، كفهرس للدلالة على عناصر المصوفة
هناك طريقتين للحصول على أعداد صحيحة قريبة من قيمة العدد الكسري:

Math.floor : أقل عدد صحيح أقرب للعدد الكسري، floor تعني أرضية والمراد الحد الأدنى أو الأقل

Math.ceil : أكبر عدد صحيح أقرب للعدد الكسري ، ceil تعني سقف والمراد أكبر أو الحد الأعلى

لكن إستخدام Math.ceil قد ينتج عنه خطأ في حالة إذا كان الرقم العشوائي الناتج أكبر من 9 ، كـــ: 9.6048487
لأن أكبر عدد صحيح هو 10 بينما رقم الفهرس لآخر عناصر المصفوفة هو 9، والنتيجة: undefined

لذلك استخدمنا Math.floor

جرب الكود التالي في قسم body:

كود:

<script type="text/javascript">

document.write(math.floor(Math.random() * 10);

</script>

Math.random() و

كود:

()Math.floor

كود:

Math.pow(x,y)

كود:

Math.pi

تعيد: رقم عشوائي، أقل عدد صحيح ، قيمة مرفوعة لأس ، قيمة pi ...وغيرها من خصائص الكائن Math ، وهي معرفة ضمن javascript بينما الــــ functions الدالات يكتبها المستخدم لتنفيذ أمر معين أو للقيام بوظيفة معينة أشبه ببرنامج مصغر.

فائدة :
هذه الأسماء معرفة مسبقا ، محجوزة Math.random() و ()Math.floor وكذا غيرها من خصائص الكائن Math
لذلك لا يمكن أن يستخدمها المبرمج لتعريف دالة للقيام بوظيفة ما.
وفي كود السؤال العشوائي الدالة pickrandomquest

كود:



function pickrandomquest(txt) {

var rnd = Math.floor(Math.random() * numberofquests)

// لعرض السؤال في حقل البيانات الأول

    txt.questbox.value = quests[rnd]  }

إعطاء سؤال عشوائي واحد وعرضه في حقل-1.
var rnd متغير عبارة عن رقم عشوائي صحيح من 0 إلى 9، للدلالة على عنصر من عناصر المصفوفة.

أما الدالة

كود:

addtext()

فهي:

// لنسخ السؤال من حقل البيانات الأول وعرضه في حقل البيانات الثاني

كود:

 function addtext() {

var newtext = "\n" + document.questform.questbox.value + "\n";

document.quiz.outputtext.value +=newtext;

}

- تعريف متغير جديد newtext وهو عبارة عن:
"\n" : سطر فارغ
document.questform.questbox.value = السؤال (القيمة الظاهرة) في حقل-1
newtext = سطر فارغ + السؤال الظاهر في حقل-1+ سطر فارغ

كود:

var newtext = "\n" + document.questform.questbox.value + "\n";

ثم يُكتب هذا المتغير الجديد في حقل-2

كود:

document.quiz.outputtext.value +=newtext;

يعنى الدالة ستقوم بـإضافة نسخة من السؤال الظاهر في حقل-1 إلى حقل-2 وإضافة سطر "\n" فارغ قبله وبعده.

كود:

+=newtext

: يعني بإضافة للأسئلة التي تم اختيارها (التي تعرض الآن في حقل-2)

أما =newtext فالنتيجة ستكون سؤال واحد فقط يعرض في حقل-2

الكود كاملا في المرفقات.
تنبيه: يجب تغيير امتداد الملف من txt إلى html أو htm .

والحمدلله
وصل الله وسلم على نبينا محمد وعلى آله وصحبه أجمعين