
  <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">
            <!-- <span class="text-sky">Que</span> :  -->
            <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="/TutorTrainingContent/<%=practice.content_directory%>/<%=practice.question_audio%>" type="audio/mpeg">
            </audio>
            <% } %>

            <% if(audioExtension === '.m4a'){ %> 
              <audio controls class="audio-stop">
                <source src="/TutorTrainingContent/<%=practice.content_directory%>/<%=practice.question_audio%>" type="audio/ogg">
                <source src="/TutorTrainingContent/<%=practice.content_directory%>/<%=practice.question_audio%>" type="audio/mp4">
            </audio>
            <% } %>  

            </div>
          <% } %>
          <!-- <p class="desctext"></p> -->
          <form method="post" action="javascript:void();">     
            <ul class="quest-list <%=(practice.question_type == 'multi_select') ? 'multi-select':'' %>">
             <% 
                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>
              <% } %>
              <div class="quest-bottom bottom-corrIn-answers text-center">
                <div class="row justify-content-center">
                  <div class="col-sm-12 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>
            </ul>
            <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>

          </form>
        </div>              
      </div>
  </div>

