<div class="item">
  <div class="row">    
      <div class="col-sm-12">
        <div class="que-block">  
          <h3 class="title-text" style="font-size: 22px;">
            <span class="text-center"><%-practice.question%></span>
          </h3>
          <% if(practice.question_audio && practice.question_audio !=''){ %> 
            <div class="audio drop-objects">
              <p>Click on the play button to play a sound:</p>

	      <% if(audioExtension === '.mp3') { %>
                   <audio controls class="audio-stop">
                    <source src="/LearningContent/<%=practice.content_directory%>/<%=practice.question_audio%>" type="audio/mpeg">
                   </audio>
              <% } %>
              <% if(audioExtension === '.m4a') { %>
                  <audio controls class="audio-stop">
                   <source src="/LearningContent/<%=practice.content_directory%>/<%=practice.question_audio%>" type="audio/ogg">
                   <source src="/LearningContent/<%=practice.content_directory%>/<%=practice.question_audio%>" type="audio/mp4">
                  </audio>
	      <% } %>
            </div>
          <% } %>
          <form method="post" action="./checkPracticeAnswer" id="textForm" enctype='multipart/form-data'>
            <input type="hidden" class="lesson_id" name="lesson_id" value="<%=lessonId%>">
            <input type="hidden" class="practice_id" name="practice_id" value="<%=practice.id%>">
            <input type="hidden" class="practice_type" value="<%=practice.question_type%>" name="practice_type">
            <input type="hidden" class="question_content_type" value="practices">

          <div class="row justify-content-center">
              <div class="col-12 col-sm-4 mb-3">
                <div class="quest-imagelarge"> 
                  <% if(practice.question_image !='') { %>
                 <img src="/LearningContent/<%=practice.content_directory+'/'+practice.question_image%>" alt="img">
                 <% } %>
               </div>
              </div>
              <div class="col-12">
                <% if(userRole == '3'){ %> 
                <div class="col-md-4">
                  <div class="form-group submit-attachment-student">
                    <input type="file" name="submit_attachment" id="submit_attachment"
                      class="form-control submit-attachment" data-allowed-file-extensions="jpg jpeg png pdf"
                      data-max-file-size-preview="2M" data-default-file="<%=attachmentName%>" />
                      <input type="hidden" class="attachment_name" value=""/>

                  </div>
                </div>
                <div class="col-md-8">
                <% }else{ %>
                  <div class="col-md-12">
                <% } %>   
                  <div class="form-group mb-0">
                    <textarea class="form-control editorExplanation" name="question_explanation"
                      placeholder="Enter Explanation"><%-savedQuestion%></textarea>
                  </div> 
                </div>
              </div>
              
              <div class="col-sm-12 mt-4">
                <div class="answer-submitted">
                  <span>Answer Submitted</span>
                </div>
                <div class="quest-bottom">
                  <div class="row">
                    <div class="col-sm-12 text-center">
                      <% if(userRole == '3'){ %> 
                        <button type="button" class="check-btn correct-btn submit_question" style="background: #28a745;color: #fff;
                      border: navajowhite;">Submit</button>
                      <% } else { %> 
                        <button type="button" class="check-btn correct-btn check_question" style="background: #28a745;color: #fff;
                        border: navajowhite;">Check Answer</button>
                      <% } %>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-12 explanation-div">
                <div class="explanation flex-column align-items-start">
                  <div class="explanation border-0 p-0 mt-0">
                    <h4 class="text-dgreen">Explanation</h4>
                    <div class="textedit_content"><%-practice.question_explanation%></div>
                  </div>
                </div>
                <div class="explanation flex-column align-items-start">
                  <div class="keywords explanation p-0 w-100 border-0 m-0 ">
                    <h4 class="text-dgreen keywordheading">Keywords</h4>
                      <%  if(practice.options !== null){  %>
                        <ul class="keyword-listing">
                          <% for (option of practice.options) { %>
                            <li> <%=option.option_text%>  <span class="question-action"><img src="/images/<%=option.option_correct ? 'q-check.svg' : 'q-wrong.svg'%>" alt="img"></span></li>
                          <% } %>
                        </ul>
                     <% } %>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>              
      </div>
  </div>
</div>

