বিড়ম্বনা: কীভাবে একটি কুইজ গেম তৈরি করবেন

আপডেট (01/06/2019): আপনি এখানে পুনর্নির্মাণ প্যাকেজ সহ একটি বিকল্প সংস্করণ খুঁজে পেতে পারেন।

ভূমিকা

এই নিবন্ধে আমি আপনাকে দেখাতে চাই যে কীভাবে আমি ফ্লুইটার এবং ফ্রাইডো প্যাকেজ ব্যবহার করে কুইজ গেমের এই উদাহরণটি তৈরি করেছি (এটি কীভাবে কাজ করে তা দেখতে এই দুটি উদাহরণ পরীক্ষা করে দেখুন, উদাহরণ 1, উদাহরণ 2)। এটি একটি দুর্দান্ত সরল খেলা, তবে এটি বেশ কয়েকটি আকর্ষণীয় যুক্তি .েকে রাখে।

অ্যাপটিতে চারটি স্ক্রিন রয়েছে:

  • একটি প্রধান পৃষ্ঠা যেখানে ব্যবহারকারী কোনও বিভাগ নির্বাচন করে এবং গেমটি শুরু করে।
  • একটি সেটিংস পৃষ্ঠা যেখানে ব্যবহারকারী প্রশ্নের সংখ্যা, ডাটাবেসের ধরণ (স্থানীয় বা দূরবর্তী), প্রতিটি প্রশ্নের জন্য সময়সীমা এবং অসুবিধার স্তর চয়ন করতে পারে।
  • একটি ট্রিভিয়া পৃষ্ঠা যা প্রশ্ন, স্কোর, সংশোধন সংখ্যা, ত্রুটি এবং উত্তর না দেওয়া প্রশ্নগুলি দেখায়।
  • একটি সংক্ষিপ্ত পৃষ্ঠা যা সঠিক / ভুল উত্তর সহ সমস্ত প্রশ্ন দেখায়।

এই বটম লাইন হল:

আপনি এখানে আরও ভাল জিআইএফ দেখতে পারেন।
  • পর্ব 1: প্রকল্প সেটআপ
  • পার্ট 2: অ্যাপ আর্কিটেকচার
  • পার্ট 3: এপিআই এবং জেএসএন
  • পার্ট 4: হোমপেজ এবং অন্যান্য স্ক্রীন
  • পর্ব 5: ট্রিভিয়া ব্লক
  • অংশ 6: অ্যানিমেশন
  • অংশ 7: সংক্ষিপ্ত পৃষ্ঠা
  • উপসংহার
পর্ব 1 - প্রকল্প সেটআপ

1 - একটি নতুন বিড়বিড় প্রকল্প তৈরি করুন:

বিড়বিড় করে আপনার_প্রজেক্টনাম তৈরি করুন

2 - pubspec.yaml ফাইলটি সম্পাদনা করুন এবং এইচটিপি এবং ফ্রাইডো প্যাকেজ যুক্ত করুন:

নির্ভরতা: বিড়বিড়: এসডিকে: বিড়বিড় করে HTTP: ^ 0.12.0 ফ্রাইডো: ^ 0.6.0

3- মূল.ডার্ট ফাইলের বিষয়বস্তু মুছুন

4- নীচে প্রকল্প কাঠামো তৈরি করুন:

কাঠামোগত বিশদ

  • এপিআই: এখানে আপনি "ওপেন ট্রিভিয়া ডেটাবেস" এর API এর জন্য ডার্ট ফাইলগুলি এবং স্থানীয় পরীক্ষার জন্য একটি সিম্যুলেটেড API পাবেন: api_interface.dart, mock_api.dart, trivia_api.dart।
  • ব্লকস: ট্রিভিয়া_ব্লোক.ডার্ট অ্যাপের একমাত্র বিএলোকের অবস্থান।
  • মডেলস: অ্যাপস্টেট.ডার্ট, বিভাগ.ডার্ট, মডেলসডার্ট, প্রশ্ন.ডার্ট, থিম.ডার্ট, ট্রিভিয়া_স্ট্যাটস.ডার্ট।
  • স্ক্রিনগুলি: প্রধান_পেজ.ডার্ট, সেটিংস_পেজ.ডার্ট, সংক্ষিপ্ত_পেজ.ডার্ট, ট্রিভিয়া_পেজ.ডার্ট।
পার্ট 2 - অ্যাপ আর্কিটেকচার

আমার শেষ নিবন্ধে, আমি একাধিক উইজেট এবং পৃষ্ঠাতে ডেটা প্রেরণ এবং ভাগ করে নেওয়ার বিভিন্ন পদ্ধতি বর্ণনা করেছি described এক্ষেত্রে আমরা কিছুটা আরও উন্নত পদ্ধতির ব্যবহার করছি: অ্যাপস্টেট নামের একটি সিঙ্গলটন ক্লাসের একটি উদাহরণ উইন্ডোজ ট্রিতে ইনরিটেড উইজেট সরবরাহকারী (অ্যাপস্টেটপ্রোভিডার) ব্যবহার করে উপলব্ধ করা হয়েছে যাতে অ্যাপের অবস্থা, কিছু সংস্থার যুক্তি এবং উদাহরণ রয়েছে contains অ্যাপ্লিকেশনটির "কুইজ অংশ" পরিচালনা করে এমন একমাত্র বিএলওসি। সুতরাং শেষ পর্যন্ত এটি একরকম মিশ্রণ হবে সিঙ্গলটন এবং বিএলওসি নিদর্শনগুলির মধ্যে।

