بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
كود السؤال العشوائي
إن شاء الله . نتعرف على أقسام هذا الكود واحدا واحدا.
أولا يجب أن نكتب كود 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 كائن (object) من كائنات javascript ومن خصائصه :
لإعطاء قيم عشوائية
جرب :
كود:
<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()
و و و
تعيد: رقم عشوائي، أقل عدد صحيح ، قيمة مرفوعة لأس ، قيمة 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، للدلالة على عنصر من عناصر المصفوفة.
أما الدالة فهي:
// لنسخ السؤال من حقل البيانات الأول وعرضه في حقل البيانات الثاني
كود:
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" فارغ قبله وبعده.
: يعني بإضافة للأسئلة التي تم اختيارها (التي تعرض الآن في حقل-2)
أما =newtext فالنتيجة ستكون سؤال واحد فقط يعرض في حقل-2
الكود كاملا في المرفقات.
تنبيه: يجب تغيير امتداد الملف من txt إلى html أو htm .
والحمدلله
وصل الله وسلم على نبينا محمد وعلى آله وصحبه أجمعين