  <div class="row w-100" id="row">
    <div class="col-sm-12">
      <!-- <div class="que-block text-center"> -->
      <div class="que-block">
        <h3 class="title-text" style="font-size: 30px;">
          <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="javascript:void();" class="ss">
          <div class="row justify-content-center">
            <div class="col-sm-12 col-md-5 col-lg-4 col-xl-3 mb-3 align-self-center">
              <div class="quest-imagelarge">
                <img src="/LearningContent/<%=practice.content_directory+'/'+practice.question_image%>" alt="img">
              </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-6 col-xl-6 text-left align-self-center">
              <ul
                class="quest-list  <%=(practice.question_type == 'multi_select') ? 'multi-select':'' %> text-left mw-100">
                <% let j=0; for (option of practice.options) { j++; %>
                  <li>
                    <%if(practice.question_type=='single_select' ){ %>
                      <input type="radio" id="question<%=j%>" class="custom-option <%=isCorrectAnswer == true && savedQuestion.includes(option.id) || option.option_correct ? 'correct' : 'incorrect' %>" name="question" value="<%=option.id%>" <%=(savedQuestion.includes(option.id) ?  'checked': '')%> disabled>
                      <label class="label-option" for="question<%=j%>">
                        <%=option.option_text%>
                      </label>
                      <% } else { %>
                        <input type="checkbox" id="question<%=j%>" class="custom-option <%=isCorrectAnswer == true && savedQuestion.includes(option.id) || option.option_correct ? 'correct' : 'incorrect' %>" name="question[]" value="<%=option.id%>" <%=(savedQuestion.includes(option.id) ?  'checked': '')%> disabled>
                        <label class="label-option" for="question<%=j%>">
                          <%=option.option_text%>
                        </label>
                        <% } %>
                  </li>
                  <% } %>
              </ul>
            </div>
            <div class="col-sm-12 quest-bottom bottom-corrIn-answers text-center">
              <div class="row">
                  <div class="col-md-12">
                    <% if(isCorrectAnswer === true) { %>
                    <div class="single-text answer-msg correct-answer-msg" style="display:flex;">
                      <img src="/images/correct-answer-icon.svg" alt="icon">
                      <span>Congratulations <small>Correct Answer</small></span>
                    </div>
                    <% } else{ %>
                    <div class="single-text answer-msg incorrect-answer-msg" style="display:flex;">
                      <img src="/images/incorrect-answer-icon.svg" alt="icon">
                      <span>Wrong <small>Incorrect Answer</small></span>
                    </div>
                    <% } %>
                  </div>
              </div>
            </div>
          </div>
          <div class="row justify-content-center">
            <div class="col-sm-12">
              <% if(practice.question_explanation !=''){ %> 
                <div class="explanation assessments-explanation">
                  <h4 class="text-dgreen">Explanation</h4>
                  <p><%-practice.question_explanation%></p>
                </div>
              <% } %>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
