Mustafa Suleiman

الأسئلة الخاصة بالإختبارات لا يتم الإجابة عليها ولكن يمكن إرشادك لطريقة الحل. في البداية السؤال غير واضح حيث هناك معادلة لم يتم إضافتها كما ترى في سؤالك. على أي حال، يتطلب هذا السؤال منك كتابة برنامج في MATLAB لبناء موجات باستخدام سلسلة فورييه، وعرض هذه الموجات في شكل رسوم بيانية على نافذة واحدة تحتوي على 6 نوافذ صغيرة مرتبة في 3 صفوف و 2 أعمدة. للقيام بذلك، يمكن استخدام الدالة "fourierSeriesSquare" المتوفرة في MATLAB لحساب معاملات سلسلة فورييه الخاصة بالموجة الكهربائية المربعة. ثم يمكن استخدام هذه المعاملات لبناء موجات الهارمونيك المختلفة المطلوبة وعرضها باستخدام الدالة "plot" في نوافذ صغيرة منفصلة. يمكن البدء بكتابة الأكواد في M-file في MATLAB باستخدام الأوامر التالية: % تعريف المتغيرات اللازمة T = 1; % فترة الموجة f = 1/T; % التردد الأساسي n = [1, 2, 5, 10, 100, 1000]; % أعداد الهارمونيك المطلوبة % حساب معاملات سلسلة فورييه باستخدام دالة fourierSeriesSquare [a, b] = fourierSeriesSquare(T, n(end)); % بناء موجات الهارمونيك المختلفة باستخدام المعاملات for i = 1:length(n) t = linspace(0, T, 1000); x = zeros(size(t)); for j = 1:n(i) x = x + a(j)*cos(2*pi*j*f*t) + b(j)*sin(2*pi*j*f*t); end % عرض الموجة في نافذة منفصلة باستخدام subplot subplot(3, 2, i) plot(t, x) title(sprintf('%d Harmonics', n(i))) end % تعيين عنوان للنافذة الرئيسية sgtitle('Square Wave Harmonics') يمكن استخدام الكود المذكور أعلاه لإنشاء موجات الهارمونيك المختلفة للموجة الكهربائية المربعة وعرضها في نافذة واحدة تحتوي على 6 نوافذ صغيرة مرتبة في 3 صفوف و 2 أعمدة. ويمكن استخدام الأوامر التالية: إنشاء متغيرات تمثل قيم المعاملات في المعادلة المذكورة، بما في ذلك "n" و "T" و "A". إنشاء مصفوفة لتخزين قيم الترددات المختلفة للهارمونيات. استخدام الدالة "syms" لتعريف المتغير "t" على أنه متغير رمزي. استخدام الدالة "fourierSeries" لحساب سلسلة فورييه الخاصة بالموجة المربعة. استخدام الدالة "subs" لتعيين قيم المعاملات المختلفة في المعادلة. إنشاء دالة تسمى "plotFourierSeries" لرسم السلسلة الفورييه. استخدام الأمر "subplot" لإنشاء النوافذ الصغيرة. استخدام الأمر "title" لإضافة عناوين للنوافذ الصغيرة. استخدام الأمر "xlabel" و "ylabel" لإضافة تسميات المحاور إلى الرسوم البيانية. استخدام الأمر "grid" لإضافة شبكة على الرسوم البيانية. وهناك بعض الأوامر الإضافية التي يمكن استخدامها لتخصيص المخططات بشكل أفضل.

وعليكم السلام ورحمة الله وبركاته، بالتأكيد يمكن ربط متجر إلكتروني يعمل بنظام ووردبريس بقاعدة بيانات خارجية.و يتم ذلك عادةً باستخدام الـ API الخاصة بالبرنامج الذي تتواجد به البيانات، والذي يتيح وصولًا محدودًا إلى البيانات اللازمة لتحديث المخزون أو المنتجات المعروضة في المتجر الإلكتروني. يمكن استخدام الـ API في إضافة المنتجات وتحديث المخزون وأيضًا في عرض البيانات على صفحات الموقع. ولكن يتطلب هذا الأمر مهارات في البرمجة وتطوير الويب، وإذا كنت لا تملك هذه المهارات، يمكنك البحث عن مطورين متخصصين في هذا المجال للمساعدة في تنفيذ المشروع. كما يمكنك الاطلاع على المصادر التالية.

يتعلق الفرق بين innerText و innerHTML بطريقة تعاملهما مع نصوص HTML. الـ innerText هي خاصية تستخدم لجلب النص الذي يتم عرضه داخل عنصر HTML، بشكل نصي عادي، بدون العلامات الخاصة بالـ HTML. وبالتالي، فإن innerText يقوم بإرجاع النص فقط، بدون أي عناصر HTML، ولا يمكن استخدامه لإدخال عناصر HTML داخل الصفحة. أما الـ innerHTML، فهي خاصية تستخدم لجلب النص والعناصر الـ HTML الذي يتم عرضه داخل عنصر HTML. بشكل عام، يمكن استخدام innerHTML لجلب النص والعناصر الـ HTML الموجودة داخل العنصر وكذلك لإدخال عناصر HTML جديدة داخل الصفحة. ويمكن استخدام innerText إذا كنت تريد جلب النص العادي فقط، ولا تهتم بأي عناصر HTML في النص. وبالنسبة لاستخدام innerHTML فهى مناسبة إذا كنت تحتاج إلى جلب النص والعناصر الـ HTML الموجودة داخل العنصر، أو إذا كنت تريد إضافة عناصر HTML جديدة داخل الصفحة. ومن المهم التأكد دائمًا من تنظيف النصوص الخاصة بالمستخدم قبل إدخالها باستخدام innerHTML لتجنب ثغرات أمان الويب مثل cross-site scripting (XSS).