যে কোনও উইজেটে আপনি কল করে অ্যাপস্টেট শ্রেণির উদাহরণ পেতে পারেন:

চূড়ান্ত অ্যাপস্টেট = অ্যাপস্টেটপ্রোভাইডার.ফ (প্রসঙ্গ);

1 - main.dart

এটি অ্যাপের প্রবেশের পয়েন্ট। অ্যাপ ক্লাসটি একটি স্টেটহেল উইজেট যা এতে অ্যাপস্টেট শ্রেণীর উদাহরণ হিসাবে ঘোষণা করা হয় এবং অ্যাপস্টেটপ্রোভাইডার ব্যবহার করে উইজেটস ট্রি জন্য উপলব্ধ করা হয়। অ্যাপস্টেটের উদাহরণটি অ্যাপস্টেটপ্রোভাডার শ্রেণীর নিষ্পত্তি পদ্ধতিতে নিষ্পত্তি করা হয়, সমস্ত স্ট্রিম বন্ধ রয়েছে।

ম্যাটেরিয়াল অ্যাপ অ্যাপ্লিকেশনটি একটি ভ্যালুবিল্ডার উইজেটের সাথে সংহত করা হয়েছে, যাতে প্রতিবার নতুন বিষয় নির্বাচন করা হয়, পুরো উইজেট গাছটি পুনরায় তৈরি করা হয় এবং বিষয়টি আপডেট করা হয় updated

2 - রাজ্য প্রশাসন

পূর্বে উল্লিখিত হিসাবে, অ্যাপস্টেট উদাহরণটিতে অ্যাপের স্থিতি রয়েছে। এই শ্রেণীর জন্য ব্যবহৃত হয়:

  • সেটিংস: বর্তমানে ব্যবহৃত থিম ব্যবহৃত হয়েছে, ভাগ করা পছন্দসইগুলির সাথে লোড করুন / সংরক্ষণ করুন। এপিআই বাস্তবায়ন, উপহাস বা দূরবর্তী (opentdb.com থেকে API ব্যবহার করা)। প্রতিটি প্রশ্নের জন্য সময় নির্ধারিত।
  • বর্তমান ট্যাবটি দেখান: মূল পৃষ্ঠা, জানার বিষয়গুলি, সারাংশ।
  • প্রশ্নগুলি ডাউনলোড করুন।
  • (যদি রিমোট এপিআই তে থাকে) তবে বিভাগের সংখ্যা, নম্বর এবং সমস্যার স্তরের জন্য সেটিংস সংরক্ষণ করুন।

শ্রেণি নির্মাতা:

  • _Create થીમ অ্যাপ্লিকেশনটির জন্য থিম তৈরি করে।
  • _লোডশ্রেণী বিভাগগুলি প্রধান ড্রপ-ডাউন মেনু থেকে নির্বাচনের জন্য প্রশ্নের বিভাগগুলি লোড করে।
  • কাউন্টডাউন হ'ল স্ট্রিমড ট্রান্সফর্মড ফ্রিডোস প্যাকেজের ধরণের যা পাঠ্য বাক্স থেকে কাউন্টডাউন সেট করতে মান পেতে ব্যবহৃত হয়।
  • প্রশ্নাবলীতে কুইজ গেমের সময় প্রদর্শিত হওয়া প্রশ্নের সংখ্যা রয়েছে (ডিফল্টরূপে 5)
  • ক্লাসট্রিভিয়া ব্লকের উদাহরণটি শুরু করা হয়েছে। স্ট্রিমগুলি গণনা, প্রশ্নগুলির তালিকা, এবং পৃষ্ঠাটি দেখার জন্য প্রক্রিয়া করে।
পার্ট 3 - এপিআই এবং জেএসএন

ব্যবহারকারীকে একটি স্থানীয় এবং একটি দূরবর্তী ডাটাবেসের মধ্যে চয়ন করার অনুমতি দেওয়ার জন্য, আমি দুটি পদ্ধতি এবং এটি প্রয়োগকারী দুটি শ্রেণীর সাথে প্রশ্নআপি ইন্টারফেস তৈরি করেছি: মকএপি এবং ট্রিভিয়াএপি।

বিমূর্ত শ্রেণি প্রশ্নপত্রে AP ভবিষ্যত getCategories (স্ট্রিমলিস্ট) -শ্রেণীসমূহ); ভবিষ্যত getQuestions (amed স্ট্রেমেডলিস্ট সম্পর্কে প্রশ্নাবলী) , int সংখ্যা, বিভাগ বিভাগ, অসুবিধার স্তর, প্রশ্নপত্রে টাইপ}); }

মকএপি বাস্তবায়ন ডিফল্টভাবে অ্যাপস্টেটে সেট করা আছে (অ্যাপের সেটিংস পৃষ্ঠায় পরিবর্তন করা যেতে পারে):

