HTML

<div class="flex items-center justify-center h-screen">


    <div class=" w-full max-w-xl">
<form  name="quiz" class="g-white shadow-md rounded p-20" "method="post">
{% csrf_token %}
    <h1 class="text-3xl text-center mb-5 ">{{exercise.name}}</h1>
    <div class="shadow appearance-none border rounded w-full py-4 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'">
    <input class=" m-5 py-4 px-4" id="opt_1" type="radio" name="name" value="{{ opt_1 }}">
    <label for="opt_1">{{exercise.opt_1}} </label>

    </div>

    <div class="shadow appearance-none border rounded w-full py-4 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'">
    <input class="m-5 py-4 px-4" id="opt_2" type="radio" name="name" value="{{ opt_2 }}">
    <label for="opt_2">{{exercise.opt_2}} </label>

</div>
    <div class="shadow appearance-none border rounded w-full py-4 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'">
    <input class="m-5 py-4 px-4" id="opt_3" type="radio" name="name" value="{{ opt_3 }}">
    <label for="opt_3">{{exercise.opt_3}} </label>

</div>
    <div class="shadow appearance-none border rounded w-full py-4 px-4 text-gray-700 leading-tight focus:outline-none focus:shadow-outline'">
    <input class="m-5 py-4 px-4" id="opt_4" type="radio" name="name" value="gosho">
    <label for="opt_4">{{exercise.opt_4}} </label>


</div>


    <button id="btn-result" class="mt-3   bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 border border-blue-700 rounded"" type="button" >Check result</button>
    <p id="result" ></p>
</form>
</div>
</div>