HTML

{% extends 'core/base.html'%}


{% block content %}

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


    <div class=" w-full max-w-xl">
<form class="g-white shadow-md rounded p-20" action="/{{exercise.id}}/exercise/"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="{{exercise.id}}" 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="{{exercise.id}}" 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="{{exercise.id}}" 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="{{exercise.id}}" value="{{ opt_4 }}">
    <label for="opt_4">{{exercise.opt_4}} </label>

</div>


    <button class="mt-3   bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 border border-blue-700 rounded"" type="submit" >Check result</button>
</form>
</div>
</div>
{% endblock content%}