<div class="component__inner mcq__inner mr_wrapper_container mcq">


  <div class="row">
    <div class="col-10">
      <div class="row">
        <div class="col-9">
          <div class="question-container">
            <div class="title-container" >
              {{{compile displayTitle}}}
            </div>
            <div class="question_title" >
              {{{compile body}}}
            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="image-container">
            <img src="{{img}}" alt="{{imgalt}}">
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="row pos-relative" style="margin-bottom: 20px;">
    <div class="col-7 col-100">
      <div class="option_instuction" >
        {{instruction}}
      </div>

      <div class="options-container">
        <div
          class="component__widget mcq__widget{{#unless _isEnabled}} is-disabled{{#if _isInteractionComplete}} is-complete is-submitted show-user-answer{{#if _isCorrect}} is-correct{{/if}}{{/if}}{{/unless}}"
          role="{{#if _isRadio}}radiogroup{{else}}group{{/if}}">

          {{#each _items}}
          <div
            class="mcq__item js-mcq-item item-{{@index}}{{#unless ../_isEnabled}}{{#if ../_canShowMarking}}{{#if _isCorrect}} is-correct{{else}} is-incorrect{{/if}}{{/if}}{{/unless}}">

            <input class="mcq__item-input js-item-input" id="{{../_id}}-{{@index}}-input"
              {{#if ../_isRadio}}name="{{../_id}}-item" {{/if}} type="{{#if ../_isRadio}}radio{{else}}checkbox{{/if}}"
              {{#unless ../_isEnabled}} disabled{{/unless}} aria-label="{{{a11y_normalize text}}}"
              data-adapt-index="{{_index}}" tabindex="0"/>

            <label
              class="mcq__item-label js-item-label{{#unless ../_isEnabled}} is-disabled{{/unless}}{{#if _isSelected}} is-selected{{/if}}"
              aria-hidden="true" for="{{../_id}}-{{@index}}-input" data-adapt-index="{{_index}}" >

              <div class="mcq__item-state">
                <div
                  class="mcq__item-icon mcq__item-answer-icon{{#if ../_isRadio}} is-radio{{else}} is-checkbox{{/if}}">
                  <div class="icon"></div>
                </div>
                <div class="mcq__item-icon mcq__item-correct-icon">
                  <div class="icon"></div>
                </div>
                <div class="mcq__item-icon mcq__item-incorrect-icon">
                  <div class="icon"></div>
                </div>
              </div>

              <div class="mcq__item-text">
                <div class="mcq__item-text-inner">
                  {{{text}}}
                </div>
              </div>
              <div class="mcq__option_text">
                <div class="mcq__option_text-inner">
                  {{{_option_text}}}
                </div>
                <span style="display: none;" class="feedback_ans" data-feedback="{{_shouldBeSelected}}"
                  data-feedback-text="{{feedback_text}}">
                  {{feedback_msg}}
                </span>
              </div>


            </label>

          </div>
          {{/each}}

        </div>
      </div>
    </div>
    <div class="col-5 col-100 d-flex dir-col j-flex-end">  
      <div class="support-container">
        <div class="support-popup-container" style="display: none;">
          <div class="support-inner-container" >
            <div class="support-heading">
              <span class="close-support"></span>
              {{#if supportHeading}}
              <h5>{{supportHeading}}</h5>
              {{/if}}
            </div>
            <div class="support-body">
              {{{compile supportbody}}}
            </div>

          </div>
        </div>

        <div class="popup-btn-container text-right">
          <div class="support_text-container option_instuction w-mobile-50" >
            <p>{{supportTitle}}</p>
          </div>

          <div class="support-btn-container w-mobile-50" role="button"  aria-label="{{supportTitle}}">
            <img src="{{supportIcon}}" />
          </div>
        </div>

      </div>
      <div class="feedback-container matching" style="display: none;">
        <div class="feedback-inner-container" id="mmcq_correct">
          <h4 ></h4>
          <div class="feedback-body">
          </div>
        </div>
        <br>
        <div class="feedback-inner-container" id="mmcq_incorrect">
          <h4 ></h4>
          <div class="feedback-body">
          </div>
        </div>
      </div>
      <div class="btn__container button_show d-flex v-center"></div>
    </div>
  </div>



</div>

<style>
  .support-body ul>li a{
      color: #fff;
  }
</style>