// এআইপি প্রশ্নাবলী এপিআই = মকাপি (); চূড়ান্ত এপিটাইপ = স্ট্রেডভ্যালু (প্রারম্ভিক ডেটা: এপিটাইপ.মক);

অ্যাপিটাইপ হ'ল সেটিংস পৃষ্ঠায় ডাটাবেস পরিবর্তনের জন্য কেবল একটি গণনা:

এনপিএম অ্যাপিটাইপ {মোক, দূরবর্তী}

মক_াপি.ডার্ট:

ট্রিভিয়া_পি.ডার্ট:

1 - এপিআই নির্বাচন

সেটিংস পৃষ্ঠায় ব্যবহারকারী কোনও ড্রপ-ডাউন মেনু থেকে কোন ডাটাবেসটি ব্যবহার করবেন তা নির্বাচন করতে পারেন:

ভ্যালুবিল্ডার (স্ট্রিমড: appState.apiType, বিল্ডার: (প্রসঙ্গ, স্ন্যাপশট)) ড্রপডাউন বাটন ফিরে (মান: স্ন্যাপশট.ডেটা, অন চেঞ্জড: অ্যাপস্টেট.সেটপিপিটাইপ, নিবন্ধ: [কনট ড্রপডাউনমেনু আইটেম (মান: ApiType.mock, ধরনের: পাঠ্য ("ডেমো")),), কনস্ট ড্রপডাউনমেনু আইটেম (মান: অ্যাপিটাইপ.রিমোট, প্রকার: পাঠ্য ('opentdb.com'),),])); }),

প্রতিবার নতুন ডাটাবেস নির্বাচিত হওয়ার পরে, সেটএপিটাইপ পদ্ধতিটি API এর বাস্তবায়ন পরিবর্তন করে এবং বিভাগগুলি আপডেট করা হয়।

অকার্যকর সেটএপিটাইপ (অ্যাপিটাইপ টাইপ) {if (apiType.value! = টাইপ) {apiType.value = টাইপ; if (প্রকার == ApiType.mock) {এপিআই = মকাপি (); } অন্য {এপিআই = ট্রিভিয়াপিআই (); load _লোডশ্রেণী (); }}

2 - বিভাগ

বিভাগগুলির তালিকা পেতে, আসুন এই url এ যান:

https://opentdb.com/api_category.php

উত্তরের উত্তোলন:

tri "ট্রিভিয়া_ বিভাগ": [{"আইডি": 9, "নাম": "সাধারণ জ্ঞান"}, id "আইডি": 10, "নাম": "বিনোদন: বই"}]

জাসন ডিকোড ফাংশনটির সাথে জেএসনকে ডিকোড করার পরে: লাইব্রেরি রূপান্তর করুন:

চূড়ান্ত jsonResponse = রূপান্তর.জসনডেকোড (প্রতিক্রিয়া.বডি);

আমাদের এই কাঠামো রয়েছে:

  • jsonResponse ['trivia_categories']: বিভাগগুলির তালিকা
  • jsonResponse ['trivia_categories'] [INDEX] ['id']: বিভাগের আইডি
  • jsonResponse ['trivia_categories'] [INDEX] ['নাম']: বিভাগের নাম

সুতরাং মডেলটি হ'ল:

শ্রেণি বিভাগ {বিভাগ ({this.id, this.name});
কারখানা বিভাগ.ফ্রমজসন (মানচিত্র) জেসন) {রিটার্ন বিভাগ (আইডি: জসন ['আইডি'], নাম: জসন ['নাম']); }
আইটি আইডি; স্ট্রিং নাম; }

3 - প্রশ্ন

আমরা যখন এই url এ যাই:

https://opentdb.com/api.php?amount=2&diffictory=medium&type=mpleple

উত্তর হবে:

