{{> mod_minilesson/questionheader}}
<div class="minilesson_sgapfill_player_box gapfill-container mt-5">
    <div style="display:none;" class="sgapfill_results">{{#str}}dc_results, mod_minilesson{{/str}}</div>

    <div class="sgapfill_maintitle" style="display: none">{{iteminstructions}}</div>
    <div class="sgapfill_itemtext mod_minilesson_itemtext {{rtl}}" style="display: none">{{{itemtext}}}</div>

    <div class="sgapfill_image_container text-center pt-5">
        <img class="sgapfill_image" src="{{{itemimageurl}}}" alt="{{#str}}sgapfill, mod_minilesson{{/str}}">
    </div>

    <div class="sgapfill_title text-center mt-3">{{#str}}speakinggapfill, mod_minilesson{{/str}}</div>

    <div class="sgapfill_description mt-3 text-center">{{iteminstructions}}</div>

    <div class="sgapfill_mainmenu mt-3 pb-5">
        <div class="sgapfill_loaded" style="display:none;">
            <button disabled class='btn btn-block btn-primary sgapfill_start_btn'>
                {{#str}}start, mod_minilesson{{/str}} <i class='fa fa-play ml-1'></i>
            </button>
        </div>
        <div class="sgapfill_not_loaded">
            <p>{{#str}}loading, mod_minilesson{{/str}}</p>
        </div>
    </div>

    {{> mod_minilesson/progresstimer }}

    <div style="display:none;" class="sgapfill_listen_cont">
        <button class="btn btn-secondary sgapfill_listen_btn">
            <i class="fa fa-volume-up"></i>
        </button>
    </div>

    <div style="display:none;" class="question"></div>

    <div style="display:none;" class="sgapfill_controls pb-2">
        <div class="sgapfill_speakbtncontainer">
            {{> mod_minilesson/ttrecorder}}
        </div>
        <button class="btn sgapfill_ctrl-btn sgapfill_skip_btn my-4">
            <span class="mobileaccesshide">{{#str}}skip, mod_minilesson{{/str}}</span> <i class="fa fa-arrow-right"></i>
        </button>
    </div>

    <div class="sgapfill_resultscontainer"></div>

</div>

{{> mod_minilesson/questionfooter}}