مشكلة البحث: الخطأ في عرض البحث بحيث يعمل البحث فقط إذا تم إدخال الكلمة بالكامل. على سبيل المثال، عند الكتابة "p"، لا يعرض أي شيء. هذا الخطأ يحدث لأن استخدام الدالة setMeals() في الدالة getSearchedMeals() يعيد قائمة الوجبات إلى حالتها الأصلية، مما يعني أن العرض الحالي للوجبات سيتم إزالته. يجب استخدام حالة جديدة تتضمن النتائج المصفاة دون تغيير الحالة الأصلية لقائمة الوجبات. لإصلاح هذا الخطأ، يمكن تعديل الدالة getSearchedMeals() على النحو التالي: const getSearchedMeals = (e) => { e.preventDefault(); if (searchMeal !== "") { const searched = meals.filter(meal => meal.title.toLowerCase().includes(searchMeal.toLowerCase()) ); setShowMeals(true); setMeals(searched); } else { setShowMeals(false); } setSearchMeal(""); }; مشكلة تصفية النوع: تحدث هذه المشكلة لأنه في كل مرة تقوم فيها بتحديد الفئة، تقوم الدالة setMeals() بتعيين القائمة المفلترة إلى قائمة من الوجبات التي تحتوي فقط على النوع الذي تم تحديده. لحل هذه المشكلة، يمكنك استخدام مصفوفة أخرى لتخزين القائمة الأصلية من الوجبات وتقوم بتصفيتها بناءً على النوع وتعيين القائمة المعروضة إلى النتيجة. يمكنك تعديل الكود كالتالي: function App() { const [searchMeal, setSearchMeal] = useState(""); const [meals, setMeals] = useState([]); const [showMeals, setShowMeals] = useState(false); const [originalMeals, setOriginalMeals] = useState([]); // إضافة قائمة الوجبات الأصلية // Fetch Meals API const getMeals = async () => { const response = await fetch( "https://www.themealdb.com/api/json/v1/1/search.php?s" ); const data = await response.json(); const findMeals = data.meals.map((meal) => ({ id: meal.idMeal, title: meal.strMeal, image: meal.strMealThumb, rate: (Math.random() * 5).toFixed(2), category: meal.strCategory, description: meal.strYoutube, })); setMeals(findMeals); }; useEffect(() => { getMeals(); }, []); // Display Searched Meals const getSearchedMeals = (e) => { e.preventDefault(); if (searchMeal !== "") { const searched = meals.filter(meal => meal.title.toLowerCase().includes(searchMeal.toLowerCase()) ); setShowMeals(true); setMeals(searched); } else { setShowMeals(false); } setSearchMeal(""); }; // filter by category const [selected, setSelected] = useState([]); const categories = meals .map((meal) => meal.category) .reduce((acc, item) => (acc.includes(item) ? acc : [...acc, item]), []); const handleCheck = (e) => { const { value, checked } = e.target; if (checked === true) { setSelected((pre) => [...pre, value]); } else { setSelected((pre) => [...pre.filter((item) => item !== value)]); } }; useEffect(() => { const filtered = meals.filter((item) => selected.includes(item.category) ); setMeals(filtered); }, [selected]); // Filter By Rate return ( <div className="container"> <Search searchMeal={searchMeal} setSearchMeal={setSearchMeal} getSearchedMeals={getSearchedMeals} /> <div className="main"> {showMeals && ( <FilterMeal categories={categories} handleCheck={handleCheck} /> )} {showMeals && <Meals meals={meals} searchMeal={searchMeal} />} </div> </div> ); } export default App;

يمكن تنفيذ التطبيق المذكور باستخدام تقنيات الويب المختلفة، على سبيل المثال: لإنشاء غرف الألعاب والصوت، يمكن استخدام تقنيات WebRTC أو WebSocket. يتم إنشاء غرف جديدة باستخدام قاعدة بيانات لتخزين بيانات اللاعبين ومعلومات الغرف وحالتها (مفتوحة أو مغلقة). لعملية الرهان، يمكن استخدام لغة الجافاسكريبت للتعامل مع الخوارزمية المستخدمة وتنفيذ عملية الرهان بشكل آمن ودقيق. يتم تخزين النتائج في قاعدة البيانات ويتم عرضها للمستخدمين بشكل ديناميكي. ويمكن استخدام مكتبات الجافاسكريبت الحديثة مثل React أو Angular لإنشاء واجهة المستخدم الجميلة والحديثة والتفاعلية. يجب توفير إجراءات أمان صارمة لضمان سلامة اللاعبين وحماية بياناتهم الشخصية والمالية. أيضًأ يمكن تنفيذ التطبيق على أجهزة سطح المكتب أو الهواتف المحمولة باستخدام تقنيات الويب المتعددة المنصات مثل HTML، CSS، و JavaScript من خلال إطاري عمل React-native و Electron.js. ولكن يجب التنبيه إلى ضرورة البحث عن مشروعية الرهان من ناحية الدين فالرهان من خلال الحظ لا يجوز. فكما ذكرت فعليًا تعتمد لعبة الرهان في النتائج على خوارزمية معينة وليس على مهارة اللاعبين، حيث تتم إدارة اللعبة والتحقق من صحة الرهانات وحساب الأرباح والخسائر من قبل السيرفر الخاص بالتطبيق، وذلك لتوفير تجربة لعب عادلة وعشوائية للاعبين وتجنب الغش والتلاعب في النتائج. وبالتالي، يتم تحديد نتيجة اللعبة بشكل عشوائي ولا يمكن لأي لاعب التنبؤ بالنتيجة بشكل دقيق ويعتمد الأمر في الغالب على الحظ. فيمكن أن تختلف الخوارزميات المستخدمة في لعبة الرهان تبعًا لنوع اللعبة والمتطلبات الخاصة بالتطبيق. وإليك مثال بالجافاسكريبت: // تعريف متغير لحساب نتيجة الرهانات let totalWinning = 0; // تعريف مصفوفة للاحتفاظ بأضعاف الرهانات const betMultipliers = [2, 3, 4, 5, 6, 7, 8, 9]; // تعريف مصفوفة للاحتفاظ بالقيم النسبية لكل رهان const bets = [0.5, 0.25, 1, 2, 5, 10, 50, 100]; // تعريف متغيرات لتمثيل حالة الرهان، true إذا كان الرهان صحيحًا وfalse إذا كان الرهان خاطئًا const betStatuses = [true, false, true, false, true, true, true, false]; // حساب الأضعاف والربح الإجمالي for (let i = 0; i < betStatuses.length; i++) { if (betStatuses[i]) { totalWinning += bets[i] * betMultipliers[i]; } } // عرض النتيجة console.log(`Total Winning: ${totalWinning}`); تم إنشاء متغير totalWinning لحساب إجمالي الربح، ومصفوفتي betMultipliers و bets للاحتفاظ بأضعاف الرهانات والقيم النسبية الخاصة بها على التوالي. يتم تمثيل حالة كل رهان باستخدام متغيرات betStatuses. يتم استخدام حلقة for لحساب إجمالي الربح. إذا كان الرهان صحيحًا، يتم ضرب قيمة الرهان النسبية بمضاعف الرهان وإضافته إلى المتغير totalWinning. في النهاية، سيتم عرض إجمالي الربح في وحدة التحكم باستخدام console.log.

بشكل أكثر تفصيلاً، يمكن القول أن DOM في JavaScript يشير إلى مجموعة من الكائنات (Objects) التي تمثل مستند HTML الذي تتم إنشاؤه من قبل المستعرض (Browser)، وتتيح للمطورين التفاعل مع عناصر المستند بشكل ديناميكي عن طريق البرمجة. ويعد DOM بمثابة جسر بين المستند HTML وJavaScript، حيث يمكن الوصول إلى العناصر الموجودة في المستند والتلاعب بها باستخدام JavaScript. DOM يعمل على مبدأ التسلسل الهرمي (Hierarchical structure)، حيث يتم تمثيل المستند HTML كشجرة تحتوي على عناصر HTML وكل عنصر يحتوي على أطفال (Children) وأشقاء (Siblings). ويتم تمثيل العناصر باستخدام كائنات JavaScript يمكن الوصول إليها باستخدام مجموعة من الخصائص والأساليب. عندما يتم تحميل صفحة ويب، يقوم المستعرض بإنشاء DOM، ويمكن للمطور الوصول إلى عناصر المستند HTML باستخدام الأساليب والخصائص المتاحة في DOM، مثل getElementById() و getElementsByClassName() وغيرها. الأساليب والخصائص المتاحة في DOM تختلف من عنصر إلى آخر، ولكن بشكل عام يمكن استخدام DOM لتعديل محتويات الصفحة والأحداث المرتبطة بها، وذلك باستخدام JavaScript. على سبيل المثال، يمكن استخدام DOM لتغيير نص عنصر HTML، عن طريق الوصول إلى العنصر باستخدام الأسلوب getElementById() ثم تعيين قيمة جديدة لخاصية innerHTML: <p id="myPara">Hello World!</p> const myPara = document.getElementById("myPara"); myPara.innerHTML = "Goodbye World!"; كما يمكن استخدام DOM لإضافة عناصر HTML جديدة إلى المستند، عن طريق إنشاء العنصر باستخدام createElement() ثم إضافته إلى المستند باستخدام append. على سبيل المثال، إذا كنت تريد إنشاء عنصر div جديد وإضافته إلى صفحتك، يمكنك استخدام الكود التالي: // إنشاء عنصر div جديد const newDiv = document.createElement("div"); // تعيين نص داخل العنصر const divText = document.createTextNode("Hello, World!"); // إضافة النص إلى العنصر newDiv.appendChild(divText); // تعيين بعض الخصائص للعنصر newDiv.style.backgroundColor = "blue"; newDiv.style.color = "white"; newDiv.style.padding = "10px"; // إضافة العنصر الجديد إلى الصفحة document.body.appendChild(newDiv); يمكن أيضًا استخدام DOM لإزالة عناصر HTML، عن طريق استخدام removeChild(). على سبيل المثال، إذا كنت تريد إزالة عنصر div بناءً على معرفه، يمكنك استخدام الكود التالي: // الحصول على العنصر المراد إزالته باستخدام معرفه const divToRemove = document.getElementById("myDiv"); // إزالة العنصر من المستند divToRemove.parentNode.removeChild(divToRemove); وباستخدام DOM ، يمكنك أيضًا تغيير خصائص عناصر HTML موجودة، مثل قيمة النص أو الخلفية أو الحجم والألوان والخطوط والأحداث وغيرها الكثير. على سبيل المثال، إذا كنت تريد تغيير خلفية عنصر div عند تحميل الصفحة، يمكنك استخدام الكود التالي: <div id="myDiv">Hello, World!</div> <script> // الحصول على العنصر المراد تعديله باستخدام معرفه const myDiv = document.getElementById("myDiv"); // تغيير خلفية العنصر myDiv.style.backgroundColor = "blue"; myDiv.style.color = "white"; myDiv.style.padding = "10px"; </script> في النهاية، تتيح لك DOM إمكانية التفاعل مع صفحات الويب وتغييرها بطريقة ديناميكية وباستخدام لغة JavaScript.

لتخزين الصور في Laravel ومن ثم تخزينها في قاعدة البيانات، ستحتاجين إلى اتباع الخطوات التالية: 1- إنشاء جدول في قاعدة البيانات لتخزين الصور: قم بإنشاء جدول جديد في قاعدة البيانات لتخزين الصور. يجب أن يتضمن هذا الجدول حقولًا مثل اسم الصورة ومسار الصورة وأي حقول إضافية تحتاج إليها لتتمكن من تخزين واسترداد الصور. Schema::create('photos', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->string('path'); $table->timestamps(); }); 2- إنشاء نموذج Model للصورة: يجب إنشاء نموذج Model للصورة لتتمكن من الوصول إلى جدول الصور في قاعدة البيانات. سيتم استخدام هذا النموذج لإنشاء سجلات صور جديدة وتحديثها وحذفها. namespace App\Models; use Illuminate\Database\Eloquent\Model; class Photo extends Model { protected $fillable = [ 'name', 'path' ]; } 3- إضافة حقل لتحميل الصور في النموذج: يجب إضافة حقل لتحميل الصور في النموذج. يمكن استخدام الحقل "file" لهذا الغرض. <input type="file" name="photo"> 4- تخزين الصورة في الخادم: قبل تخزين الصورة في قاعدة البيانات، يجب تخزينها في الخادم. يمكن استخدام وظيفة "store" للقيام بذلك. سيتم حفظ الصورة في المسار المحدد في الدالة "store". $path = $request->file('photo')->store('public/photos'); 5- إنشاء سجل الصورة في قاعدة البيانات: بعد حفظ الصورة في الخادم، يمكنك إنشاء سجل للصورة في قاعدة البيانات باستخدام النموذج Model. use App\Models\Photo; $photo = new Photo; $photo->name = $request->file('photo')->getClientOriginalName(); $photo->path = $path; $photo->save(); 6- استرداد الصورة من قاعدة البيانات: يمكنك استرداد الصورة من قاعدة البيانات باستخدام النموذج Model. يجب البحث عن سجل الصورة باستخدام معرف الصورة واسترداد المسار الذي تم تخزين الصورة به في الخادم. use App\Models\Photo; $photo = Photo::findOrFail($id); $path = $photo->path; 7- عرض الصورة في الواجهة: يمكنك عرض الصورة في الواجهة باستخدام العنوان URL للصورة. يمكن الحصول على العنوان URL باستخدام دالة "asset". <img src="{{ asset($photo->path) }}" alt="{{ $photo->name }}"> 8- حذف الصورة: يمكن حذف الصورة من الخادم وقاعدة البيانات باستخدام النموذج Model. use App\Models\Photo; $photo = Photo::findOrFail($id); Storage::delete($photo->path); $photo->delete(); بهذا الشكل، يمكنك تخزين الصور في Laravel ومن ثم تخزينها في قاعدة البيانات واستردادها وحذفها عند الحاجة.

