নির্দিষ্ট আকারের ওয়ার্কস্পেস

একটি ওয়েবপেজে ব্লকলি রাখার সবচেয়ে সহজ উপায় হল এটিকে একটি খালি 'div' ট্যাগে ইনজেক্ট করা।

1. কোড পান

আপনার অ্যাপ্লিকেশনের জন্য সর্বোত্তম যেভাবেই কাজ করে কোডটি পান ।

2. এলাকা সংজ্ঞায়িত করুন

পৃষ্ঠার শরীরের কোথাও একটি খালি ডিভ যোগ করুন এবং এর আকার সেট করুন:

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

3. ওয়ার্কস্পেস ইনজেক্ট করুন

টুলবক্স গঠন সংজ্ঞায়িত করুন :

const toolbox = {
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "controls_if"
    },
    {
      "kind": "block",
      "type": "controls_repeat_ext"
    },
    {
      "kind": "block",
      "type": "logic_compare"
    },
    {
      "kind": "block",
      "type": "math_number"
    },
    {
      "kind": "block",
      "type": "math_arithmetic"
    },
    {
      "kind": "block",
      "type": "text"
    },
    {
      "kind": "block",
      "type": "text_print"
    },
  ]
}

এবং অবশেষে, আপনার সংজ্ঞায়িত ডিভিতে ব্লকলি ইনজেক্ট করতে নিম্নলিখিতটিকে কল করুন।

const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

workspace ভেরিয়েবল বর্তমানে ব্যবহার করা হয় না, কিন্তু যখন কেউ ব্লকগুলি সংরক্ষণ করতে বা কোড তৈরি করতে চায় তখন এটি গুরুত্বপূর্ণ হয়ে উঠবে। যদি একই পৃষ্ঠায় ব্লকলির একাধিক দৃষ্টান্ত ইনজেকশন করা হয়, তবে নিশ্চিত করুন যে প্রতিটি ফেরত ওয়ার্কস্পেস একটি ভিন্ন ভেরিয়েবলে সংরক্ষণ করা হয়েছে।

এখন আপনি একটি ব্রাউজারে পৃষ্ঠাটি পরীক্ষা করতে পারেন। আপনি দেখতে পাবেন ব্লকলির সম্পাদক টুলবক্সে সাতটি ব্লক সহ ডিভ পূরণ করছে। এখানে একটি লাইভ ডেমো আছে.