Sindbad~EG File Manager

{% extends 'users/layout_participate.html' %} {% block title %} Sessions {% endblock %} {% block content %}
<div class="container pt-3">
            <div class="row">
                <div class="col-6">
                    <h4>{{ session_data[0].session_name or '' }}</h4>
                    <hr class="line" width="35%">
                </div>
                <div class="col-6 d-flex justify-content-end">
                    <a href="{{url_for('user.Participate_dashboard')}}" class="btn add_btn">Quit</a>
                </div>    
            </div>
            <div class="row p-3">
                <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 form-group">
                    <form action="{{url_for('user.post_question',session_id=session_id)}}" method="post">
                        <input type="hidden" name="q_id" id="q_id" value="{{ question_data[0]['q_id'] }}">
                    <div class="row">
                        {% if question_data[0].image_link %}
                        <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 form-group " >
                            <img src="{{ question_data[0].image_link or '' }}" class="img-fluid"  width="100%" style="border-radius: 7.171px;border: 0.652px solid #A968FF;background: #F7F7F7;box-shadow: 0px 5.867px 13.69px 0px rgba(0, 0, 0, 0.10);">
                        </div>
                        {% endif %}
                        <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 form-group">
                            <!-- <h3>Q1</h3> -->
                            {% if question_data[0] and question_data[0]['question'] %}{{ question_data[0]['question'] | safe }}{% endif %}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col form-group">
                            {% if opt_data %}
                            {% set q_data = question_data[0] %}
                            {% for i in opt_data %}
                            <div class="card mt-4 {% if q_data.opt_id|int == i.opt_id|int and q_data.opt_id|int == q_data.cur_option %} text-white bg-success {% elif q_data.opt_id == i.opt_id %} text-white bg-danger {% elif q_data.opt_id and i.opt_id == q_data.cur_option %} text-white bg-success {% endif %}" style="border-radius: 9.783px;border: 1.334px solid #A968FF;background: #FFF;box-shadow: 0px 9.783px 21.345px 0px rgba(0, 0, 0, 0.10);">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <h5 class="pb-0">{{i.option_val}}</h5>
                                        </div>
                                        <div class="col-6 d-flex justify-content-end " >
                                            <input type="radio" name="option_val" id="option_val" {% if question_data[0]['opt_id']|int == i.opt_id|int %} checked   {% endif %}
                                            {% if question_data[0]['opt_id'] %} disabled {% endif %} required value="{{ i.opt_id }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                            {% endif %}
                        </div>
                    </div>
                    {% if not question_data[0]['ua_id'] %}
                    <div class="row">
                        <div class="col d-flex justify-content-center">
                            <button type="submit" class="btn add_btn">Submit</button>
                        </div>
                    </div>
                    {% endif %}
                    <div class="card alert alert-secondary mt-3 mb-3 p-4 " {% if not question_data[0]['ua_id'] %} style="display: none;" {% endif %} >
                        <h5>Note:</h5>
                        {% if question_data and question_data[0]["explanation"] %}{{ question_data[0]["explanation"]|safe }}{% endif  %}
                    </div>
                    {% if question_data[0]['ua_id'] %}
                    <div class="row">
                        <div class="col d-flex justify-content-start">
                            {% if question_data[0]['prev_q_id'] %}
                            <a href="{{url_for('user.question',session_id=session_id,q_id=question_data[0]['prev_q_id'])}}" class="btn add_btn">Previous</a>
                            {% endif %}
                        </div>
                        <div class="col d-flex justify-content-end">
                            {% if question_data[0]['next_q_id'] %}
                            <a href="{{url_for('user.question',session_id=session_id,q_id=question_data[0]['next_q_id'])}}" class="btn add_btn">Next</a>
                            {% else %}
                            <a href="{{url_for('user.Participate_dashboard')}}" class="btn px-5 add_btn">Return to dashboard</a>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                </form>
                </div> 
                <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                    <div class="card bg-warning p-3">
                        <h4>Instruction</h4>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis quam at nisi bibendum, id feugiat urna feugiat. Donec tempor ultricies eleifend. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis quam at nisi bibendum, id feugiat urna feugiat. Donec tempor ultricies eleifend. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis quam at nisi bibendum, id feugiat urna feugiat. Donec tempor ultricies eleifend. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis quam at nisi bibendum, id feugiat urna feugiat. Donec tempor ultricies eleifend. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis quam at nisi bibendum, id feugiat urna feugiat. Donec tempor ultricies eleifend. 
                    </div>
                </div>
            </div>
        </div>
{% endblock %}