response "রেসপন্স_কোড": 0, "ফলাফল": [: "বিভাগ": "বিনোদন: সংগীত", "টাইপ": "একাধিক", "কঠিন": "মাঝারি", "প্রশ্ন": "ফরাসি শিল্পী What / ব্যান্ড MIDI ইনস্ট্রুমেন্ট "লঞ্চপ্যাড" এ খেলতে পরিচিত? "," সঠিক_আনসওয়ার ":" ম্যাডিয়ন "," ভুল_দুয়ারী ": [" ডাউট পাঙ্ক "," প্রকাশ "," ডেভিড গুয়েটা "]}, {" বিভাগ ": "ক্রীড়া", "প্রকার": "একাধিক", "অসুবিধা": "মিডিয়াম", "প্রশ্ন": "2015 ন্যাশনাল কলেজ ফুটবল প্লে অফস (সিএফপি) চ্যাম্পিয়নশিপ কে জিতল?", "Cor درست_answer": "ওহিও স্টেট বুকিয়েস "," ভুল_দ্বন্দ্বী ": [" আলাবামা ক্রিমসন টাইড "," ক্লেমসন টাইগারস "," উইসকনসিন ব্যাজারস]]}]}

এই ক্ষেত্রে, JSON ডিকোড করার সময়, আমাদের নিম্নলিখিত কাঠামো রয়েছে:

  • jsonResponse ['ফলাফল']: প্রশ্নের তালিকা।
  • jsonResponse ['ফলাফল'] [INDEX] ['বিভাগ']: প্রশ্নের বিভাগ।
  • jsonResponse ['ফলাফল'] [INDEX] ['প্রকার']: প্রশ্নের ধরণ, একাধিক বা বুলিয়ান।
  • jsonResponse ['ফলাফল'] [INDEX] ['প্রশ্ন']: প্রশ্ন।
  • jsonResponse ['ফলাফল'] [INDEX] ['সঠিক_আনসওয়ার']: সঠিক উত্তর।
  • jsonResponse ['ফলাফল'] [আইএনডিএক্স] ['ভুল_আনসওয়ার']: ভুল উত্তরের তালিকা।

মডেল:

ক্লাস প্রশ্নোত্তর {
প্রশ্নমোডেল ({this.Qtion, this.correctAnswer, this.incorrectAnswers;);
কারখানা প্রশ্নমোডেল.ফ্রমজসন (মানচিত্র) জেসসন) Question প্রশ্নমোডেল (প্রশ্ন: জসন ['প্রশ্ন'], সঠিকআরসওয়ার: জসন ['ਸਹੀ_আনসওয়ার'], ভুলএন্টারসওয়ার্স: (জেএসন ['ভুল_আনস্বর'] একটি তালিকা হিসাবে) .ম্যাপ ((উত্তর) => উত্তর.টোস্টিং ()) .list ()); }
স্ট্রিং প্রশ্ন; স্ট্রিং সঠিকআনসওয়ার; ধূর্ত ভুলআরসার্স; }

4 - ট্রিভিয়াএপি ক্লাস

শ্রেণিটি প্রশ্নাবলীর দুটি ইন্টারফেসের প্রয়োগ করে, ক্যাটাগরিগুলি এবং getQuestions:

  • বিভাগগুলি পান

প্রথম অংশে, জেএসএন কোডটি মডেলটি ব্যবহার করে ডিকোড করা হয়েছে। "বিভাগ" টাইপযুক্ত একটি তালিকা বিশ্লেষণ করা হয়। এরপরে ফলাফলটি বিভাগগুলিতে পাস করা হয় (মূল পৃষ্ঠায় বিভাগের তালিকাটি পূরণ করতে ব্যবহৃত "বিভাগ" ধরণের স্ট্রিমিং তালিকা)।

চূড়ান্ত jsonResponse = রূপান্তর.জসনডেকোড (প্রতিক্রিয়া.বডি); চূড়ান্ত ফলাফল = (jsonResponse ['ট্রিভিয়া_ বিভাগসমূহ'] তালিকা হিসাবে) .ম্যাপ ((বিভাগ) => বিভাগ.ফ্রম জসন (বিভাগ));
श्रेणি.মূল্য = []; বিভাগসমূহ ..এডএএলএল (ফলাফল) ..এডিডিএলমেন্ট (বিভাগ (আইডি: 0, নাম: "যে কোনও বিভাগ"));
  • প্রশ্ন পান

প্রশ্নের জন্য একই রকম কিছু ঘটে থাকে তবে এই ক্ষেত্রে আমরা JSON এর মূল কাঠামো (প্রশ্নমোডেল )টিকে অ্যাপটিতে ব্যবহারের জন্য আরও সুবিধাজনক কাঠামোতে রূপান্তর করতে একটি মডেল (প্রশ্ন) ব্যবহার করি।

চূড়ান্ত jsonResponse = রূপান্তর.জসনডেকোড (প্রতিক্রিয়া.বডি); চূড়ান্ত ফলাফল = (jsonResponse ['ফলাফল'] তালিকা হিসাবে) .ম্যাপ ((প্রশ্ন) => প্রশ্নমোডেল.ফ্রমজেসন (প্রশ্ন));
প্রশ্ন.ভালিউ = ফলাফল .ম্যাপ ((প্রশ্ন) => প্রশ্ন.ফ্রমকিউশনমোডেল (প্রশ্ন)) .লিস্ট ();

5 - প্রশ্ন শ্রেণি

আগের অনুচ্ছেদে উল্লিখিত হিসাবে, অ্যাপ্লিকেশন প্রশ্নগুলির জন্য একটি পৃথক কাঠামো ব্যবহার করে। এই শ্রেণিতে আমাদের চারটি সম্পত্তি এবং দুটি পদ্ধতি রয়েছে:

শ্রেণি প্রশ্ন {প্রশ্ন ({this.Qtion, this.answers, this.correctAnswerIndex});
কারখানা প্রশ্ন.ফর্মকিউশনমোডেল (প্রশ্নমোডেল মডেল) {চূড়ান্ত তালিকা উত্তর = [] ..এডড (মডেল.করেক্টআনসওয়ার) .. অ্যাডএল (মডেল.ইনক্রেসিটআনসওয়ার্স) ..মিক্সিং ();
চূড়ান্ত সূচক = উত্তর.ইন্ডেক্সঅফ (মডেল.কোরেক্টএএনএসওয়ার);
প্রত্যাবর্তন প্রশ্ন (প্রশ্ন: মডেল.উকশন, উত্তরসমূহ: উত্তরসমূহ, সঠিকএএনএসওয়ারআইডেক্স: সূচক); }
স্ট্রিং প্রশ্ন; ধূর্ত উত্তর; int बरोबरAnswerIndex; int UsedAnswerIndex;
বুল ইসক্রেক্ট (স্ট্রিং উত্তর) answers রিটার্ন উত্তর.ইন্ডেক্সফ (উত্তর) == সঠিকএএনএসওয়ারআইডেক্স; }
bool isChosen (স্ট্রিং উত্তর) {রিটার্ন উত্তর.ইন্ডেক্সঅফ (উত্তর) == নির্বাচিতআন্সওয়্যারআইএনডেক্স; }
}

