{{ block title }}
    聽力測驗
{{ endblock }}
{{ block content }}

<style>
.col-form-label{
    display: flex;
    align-items: flex-end;
}
img{
    max-width: 40%;
}
.line{
    border: 1px black solid;
    margin-bottom: 1rem;
}

.instruction{
    background-color: rgb(154, 247, 255);
    padding: 0.5rem;
    margin: 1rem 0;
}

.otree-timer{
    position: fixed;
    top:5%;
    right: 5%
}

.question{
    display: none;
}

</style>


    <audio id="audio" preload="auto" src="{{ static 'English_Listening/英文聽力.mp3' }}"></audio>
    <p id="start-p">請您確保已戴上耳機，並開啟聲音。</p>
    <button id="start" class="btn btn-primary">開始測驗</button> 

<div class="question">
    <div class="instruction">
        <h4>PART 1 Photographs</h4>
    <p>
        Directions : For each question in this part, you will hear four statements about a picture on your screen. When you hear the statements, you must select the one statement that best describes what you see in the picture. Then find the number of the question on your screen and mark your answer. The statements will not be printed on your screen and will be spoken only one time.
    </p>
    <img src="{{ static 'English_Listening/part1.png' }}">
    <p>
        Statement (C), “They’re sitting at a table,” is the best description of the picture, so you should select answer (C) and mark it on your screen.
    </p>
    </div>

    <div class="d-flex justify-content-between mb-2">
        {{ formfield 'EL1' }}
        <img src="{{ static 'English_Listening/1.png' }}" >
    </div>
    
    <div class="d-flex justify-content-between mb-2">
        {{ formfield 'EL2' }}
        <img src="{{ static 'English_Listening/2.png' }}" style="width: 30%;">
    </div>

    <div class="instruction">
        <h4>PART 2 Question-Response</h4>
        <p>
            Directions : You will hear a question or statement and three responses spoken in English. They will not be printed on your screen and will be spoken only one time. Select the best response to the question or statement and mark the letter (A), (B), or (C) on your screen.
        </p>
    </div>
    
    {{ formfield 'EL3' }}
    {{ formfield 'EL4' }}
    {{ formfield 'EL5' }}
    {{ formfield 'EL6' }}

    <div class="instruction">
        <h4>PART 3 Conversations</h4>
        <p>
            Directions: You will hear some conversations between two or more people. You will be asked to answer three questions about what the speakers say in each conversation. Select the best response to each question and mark the letter (A), (B), (C), or (D) on your screen. The conversations will not be printed on your screen and will be spoken only one time.
        </p>
    </div>

    {{ formfield 'EL7' }}
    {{ formfield 'EL8' }}
    {{ formfield 'EL9' }}

    <div class="line"></div>

    {{ formfield 'EL10' }}
    {{ formfield 'EL11' }}
    {{ formfield 'EL12' }}

    <div class="line"></div>

    {{ formfield 'EL13' }}
    {{ formfield 'EL14' }}
    {{ formfield 'EL15' }}

    <div class="line"></div>
    <img src="{{ static 'English_Listening/16-18.png' }}" >
    {{ formfield 'EL16' }}
    {{ formfield 'EL17' }}
    {{ formfield 'EL18' }}

    <div class="instruction">
        <h4>PART 4 Short Talks</h4>
        <p>
            Directions: You will hear some talks given by a single speaker. You will be asked to answer three questions about what the speaker says in each talk. Select the best response to each question and mark the letter (A), (B), (C), or (D) on your screen. The talks will not be printed on your screen and will be spoken only one time.
        </p>
    </div>

    {{ formfield 'EL19' }}
    {{ formfield 'EL20' }}
    {{ formfield 'EL21' }}
    
    <div class="line"></div>
    
    {{ formfield 'EL22' }}
    {{ formfield 'EL23' }}
    {{ formfield 'EL24' }}
    
    <div class="line"></div>

    {{ formfield 'EL25' }}
    {{ formfield 'EL26' }}
    {{ formfield 'EL27' }}
    
    <div class="line"></div>

    <img src="{{ static 'English_Listening/28-30.png' }}" >

    {{ formfield 'EL28' }}
    {{ formfield 'EL29' }}
    {{ formfield 'EL30' }}
    
    
    <button class="otree-btn-next btn btn-primary">下一頁</button>
</div>

    

<script> 
    var emymp3 = document.querySelector("#audio"); 

    var play = document.querySelector("#start"); 
    play.onclick = function () { 
        emymp3.play(); 
        $('.question').show()
        $('#start-p').hide()
        $('#start').hide()
    }; 

    // var ebtpause = document.querySelector("#btpause"); 
    // ebtpause.onclick = function () { 
    //     emymp3.pause(); 
    // } 
</script>
    
    

{{ endblock }}