লারাভেল LMS Project Quiz section create crud operation and others

আজকের ক্লাসে আমরা মূলত আমাদের লারাভেল প্রজেক্টের যে বাকি কাজ গুলো ছিল কুইজের সেগুলো complete করব।এবং আমরা আরো অন্যান্য বিষয় গুলো দেখবো।

যেহেতু আমরা আগের ক্লাসেই আমাদের টাস্ক গুলো complete করেছি ওখান থেকেই আমরা আমাদের কুইজ গুলোকে ভিউ করিয়েছি ।এবং আজকে আমরা সেই কুইজ গুলোকে ইডিট করে সেখানে সঠিক উত্তর সেট করব।

তো এর জন্য আমরা আমাদের কুইজ ইডিট ফাইলে গিয়ে আমাদের কোডের সাথে মিল রেখে গিটহাবের কোড গুলো আপডেট করব এখানে হয়তো একটু মাথা গুলিয়ে যেতে পারে কারন অনেকেই অনেক কোড আপডেট করে সেগুলো কমিট করছে সুতরাং কোডের স্টাইলের পরিবর্তন হচ্ছে তাই আমি এখানে কোড দিলাম না। আগের কোড গুলো quize option থেকে মিলিয়ে নেবেন।

এবার আসি আমরা আমাদের কুইজে প্রশ্ন সেট করা এবং কুইজের উত্তর গুলো সঠিক কি না সেটা দেখানো।

আমরা প্রথমেই একটা রাউট তৈরি করি।

Route::get('/quiz-show/{id}', [QuizController::class, 'quizShow'])->name('quiz-show');

এখান থেকে আমাদের কুইজ গুলো আইডি অনুযায়ী বিভিন্ন কুইজ শো করবে।

এবং আমাদের QuizController এর মধ্যে শো function লিখব।

public function quizShow($id) {
        $quiz = Quiz::findOrFail($id);
        return view('quiz.quiz-show', [
            'quiz' => $quiz,
        ]);
    }

প্রথমেই আমাদের কুইজ show livewire component এ গিয়ে আমাদের কোড গুলো লিখে ফেলি।

public $quiz;
    public $answerOpitons = [
       'answer_a',
       'answer_b',
       'answer_c',
       'answer_d',
    ];
    public $answer;
    public $answer_id;
    public $count_correct_answer = 0;
    public $count_incorrect_answer = 0;
    public $correct_answers = [];
    public function render()
    {

        return view('livewire.quiz-show');
    }
    public function answerUpdate($id){
        $this->answer_id = $id;
    }
    public function result(){
        $question = Question::select('correct_answer')->findOrFail($this->answer_id);
        if($question->correct_answer === $this->answer[$this->answer_id]){
            flash()->addSuccess('Answer is correct');
            $this->correct_answers[$this->answer_id] = true;
            $this->count_correct_answer++;
        }else{
            flash()->addWarning('Answer is incorrect');
            $this->correct_answers[$this->answer_id] = false;
            $this->count_incorrect_answer++;

        }
    }

এবং ভিউ ফাইলে সেগুলো কে শো করি।

<div>
    <h1 class="text-center text-2xl py-2">{{$quiz->name}}</h1>
    @php
        $i=1
    @endphp
    <div class="flex items-center gap-4 py-4">
        <p class="flex items-center gap-2">Total <span class=" text-sm radius-full text-white flex justify-center items-center w-8 h-8">{{count($quiz->questions)}}</span></p>
        <p class="flex items-center gap-2">Correct <span class=" text-sm radius-full text-white flex justify-center items-center w-8 h-8">{{$count_correct_answer}}</span></p>
        <p class="flex items-center gap-2">Wrong <span class=" text-sm radius-full text-white flex justify-center items-center w-8 h-8">{{$count_incorrect_answer}}</span></p>
    </div>
    @foreach($quiz->questions as $question)
       <div class="border border-gray-300 mb-4 p-4  @if(array_key_exists($question->id,$correct_answers)) {{$correct_answers[$question->id] ? 'bg-green-100': 'bg-red-100'}} @endif}}">
           <h3 class="text-gray-600"> {{$i++}}.{{$question->name}}</h3>
           <div class="flex gap-4">
               @forEach($answerOpitons as $option)
                   <div class="flex items-center pl-4  rounded">
                       <input wire:click="answerUpdate({{$question->id}})" @if(array_key_exists($question->id,$correct_answers)) disabled @endif wire:change="result" wire:model="answer.{{$question->id}}" id="answer-{{$option}}-{{$question->id}}"  type="radio" value="{{explode('_',$option)[1]}}" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                       <label for="answer-{{$option}}-{{$question->id}}" class="w-full py-4 cursor-pointer ml-2 text-sm font-medium text-gray-900">{{$question->$option}}</label>
                   </div>
               @endforeach
           </div>
       </div>
    @endforeach
</div>

এবার আমাদের কুইজ গুলো কে সুন্দর মত ভিউ করতে পারব।এবং আইডি অনুযায়ী সেটা করতে পারব। এখানে একটা বিষয় সেটা হলো যেহেতু এগুলোতে টাস্ক দেওয়া থাকছে সাথে ডিজাইন ও পরিবর্তন হচ্ছে তাই আগের ব্লগেও অনেক কিছু update code দেওয়া আছে যেগুলো ক্লাসে দেখানো হয়নাই ।আশা করি বুঝতে পারছেন।

আমাদের কোর্সের tutorial-20(part-16) এই ব্লগ part-15 এর মধ্যেই দেওয়া হয়েছে ১৬ নং পার্টে মূলত আমাদের যে কুইজ পেইজ আছে সেই পেইজের answer গুলো dynamic এবং style করা হয়েছিল এবং এটাকে সুন্দর ভাবে single page এ দেখানোর কথা বলেছিল যা আমরা আজকের এবং গত ব্লগেই কাভার করেছি।