Merge branch 'feature/answer-form-anhtv' into 'upload-form-layout'

show answer form

See merge request !1

app/Http/Controllers/FormController.php

+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
+
+class FormController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        //
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function show($id)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function edit($id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  int  $id
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy($id)
+    {
+        //
+    }
+
+    public function showQuestionForm(Request $request)
+    {
+        $numberOfQuestion = $request->numberOfQuestion;
+        return view('question-form', compact('numberOfQuestion'));
+    }
+}

resources/views/question-form.blade.php

+<div class="col-2">
+    <label for="">Điền đáp án đúng:</label>
+</div>
+<div class="col-5" style="overflow:scroll">
+    <div class="rows">
+        <div class="col-12">
+            <b id="countAnswer"></b> / <b>{{ request('numberOfQuestion') }}</b>
+        </div>
+    </div>
+    @for ($i = 1; $i <= request('numberOfQuestion'); $i++)
+        <ul>
+            <li>
+                <b>{{ $i }}</b>
+                A.
+                <input name="{{ $i }}" id="A{{ $i }}" type="radio" value="A"
+                    onclick="handleClick(this)" />
+                B.
+                <input name="{{ $i }}" id="B{{ $i }}" type="radio" value="B"
+                    onclick="handleClick(this)" />
+                C.
+                <input name="{{ $i }}" id="C{{ $i }}" type="radio" value="C"
+                    onclick="handleClick(this)" />
+                D.
+                <input name="{{ $i }}" id="D{{ $i }}" type="radio" value="D"
+                    onclick="handleClick(this)" />
+            </li>
+        </ul>
+    @endfor
+
+</div>
+<script>
+        var countAnswer = 0;
+        const array = [];
+
+        function handleClick(input) {
+            var name = input.name;
+            var number = {{ request('numberOfQuestion') ?? 0 }};
+            var i = number - name;
+
+            if ($("input[name=" + name + "]").is(':checked') && jQuery.inArray(i, array) == -1) {
+                countAnswer += 1;
+                array.push(i);
+            } else if ($("input[name=" + name + "]").is(':checked') && jQuery.inArray(i, array) != -1) {
+                countAnswer += 0;
+            }
+
+            $("#countAnswer").html(countAnswer);
+        }
+</script>

resources/views/test.blade.php

+<div class="col-2">
+    <label for="">Điền đáp án đúng:</label>
+</div>
+<div class="col-5" style="overflow:scroll">
+    <div class="rows">
+        <div class="col-12">
+            <b id="countAnswer"> / {{ request('numberOfQuestion') }}</b>
+        </div>
+    </div>
+    @for ($i = 1; $i <= request('numberOfQuestion'); $i++)
+        <ul>
+            <li>
+                <b>{{ $i }}</b>
+                A.
+                <input name="{{ $i }}" class="radio" id="A{{ $i }}" type="radio" value="A"
+                    onclick="handleClick(this)" />
+                B.
+                <input name="{{ $i }}" class="radio" id="B{{ $i }}" type="radio" value="B"
+                    onclick="handleClick(this)" />
+                C.
+                <input name="{{ $i }}" class="radio" id="C{{ $i }}" type="radio" value="C"
+                    onclick="handleClick(this)" />
+                D.
+                <input name="{{ $i }}" class="radio" id="D{{ $i }}" type="radio" value="D"
+                    onclick="handleClick(this)" />
+            </li>
+        </ul>
+    @endfor
+</div>

resources/views/upload-form.blade.php

@@ -101,8 +101,8 @@
                     <label for="">Số câu hỏi:</label>
                 </div>
                 <div class="col-10">
-                    <input type="number" name="numberOfQuestion" id="numberOfQuestion"
-                        class="form-control" placeholder="câu" />
+                    <input type="number" name="numberOfQuestion" id="numberOfQuestion" class="form-control"
+                        placeholder="câu" />
                 </div>
             </div>
             <div class="row"id="questionForm">
@@ -111,4 +111,22 @@ class="form-control" placeholder="câu" />
             <button class="btn btn-primary" type="submit" id="submitButton">Đăng ngay</button>
         </form>
     </div>
+
+    <script>
+        $(document).ready(function() {
+            //show question form
+            $('#numberOfQuestion').change(function() {
+                $.ajax({
+                    type: "GET",
+                    url: "{{ route('questionForm') }}",
+                    data: {
+                        numberOfQuestion: $('#numberOfQuestion').val()
+                    },
+                    success: function(data) {
+                        $("#questionForm").html(data);
+                    }
+                });
+            });
+        })
+    </script>
 @endsection

routes/web.php

 <?php
 
+use App\Http\Controllers\FormController;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -16,3 +17,5 @@
 Route::get('/', function () {
     return view('upload-form');
 });
+
+Route::get('/questionForm', [FormController::class,'showQuestionForm'])->name('questionForm');