<div class="component__inner narrative__inner mr_wrapper_container_narrative">

  {{!-- {{> component this}} --}}

  <div class="narrative_main_container">
    <div class="narrative-container-title">

      <h2 class="narrative_heading">
        {{{title}}}
      </h2>

      <div class="instruction_text">
        <p>{{{body}}}</p>

        {{#if instruction}}
        <p><em>{{instruction}}</em></p>
        {{/if}}      
      </div>


      {{!-- <div
        class="component__widget narrative__widget{{#if _hasNavigationInTextArea}} narrative__text-controls{{/if}}">
        --}}

        <div class="main_slider_container" style="background-color: {{bgcolor}};">
          <button data-direction="left"
            class="btn-icon narrative__controls narrative__controls-left js-narrative-controls-click"
            aria-label="{{_globals._accessibility._ariaLabels.previous}}">
            <img src="course\en\images\icon\back.png" />
          </button>

          <button data-direction="right"
            class="btn-icon narrative__controls narrative__controls-right js-narrative-controls-click"
            aria-label="{{_globals._accessibility._ariaLabels.next}}">
            <img src="course\en\images\icon\next.png" />
          </button>

        
          <div class="main-container">
            <div class="narrative__slide-container">
              <div class="narrative__slider">

                {{#each _items}}
                <div
                  class="narrative__slider-image-container{{#if _isVisited}} is-visited{{/if}}{{#if _graphic.attribution}} has-attribution{{/if}}"
                  style="" data-index="{{@index}}">

                  <div class="cyuScroll">
                    <div class="cyu-title">
                      {{!-- <h2 class="qNo">{{qstatment}} <span>{{qno}}</span></h2> --}}
                      <h1 tabindex="0" id="qText">
                         <div style="margin-bottom: 10px;"><b>{{qtext_no}}</b></div>
                         {{qtext}}
                      </h1>

                      <p tabindex="0" id="instruction_text">
                        {{{instructionText}}}
                      </p>
                    </div>
                    <div id="cyu_block" class="cyuBlock_class">
                      <ul class="cyu-options list-unstyled">
                        {{#each optionItem}}
                        <li id="opt_{{optionindex}}" class="_item cyu-option" data-index="{{optionindex}}">
                          <label class="lab_container" for="radio_{{optionindex}}">
                            {{optext}}
                            <input type="checkbox" id="checkbox_{{@index}}" class="redkBox" name="check" data-correct="{{iscorrect}}">
                            <span class="radioassessment"></span>
                             <span class="correctIncorrectIcon"></span>
                            </label>
                        </li>
                         {{/each}}
                      </ul>
                    </div>      
        
                    <button class="submitBtn disabledbtn">Submit</button> 
                    <button class="showAnswerMMCQ" style="display: none;">Show feedback</button>           
                  </div>
                </div>  
                {{/each}}
              </div>
            </div>

            <div class="narrative__content">
              <div class="narrative__content-inner">
                {{#each _items}}
                <div class="narrative__content-item{{#if _isVisited}} is-visited{{/if}}" data-index="{{@index}}">
                  <div class="disabled">
                    {{#if body}}
                    <div class="narrative__content-body">
                      <div class="narrative__content-body-inner">
                        
                        {{{compile body}}}
                        
                      </div>
                    </div>
                    {{/if}}
                  </div>
                </div>
                {{/each}}


              </div>
            </div>

            <div class="narrative__indicators narrative__slide-indicators">

              {{#each _items}}
              <div class="narrative__progress js-narrative-progress-click{{#if _isVisited}} is-visited{{/if}} nextDisabled"
                data-index="{{@index}}"></div>
              {{/each}}

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





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