يحدث هذا الخطأ عندما يتم إعادة تقديم الصفحة مرارًا وتكرارًا بسبب تحديث الحالة في كل مرة. في حالة مشروعك أنت، عند تحديث حالة meals في setMeals(filtered) ، فيتم إعادة تقديم الصفحة وإعادة تنفيذ الكود بالكامل. هذا يعني أنه يتم إعادة استدعاء الدالة getMeals() في useEffect() وإعادة جلب البيانات مرة أخرى، ثم تحديث meals وإعادة التقديم مرة أخرى وهكذا. لحل هذه المشكلة، يمكنك وضع استدعاء getMeals() في حالة مستقلة عن حالة selected. يمكنك إنشاء دالة فرعية في مكان آخر، على سبيل المثال في الأعلى من المكون، واستخدامها لجلب البيانات. يمكنك أيضًا إضافة شرط للتحقق مما إذا كانت selected فارغة أو لا لتحديث meals بشكل صحيح عند الحاجة فقط. على سبيل المثال: const [meals, setMeals] = useState([]); const [selected, setSelected] = useState([]); const fetchMeals = async () => { const response = await fetch('https://www.themealdb.com/api/json/v1/1/search.php?s') const data = await response.json() const findMeals = data.meals.map(meal => ( { id: meal.idMeal, title: meal.strMeal, image: meal.strMealThumb, rate: (Math.random() * 5).toFixed(2), category: meal.strCategory, description: meal.strYoutube, } )) setMeals(findMeals) } const handleCheck = (e) => { const {value, checked} = e.target; if (checked === true) { setSelected(pre=>[...pre,value]) } else { setSelected(pre=> [...pre.filter(item => item !== value)]) } } useEffect(() => { fetchMeals(); }, []); useEffect(() => { const filtered = meals.filter(item => selected.includes(item.category)) setMeals(filtered); }, [selected]); ملاحظة: يمكنك أيضًا استخدام useCallback() لتجنب إعادة تحديث دالة fetchMeals() عند إعادة تقديم الصفحة Re-render. قواعد استعمال الخطافات في React الأسئلة الشائعة حول الخطافات في React

بخصوص التنبيه أرجو منك قراءة النص التالي المقتبس من موقع مستقل - من قاعدة المعرفة للمستقلين صفحة إدارة المشروع بعد توظيفك: تأكد من العمل المنجز بعد إنهاء جميع أقسام المشروع تأكد جيدًا مما قمت بتنفيذه، واحرص على التزامك بحقوق الملكية وخلو العمل من النسخ (هذا التصرف يؤدي لإيقافك عن العمل في مستقل). أما لو ظهر لدى صاحب المشروع أي خطأ أو لاحظ وجود نقص في العمل ننصحك بالتعاون معه لإصلاحه. تسليم كامل الملفات أرسل جميع الملفات المتعلقة بالعمل، تأكد من إمكانية تشغيلها لدى العميل وحاول مساعدته لو احتاج ذلك. قبل أن تضغط على زر تسليم المشروع اسأل العميل عن رأيه بما قدمت، واسأله عن وجود أي استفسارات أو ملاحظات او حتى مشاكل في التنفيذ وساعده في حلها حال وجودها. تسليم المشروع بعد الضغط على زر تسليم المشروع، سيتم إرسال إشعار للعميل يعلمه بطلبك. في حال موافقته على الطلب سيصبح المشروع مكتملًا كما سينتقل الرصيد لحسابك. علمًا أنه يمكنه العودة إليك خلال 14 يومًا من استلام المشروع للإبلاغ عن أي مشكلة أو طلب توضيح أي شيء غامض ضمن المشروع. احرص على منح العميل تجربةً إيجابيةً، لمنحك تقييماتٍ جيدةٍ بعد انتهاء المشروع ولزياة فرصة اختيارك مجددًا لتنفيذ مشاريع أخرى. تواصل ضمن نقاش المشروع لتكن جميع محادثاتك مع العميل موثقة ضمن المنصة لنتمكن من ضمان حقوقك في حال حدوث أي مشكلة. إذا أردتي الاستفسار عن المشكلة ومعرفة المزيد تحدثي إلى مركز المساعدة الخاص بمستقل وبالنسبة لتسجيل الدخول يمكنك الإطلاع على الدليل التالي، حيث يتم إنشاء حساب واحد لمنصة حسوب وبذلك تمتلكي حساب على مواقع مثل مستقل وخمسات وأكاديمية حسوب وبيكاليكا وبعيد وأنا: https://support.mostaql.com/login-to-mostaql

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

يمكنك الإعتماد على المقال التالي: أيضًا قسم البرمجة بلغة PHP لمنصة ووردبريس ومن ضمنه المقالات التالية: وهنا ستجدي القسم الخاص بشروحات وورد بريس بالتصنيفات الفرعية أيضًا وهما WooCommerce و إدارة الشبكة على ووردبريس مُتعدّد المواقع https://academy.hsoub.com/apps/web/wordpress/

