<div class="mr-gmcq-wrapper" style="background-color: {{bgColor}};">
<div class="component__inner gmcq__inner" >
  {{#if displayTitles}}
  <div class="textHeading">
    <p role="heading" style="color: {{titleColor}}">{{{displayTitles}}}</p>
  </div>
  {{/if}}
  <div class="question_top_text" >
    {{#if numberarr}}
    {{#each numberarr}}
    <div class="numberContainer">
      <span class="number">{{no}}</span>
      <span class="numbertext">{{text}}</span>
    </div>
    {{/each}}
    {{/if}}
    {{{body01_text}}}
  </div>
  <div class="MMCQ_container">
    <div class="MMCQ_inner_container">
      <div
        class="component__widget gmcq__widget{{#unless _isEnabled}} is-disabled{{#if _isInteractionComplete}} is-complete is-submitted show-user-answer {{#if _isCorrect}} is-correct {{else}} is-incorrect {{/if}}{{/if}}{{/unless}}"
        role="{{#if _isRadio}}radiogroup{{else}}group{{/if}}">
          {{#if optionImg}}
          <img src="{{optionImg}}" class="optionImg" alt="{{imgalt-Modified}}" />
          {{/if}}
        {{#each _items}}
        <div
          class="gmcq__item js-mcq-item item-{{@index}} {{odd @index}}{{#unless ../_isEnabled}}{{#if ../_canShowMarking}}{{#if _isCorrect}} is-correct {{else}} is-incorrect {{/if}} {{/if}}{{/unless}}">

          <label
            class="gmcq__item-label js-item-label{{#unless ../_isEnabled}} is-disabled{{/unless}}{{#if _isSelected}} is-selected{{/if}}{{#if _graphic.attribution}} has-attribution{{/if}}"
            aria-hidden="true" for="{{../_id}}-{{@index}}" data-adapt-index="{{_index}}" {{#if posture}}style="position: relative;"{{/if}}>

            {{#if _graphic.attribution}}
            <div class="component__attribution gmcq__attribution">
              <div class="component__attribution-inner gmcq__attribution-inner">
                {{{_graphic.attribution}}}
              </div>
            </div>
            {{/if}}

            <img class="gmcq__item-image" src="{{_graphic.src}}" data-large="{{_graphic.large}}"
              data-small="{{_graphic.small}}" {{#if _graphic.alt}}aria-label="{{_graphic.alt}}"
              {{else}}aria-hidden="true" {{/if}}>
              
            <div class="gmcq__item-option" id="item_{{@index}}"data-index="{{@index}}" style="background-color: {{optColor}};">
              <div class="gmcq__item-state">
                <div
                  class="gmcq__item-icon gmcq__item-answer-icon{{#if ../_isRadio}} is-radio{{else}} is-checkbox{{/if}}">
                  <div class="icon"></div>
                </div>
                <div class="gmcq__item-icon gmcq__item-correct-icon">
                  <img src="course/en/images/tick.png" />
                </div>
                <div class="gmcq__item-icon gmcq__item-incorrect-icon">
                  <img src="course/en/images/cross.png" />
                </div>   
              </div>

              {{#if text}}
              <div class="gmcq__item-text">
                <div class="gmcq__item-text-inner">
                  {{{text}}}
                </div>
              </div>
              {{/if}}

            </div>

          </label>

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

        </div>
        {{/each}}

      </div>
      <div class="btn__container"></div>
    </div>
  </div>

  {{#if footerText}}
  <p class="gmcqFooterText">{{footerText}}</p>
  {{/if}}
  {{!-- {{> component this}} --}}

  <div class='MMCQ_feedbackcontainer'>
    <div class='MCQ_feedback correct'>
      <div class='feedbackhead'>
        <img src='{{_feedback._correct.icon}}' class='feedbackIcon'>
        <strong >{{_feedback._correct.heading}}</strong>
      </div>
      <div class="feedbackBody" >
        {{{_feedback._correct.text}}}
      </div>

      <button class='closeBtn_CYU' style='cursor:pointer; position:absolute;top:20px;right:20px; color: #000'aria-label="close"> </button>
       <span class="focusareatoClosBtn" tabindex="0"></span>
    </div>

    <div class='MCQ_feedback incorrect_firstAttempt'>
      <div class='feedbackhead'>
        <img src='{{_feedback._firstattemptIncorrect.icon}}' class='feedbackIcon'>
        <strong >{{_feedback._firstattemptIncorrect.heading}}</strong>
      </div>

      <div class="feedbackBody" >
        {{{_feedback._firstattemptIncorrect.text}}}
      </div>

      <button class='closeBtn_CYU' style='cursor:pointer; position:absolute;top:20px;right:20px; color: #000'aria-label="close"> </button>
       <span class="focusareatoClosBtn" tabindex="0"></span>
    </div>


    <div class='MCQ_feedback incorrect'>
      <div class='feedbackhead'>
        <img src='{{_feedback._incorrect.icon}}' class='feedbackIcon'>
        <strong >{{_feedback._incorrect.heading}}</strong>
      </div>

      <div class="feedbackBody" >
        {{{_feedback._incorrect.text}}}
      </div>

      <button class='closeBtn_CYU' style='cursor:pointer; position:absolute;top:20px;right:20px; color: #000'aria-label="close"> </button>
       <span class="focusareatoClosBtn" tabindex="0"></span>
    </div>





    <div class='MCQ_feedback partial'>
      <div class='feedbackhead'>
        <img src='{{_feedback._partlyCorrect.icon}}' class='feedbackIcon'>
        <strong > {{_feedback._partlyCorrect.heading}}</strong>
      </div>
      <div class="feedbackBody" >
        {{{_feedback._partlyCorrect.text}}}
      </div>
      <button class='closeBtn_CYU' style='cursor:pointer; position:absolute;top:20px;right:20px; color: #000'aria-label="close"> </button>
       <span class="focusareatoClosBtn" tabindex="0"></span>


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