:::

16-4 產生考試結果

一、修改控制器

  1. 考試結果理論上應該要看起來和考試當下的畫面差不多,唯一的差別是多了分數,並且顯示每題的作答及正確答案。
  2. 路由的test.show是用控制器TestController@show來產生,故開啟/專案/app/Http/Controllers/TestController.php,修改 show 的方法
        public function show(Test $test)
        {
            $topics  = json_decode($test->content, true);
            $content = [];
            $i       = 1;
            foreach ($topics as $topic_id => $ans) {
                $content[$i]['topic'] = Topic::find($topic_id);
                $content[$i]['ans']   = $ans;
                $i++;
    
            }
            return view('exam.test', compact('test', 'content'));
        }
  3. 首先,此處一樣用路由模型綁定,$test即為Test的資料物件,由於有設定關聯,所以,會一併抓出$test->exam$test->user的資料。

  4. 由於我們用的是比較簡易的作法,把考試者的填答做成json格式存入content中,故讀出時,可以利用json_decode($id->content, true)將json資料轉回陣列。

  5. 接著把陣列一個一個讀出,其陣列索引為題目編號$topic_id,值為使用者填寫的答案,因此每跑一圈,我們就可以利用Topic::find($topic_id)來抓取該題目的資訊,並將題目資訊存到$content陣列中。

  6. $content的索引一樣從0開始,以方便等一下製作題號。

  7. 此外,我們也順便把使用者的作答一併存入$content陣列中,以便待會比對是否作答正確。

二、修改樣板

  1. 由於控制器show的最後會呼叫exam.test樣板,因此,我們建立一個/專案/resources/views/exam/test.blade.php樣板:
    @extends('layouts.app')
    @section('content')
        <h1 class="text-center">{{$test->exam->title}}</h1>
        <h3 class="row">
            <div class="col-sm-6">時間:<u>{{$test->created_at->format("Y年m月d日 H:i:s")}}</u></div>
            <div class="col-sm-6 text-right">姓名:<u>{{$test->user->name}}</u> 得分:<u>{{$test->score}}</u></div>   
        </h3>
        <hr>
    
        <dl>
            @forelse ($content as $key => $data)
                <dt>
                    <h3>            
                        @if($data['ans']==$data['topic']->ans)
                            <img src="{{asset('yes.png')}}" alt="yes" title="正確答案為 {{$data['topic']->ans}}">
                        @else
                            <img src="{{asset('no.png')}}" alt="no" title="正確答案為 {{$data['topic']->ans}}">
                        @endif
                        {{ bs()->badge()->text($key+1) }}
                        ({{$data['ans']}})
                        {{$data['topic']->topic}}
                    </h3>
                </dt>
                
                <dd>
                    <div class="ml-5 my-2 opt">
                        &#10102; {{$data['topic']->opt1}}
                    </div>
                    <div class="ml-5 my-2 opt">
                        &#10103; {{$data['topic']->opt2}}
                    </div>
                    <div class="ml-5 my-2 opt">
                        &#10104; {{$data['topic']->opt3}}
                    </div>
                    <div class="ml-5 my-2 opt">
                        &#10105; {{$data['topic']->opt4}}
                    </div>
                </dd>
            @empty
                <div class="alert alert-danger">尚無任何題目</div>
            @endforelse
        </dl>
    
    @endsection
    
  2. 其中會用到以下兩個圖檔,故請下載之,並存到public底下:

  3. 要使用public下的資源,可以直接用asset('檔案名稱')來取用之即可。

 

到GitHub觀看此單元程式異動


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D1193

計數器

今天: 2686268626862686
昨天: 3438343834383438
總計: 7393015739301573930157393015739301573930157393015