شكرا للتوضيح، يمكنك تخزين رقم السؤال الحالي وتاريخ آخر تحديث للسؤال الحالي في ذاكرة التخزين المؤقت للمتصفح (Browser's Local Storage) باستخدام JavaScript. ثم يمكن استرداد هذه القيم من ذاكرة التخزين المؤقت وتحديث رابط ملف الصوت عند تحميل الصفحة. يمكنك القيام بذلك باستخدام الشيفرة التالية: // إنشاء متغير جديد للإشارة إلى عنصر الصوت const audioElement = document.getElementById('question-audio'); // إنشاء متغير جديد لتخزين رقم السؤال الحالي const currentQuestionIndex = localStorage.getItem('currentQuestionIndex') || 0; // إنشاء متغير جديد لتخزين تاريخ آخر تحديث للسؤال الحالي const currentQuestionUpdatedAt = localStorage.getItem('currentQuestionUpdatedAt') || 0; // إستخراج رابط ملف الصوت الجديد من الأسئلة الحالية والقيم المخزنة في ذاكرة التخزين المؤقت const audioSource = '{{ asset('audio/'.$questions[$currentQuestionIndex]->question_text) }}?v={{ $questions[$currentQuestionIndex]->updated_at->timestamp }}'; if (currentQuestionIndex == {{ $currentQuestionIndex }} && currentQuestionUpdatedAt == '{{ $questions[$currentQuestionIndex]->updated_at }}') { audioSource = localStorage.getItem('currentAudioSource'); } else { localStorage.setItem('currentQuestionIndex', {{ $currentQuestionIndex }}); localStorage.setItem('currentQuestionUpdatedAt', '{{ $questions[$currentQuestionIndex]->updated_at }}'); localStorage.setItem('currentAudioSource', audioSource); } // تحديث خاصية src في عنصر الصوت audioElement.src = audioSource; // تشغيل الصوت audioElement.play(); يمكنك وضع هذا الكود في ملف JavaScript منفصل وتضمينه في صفحة الاختبار. يتم تحديث قيمة $currentQuestionIndex عندما يتم التبديل بين الأسئلة في متحكم Laravel Livewire الخاص بك. ويتم استخدام localStorage لتخزين القيم الحالية للسؤال وتاريخ آخر تحديث للسؤال الحالي ورابط الملف الصوتي الحالي. أيضًا يتم استخدام هذه القيم لتحديث رابط الملف الصوتي الحالي. وتستخدم هذه القيم لتحديث رابط الملف الصوتي في حالة العودة إلى السؤال السابق والتالي. ويمكن تحسين هذا الحل بتحميل جميع الملفات الصوتية في الصفحة الأولى وتبديلها باستخدام JavaScript عوضًا عن تحميل كل ملف صوتي منفردًا. ومع ذلك ، فإن الحل الحالي يبدو كافيًا لحل المشكلة المذكورة.

لحل هذه المشكلة، يمكنك استخدام نفس المنهجية التي استخدمتها للتحديث عند الانتقال إلى سؤال جديد، ولكن عليك القيام بذلك في الاتجاه المعاكس أيضًا (عند الرجوع إلى سؤال سابق). يمكنك تحقيق ذلك باستخدام نفس الكود JavaScript السابق، ولكن يجب أن تستخدم متغيرًا لتخزين رابط الملف الصوتي الحالي وتحديثه أيضًا في كل مرة تتغير فيها الأسئلة. يمكنك استخدام مثل هذا الكود في متحكم Laravel Livewire الخاص بك: // في متغير Livewire protected $currentQuestionIndex = 0; protected $currentAudioSource; public function render() { $questions = Question::all(); // استخراج رابط ملف الصوت الحالي من الأسئلة الحالية $this->currentAudioSource = asset('audio/'.$questions[$this->currentQuestionIndex]->question_text) . '?v=' . $questions[$this->currentQuestionIndex]->updated_at->timestamp; return view('livewire.quiz', [ 'questions' => $questions, ]); } // دالة تحديث الملف الصوتي للأمام public function updateAudioForward() { $this->currentQuestionIndex++; // استخراج رابط ملف الصوت الجديد من الأسئلة الجديدة $this->currentAudioSource = asset('audio/'.$this->questions[$this->currentQuestionIndex]->question_text) . '?v=' . $this->questions[$this->currentQuestionIndex]->updated_at->timestamp; $this->emit('updateAudio'); } // دالة تحديث الملف الصوتي للخلف public function updateAudioBackward() { $this->currentQuestionIndex--; // استخراج رابط ملف الصوت الجديد من الأسئلة الجديدة $this->currentAudioSource = asset('audio/'.$this->questions[$this->currentQuestionIndex]->question_text) . '?v=' . $this->questions[$this->currentQuestionIndex]->updated_at->timestamp; $this->emit('updateAudio'); } ويمكنك استخدام الكود السابق في ملف JavaScript منفصل، وتضمينه في صفحة الاختبار. يمكنك ثم استخدام الشيفرة التالية للاستماع إلى حدث updateAudio وتحديث مصدر الصوت على الصفحة: // استدعاء دالة updateAudioSource عند استقبال حدث update

Generator functions هي وظيفة في JavaScript تسمح بإنشاء Iterator (محدد) لتكرار قيم من خلالها. عند استدعاء ال generator function ، يتم إنشاء Object (المحدد) الذي يمكن استخدامه لاسترداد القيم المتعاقبة عن طريق استدعاء next() مرارًا وتكرارًا. فائدة ال generator function في JavaScript هي أنها تسمح بتوليد سلسلة من القيم أو النتائج المحسوبة بشكل ديناميكي عبر فترات زمنية مختلفة. بالإضافة إلى ذلك، يمكن استخدام generator functions في العديد من الأسيناريوهات مثل: إنتاج قيم لا نهائية ودورانها عبر دورات متعددة. توليد سلاسل محسوبة بشكل ديناميكي للقيام بأنواع مختلفة من المعالجات. التعامل مع البيانات المحدودة المتاحة بشكل فعال دون الحاجة إلى تحميل كامل البيانات في الذاكرة. وتتميز ال generator functions بأنها تتميز بالقدرة على التعامل مع التأجيل الذي يحدث عند إجراء عمليات معقدة والتي يمكن أن تتطلب وقتًا طويلاً للإنتهاء. باستخدام generator functions يمكن للمطور تجنب حدوث تأخير في البرنامج وتحسين أداءه. مثال على استخدام generator function يمكن أن يكون عند إنشاء مولد (generator) لتوليد أرقام عشوائية. على سبيل المثال: function* randomNumbersGenerator() { while(true) { yield Math.floor(Math.random() * 100); } } const numbers = randomNumbersGenerator(); console.log(numbers.next().value); // 37 console.log(numbers.next().value); // 81 console.log(numbers.next().value); // 14 في الكود السابق تم إنشاء generator function باسم randomNumbersGenerator، والذي يقوم بإنشاء أرقام عشوائية عند استدعاء next() مرارًا وتكرارًا. ويتم تخزين المولد في متغير numbers، ثم يمكن استخدام next() للحصول على قيم مختلفة من المولد. وكما ترى تم استخدام generator function لتوليد سلسلة من الأرقام العشوائية بدون الحاجة إلى تخزين جميع الأرقام في مكان واحد في الذاكرة. كما يمكن استخدام generator function لإنشاء تحميل ديناميكي للبيانات، وهذا يوفر ميزة في الأداء حيث أنه يقلل من استخدام الذاكرة والتأخير في تحميل البيانات. استخدام generator functions في تطوير المواقع والتطبيقات توليد القوائم اللانهائية: يمكن استخدام generator functions لتوليد البيانات التي تحتاجها لعرض القوائم اللانهائية، مثل القوائم المتداخلة والقوائم العمودية. عندما يطلب المستخدم المزيد من العناصر، يتم توليد المزيد من العناصر باستخدام generator function. تحميل البيانات الكبيرة بشكل فعال: يمكن استخدام generator functions لتحميل البيانات الكبيرة بشكل فعال، حيث يمكن استخدام generator functions لتحميل كميات كبيرة من البيانات بشكل تدريجي، بدلاً من تحميلها جميعًا في ذاكرة الوصول العشوائي (RAM) في وقت واحد. وبالتالي تمنع generator functions تعليق التطبيقات عند تحميل البيانات الكبيرة. التحكم في سير التنفيذ: يمكن استخدام generator functions للتحكم في سير التنفيذ، حيث يمكن للمبرمج استخدام yield لإيقاف التنفيذ في أي وقت يريد، وبعد ذلك يمكن استئناف التنفيذ مرة أخرى بعد بعض الإجراءات المحددة.

يمكن استخدام ChatGPT للحصول على مساعدة في البرمجة، ولكن ينبغي الانتباه إلى أنه يجب عدم الاعتماد عليها بشكل كامل في عملية التعلم. فعلى الرغم من أن ChatGPT يمكن أن يساعد في حل بعض المشاكل البرمجية وتوضيح بعض الجوانب الغامضة في البرمجة، إلا أنه لا يمكن أن يحل محل البحث الذاتي والتجريب في كتابة الشفرة وفهمها. بالإضافة إلى ذلك، ينصح بتعلم مهارات البحث الفعال في جوجل و Stack Overflow وغيرها من المواقع المتخصصة في البرمجة، حيث يمكن الحصول على معلومات شاملة وموثوقة ومفيدة لتعلم البرمجة وحل المشاكل البرمجية. إذا كنت تحتاج إلى مساعدة في فهم بعض المفاهيم البرمجية أو حل مشكلة برمجية معينة، فيمكن استخدام ChatGPT للحصول على توضيحات وإرشادات عامة. ولكن يجب عليك أن تحرص على فهم الحلول التي تحصل عليها ومحاولة تطبيقها بنفسك، وعدم الاعتماد عليها كحل نهائي دون فهم المبادئ الأساسية للبرمجة. ولا تستهون أبدًا بمهارة القدرة على البحث عن المعلومة وسط أكوام من النصوص والروابط، فهى مهارة تحتاج إلى وقت، وأيضًا عود نفسك على قراءة الـ Docs الخاصة بالمكتبات وأطر العمل التي تستخدمها. فمن خلال التجربة والخطأ ستتعلم الكثير، وعند صعوبة الوصول للمعلومة بعد البحث يمكنك سؤال ChatGPT لحل المشكلة، ويجب الإنتباه إلى أنه في بعض الأحيان يخطيء لذلك أنت بحاجة إلى أن تكون واعي وتقرأ الكود وتقوم بتجربته وتصحح له، لكنه مفيد حقًا مقارنًة بالخطأ الذي يحدث منه أحيانًا.

بالطبع يمكنك استخدام تقنيات CSS المختلفة مثل grid و flexbox و float معًا في تصميم واجهة المستخدم. ولكن يعتمد استخدام أي تقنية على المتطلبات التصميمية للمشروع والنتيجة المطلوبة. Grid: يستخدم Grid لتصميم الأشكال المعقدة ذات العديد من الصفوف والأعمدة، وهو مناسب لترتيب العناصر في شبكة من المستطيلات المتباينة الأحجام. Flexbox: يستخدم Flexbox لترتيب العناصر في صف أو عمود واحد، وهو مناسب لتصميم مكونات واجهة المستخدم الصغيرة والتعامل مع التنقلات. Float: يستخدم Float لتحديد توجه العناصر في الصفحة (اليمين، اليسار، الأعلى، الأسفل)، وهو مناسب لترتيب العناصر بشكل سطحي في الموقع. يمكن استخدام التقنيات المختلفة بشكل متداخل في تصميم واجهة المستخدم، مثل استخدام Grid لتقسيم الصفحة إلى مناطق مختلفة، واستخدام Flexbox لتنظيم عناصر المنطقة. بشكل عام، فإن استخدام الأداة المناسبة يعتمد على طبيعة ومتطلبات التصميم، ولذلك فمن المهم التعرف على مزايا وعيوب كل تقنية لاختيار الأداة الأفضل لتلبية احتياجات التصميم. بخصوص الأفضل بينهم؟ لا يوجد تقنية واحدة أفضل من الأخرى في CSS، فكل تقنية لها مزايا وعيوبها، ويعتمد استخدامها على متطلبات التصميم والمشروع الذي تعمل عليه. لكن حاليًا أصبح استخدام الـ float من الماضي وعليك استخدام flexbox أو Grid، فقط يمكنك فهم الـ Float أي كيف يعمل ولكن لا تركز عليه بشكل كبير. فمثلاً يعد Flexbox مفيدًا لتنظيم عناصر المستخدم على محاور واحدة (الأفقية أو العمودية)، بينما يعد Grid أفضل لتصميم شبكات متعددة الأعمدة والصفوف، مما يجعل الصفحات مرنة وسهلة القراءة والتنظيم.

بالتأكيد لغات HTML و CSS مهمتان جدًا لتطوير التطبيقات باستخدام JS. بل هما الأساس المكون لصفحات الويب فعندما تطور تطبيقًا ويب باستخدام JS، فإنك ستحتاج بالتأكيد إلى HTML و CSS لتصميم وعرض واجهة المستخدم. وبالنسبة للسؤال الثاني، فإن معرفة الأساسيات عادة ما تكفي للقيام ببعض الأعمال البسيطة، ولكن إذا كنت تريد تطوير تطبيقات متقدمة، فقد تحتاج إلى تعلم المزيد من التفاصيل والمفاهيم العميقة في HTML و CSS. وبالنسبة للسؤال الثالث، يجب عليك تعلم إحدى أطر العمل مثل React أو Angular أو Vue.js إذا كنت تريد الحصول على وظيفة أو العمل على مواقع العمل الحر، وبدون الأساسيات لن تصل بعيدًا ولن تتمكن من التنقل بين أطر العمل عند الحاجة، وأيضًا عند ظهور مشاكل سيصعب عليك حلها وإكتشاف السبب. فعند تعلم البرمجة لا تقلل أبدًا من الأساسيات فهي ستضعك على أرض صلبة وستمكنك من فهم التقنيات المختلفة واللغات الأخرى أيضًا بشكل أسهل وأسرع في حال أردت تعلم تقنية أو لغة جديدة. ومنعًا للتكرار أنصحك بقراءة النقاش على السؤال التالي: بخصوص ما ستتعلمه في الدورة، فستتعلم التالي: بنية الشيفرة Code Structure المتغيرات والثوابت 12 أنواع البيانات Data Types التحويل بين الأنواع Type Conversions المصفوفات Arrays العوامل الرياضية Arithmetic Operators عوامل المقارنة Comparison Operators الجملة الشرطية if-else العامل الثلاثي ternary المبدل switch حلقات التكرار Loops الدوال Functions المصفوفات Arrays الكائنات Objects الأصناف Classes التعامل مع الأخطاء والبرمجة غير المتزامنة التخاطب مع الخادم تخزين البيانات في المتصفح وجودة الشيفرة بعد ذلك ستتعلم أطر العمل التي ذكرها لك أسامة وهم: React.js Node.js React Native Electron.js Next.js وبذلك ستصبح مطور Full-Stack قادر على بناء أي تطبيق بمفردك.

بالإضافة إلى ما تم ذكره في التعليقات السابقة، إليك بعض المعلومات الإضافية حول وحدات القياس في تصميم المواقع: الـ em والذي يعتمد على قيمة font-size للعنصر الأم، ويختلف عن الـ rem في أنه يعتمد على حجم الخط الحالي للعنصر نفسه، وليس العنصر الأساسي. الـ % والتي تعتمد على حجم العنصر الأم، وهي تستخدم بشكل شائع في تحديد الحجم والعرض والارتفاع والهوامش. الـ pt والتي تعتمد على قياسات الطباعة وهي تستخدم بشكل شائع في تصميم المطبوعات، وليست مفيدة في تصميم المواقع. الـ rem والـ em والـ % قد تؤثر على عمليات التحكم بعرض وارتفاع الصور، لذلك يفضل استخدام الـ px في هذه الحالات. قد يؤدي استخدام وحدات القياس المتغيرة مثل الـ em والـ rem إلى تباين حجم النص في بعض المتصفحات، ولذلك يفضل استخدام الـ px لتحديد حجم النص إذا كان الاستقرار في الحجم مهم. يفضل استخدام وحدات القياس النسبية مثل الـ rem والـ em والـ % لتحديد حجم النص والعناصر في الموقع، حيث تجعل الموقع متجاوباً مع أي حجم شاشة، وتسهل عملية التخطيط والتنسيق للعناصر، وتحافظ على نسبة ثابتة بين الارتفاع والعرض. هناك عدة أساليب وطرق لتصميم موقع متجاوب باستخدام وحدات القياس، ولكن هناك بعض النصائح الأساسية التي يمكن اتباعها لضمان تحقيق هذا الهدف بشكل صحيح. وسنقدم بعض الأمثلة والأكواد التوضيحية لكل نصيحة. طرق لتصميم موقع متجاوب باستخدام وحدات القياس 1- استخدام وحدة الـ rem تعتبر وحدة الـ rem وحدة قياس نسبية تعتمد على حجم الخط الأساسي للصفحة، وتمكن من الحفاظ على نسبة الأبعاد والتناسب بين العناصر في جميع الشاشات، مع السماح بتغيير حجم الخط الأساسي بسهولة. يمكن استخدامها بالطريقة التالية: body { font-size: 16px; } h1 { font-size: 2.5rem; } p { font-size: 1rem; } ومن الممكن تغيير حجم الخط الأساسي ببساطة عن طريق تعديل قيمة font-size في الـ body، مثلا: @media (min-width: 768px) { body { font-size: 18px; } } 2- استخدام الوحدات النسبية تعتمد الوحدات النسبية على حجم العنصر الأساسي الذي يتم تطبيقها عليه، وتسمح بتعيين العرض والارتفاع والهوامش والتباعدات بنسبة مئوية من حجم العنصر الأساسي، مما يتيح تعديل حجم العناصر بسهولة دون تأثير على التناسب والتوزيع في جميع الشاشات. .container { width: 80%; margin: 0 auto; } .box { width: 50%; padding: 5%; margin: 2.5%; display: inline-block; } @media (max-width: 768px) { .box { width: 90%; padding: 10%; margin: 5%; } } 3- استخدام الـ Flexbox تعتبر Flexbox أسلوبًا بديلاً عن الطرق التقليدية لتحديد موقع العناصر في الصفحة، وتتيح التحكم في ترتيب وتوزيع العناصر بطريقة مرنة وسهلة. يمكن استخدام Flexbox لتحديد توزيع العناصر على المحاور الرئيسية والثانوية، بحيث يمكن تغيير توزيع العناصر تلقائيًا بناءً على حجم الشاشة. على سبيل المثال، يمكن استخدام Flexbox لتحقيق توزيع العناصر بطريقة مرنة في العناوين والقوائم والتصميمات الخاصة بالموقع. يمكن استخدام الخصائص التالية في CSS لتحقيق ذلك: .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .item { flex: 1 0 200px; } في هذا المثال، يتم تعريف عنصر الـ container باستخدام display: flex، والذي يتيح لنا توزيع العناصر داخله بشكل مرن. تم تعيين خاصية flex-wrap إلى wrap للسماح بلف العناصر على أكثر من سطر، وتم تعيين خاصية justify-content إلى space-between لتوزيع العناصر بشكل متساوٍ بينها على المحور الرئيسي. تم تعيين خاصية align-items إلى center لتوسيط العناصر على المحور الثانوي. أما بالنسبة للعناصر الفردية داخل الـ container، فقد تم تعيين خاصية flex إلى 1 0 200px، والتي تحدد قواعد توزيع العناصر وتحجمها. يتم تحديد عرض العنصر إلى 200px، ولكن يمكن أن يتم تصغيره بشكل مؤقت في حالة عدم توافر مساحة كافية، ولكن لا يمكن تكبيره بشكل دائم. باستخدام Flexbox، يمكن تحقيق توزيع العناصر بشكل مرن وسلس، وتحسين تجربة المستخدم على المواقع المتجاوبة. بالإضافة إلى الطرق المذكورة سابقًا، هناك بعض الطرق الأخرى التي يمكن استخدامها لتصميم موقع متجاوب ومنها: 1- استخدام الـ Grid system: يتيح الـ Grid system تحديد تركيبة الموقع وتوزيع العناصر بشكل مرتب ومتجانس في مساحة الصفحة المحددة، وهو يستخدم أساسًا الوحدات النسبية كـ % و vw/vh لتحديد حجم وموقع العناصر داخل الـ grid. يوفر الـ Grid system تحكمًا كبيرًا في توزيع العناصر وتعديلاتها حتى على الشاشات الصغيرة. 2- استخدام الـ CSS media queries: يمكن استخدام الـ media queries لتحديد تصميم مختلف للصفحة بناءً على حجم الشاشة، وتكون هذه التعديلات على أبعاد العناصر والألوان والخطوط والترتيب وغيرها من الخصائص. يمكن تعريف الـ media queries بالحجم الذي يتغير فيه تصميم الصفحة، مثل استخدامها لإظهار نافذة تحتوي على العناصر الرئيسية عند عرض الصفحة على الشاشات الصغيرة، ويمكن تحديد الخصائص الحجمية باستخدام الوحدات النسبية والـ em. 3- استخدام تقنية responsive typography: يمكن تحقيق تصميم متجاوب للخطوط باستخدام تقنية responsive typography، حيث يتم تحديد حجم الخط بناءً على حجم الشاشة والتعديل عليه ليظل النص مقروءًا وجذابًا على جميع الأجهزة. يمكن استخدام الـ em لتحديد حجم الخط بناءً على حجم النص الأساسي أو الـ vw لتحديد حجم الخط بناءً على حجم الشاشة. 4- استخدام الصور المتجاوبة: تستخدم الصور المتجاوبة (Responsive Images) لتحسين أداء الموقع وضمان تحميل الصور بسرعة وجودة عالية على جميع الأجهزة. مثال: img { width: 100%; height: auto; }

في البداية يجب الإشارة إلى أن RDP Wrapper هي أداة مفتوحة المصدر تسمح بتفعيل خدمة RDP (Remote Desktop Protocol) في إصدارات Home و Starter و Basic من نظام التشغيل Windows، وهي تعد من الأدوات الشائعة المستخدمة لتمكين RDP في إصدارات Windows الأقل متطورة. ومن الجدير بالذكر أن استخدام RDP Wrapper يعد أمن بشكل عام، ولكن يجب مراعاة بعض الأمور الهامة للحفاظ على سلامة النظام وتأمينه. على سبيل المثال، يجب تحديث نظام التشغيل بانتظام وتفعيل جدار الحماية الخاص بالنظام وعدم تمكين الحساب الافتراضي للمستخدم الخاص بـ RDP. علاوة على ذلك، يجب التحقق من مصدر النسخة المستخدمة من RDP Wrapper والتأكد من أنها آمنة ولم يتم إدخال أي تعديلات غير مصرح بها عليها. بدائل أخرى هناك بدائل أخرى لتمكين خدمة RDP في إصدارات Home و Starter و Basic من نظام التشغيل Windows، منها: 1- استخدام برامج أخرى للتحكم عن بعد: مثل TeamViewer و AnyDesk و Remote Utilities وغيرها، والتي توفر خدمة تحكم عن بعد بطريقة آمنة وفعالة. 2- ترقية إصدار النظام: يمكن ترقية إصدار النظام إلى إصدارات أكثر تطوراً مثل Windows 10 Pro أو Enterprise أو Ultimate والتي تتضمن خدمة RDP مدمجة. 3- استخدام برامج طرف ثالث: هناك العديد من البرامج المتاحة على الإنترنت والتي تتيح تمكين RDP في إصدارات Home و Starter و Basic من نظام التشغيل Windows، مثل RDPWrap والذي يمكن تحميله من موقع GitHub. ومن المهم الانتباه إلى أن استخدام أي برنامج أو أداة لتفعيل RDP يجب أن يتم بحذر وتقييم الخيارات المتاحة بعناية، حيث يمكن أن تعرض استخدامات غير صحيحة لخدمة RDP النظام للمخاطر الأمنية، وبالتالي يجب الحرص على اتباع الممارسات الأمنية المناسبة.

سأوضح لك Flexbox بشكل بسيط وسهل مع توضيح ذلك بالأكواد. أولاً شرح Flexbox بشكل مختصر في البداية Flexbox هي تقنية CSS تستخدم لتنسيق وترتيب العناصر داخل الصفحة. تم تصميم Flexbox لتسهيل تنسيق العناصر داخل العناصر الأساسية مثل العناصر المتداخلة، والأزواج، والأعمدة، والأرقام. يمكن استخدام Flexbox لتنسيق العناصر على محور واحد أو عدة محاور في نفس الوقت. يتم تحديد ترتيب وموقع العناصر في Flexbox باستخدام خصائص CSS مثل display وflex-direction وjustify-content وalign-items وغيرها. فيما يلي مثال بسيط على استخدام Flexbox لترتيب العناصر على محور واحد: <div class="flex-container"> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <div class="box3">Box 3</div> </div> <style> .flex-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .box1, .box2, .box3 { background-color: lightblue; padding: 10px; margin: 10px; flex: 1; } </style> في المثال السابق، تم استخدام Flexbox لترتيب العناصر على محور واحد (المحور الأفقي) باستخدام الخصائص display: flex و flex-direction: row. تم توزيع العناصر على المحور الأفقي باستخدام justify-content: space-between لترك فراغ بين الصناديق 1 و 2 و 3. تم تحديد موضع العناصر على المحور الرأسي باستخدام align-items: center. لاحظ أن العناصر الثلاثة (box1 و box2 و box3) لديها خاصية flex: 1 التي تحدد نسبة الفضاء المتاح لكل صندوق داخل العنصر المرن. هذا يساعد على توزيع العناصر على المحور الأفقي بشكل متساوٍ. أدوات لاستخدام وفهم flexbox بشكل سهل وبسيط عليك باستخدام الموقع التالي إذا كنت تريد فهم خصائص flexbox حيث يعرض خصائص flexbox على هيئة صور متحركة لتبيان ماذا تفعل كل خاصية، فضع ذلك الموقع أمامك وأنت تستخدم flexbox وستجد نفسك قد فهمته بسهولة. https://flexbox.malven.co/ وأيضًا هناك بعض ألعاب المتصفح التي غرضها تعليمك كيفية استخدام فليكس بوكس من خلال لعبة مسلية، وإليك بعضها: https://flexboxfroggy.com/ https://codingfantasy.com/games/flexboxadventure شرح Flexbox بشكل مفصل طريقة استخدام Flexbox تشمل العديد من الخصائص التي يمكن استخدامها لتنسيق العناصر وترتيبها في المساحة المتاحة. فيما يلي شرحًا لجميع الخصائص الخاصة ب Flexbox بالإضافة إلى أمثلة على استخدام كل منها. 1- display خاصية display تحدد نوع عرض Flexbox. يمكن تعيينها إلى القيمة flex لعرض Flexbox. ويمكن تعيينها إلى inline-flex لعرض Flexbox على نفس سطر النص. .flex-container { display: flex; } 2- flex-direction خاصية flex-direction تحدد توجه العناصر داخل Flexbox. يمكن تعيينها إلى row لتوجيه العناصر أفقيًا، وإلى column لتوجيهها عموديًا. ويمكن استخدام row-reverse أو column-reverse لتوجيه العناصر بالاتجاه المعاكس. .flex-container { display: flex; flex-direction: row; } 3- flex-wrap خاصية flex-wrap تحدد ما إذا كانت العناصر في Flexbox يجب أن تنتقل إلى السطر التالي إذا كانت المساحة غير كافية. يمكن تعيينها إلى nowrap لعدم السماح بالتعبئة الزائدة، وإلى wrap للسماح بالتعبئة الزائدة وانتقال العناصر إلى السطر التالي. .flex-container { display: flex; flex-wrap: wrap; } 4- justify-content خاصية justify-content تحدد توزيع العناصر على محور Flexbox. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور، وإلى flex-end لتوزيعها على نهاية المحور، وإلى center لتوزيعها على وسط المحور، وإلى space-between لتوزيعها بتساوٍ على المحور، وإلى space-around لتوزيعها بالتساوي مع توفير مساحة إضافية حول كل عنصر. .flex-container { display: flex; justify-content: center; } 5- align-items خاصية align-items تحدد توزيع العناصر على محور عمودي متعامد على محور Flexbox. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور العمودي، وإلى flex-end لتوزيعها على نهاية المحور العمودي، وإلى center لتوزيعها على وسط المحور العمودي، وإلى baseline لتوزيعها على خط الأساس للنص، وإلى stretch لتوسيع العناصر لتملأ المساحة العمودية بأكملها. .flex-container { display: flex; align-items: center; } 6- align-content خاصية align-content تحدد توزيع العناصر الإضافية في الفراغ الإضافي على محور عمودي متعامد على محور Flexbox عند استخدام التعبئة الزائدة. يمكن تعيينها إلى flex-start لتوزيع العناصر على بداية المحور العمودي، وإلى flex-end لتوزيعها على نهاية المحور العمودي، وإلى center لتوزيعها على وسط المحور العمودي، وإلى space-between لتوزيعها بتساوٍ على المحور، وإلى space-around لتوزيعها بالتساوي مع توفير مساحة إضافية حول كل عنصر، وإلى stretch لتوسيع العناصر لتملأ المساحة العمودية بأكملها. .flex-container { display: flex; flex-wrap: wrap; align-content: center; } 7- flex-grow خاصية flex-grow تحدد قدرة العنصر على التوسع في المساحة المتاحة. يمكن تعيينها إلى أي عدد صحيح (عادةً ما تستخدم قيم 0 و 1) ، حيث يتم توزيع المساحة المتاحة بالتساوي على جميع العناصر الذين يحملون هذه الخاصية بنسبة تناسبية مع قيمتها. .flex-item { flex-grow: 1; } 8- flex-shrink flex-shrink تحدد قدرة العنصر على الانكماش في حالة اضطراره لتقليص حجمه بسبب الفراغ المتاح لمجموعة Flexbox. يمكن تعيينها إلى أي عدد صحيح (عادةً ما تستخدم قيم 0 و 1) ، حيث يتم توزيع المساحة المتاحة بالتساوي على جميع العناصر الذين يحملون هذه الخاصية بنسبة تناسبية مع قيمتها. على سبيل المثال، عندما تقلل المساحة المتاحة، فإن العناصر التي تحمل القيم الأعلى ستتقلص بشكل أسرع من العناصر التي تحمل القيم الأقل. .flex-item { flex-shrink: 1; } 9- flex-basis خاصية flex-basis تحدد الحجم الأولي للعنصر قبل توزيع المساحة الإضافية المتاحة بين العناصر الموجودة في Flexbox. يمكن تعيينها إلى القيمة التي تعبر عن العرض أو الارتفاع، مثل 200px أو 50%. يمكن استخدام auto لتحديد حجم العنصر بناءً على حجم محتواه الفعلي. .flex-item { flex-basis: 100px; } 10- flex flex هي اختصار لثلاث خصائص flex-grow وflex-shrink وflex-basis بالترتيب. يمكن استخدامها بدلاً من تعيين الخصائص بشكل منفصل. يتم تحديد القيم المستخدمة في الاختصار كقيمة واحدة أو اثنين أو ثلاثة. على سبيل المثال، القيمة flex: 1 تحدد الخصائص flex-grow: 1 و flex-shrink: 1 و flex-basis: 0 للعنصر. .flex-item { flex: 1 0 auto; } وبذلك إنتهينا من أهم الخصائص المستخدمة في Flexbox، والتي يمكن استخدامها لتنظيم وتحكم في توزيع العناصر وتحديد موقعها في الصفحة. مصادر

أولاً، لكتابة برنامج يقوم بطباعة الأرقام الزوجية من ١ إلى ١٠٠ باستخدام الحلقة While بلغة PHP، يمكن استخدام الكود التالي: $num = 1; while($num <= 100) { if($num % 2 == 0) { echo $num . "<br>"; } $num++; } و المثال السابق يستخدم متغير $num لتمثيل الرقم الحالي المطبوع، ويستخدم حلقة While لتكرار العملية حتى يصل الرقم الحالي إلى 100. داخل الحلقة، يتم استخدام جملة if للتحقق مما إذا كان الرقم الحالي زوجيًا باستخدام العملية $num % 2 == 0، وإذا كان كذلك يتم طباعته باستخدام جملة echo. بالنسبة للسؤال الثاني والذي يطلب كتابة برنامج لحساب مجموع الأعداد الفردية من ١ إلى ١٠، يمكن استخدام الكود التالي: $num = 1; $sum = 0; while($num <= 10) { if($num % 2 != 0) { $sum += $num; } $num++; } echo "مجموع الأعداد الفردية من ١ إلى ١٠ هو: " . $sum; يستخدم هذا الكود متغير $num لتمثيل الرقم الحالي المطبوع، ومتغير $sum لتخزين مجموع الأعداد الفردية. يتم استخدام حلقة While لتكرار العملية حتى يصل الرقم الحالي إلى 10. داخل الحلقة، يتم استخدام جملة if للتحقق مما إذا كان الرقم الحالي فرديًا باستخدام العملية $num % 2 != 0، وإذا كان كذلك يتم إضافته إلى المجموع باستخدام عملية $sum += $num. أخيراً، يتم طباعة مجموع الأعداد الفردية باستخدام جملة echo. طريقة أفضل لتنفيذ نفس المهمة هناك طريقة أفضل للقيام بنفس الأمر بدون استخدام حلقة while، وذلك باستخدام الحلقة الفورية (for loop). يمكن استخدام الحلقة الفورية لطباعة الأعداد الزوجية من 1 إلى 100 على النحو التالي: for ($i = 2; $i <= 100; $i += 2) { echo $i . " "; } أما لطباعة مجموع الأعداد الفردية من 1 إلى 10، فيمكن استخدام الحلقة الفورية كذلك، على النحو التالي: $sum = 0; for ($i = 1; $i <= 10; $i += 2) { $sum += $i; } echo "Sum of odd numbers from 1 to 10 is: " . $sum; الكود يستخدم الحلقة الفورية لتكرار العداد من 1 إلى 10 بمقدار 2، مما يؤدي إلى تكرار الأعداد الفردية فقط، ثم يقوم بإضافة كل رقم فردي إلى مجموعه، وأخيراً يتم طباعة مجموع الأعداد الفردية المحسوبة. for في PHP

االألعاب ثلاثية الأبعاد Unity و Unreal Engine يعتبران من أكثر الإطارات العمل شيوعًا واستخدامًا في تطوير الألعاب ثلاثية الأبعاد. ويتميز كلاهما بالقدرة على تصميم العوالم ثلاثية الأبعاد وإضافة التأثيرات البصرية الواقعية والتحكم في حركة الشخصيات والأشياء بشكل دقيق. بالنسبة للغة C++، فهي تستخدم بشكل واسع في صناعة الألعاب ثلاثية الأبعاد بسبب سرعتها وكفاءتها في معالجة البيانات وتفاعلها مع المستخدم. وتعتبر لغة البرمجة C# أحد اللغات الشائعة في تطوير الألعاب ثلاثية الأبعاد باستخدام إطار العمل Unity. الألعاب ثنائية الأبعاد لغات البرمجة Java و Python تستخدم في تطوير الألعاب ثنائية الأبعاد بسبب سهولة استخدامها وتعلمها، وكذلك بسبب توافر العديد من المكتبات والإطارات العمل التي تدعم تطوير الألعاب ثنائية الأبعاد بهذه اللغات. علاوة على ذلك، يمكن استخدام لغة البرمجة Lua في صناعة الألعاب ثنائية الأبعاد باستخدام إطار العمل Corona SDK، والذي يعتبر من الإطارات العمل المتخصصة في تطوير الألعاب ثنائية الأبعاد. بشكل عام، يتوقف اختيار لغة البرمجة المستخدمة في تطوير الألعاب على عدة عوامل، بما في ذلك نوع اللعبة والمنصة المستهدفة وخبرة المطورين في استخدام اللغات البرمجة المختلفة. العمل في مجال تطوير الألعاب من الأفضل البدء بتعلم البرمجة والرياضيات والفيزياء ، حيث أن الألعاب تعتمد بشكل كبير على الرسوميات والرياضيات والفيزياء لتحقيق الواقعية والتفاعلية. يجب عليك أيضًا تعلم استخدام برامج تطوير الألعاب مثل Unity و Unreal Engine و GameMaker Studio وغيرها. هذه البرامج تسمح للمطورين بإنشاء الألعاب بشكل أسرع وأكثر فعالية. ينصح أيضًا بإنشاء مشاريع ألعاب صغيرة وتطبيقات تفاعلية خاصة بك ، لأن هذا سيساعدك على تطوير مهاراتك وتعلم كيفية التعامل مع التحديات المختلفة التي تواجه المطورين. بالإضافة إلى ذلك ، ينبغي عليك الاهتمام بمتابعة آخر التقنيات والتطورات في مجال صناعة الألعاب ، وذلك من خلال قراءة المقالات والمجلات ومشاهدة الفيديوهات على الإنترنت. مسار Roadmap لتعلم تطوير الالعاب هناك العديد من المسارات المختلفة التي يمكن اتباعها لتعلم تطوير الألعاب، وستختلف المسارات حسب المجال الذي تريد العمل فيه (تطوير الألعاب ثنائية الأبعاد، تطوير الألعاب ثلاثية الأبعاد، تصميم الألعاب، إلخ). وتسهيلا عليك، سأقدم لك مسارًا شاملاً يمكن اتباعه لتعلم تطوير الألعاب بطريقة منظمة وفعالة: 1- تعلم أساسيات البرمجة: يعتبر البرمجة هو الأساس الذي يجب تعلمه قبل البدء في تطوير الألعاب. يمكن البدء بلغة برمجة بسيطة مثل Python أو JavaScript ، حيث تتضمن المواضيع الأساسية مثل المتغيرات والتعابير والدوال والتحكم في التدفق. 2- تعلم أساسيات التصميم: يجب أن يتم تطوير اللعبة بشكل متكامل، بمعنى آخر، يجب تحديد كيف سيكون شكل اللعبة، وكيف يتفاعل المستخدم معها. يجب تعلم أساسيات الفنون التصويرية والتصميم والرسم، بالإضافة إلى تعلم استخدام الأدوات المختلفة المستخدمة في تصميم الألعاب مثل Adobe Photoshop و Illustrator. 3- تعلم استخدام محركات التطوير: يستخدم معظم مطوري الألعاب محركات تطوير مثل Unity أو Unreal Engine. وهذا يعني أنه يجب تعلم كيفية استخدام هذه المحركات لإنشاء وتطوير الألعاب. 4- تعلم البرمجة المتقدمة: بعد تعلم البرمجة الأساسية، يجب التقدم في تعلم البرمجة المتقدمة، بما في ذلك المفاهيم المتقدمة مثل البرمجة الكائنية. Game Developer Roadmap ما هي مراحل تطوير ألعاب الفيديو ؟ كيف تدخل مجال تطوير الالعاب وتبدأ الربح

بالإضافة إلى الحل الذي وفره أحمد، يمكن أيضًا استخدام مكتبة أكثر تطورًا لتغيير الصور بشكل دوري، مثل react-slick أو react-carousel. على سبيل المثال، باستخدام react-slick ، يمكنك تحقيق هذه الوظيفة عن طريق التالي: 1- تثبيت المكتبة باستخدام npm: npm install react-slick 2- استيراد المكتبة والملفات التنسيق المطلوبة منها: import React, { useState, useEffect } from 'react'; import Slider from 'react-slick'; import images from '../src/img/images.jpg'; import images1 from '../src/img/images1.jpg'; import images2 from '../src/img/images2.jpg'; import images3 from '../src/img/images3.jpg'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; import './App.css'; import Header from './components/header'; 3- استخدام المكون Slider: const App = () => { const imagesArray = [images, images1, images2, images3]; const settings = { dots: false, infinite: true, speed: 5000, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 5000, beforeChange: (current, next) => { // console.log('before change', current, next); }, afterChange: (current) => { // console.log('after change', current); }, }; return ( <Slider {...settings}> {imagesArray.map((img, index) => ( <div key={index} style={{ backgroundImage: `url(${img})` }} className="landing-page"> <div className="overlay"></div> <Header /> <div className="introduction-text"> <h1> We are <span>Creative</span> agency </h1> <p> Welcome to you. I can help you with whatever you need regarding web development. </p> </div> </div> ))} </Slider> ); }; export default App; ستقوم هذه الطريقة بتغيير الصورة بشكل دوري كل 5 ثواني ، وتغيير الصورة بشكل سلس ومتموج.

المشكلة في الشرط الثاني في دالة addNewTransaction()، حيث أنه يتم التحقق فقط من طول النص وليس من طول المبلغ، مما يعني أنه إذا تم إدخال نص ونسي المبلغ، فإنه سيتم تمرير الشرط الثاني وإظهار رسالة الخطأ الأخيرة. يمكنك حل هذه المشكلة عن طريق إضافة التحقق من طول المبلغ في الشرط الثاني، مثل هذا: const addNewTransaction = () => { if (text.length === 0 && amount.length === 0) { setErrorText("Please Enter A text") setErrorAmount("Please enter An Amount") setValidate(true) } else if(amount.length === 0 && text.length !== 0 ) { setErrorAmount("Please enter An Amount") setValidate(true) } else if(text.length !== 0 && amount.length === 0) { setErrorText("Please Enter A text") setValidate(true) } else { setDummyTransactions([...dummyTransactions,{id: new Date(), text: text, amount: +amount}]) setAmount('') setText('') setValidate(false) } } بهذا الشكل، سيتم التحقق من طول المبلغ في الشرط الثاني وإذا كان المبلغ غير موجود، سيتم عرض رسالة الخطأ المناسبة وعكس الحال إذا تم إدخال المبلغ ونسي النص.

في البداية يجب معرفة أن PSReadLine هو امتداد لـ PowerShell و يوفر ميزات تحرير نصية أكثر تطورًا من الميزات الافتراضية في PowerShell. أيضًا يتضمن PSReadLine وظائف مثل التعديل التفاعلي للأوامر والتاريخ والإكمال التلقائي للأسماء والمتغيرات والأساليب والخيارات والقراءة الاستنادية إلى السطر والتأشير اللوني والإدراج والحذف والتحريك والتحديد والنسخ واللصق. ويساعد PSReadLine على تسهيل تجربة استخدام PowerShell ويجعل عملية التحرير أسرع وأكثر فاعلية. ومع ذلك، قد يتم تعطيل PSReadLine بشكل افتراضي في حالة استخدام برنامج قراءة الشاشة، وذلك لضمان التوافق مع برامج قراءة الشاشة المختلفة. يمكنك تجاهل هذا التحذير واستخدام PSReadLine بشكل عادي، على الرغم من أن بعض الوظائف قد لا تعمل بشكل صحيح مع برامج قراءة الشاشة. لتجاهل التحذير، يمكنك إضافة الأمر التالي في ملف Microsoft.PowerShell_profile.ps1: $ENV:DISABLE_UNRELIABLE_INPUT = "1" يتم ذلك عن طريق فتح PowerShell واستخدام الأمر التالي: notepad $profile وأيضًا لتمكين PSReadLine بشكل دائم في PowerShell، يمكنك إضافة الأمر التالي في ملف Microsoft.PowerShell_profile.ps1 كذلك: Import-Module PSReadLine سيفتح هذا الأمر ملف نصي جديد، يتم تحريره لتضمين الأمر المذكور أعلاه، ثم حفظ الملف وإغلاقه. بعد ذلك، يمكنك إعادة فتح PowerShell والبدء في استخدامه كالمعتاد، وسيتم تمكين PSReadLine بشكل دائم.