কারখানায়, উত্তরগুলির তালিকা প্রথমে সমস্ত উত্তর দিয়ে পূরণ করা হয় এবং তারপরে পরিবর্তন করা হয় যাতে ক্রমটি সর্বদা আলাদা থাকে। এখানে আমরা সঠিক উত্তরের সূচিও পেয়েছি যাতে আমরা এটি প্রশ্ন উত্তরকারীর মাধ্যমে সঠিক উত্তর সূচকে নির্ধারণ করতে পারি। প্যারামিটার হিসাবে পাস করা উত্তর সঠিক উত্তর বা নির্বাচিত উত্তর (তারা পরবর্তী অনুচ্ছেদে আরও বিশদে ব্যাখ্যা করা হবে) তা নির্ধারণের জন্য দুটি পদ্ধতি ব্যবহার করা হয়)

পার্ট 4 - হোমপেজ এবং অন্যান্য স্ক্রীন

1 - হোমপেজ উইজেট

অ্যাপস্টেট ট্যাবসন্ট্রোল নামে একটি সম্পত্তি প্রদর্শন করে যা একটি অ্যাপট্যাব স্ট্রিমিং মান (একটি গণনা) এবং পৃষ্ঠাটি হোমপেজ উইজেটে প্রদর্শিত (স্টেটলেস) স্ট্রিম করার জন্য ব্যবহৃত হয়। এটি এর মতো কাজ করে: প্রত্যেকবার যখনই আলাদা অ্যাপট্যাবিস সেট তৈরি হয়, তখন ভ্যালুবিল্ডার উইজেট নতুন পৃষ্ঠাটির সাহায্যে পর্দা পুনর্নির্মাণ করে।

  • হোমপেজ ক্লাস:
উইজেট তৈরি (বিল্ডকন্টেক্সট প্রসঙ্গ) {চূড়ান্ত অ্যাপস্টেট = অ্যাপস্টেটপ্রোভাইডার.ফ (প্রসঙ্গ); রিটার্ন ভ্যালুবিল্ডার (প্রবাহিত: appState.tabController, বিল্ডার: (প্রসঙ্গ, স্ন্যাপশট) => কাঠামো (অ্যাপবার: স্ন্যাপশট। ডেটা! = অ্যাপট্যাব.মাইন? নাল: অ্যাপবার (), ড্রয়ার: ড্রয়ারউইজেট (), বডি: _সুইচটিব (স্ন্যাপশট.ডাটা , অ্যাপস্টেট),),); }

এনবি এই ক্ষেত্রে অ্যাপবারটি কেবলমাত্র প্রধান পৃষ্ঠায় প্রদর্শিত হবে।

  • _সুইচটিব পদ্ধতি:
উইজেট _সুইচটিব (অ্যাপট্যাব ট্যাব, অ্যাপস্টেট অ্যাপস্টেট) {স্যুইচ (ট্যাব) {কেস অ্যাপট্যাব.মাইন: মেইনপেজ () ফিরিয়ে দিন; বিরতি; কেস অ্যাপট্যাব.ট্রিভিয়া: ট্রিভিয়াপেজ () রিটার্ন করুন; বিরতি; কেস অ্যাপট্যাব.সুমারী: রিটার্ন সারসংক্ষেপ (পরিসংখ্যান: appState.triviaBloc.stats); বিরতি; স্ট্যান্ডার্ড: রিটার্ন মেইনপেজ (); }}

2 - সেটিংস পৃষ্ঠা

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

পর্ব 5 - ট্রিভিয়াব্লোক

অ্যাপটির ব্যবসায়িক যুক্তিটি ট্রিভিয়াব্লোক নামে একক বিএলওসি-তে রয়েছে। এই ক্লাস পরীক্ষা করা যাক।

কনস্ট্রাক্টরে আমাদের রয়েছে:

ট্রিভিয়া ব্লক ({this.countdownStream, this.questions, this.tabController}) {
// এপিআই প্রশ্নগুলি থেকে প্রশ্নগুলি পান। (পরিবর্তন করুন (ডেটা) {যদি (ডেটা.আইসনোটম্পিটি) {শেষ প্রশ্নগুলি = ডেটা..শ্যাফেল (); _স্টার্টটিভিয়া (প্রশ্ন);}});
কাউন্টডাউনস্ট্রিম.আউটট্রান্সফরমড.লিস্টেন ((ডেটা) {কাউন্টডাউন = ইন. পার্স (ডেটা) * 1000;;); }

প্রশ্নগুলির একটি তালিকা যখন প্রবাহে প্রেরণ করা হয় তখন প্রশ্নগুলির সম্পত্তি (ধরণের প্রশ্নের স্ট্রিমলিস্ট) পরিবর্তনের জন্য অপেক্ষা করে, এবং খেলা শুরু করার জন্য _স্টার্টটিভিয়া পদ্ধতিটি ডাকা হয়।

পরিবর্তে, সেটিংস পৃষ্ঠায়, কাউন্টডাউন স্ট্রিম কেবল কাউন্টডাউন মানের পরিবর্তনের জন্য অপেক্ষা করে যাতে ট্রিভিয়াব্লোক শ্রেণিতে ব্যবহৃত কাউন্টডাউন সম্পত্তি আপডেট করা যায়।

  • _স্টার্টটিভিয়া (তালিকা) তথ্য)

এই পদ্ধতিটি গেমটি শুরু করে। মূলত, বৈশিষ্ট্যগুলির স্থিতি পুনরায় সেট করা হয়, প্রদর্শিত প্রথম প্রশ্নটি সেট করা হয় এবং প্লে ট্রিভিয়া পদ্ধতিটি এক সেকেন্ডের পরে ডাকা হয়।

অকার্যকর _startTrivia (তালিকা ডেটা) {সূচক = 0; triviaState.value.questionIndex = 1;
// মুখ্য পৃষ্ঠা এবং সংক্ষিপ্তসার বোতামগুলি triviaState.value.isTriviaEnd = মিথ্যা প্রদর্শন করতে;
// পরিসংখ্যান পুনরায় সেট করুন stats.reset ();
// প্রথম প্রশ্ন জিজ্ঞাসা করতে (এই ক্ষেত্রে গণনা // বার অ্যানিমেশন শুরু হয় না)। কারেন্টকিউশন.ভ্যালু = ডেটা.ফার্স্ট;
টাইমার (সময়কাল (মিলি সেকেন্ডস: 1000), () {// আপনি প্রশ্নটি পরিবর্তন করলে এই পতাকাটিকে সত্যে সেট করুন // কাউন্টডাউন বার অ্যানিমেশন শুরু হয় Tri ট্রিভিয়াস্টেট.ভালিউ.আইটি ট্রিভিয়াপ্লেইং = সত্য; // আবার প্রথম প্রশ্নটি দিয়ে স্ট্রিম কাউন্টডাউন বার // অ্যানিমেশন Current কারেন্টকিউশন.ভালিউ = ডেটা [সূচক]; প্লেট্রিভিয়া ();}); }

ট্রিভিয়াস্টেট ট্রাইভিয়াস্টেট প্রকারের স্ট্রেমেড ভ্যালু, এটি একটি শ্রেণীর যা ট্রিভিয়ার স্থিতি পরিচালনা করতে ব্যবহৃত হয়।

শ্রেণি ট্রিভিয়াস্টেট {bool isTriviaPlaying = false; bool isTriviaEnd = মিথ্যা; bool isAnswerChosen = মিথ্যা; int questionIndex = 1; }
  • PlayTrivia ()

যখন এই পদ্ধতিটি ডাকা হয়, একটি টাইমার পর্যায়ক্রমে টাইমার আপডেট করে দেখে যায় যে কাটিয়ে নেওয়া সময় কাউন্টডাউন সেটিংসের চেয়ে বেশি সময় ব্যয় হয়। এক্ষেত্রে এটি টাইমার বাতিল করে, বর্তমান প্রশ্নটিকে উত্তরহীন হিসাবে চিহ্নিত করে এবং একটি নতুন প্রশ্ন প্রদর্শনের জন্য _nextQuestion পদ্ধতিটি কল করে।

অকার্যকর প্লেট্রিভিয়া () {
টাইমার = টাইমারআরপিওরিওডিক (সময়কাল (মিলিসেকেন্ডস: রিফ্রেশটাইম), (টাইমার টি) {কারেন্টটাইম.ভ্যালু = রিফ্রেশটাইম * t.tick;
যদি (কারেন্টটাইম.ভ্যালু> কাউন্টডাউন) {কারেন্টটাইম.ভ্যালু = 0; timer.cancel (); notA উত্তর (বর্তমানকুইশন.মূল্য); _পরের প্রশ্ন(); }
}); }
  • উত্তর দেওয়া হয়নি (প্রশ্নোত্তর)

এই পদ্ধতিটি পরিসংখ্যান আপডেট করার জন্য কোনও উত্তর না দেওয়া প্রশ্নের জন্য ট্রিভিয়াস্ট্যাটস শ্রেণীর পরিসংখ্যানের উদাহরণের অ্যাডনোএনসওয়ার পদ্ধতিটিকে কল করে।

অকারণে উত্তর দেওয়া হয়নি (প্রশ্নোত্তর) {stats.addNoAnswer (প্রশ্ন); }
  • _পরের প্রশ্ন()

এই পদ্ধতিটি প্রশ্নের সূচককে বাড়িয়ে তোলে। তালিকায় আরও প্রশ্ন থাকলে, নতুন প্রশ্নের সাথে মানটি মূল্য আপডেট করার জন্য একটি নতুন প্রশ্ন বর্তমান কুইশন স্রোতে প্রেরণ করা হবে। অন্যথায় _endTriva পদ্ধতিটি ডাকা হয় এবং গেমটি শেষ হয়।

অকার্যকর _nextQuestion () {
সূচক ++;
যদি (সূচক)
  • endTrivia ()

এখানে টাইমার বাতিল এবং istriviaEnd পতাকা সত্য হিসাবে সেট করা আছে। গেমটি শেষ হওয়ার 1.5 সেকেন্ড পরে ওভারভিউ পৃষ্ঠাটি প্রদর্শিত হয়।

শূন্য _endTrivia () {
// রিসেট টাইমার.ক্যান্সেল (); কারেন্টটাইম.ভ্যালু = 0; triviaState.value.isTriviaEnd = সত্য; triviaState.refresh (); স্টপটাইমার ();
টাইমার (সময়কাল (মিলিসেকেন্ড: 1500), () {// সারাংশ পৃষ্ঠার জন্য অপেক্ষা করার সময় // কাউন্টডাউন অ্যানিমেশনটির সূত্রপাত না করার জন্য এটি পুনরায় সেট করা হয়েছে Tri
// 1.5s এর পরে ওভারভিউ পৃষ্ঠাটি দেখান tabController.value = AppTab.summary;
// শেষ প্রশ্নটি মুছুন যাতে এটি পরবর্তী গেমটিতে উপস্থিত হয় না // বর্তমানের প্রশ্নে.উলাভ = নাল; }); }
  • CheckAnswer (প্রশ্ন প্রশ্ন, স্ট্রিং উত্তর)

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

অকার্যকর চেকঅ্যান্সওয়ার (প্রশ্ন প্রশ্ন, স্ট্রিং উত্তর) {if (! triviaState.value.isTriviaEnd) {question.chosenAnswerIndex = প্রশ্ন.answers.indexOf (উত্তর); if (question.isCor درست (উত্তর)) {stats.addCor درست (প্রশ্ন); } অন্য {stats.addWrong (প্রশ্ন); } টাইমার.cancel (); কারেন্টটাইম.ভ্যালু = 0; _পরের প্রশ্ন(); }}
  • স্টপটাইমার ()

যখন এই পদ্ধতিটি ডাকা হয়, সময়টি বাতিল হয়ে যায় এবং অ্যানিমেশনটি বন্ধ করতে কাউন্টডাউন উইজেটকে বলার জন্য ISAnswerChosen পতাকাটি সত্য হয়ে যায়।

অকার্যকর স্টপটাইম () {// স্ট্রিম টাইমার টাইমার। ক্যানসেল ();
// আপনি যদি এই পতাকাটিকে সত্যে সেট করে থাকেন তবে কাউন্টডাউন অ্যানিমেশনটি ট্রিভিয়াস্টেট.ভালিউ.আইএসএএনসওয়ারচোসেন = সত্য বন্ধ হয়ে যাবে; triviaState.refresh (); }
  • onChosenAnswer (স্ট্রিং প্রতিক্রিয়া)

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

অকার্যকর onChosenAnswer (স্ট্রিং উত্তর) {নির্বাচিতআন্সওয়্যার = উত্তর; স্টপটাইমার (); // নির্বাচিত উত্তরটি রাখুন যাতে উত্তর উইজেটটি এটি সর্বশেষ // স্ট্যাকে রাখতে পারে। જવાিঅ্যানিমেশন.ভালিউ.চোসেনএনসওয়ারআইডেক্স = কারেন্ট কিউশন.ভালিউ.অ্যানসওয়ার্স.আইডিএক্সএফ (উত্তর);
উত্তরঅ্যানিমেশন.রেফ্রেশ (); }

উত্তর অ্যানিমেশন শ্রেণি:

বর্গ উত্তর অ্যানিমেশন {উত্তরশক্তি ({this.chosenAnswerIndex, this.startPlaying}); int UsedAnswerIndex; bool startPlaying = মিথ্যা; }
  • onCososeAnswerAnimationEnd ()

প্রতিক্রিয়াগুলির অ্যানিমেশনটি শেষ হয়ে গেলে, isAnswerChosen পতাকাটি মিথ্যাতে সেট করা থাকে যাতে কাউন্টডাউন অ্যানিমেশনটি আবার শুরু করা যায়। তারপরে উত্তরটি সঠিক কিনা তা যাচাই করতে চেকএনসওয়ার পদ্ধতিটি ডাকা হয়।

অকার্যকর on ChhosenAnwserAnimationEnd () {// পতাকাটি পুনরায় সেট করুন যাতে কাউন্টডাউন অ্যানিমেশন triviaState.value.isAnswerChosen = মিথ্যা শুরু করতে পারে; triviaState.refresh (); চেকঅ্যান্সওয়ার (কারেন্ট কিউশন.ভ্যালু, নির্বাচিত উত্তর); }
  • ট্রিভিয়াস্ট্যাটস ক্লাস

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

ট্রিভিয়াস্ট্যাটস class ট্রিভিয়াস্ট্যাটস () class সংশোধিত = []; ভুল = []; নং জবাব = []; স্কোর = 0; }
তালিকা সংশোধন করা; ধূর্ত ভুল; তালিকা উত্তর; int স্কোর;
অকার্যকর অ্যাডকর্ক (প্রশ্ন প্রশ্ন) {সংশোধন.অ্যাড (প্রশ্ন); স্কোর + = 10; }
অকার্যকর অ্যাডরং (প্রশ্নোত্তর প্রশ্ন) {mists.add (প্রশ্ন); স্কোর - = 4; }
অকার্যকর addNoAnswer (প্রশ্ন প্রশ্ন) {#Ans উত্তর.Add (প্রশ্ন); স্কোর - = 2; }
অকার্যকর পুনরায় সেট () cted সংশোধন = []; ভুল = []; নং জবাব = []; স্কোর = 0; }}
অংশ 6 - অ্যানিমেশন

এই অ্যাপ্লিকেশনটিতে দুটি ধরণের অ্যানিমেশন রয়েছে: উত্তরের নীচে অ্যানিমেটেড বার উত্তরটির জন্য অবশিষ্ট সময় এবং অ্যানিমেশনটি নির্দেশ করে যা একটি উত্তর নির্বাচন করা হলে চালিত হয়।

1 - কাউন্টডাউন বার অ্যানিমেশন

এটি একটি দুর্দান্ত সরল অ্যানিমেশন। উইজেটটি পরামিতিগুলির বারের দৈর্ঘ্য, সময়কাল এবং গেমের স্থিতি ব্যবহার করে। অ্যানিমেশনটি প্রতিবার উইজেটটি পুনর্নির্মাণ করা শুরু হবে এবং উত্তর নির্বাচন করা হলে থামবে।

প্রাথমিক রঙ সবুজ এবং ধীরে ধীরে লাল রঙে পরিবর্তিত হয়ে সময়ের শেষ নির্দেশ করে।

2 - উত্তর অ্যানিমেশন

এই অ্যানিমেশনটি প্রতিবার একটি উত্তর নির্বাচন করা শুরু হয়। উত্তরের অবস্থানের একটি সাধারণ গণনা সহ প্রতিটি ধীরে ধীরে নির্বাচিত উত্তরের অবস্থানে চলে যায়। যাতে নির্বাচিত উত্তরটি স্ট্যাকের শীর্ষে থাকে, এটি উইজেট তালিকার শেষ উপাদানটির সাথে বিনিময় হয়।

// নির্বাচিত প্রতিক্রিয়া আইটেমটি দিয়ে শেষ আইটেমটি অদলবদল করুন যাতে এটি // স্ট্যাকের সর্বশেষে উপস্থিত হতে পারে। চূড়ান্ত শেষ = উইজেটস.লাস্ট; চূড়ান্তভাবে নির্বাচিত = উইজেটস [উইজেট.স্যানওয়ারএনিমেশন.চোসেনএেন্সওয়ারআইডেক্স]; চূড়ান্ত নির্বাচিত ইন্ডেক্স = উইজেটস.ইন্ডেক্সফ (নির্বাচিত); উইজেটস.লাস্ট = নির্বাচিত; উইজেটস [নির্বাচিত ইন্ডেক্স] = শেষ;
রিটার্ন ধারক (শিশু: স্ট্যাক (শিশু: উইজেটস,),);

বাক্সগুলির রঙ সবুজ হয়ে যায় যখন উত্তরটি সঠিক হয় এবং ভুল হয় যখন তা লাল হয়।

var new color;
if (isCor درست) {newColor = Colors.green; } অন্য {নতুন রঙ = রঙস.রেড; }
colorAnimation = কালারটুইন (শুরু: উত্তরবক্সকলার, শেষ: নতুন রঙ,) .নিমেট (কন্ট্রোলার);
controller.forward () এর জন্য অপেক্ষা করুন;
অংশ 7 - সংক্ষিপ্ত পৃষ্ঠা

1 - সারাংশ

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

2 - সংক্ষিপ্ত উত্তর

এই উইজেটটি নিজেই প্রশ্নের সূত্র এবং প্রশ্নের সূচিপত্র হিসাবে নেয় এবং উত্তরের তালিকা তৈরি করে। সঠিক উত্তরটি সবুজ হিসাবে চিহ্নিত করা হয়েছে। যদি ব্যবহারকারী কোনও ভুল উত্তর নির্বাচন করে তবে তা লাল রঙে হাইলাইট হবে এবং সঠিক এবং ভুল উভয় উত্তরই প্রদর্শন করবে।

উপসংহার

এই উদাহরণটি নিখুঁত বা চূড়ান্ত থেকে অনেক দূরে তবে এটি কাজ করার জন্য এটি একটি ভাল সূচনা পয়েন্ট হতে পারে। উদাহরণস্বরূপ, প্রতিটি গেম খেলেছে বা এমন একটি বিভাগ যেখানে ব্যবহারকারী কাস্টম প্রশ্ন এবং বিভাগ তৈরি করতে পারে (একটি ডাটাবেসের সাহায্যে অনুশীলন করার জন্য এটি একটি দুর্দান্ত অনুশীলন হতে পারে) এর সাথে একটি পরিসংখ্যান পৃষ্ঠা তৈরি করে এটি উন্নত করা যেতে পারে। আশা করি এটি কার্যকর হতে পারে, নির্দ্বিধায় উন্নতি, পরামর্শ বা অন্যান্য পরামর্শ দিতে পারেন।

আপনি এই গিটহাব সংগ্রহস্থলে উত্স কোডটি সন্ধান করতে পারেন।